@charset "utf-8"; /* */
:root { 
  --ssok-fting-black: #1b1a1c; 
  --ssok-fting-point: #4d91f2; 
  --ssok-fting-title: 4.8rem; 
  --ssok-fting-sub-title: 3rem; 
  --fs-16: 1.6rem; 
  --fs-18: 1.8rem; 
  --fs-20: 2.0rem; 
  --fs-22: 2.2rem; 
  --fs-24: 2.4rem; 
  --fs-26: 2.6rem; 
  --fs-28: 2.8rem; 
  --fs-32: 3.2rem; 
  --fs-45: 4.5rem; 
  --fs-180: 18rem; 
  --box-y: 10rem;

  line-height: 1.4;
} 


figure { margin: 0; } 
#ssok-fting > * { line-height: 1.4; } 
#ssok-fting .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } 
#ssok-fting .text-img img { width: auto; height: 1em; } 


#sub-top { overflow: hidden; background: linear-gradient(0deg, rgba(192, 214, 245, 1) 0%, rgba(211, 227, 248, 1) 100%); } 
#sub-top #sub-title-image picture img { max-height: 93rem; width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } 


#ssok-fting #sub-title strong::before { background-color: #9ec0e9; } 
#sub-title h1,
#sub-title p { color: #3f4247; } 

#ssok-fting .sub-container h2 { font-size: var(--ssok-fting-title); color: #3f4247; text-align: center; } 
#ssok-fting .sub-container h2 span { display: block; font-weight: 400; font-size: var(--ssok-fting-sub-title); text-align: center; } 
#ssok-fting .sub-container h2 b { color: var(--ssok-fting-point); } 
#ssok-fting .sub-container h3 { margin-top: 3rem; font-size: var(--ssok-fting-sub-title); color: #3f4247; text-align: center; } 
#ssok-fting .sub-container h3 span { display: block; font-weight: 400; } 

#ssok-fting #page-package h2 b { font-size: calc(var(--ssok-fting-title) + .4rem); } 
#page-package { position: relative; z-index: 3; background-color: #fff; background-image: url('/img/page/ssok-fting/page-package-back.png'); background-repeat: no-repeat; background-position: bottom center; background-size: cover; } 
#page-package .box { display: -ms-grid; display: grid; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-block: var(--box-y); } 
#page-package figure { margin-top: 6rem; -webkit-transform: translateX(7%); -ms-transform: translateX(7%); transform: translateX(7%); } 




#page-limit { position: relative; z-index: 3; background-color: #f8f9fb; } 
#page-limit .box { padding-block: var(--box-y); } 
#page-limit .limit-contents { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 1.8rem; width: 60%; margin: 6rem auto auto; } 
#page-limit .limit-contents img { width: 100%; border-radius: 2rem; } 
#page-limit .limit-contents li { position: relative; } 
#page-limit .limit-contents li:nth-of-type(1) figure { max-width: 53rem; }
#page-limit .limit-cont-1 { margin-bottom: -22%; margin-right: auto; } 
#page-limit .limit-cont-2 { margin-left: 0; margin-right: -72%; z-index: 2; } 
#page-limit .limit-txt { position: absolute; z-index: 2; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 1rem; font-size: var(--fs-24); border-radius: 1.5rem; border: 0.15rem solid #4c8ae3; background-color: white; -ms-grid-column-align: start; justify-self: start; } 
#page-limit .limit-txt::before { content: ''; width: auto; height: 1.2em; margin-top: 0.25rem; aspect-ratio: 1; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url('/img/page/ssok-fting/icon-check.svg'); } 
#page-limit .limit-txt-1 { padding: 2.2rem; right: -50%; top: 30%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); box-shadow: -1rem 1rem 2rem 0px rgba(220, 224, 232, .45); } 
#page-limit .limit-txt-2 { padding: 3.2rem 4.2rem; left: -85%; bottom: -4rem; box-shadow: 1rem 2rem 2rem 0px rgba(220, 224, 232, .45);} 
#page-limit .limit-txt mark { background: transparent; position: relative; } 
#page-limit .limit-txt mark::before { content: ""; position: absolute; left: -1%; right: 0; height: 0.6em; background: #8abaff80; top: 80%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 1; pointer-events: none; width: 102%; } 
#page-limit .limit-txt mark b { position: relative; z-index: 2; } 



#page-reason { position: relative; z-index: 3; background-color: #e2edfd; } 
#page-reason .box { padding-block: var(--box-y); } 
#page-reason figure { margin: 0 auto; width: 80%; } 


#page-ab-design { position: relative; z-index: 3; background-color: #f8f9fb; } 
#page-ab-design .box { padding-block: var(--box-y); } 

#page-ab-design .step-timeline-container { margin: 6rem auto auto; position: relative; } 
#page-ab-design .step-timeline-container .timeline-line { position: absolute; top: 6.8rem; bottom: 0; left: -7rem; width: 2px; z-index: 1; height: calc(100% - 7rem);     background: linear-gradient(0deg, rgba(169, 203, 253, 0) 0%, rgba(169, 203, 253, 1) 10%);} 
#page-ab-design .step-pointer { position: absolute; left: -7.8rem; top: 0; width: 1.8rem; height: 1.8rem; border-radius: 50%; background-color: #4C8EFF; z-index: 2; } 
#page-ab-design .step-pointer::after { content: ''; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; border-radius: 50%; background-color: rgba(76, 142, 255, 0.6); -webkit-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); -webkit-animation: pulseExpand 2s infinite ease-out; animation: pulseExpand 2s infinite ease-out; } 
#page-ab-design .step-container { display: -ms-grid; display: grid; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } 

#page-ab-design .step-item { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; z-index: 2; } 
#page-ab-design .step-item img { width: 100%; border-radius: 1rem; } 
#page-ab-design .step-item .btn-more { display: block; margin-top: auto; margin-left: auto; padding: 1rem 2.2rem; border-radius: 1rem; font-size: var(--fs-16); color: #3f4247; background-color: #e6e7e9; } 
#page-ab-design .step-item:not(:nth-of-type(1)) { margin-top: 5rem; } 
#page-ab-design .step-contents { display: -ms-grid; display: grid; -ms-grid-columns: 40% 4rem 55%; grid-template-columns: 40% 55%; gap: 4rem; width: 100%; } 
#page-ab-design .step-contents .step-badge { display: block; -ms-grid-column-align: start; justify-self: start; margin-top: 2rem; padding: 1rem 2.8rem; font-size: var(--fs-22); font-weight: 800; border-radius: 100vw; color: white; background-color: var(--ssok-fting-point); } 
#page-ab-design .step-contents .text-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } 
#page-ab-design .step-contents .description { margin-top: 3.2rem; font-size: var(--fs-24); color: #3f4247; } 
#page-ab-design .step-contents .description strong { color: var(--ssok-fting-point); } 



#page-bna { position: relative; z-index: 3; background-color: #ffffff; } 
#page-bna .box { padding-block: var(--box-y); } 
#page-bna ul { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 4rem; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 70%; margin: 6rem auto auto; } 
#page-bna ul li { position: relative; display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); } 
#page-bna ul li::after { content: ''; position: absolute; left: calc(50% - .5rem); top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 3; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-repeat: no-repeat; background-size: 80%; background-position: 65% 50%; background-image: url('/img/page/onda/icon-arrow-right.svg'); background-color: var(--ssok-fting-point); border-radius: 50%; width: 4.3rem; height: 4.3rem; aspect-ratio: 1; } 
#page-bna figure { position: relative; width: 100%; } 
#page-bna figure:last-of-type { overflow: hidden; outline: .6rem solid var(--ssok-fting-point); } 
#page-bna figure img { width: 100%; height: 100%; display: block; -o-object-fit: cover; object-fit: cover; } 
#page-bna figure figcaption { position: absolute; bottom:0; font-size: var(--fs-16); font-weight: 400; color: white; padding: 1.8rem; } 
#page-bna figure:last-of-type figcaption { right: 0; } 



#page-recommend { position: relative; z-index: 3; background-color: #f8f9fb; } 
#page-recommend .box { padding-block: var(--box-y); } 

#page-recommend .recommend-list { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 4rem 1fr 4rem 1fr 4rem 1fr 4rem 1fr 4rem 1fr; grid-template-columns: repeat(6, 1fr); gap: 4rem; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: 6rem auto auto; } 
#page-recommend .recommend-list li:nth-of-type(1) { -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 1; -ms-grid-column-span: 2; grid-area: 1 / 1 / 2 / 3; } 
#page-recommend .recommend-list li:nth-of-type(2) { -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 3; -ms-grid-column-span: 2; grid-area: 1 / 3 / 2 / 5; } 
#page-recommend .recommend-list li:nth-of-type(3) { -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 5; -ms-grid-column-span: 2; grid-area: 1 / 5 / 2 / 7; } 
#page-recommend .recommend-list li:nth-of-type(4) { -ms-grid-row: 2; -ms-grid-row-span: 1; -ms-grid-column: 2; -ms-grid-column-span: 2; grid-area: 2 / 2 / 3 / 4; } 
#page-recommend .recommend-list li:nth-of-type(5) { -ms-grid-row: 2; -ms-grid-row-span: 1; -ms-grid-column: 4; -ms-grid-column-span: 2; grid-area: 2 / 4 / 3 / 6; } 

#page-recommend .recommend-list li { position: relative; z-index: 2; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 2rem; padding: 4rem 3rem; font-size: var(--fs-24); border-radius: 1.5rem; background-color: white; } 
#page-recommend .recommend-list li::before { content: ''; width: auto; height: 1.2em; margin-top: 0.5rem; aspect-ratio: 1; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url('/img/page/ssok-fting/icon-check.svg'); } 


/* ============== 결과의 차이를 보여주는 ============== */
#page-ab-package { position: relative; z-index: 3; background-color: #548cdc; } 
#page-ab-package .box { padding-block: var(--box-y); } 
#page-ab-package.sub-container h2,
#page-ab-package.sub-container h2 span { color: white; } 
#page-ab-package ul { width: 100%; display: -ms-grid; display: grid; -ms-grid-columns: 1fr 2rem 1fr 2rem 1fr; grid-template-columns: repeat(3, 1fr); -ms-grid-rows: 1fr; grid-template-rows: 1fr; margin: 5rem auto auto; gap: 2rem; } 
#page-ab-package ul > *:nth-child(1) { 
  -ms-grid-row: 1; 
  -ms-grid-column: 1; } 
#page-ab-package ul > *:nth-child(2) { 
  -ms-grid-row: 1; 
  -ms-grid-column: 3; } 
#page-ab-package ul > *:nth-child(3) { 
  -ms-grid-row: 1; 
  -ms-grid-column: 5; } 
#page-ab-package ul li { border-radius: 2.5rem; background-color: white; overflow: hidden; padding: 3rem 3rem 4rem 3rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } 
#page-ab-package ul li figure { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; padding: 5rem 0; border-radius: 1.7rem; background-color: #e7eef9; } 
#page-ab-package ul li figure img { width: auto; max-height: 13.8rem; aspect-ratio: 1; } 
#page-ab-package ul li figure figcaption { position: absolute; left: 50%; bottom: -2rem; padding: 1rem 2.4rem; font-size: var(--fs-20); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); color: white; font-weight: 500; background-color: #1b1b1b; text-align: center; } 
#page-ab-package ul li strong { display: block; margin-top: 4rem; text-align: center; font-size: var(--fs-32); color: #4d91f2; } 
#page-ab-package ul li span { margin-top: 1rem; text-align: center; font-size: var(--fs-24); color: #3f4247; line-height: 1.5; font-weight: 400; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } 




#page-banner { position: relative; z-index: 3; background-color: #fff; background-image: url('/img/page/ssok-fting/ssok-fting-bottom-banner.png'); background-repeat: no-repeat; background-position: bottom center; background-size: cover; overflow: hidden; } 
#page-banner .banner-model { max-width: 1920px; margin: 0 auto; pointer-events: none; } 
#page-banner .title-wrap { position: absolute; z-index: 2; left: 50%; top: 0; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 100%; height: 100%; max-width: 1920px; margin-inline: auto; display: -ms-grid; display: grid; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-grid-columns: 1fr 24rem 1fr; grid-template-columns: repeat(2, 1fr); gap: 24rem; } 
#page-banner .title-wrap h2 { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; font-weight: 400; font-size: var(--fs-28); } 
#page-banner .title-wrap h2::after { content: ''; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; height: auto; aspect-ratio: 1; background-image: url('/img/page/ssok-fting/blur-layer.png'); background-repeat: no-repeat; background-position: bottom center; background-size: cover; overflow: hidden; } 
#page-banner .title-wrap h2 span { position: relative; z-index: 2; } 
#page-banner .title-wrap h2 strong { display: block; } 
#page-banner .title-wrap .txt-image { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } 
#page-banner .title-wrap .txt-image picture { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: var(--fs-180); } 
#page-banner .title-wrap .txt-image img { width: auto; height: 1em; vertical-align: middle; } 
@-webkit-keyframes pulseExpand { 
  0% { width: 100%; height: 100%; opacity: 0.8; } 
  100% { width: 300%; height: 300%; opacity: 0; } 
} 
@keyframes pulseExpand { 
  0% { width: 100%; height: 100%; opacity: 0.8; } 
  100% { width: 300%; height: 300%; opacity: 0; } 
}


#sub-faq-latest {margin-top: var(--box-y) !important;}


@media (max-width: 1024px){
  :root { --fs-180: 14rem; } 
  #page-limit .limit-contents { width: 100%; } 
  #page-limit .limit-cont-2 { margin-right: -50%; } 

  #page-reason figure { width: 100%; } 
  #page-recommend .recommend-list li:nth-of-type(4) { -ms-grid-row: 2; -ms-grid-row-span: 1; -ms-grid-column: 1; -ms-grid-column-span: 3; grid-area: 2 / 1 / 3 / 4; } 
  #page-recommend .recommend-list li:nth-of-type(5) { -ms-grid-row: 2; -ms-grid-row-span: 1; -ms-grid-column: 4; -ms-grid-column-span: 3; grid-area: 2 / 4 / 3 / 7; } 
  #page-ab-package ul li figure figcaption { width: 60%; } 
}
@media (max-width: 768px) {
    :root { 
    --ssok-fting-title: 7vw; 
    --ssok-fting-sub-title: 4.8vw;
  
    --fs-16: 3vw;
    --fs-18: 3.4vw;
    --fs-20: 3.6vw; 
  
    --fs-22: 4vw;
    --fs-24: 4.2vw;
    --fs-26: 4.2vw;
    --fs-28: 4.4vw;
    --fs-32: 4.8vw;
    --fs-45: 5vw;
    --fs-180: 22vw;
    --box-y: 8rem; 
  } 

  #ssok-fting .box { padding-left: 2rem; padding-right: 2rem; } 
  /* #sub-title-image picture::after { content: ''; left: -22%; bottom: -8%; width: 70%; height: 40%; position: absolute; border-radius: 50%; opacity: .8; -webkit-filter: blur(5rem); filter: blur(5rem); background: #c1d7f4; z-index: 1; }  */

  #page-package figure { -webkit-transform: translateX(2rem); -ms-transform: translateX(2rem); transform: translateX(2rem); } 

  #page-limit .limit-contents { gap: 15vw; } 
  #page-limit .limit-cont-1 { margin-bottom: -20%;  margin-right: 20%; } 
  #page-limit .limit-cont-2 { margin-left: 30%; margin-right: 0%; } 
  #page-limit .limit-cont-3 { margin-left: 5%; margin-right: 8%; } 
  #page-limit .limit-txt-1 { top: 50%; right: -26%; padding: 2vw 5vw; } 
  #page-limit .limit-txt-2 { left: -44%; bottom: -38%; padding: 4vw 5vw; } 

  #page-reason figure {margin-top: 2rem;}

  #page-ab-design .step-timeline-container .timeline-line { left: 1.1vw; } 
  #page-ab-design .step-pointer { left: 0; } 
  #page-ab-design .step-contents { margin-left: 8vw; gap: 4vw; } 
  #page-ab-design .step-contents .step-badge { margin-top: 2vw; padding: 1.2vw 3.5vw; font-size: var(--fs-20); } 
  #page-ab-design .step-contents .description { margin-top: 3vw; font-size: var(--fs-20); } 
  #page-ab-design .step-item .btn-more { padding: 1.8vw 3.5vw; border-radius: 1rem; } 

  #page-bna ul { width: 100%; } 
  #page-bna ul li::after { width: 6vw; height: 6vw; }
  #page-bna figure figcaption { padding: 1vw 3vw; } 

  #page-recommend .recommend-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 4vw; } 
  #page-recommend .recommend-list li { padding: 4vw 4vw; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
  #page-recommend .recommend-list li span { text-align: center; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; font-size: var(--fs-22); }

  #page-ab-package ul { -ms-grid-columns: 1fr; grid-template-columns: 1fr; }     
  #page-ab-package ul li { display: -ms-grid; display: grid; -ms-grid-columns: 40% 4vw 1fr; grid-template-columns: 40% 1fr; gap: 4vw; padding: 4vw; }
  #page-ab-package ul li:nth-of-type(2) { padding: 4vw 4vw 8vw 4vw; }
  #page-ab-package ul li figure { padding: 5vw 0; height: 100%; }
  #page-ab-package ul li figure figcaption { 
    width: auto;
    padding: 1.2vw 3vw;
    white-space: nowrap;
    font-size: var(--fs-18);
  } 
  #page-ab-package ul li strong {margin-top: 0; font-size: var(--fs-28);}
  #page-ab-package ul li span {font-size: var(--fs-22);}

  #page-banner .title-wrap { gap: 0; -ms-grid-columns: 1fr; grid-template-columns: 1fr; } 
  #page-banner .title-wrap h2 { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; width: auto; height: auto; margin-top: 12vw; margin-left: 4vw; } 
  #page-banner .title-wrap h2::after { left: 20vw; top: 6vw; } 
  #page-banner .title-wrap h2 span { font-size: calc(var(--ssok-fting-sub-title) - 1vw); } 
  #page-banner .title-wrap .txt-image { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } 
  #page-banner .title-wrap .txt-image picture { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; margin-bottom: 8vw; margin-right: 4vw; } 


  #column-latest {padding-bottom: 0 !important;}
}


@media (max-width: 380px) {
   #page-ab-package ul li figure img {padding: 2vw;}
}