@charset "utf-8";

:root{
    --default-ratio:0.7;
    --wrap-width:1920px;
    --article-width:1400px;
	--header-height:12rem;
	--header-background:#ffffff;
    --text-default-size:1.5rem;
    --text-default-color:#717171;
    --text-default-hover-color:#ed1654;
}

html{ font-size:calc(10px * var(--default-ratio)); overflow:auto; }

html::-webkit-scrollbar{ display:none; }
/* body{ -webkit-text-size-adjust:none; -webkit-user-select:none; } */
body{ font-family:'Noto Sans KR', sans-serif; font-size:var(--text-default-size); line-height:1.5; }
body.scrolling{ --header-height:8rem; }

body, div, table, tr, td, th, dl, dt, dd, ul, li, p, form, img, h1, h2, h3, h4, h5{ margin:0; padding:0; border:none; list-style:none; box-sizing:border-box; }
p{  }
a{ text-decoration:none; color:var(--text-default-color); }
a:hover{ color:var(--text-default-hover-color); }
label{ word-break:break-all; text-overflow:ellipsis; white-space:nowrap; }
i{ color:inherit; }
input:-webkit-autofill{ -webkit-box-shadow:0 0 0 3rem #ffffff inset; -webkit-text-fill-color:#000000; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active{ transition:background-color 5000s ease-in-out 0s; }
input, button{ margin:0; padding:0; border:none; outline:none; font-family:'Noto Sans KR', sans-serif; }

.is_pc{ display:unset; }
.is_mobile{ display:none; }

/* wrap */
.wrap{ position:relative; display:flex; align-items:center; flex-direction:column; width:100%; min-width:32rem; }
.wrap:before{ content:""; position:fixed; z-index:10; top:0; left:0; width:100vw; height:var(--header-height); background:var(--header-background); transition:height 0.5s ease-in-out 0s, background 0.2s ease-in-out 0s; }
body.scrolling .wrap:before{ box-shadow:0 0 20px 0 rgb(0 0 0 / 0.2); }
/* wrap */

/* header */
header{ z-index:1000; position:fixed; top:0; left:50%; transform:translate(-50%, 0); width:100%; max-width:var(--article-width); height:var(--header-height); transition:all 0.5s ease-in-out 0s; }
header{ display:flex; justify-content:space-between; align-items:center; }
header h1{ display:flex; align-items:center; justify-content:center; height:100%; max-height:100px; margin-left:8rem; padding:5px 0; }
header h1 a{ display:flex; align-items:center; justify-content:center; height:100%; }
header h1 a img{ height:100%; max-height:50px; }
header nav{ display:flex; justify-content:center; align-items:center; gap:90px; height:100%; padding:0; }
header nav a{ display:block; padding:10px; font-size:18px; font-weight:300; color:var(--text-default-color); }
/* header */

/* footer */
footer{ display:flex; justify-content:center; width:var(--wrap-width); max-width:100%; box-sizing:border-box; }
footer article{ display:flex; flex-direction:column; gap:20px; width:100%; max-width:var(--article-width); padding:100px 0; box-sizing:border-box; }
footer article h2 img{ width:250px;; max-width:50%; filter:opacity(0.5) grayscale(1); }
footer article nav{ display:flex; align-items:center; gap:30px; }
footer article nav h3{ order:0; font-size: 18px; font-weight:300; color:#9fa0a0; }
footer article nav:after{ order:1; content:""; display:block; width:2px; height:15px; background:#9fa0a0; }
footer article nav a{ order:2; font-size:18px; font-weight:300; color:#9fa0a0; }
footer article address{ font-size:18px; font-weight:300; font-style:normal; color:#9fa0a0; }
/* footer */

/* container */
.container{ position:relative; width:100%; padding-top:var(--header-height); }
/* container */

/* section */
.container section{ display:flex; flex-direction:column; justify-content:center; align-items:center; overflow:hidden; }
.container section article{ position:relative; display:flex; justify-content:center; width:100%; max-width:var(--article-width); }
.container section article .content{ position:relative; display:flex; flex-direction:column; justify-content:center; flex:1; width:100%; max-width:var(--article-width); padding:0 8rem; }
.container section article .content h2{ width:fit-content;  margin-top:15rem; padding:0.6rem 0; border:solid 0.2rem #e6e6e6; border-width:0.2rem 0; font-size:4rem; color:#cbcccc; word-break:keep-all; }
.container section article .content h3{ color:var(--text-default-color); word-break:keep-all; }
.container section article .content h4{ font-size:2.8rem; font-weight:400; line-height:2; color:var(--text-default-color); word-break:keep-all; }
.container section article .content h5{ font-size:2rem; font-weight:400; line-height:2; color:#bdbebe; word-break:keep-all; }
.container section article .content h6{ font-size:2rem; word-break:keep-all; }
/* section */

/* sections */
.container section.Home article{ max-width:100%; }
.container section.Home article:before{ position:absolute; top:0; left:0; content:""; width:100%; height:100%; background-image:url(../images/section_home_bg.webp); background-size:cover; background-position:center; background-repeat:no-repeat; filter:brightness(50%); }
.container section.Home article .content{ align-items:center; height:130rem; padding:0; text-align:center; }
.container section.Home article .content h2{ border:none; }
.container section.Home article .content h2 img{ height:14rem; filter:brightness(0) invert(1); }
.container section.Home article .content h3{ font-size:5.5rem; font-weight:600; color:#ffffff; }
.container section.Home article .content h4{ margin-top:7rem; font-size:3.7rem; font-weight:400; color:#ffffff; }
.container section.Home article .content h5{ font-size:2.3rem; font-weight:400; color:#ffffff; }
.container section.Home article .content h6{ margin-top:2rem; font-size:2rem; font-weight:300; color:#ffffff; }
.container section.Home article .content .explore{ display:flex; justify-content:center; align-items:center; width:20rem; height:7rem; margin:10rem 0; border-radius:0.5rem; font-size:3.5rem; color:#ffffff; background:#ffb620; }
.container section.Insight:after{ content:""; width:100%; height:4.5rem; margin-bottom:10rem; background:#cbcccc; }
.container section.Insight article .content{ height:150rem; }
.container section.Insight article .content h2{ margin-bottom:7rem; }
.container section.Insight article .content h3{ margin-bottom:3rem; }
.container section.Insight article .content h3 img{ height:9rem; }
.container section.Insight article .content h4{ margin-bottom:2rem; }
.container section.Insight article .content h4 b{ color:#563f40; }
.container section.Insight article .image{ width:80rem; overflow:hidden; background-image:url(../images/section_insight.webp); background-size:cover; background-position:center; background-repeat:no-repeat; text-indent:-100vw; }
.container section.Solution article .content{ padding:0; }
.container section.Solution article .content h2{ margin:0 0 7rem 8rem; }
.container section.Solution article .content ul{ display:flex; flex-direction:column; padding-left:8rem; }
.container section.Solution article .content ul li{ position:relative; display:flex; justify-content:space-between; gap:6rem; }
.container section.Solution article .content ul li:nth-child(odd):before{ content:""; position:absolute; z-index:-1; top:0; left:-100vw; width:300vw; height:100%; background:#ededed; }
.container section.Solution article .content ul li:after{ content:""; width:60rem; height:100%; margin:0 10rem; background-size:cover;  background-position:center; background-repeat:no-repeat; }
.container section.Solution article .content ul li:nth-child(1):after{ background-image:url(../images/section_solution_01.webp); }
.container section.Solution article .content ul li:nth-child(2):after{ background-image:url(../images/section_solution_02.webp); }
.container section.Solution article .content ul li:nth-child(3):after{ background-image:url(../images/section_solution_03.webp); }
.container section.Solution article .content ul li:nth-child(4):after{ background-image:url(../images/section_solution_04.webp); }
.container section.Solution article .content ul li:nth-child(5):after{ background-image:url(../images/section_solution_05.webp); }
.container section.Solution article .content ul li:nth-child(6):after{ background-image:url(../images/section_solution_06.webp); }
.container section.Solution article .content ul li:nth-child(7):after{ background-image:url(../images/section_solution_07.webp); }
.container section.Solution article .content ul li:nth-child(even){ justify-content:flex-start; }
.container section.Solution article .content ul li:nth-child(even):after{ order:-1; margin:0; }
.container section.Solution article .content ul li .text{ display:flex; flex-direction:column; justify-content:space-between; padding:8rem 0; }
.container section.Solution article .content ul li .text h3{ margin-bottom:2.1rem; font-size:3rem; font-weight:500; color:#51636B; }
.container section.Solution article .content ul li .text h4{ font-size:2.5rem; line-height:1.8; font-weight:400; }
.container section.Solution article .content ul li .text h4 b{ display:block; margin-top:0.5rem; font-size:1.8rem; line-height:2.2; font-weight:400; }
.container section.About article .content h2{ margin-bottom:3rem; }
.container section.About article .content h3{ margin-bottom:4.5rem; text-align:center; }
.container section.About article .content h3 img{ height:17rem; }
.container section.About article .content h4{ margin-bottom:1.8rem; font-size:3.7rem; font-weight:500; text-align:center; color:#51636b; }
.container section.About article .content h5{ margin-bottom:23rem; font-size:2.7rem; font-weight:500; text-align:center; color:#bbbcbc; }
.container section.About article.what{ flex-direction:column; /* justify-content:flex-start; */ align-items:center; max-width:100%; height:140rem; background-image:url(../images/section_about_what.webp); background-size:cover;  background-position:center; background-repeat:no-repeat; }
.container section.About article.what h2{ width:130rem; margin-bottom:3rem; height:8rem; }
.container section.About article.what h2 img{ height:100%; filter:brightness(0) invert(1); }
.container section.About article.what h3{ width:130rem; margin-bottom:10rem; padding:0 1rem; font-size:7rem; font-weight:800; color:#005D6E; }
.container section.Contact article{ max-width:100%; background:#005d6e; }
.container section.Contact article .content{ align-items:center; width:100%; max-width:96rem; padding:0; }
.container section.Contact article .content h2{ margin-top:5rem; border:none; font-size:3rem; font-weight:200; text-align:center; color:#ffffff; }
.container section.Contact article .content .tel{ display:flex; justify-content:center; align-items:center; gap:2rem; width:100%; height:14rem; margin:5rem 0 10rem; font-size:5.5rem; border-radius:3rem; background:#004553; color:#ffffff; transition:all 0.2s ease-in-out 0s; }
.container section.Contact article .content .tel:before{ content:""; max-width:10rem; height:100%; aspect-ratio:1; background-image:url(/images/icon_tel.webp); background-size:100%;  background-position:center; background-repeat:no-repeat; }
.container section.Contact article .content .tel:hover{ color:#ffb620; }
.container section.Contact article .content .map{ width:100%; height:50rem; margin-top:10rem; border:none; border-radius:3rem; }
.container section.Contact article.social{ padding:12rem 0; background:#004553; }
.container section.Contact article.social .content{ flex-direction:row; gap:6rem; }
.container section.Contact article.social .content a{ display:block; width:13rem; aspect-ratio:1; overflow:hidden; background-size:100%;  background-position:center; background-repeat:no-repeat; text-indent:-100vw; }
.container section.Contact article.social .content a.line{ background-image:url(/images/icon_line.png); }
.container section.Contact article.social .content a.kakaotalk{ background-image:url(/images/icon_kakaotalk.png); }
.container section.Contact article.social .content a.telegram{ background-image:url(/images/icon_telegram.png); }
.container section.Contact article.social .content a.email{ background-image:url(/images/icon_email.png); }
.container section.Contact article.social .content h3{ margin:0 1rem; font-size:6rem; font-weight:500; color:#ffffff; }
.container section.Kfinance article{ max-width:var(--article-width); }
.container section.Kfinance article .content{ max-width:var(--article-width); padding:0; }
.container section.Kfinance article .content h2{ margin:12rem 0 0; padding:0; border:none; }
.container section.Kfinance article .content h2 a{ display:flex; }
.container section.Kfinance article .content h2 a img{ width:100%; }
/* sections */

@media(max-width:1400px){
    footer{ padding:0 10px; }
}
@media(max-width:1280px){
    :root{
        --default-ratio:0.7;
        --wrap-width:110vw;
        --header-height:100px;
    }
    body.scrolling{ --header-height:80px; overflow-x:hidden; }

    .is_pc{ display:none !important; }
    .is_mobile{ display:unset !important; }

    /* header */
    header{ flex-direction:column; padding:0; box-sizing:border-box; }
    header h1{ width:100%; height:60px; max-height:60px; margin:0; padding:10px; background:#ffffff; transition:inherit; text-align:center; }
    header h1 a{ display:flex; justify-content:center; align-items:center; }
    header nav{ justify-content:space-between; gap:0; width:100%; max-width:640px; padding:0 20px; box-sizing:border-box; }
    header nav a{ padding:5px; font-size:14px; font-weight:400; color:#333333; }
    body.scrolling header h1{ height:40px; padding:5px; }
    /* header */

    /* footer */
    footer article{ padding:50px 0; }
    footer article h2{ text-align:center; }
    footer article h2 img{ width:200px; filter:opacity(1) grayscale(1); }
    footer article nav{ flex-wrap:wrap; justify-content:center; gap:5px 30px; }
    footer article nav:after{ width:100%; height:20px; background:transparent; }
    footer article nav h3{ padding:0 5px 10px; border-bottom:solid 2px #9fa0a0; font-size:16px; }
    footer article nav a{ font-size:16px; text-align:center; }
    footer article address{ font-size:14px; text-align:center; }
    /* footer */

    /* section */
    .container section article .content{ height:auto !important; padding:5rem 2rem !important; line-height:1.2 !important; }
    .container section article .content h2{ margin:7rem auto !important; border-color:#51636B; color:#51636B; }
    .container section article .content h4{ font-size:2.2rem; }
    /* section */

    /* sections */
    .container section.Home article .content h3{ font-size:3.2rem; line-height:1.5; }
    .container section.Home article .content h4{ font-size:3.2rem; line-height:1.5; }
    .container section.Insight{ background:#ededed; }
    .container section.Insight:after{ height:0rem; margin-bottom:0; background:#999999; }
    .container section.Insight article .image{ display:none; position:absolute; top:0; left:0; width:100%; height:100%; z-index:-1; opacity:0.1; }
    .container section.Insight article .content{ align-items:center; }
    .container section.Insight article .content h3{ text-align:center; }
    .container section.Insight article .content h3 img{ height:7rem; }
    .container section.Solution article .content{ padding:0 !important; }
    .container section.Solution article .content ul{ padding:0; }
    .container section.Solution article .content ul li{ flex-direction:column; gap:0; }
    .container section.Solution article .content ul li:before{ background:transparent !important; }
    .container section.Solution article .content ul li:nth-child(odd){ background:#ededed; }
    .container section.Solution article .content ul li:after{ z-index:0; order:-1; width:100%; height:30rem; margin:0; }
    .container section.Solution article .content ul li .text{ z-index:1; margin:0 0 2rem; padding:5rem 2rem; }
    .container section.Solution article .content ul li .text h4{ font-size:2rem; line-height:1.5; }
    .container section.Solution article .content ul li .text h4 b{ line-height:inherit; }
    .container section.About article .content h4{ font-size:2.6rem; }
    .container section.About article .content h5{ margin-bottom:5rem; }
    .container section.About article.what{ height:auto; padding:15rem 2rem; }
    .container section.About article.what h2{ width:100%; text-align:center; }
    .container section.About article.what h3{ width:100%; text-align:center; font-size:4rem; }
    .container section.Contact article .content{ padding:2rem !important; }
    .container section.Contact article .content h2{ width:100%; margin:5rem 0 0 !important; font-size:2.8rem; line-height:1.5; }
    .container section.Contact article .content .email input{ width:70%; font-size:2rem; }
    .container section.Contact article .content .email button{ font-size:2rem;; }
    .container section.Contact article .content .tel{ gap:1rem; height:10rem; margin:3rem 0; border-radius:1rem; font-size:3rem; }
    .container section.Contact article .content .tel:before{ max-width:5rem; }
    .container section.Contact article .content .map{ margin-top:3rem; border:none; border-radius:1rem; }
    .container section.Contact article.social{ padding:2rem; }
    .container section.Contact article.social .content{ gap:3rem; }
    .container section.Contact article.social .content a{ width:8rem; }
    .container section.Contact article.social .content h3{ font-size:3rem; }
    .container section.Kfinance article .content{ padding:0 !important; }
    .container section.Kfinance article .content h2{ position:relative; margin:0rem !important; }
    .container section.Kfinance article .content h2 a:after{ content:""; display:block; position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; border:solid 2rem #ffffff; box-sizing:border-box; }
    .container section.Kfinance article .content h2 a img{ width:200%; margin-left:-15%; }
    /* sections */
}