@charset 'utf-8'; * { box-sizing: border-box; padding: 0px; margin: 0px; font-family: 'Nanum Gothic', sans-serif; } 

:root { --bg-white-1: #ffffff; --bg-white-2: #f3f3ff; --bg-white-3: #e3e3e9; --border-1: #ACACAC; --color-default: #1f1f1f; --color-main:#133269; --color-point: #3371df; --color-white: #ffffff; --font-thin: 100; --font-extralight: 200; --font-light: 300; --font-regular: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; --font-black: 900; };
html, body { font-size: 16px; height: 100%; background-color: var(--bg-white-2); min-width: 550px;} 
body { background-color: var(--bg-white-2); overflow-x: hidden;}

h3 { font-size: 3rem; font-weight: var(--font-bold); color: var(--color-default); text-align: center; margin-bottom: 1rem; line-height: 1.4; } 
h4 { font-size: 1.25rem; font-weight: var(--font-bold); color: var(--color-default); text-align: center; margin-bottom: 0.875rem; line-height: 1.4; } 
h6 { font-size: 1rem; font-weight: var(--font-bold); color: var(--color-main); text-align: center; line-height: 1.4; } 
h6.caption { margin-bottom: 4rem; } 
a { text-decoration: none; color: var(--color-default); } 

.container { max-width: 1280px; width: 100%; padding: 0px 32px; } 
section.container { display: flex; flex-flow:column; margin: 0 auto; } 
section.container .article { margin-top: 5rem; padding-bottom: 7.5rem; border-bottom: 1px solid var(--border-1); } 
section.container .article:last-of-type { padding-bottom: 12.5rem; border-bottom: none; } 
section.container .article.sub { padding: 0px 12rem 7.5rem; } 


.logo-img { display: block; } 

.nav { display: flex; justify-content: center; align-items: center; height: 80px; background-color: #ffffff; position: relative; } 
.nav .navbar { display: flex; flex-flow: row wrap; align-items: center; } 
.nav .navbar .logo { display: block; max-width: 106px; width: 100%; margin: auto 0px; } 
.nav .navbar .logo img { width: 100%; } 

.nav .navbar .nav-pack { display: flex; flex-flow: row; align-items: center; gap:2rem; position: absolute; left: 50%; transform: translateX(-50%); } 
.nav .navbar .nav-pack .nav-link { font-weight: var(--font-medium); transition: all 0.3s; } 
.nav .navbar .nav-pack .nav-link:hover { font-weight: var(--font-bold); } 
.nav .navbar .nav-pack .nav-link.active { font-weight: var(--font-extrabold); color: var(--color-main) } 

.nav .navbar .btn-group { display: flex; align-items:center; gap: 2rem; margin-left: auto; } 
.nav .navbar .btn-group .link-consumer { font-weight: var(--font-regular); color: var(--color-point); } 
.nav .navbar .btn-group .link-consumer:hover { font-weight: var(--font-bold); } 
.nav .navbar .btn-group .link-consumer.active { font-weight: var(--font-bold); color: var(--color-main); } 
.nav .navbar .btn-group .link-download { display: flex; align-items: center; gap: 8px; justify-content: space-between; border-radius:0.25rem; border: 1px solid var(--color-main); color: var(--color-main); padding: 0.5rem 1rem; font-weight: var(--font-medium); } 
.nav .navbar .btn-group .link-download:hover { background-color: rgba(19, 50,105,0.25); font-weight: var(--font-extrabold); } 
.nav .navbar .btn-group .link-download .logo-img { width: 4.5rem; } 

.mobile-nav{display: none; justify-content: space-between; background-color: var(--bg-white-1); height: 80px;}
.mobile-nav .navbar .logo { display: block; max-width: 106px; width: 100%; margin: auto 0px; } 
.mobile-nav .navbar .logo img{display: block; width: 100%;}

.mobile-nav .navbar {display: flex; flex-flow: row wrap; justify-content: space-between; padding: 1.5rem 1rem; align-items: center; height: 80px;}
.mobile-nav .navbar .btn-menu{cursor: pointer; border: 1px solid var(--color-main); padding: 0.5rem; border-radius: 2px; color: var(--color-main); transition: all 0.3s; width: 40px; text-align: center;}
.mobile-nav .navbar .btn-menu:hover{background-color: var(--color-main); color: var(--bg-white-1);}
.mobile-nav .navbar .mobile-menu{position: fixed; display: flex;flex-flow: column wrap; width: 300px; top: 0px; bottom: 0px; right: -300px; transition: all 0.3s; padding: 3rem 2rem 0rem 2rem; background-color: rgba(253,253,253,0.75); z-index: 100;}
.mobile-nav .navbar .mobile-menu.on{right: 0px;}
.mobile-nav .navbar .nav-pack{display: flex; flex-flow: column wrap; font-size: 1.25rem;}
.mobile-nav .navbar .nav-pack .nav-link{text-align: center; padding: 2rem 0px;}
.mobile-nav .navbar .nav-pack .nav-link.active{color: var(--color-main); font-weight: var(--font-bold)}
.mobile-nav .navbar .btn-group{margin-top: auto; margin-bottom: 5rem; display: flex; flex-flow: column wrap;}
.mobile-nav .navbar .btn-group .link-consumer {text-align: center;  color: var(--color-main); padding: 1rem 0rem; font-size: 1.25rem;}
.mobile-nav .navbar .btn-group .link-consumer.active {font-weight: bold;}
.mobile-nav .navbar .btn-group .link-download { display: flex; align-items: center; gap: 8px; justify-content: space-between; border-radius:0.25rem; border: 1px solid var(--color-main); color: var(--color-main); padding: 0.5rem 1rem; font-weight: var(--font-medium); } 
.mobile-nav .navbar .btn-group .link-download:hover { background-color: var(--color-main); color: var(--color-white); font-weight: var(--font-extrabold); } 
.mobile-nav .navbar .btn-group .link-download .logo-img { width: 4.5rem; } 

li { list-style: none; } 

.logo { height: 30px; } 
.bold { font-weight: bold; text-align: center; color: #303030; } 
.text-center { text-align: center; } 
.text-right { text-align: right; } 
.text-left { text-align: left; } 
.d-flex { display: flex; } 
.row { flex-flow: row; } 
.justify-between { justify-content: space-between; } 
.mb-last { margin-bottom: 100px; } 

.fl { float: left; } 
.fr { float: right; } 

.img-wrap { margin: 4rem 0px; } 

/* subpage */
.sub-text { font-size: 1rem; line-height: 1.6; margin-bottom: 1rem; } 

.radius-box { height: 32px; text-align: center; border-radius: 16px; width: 180px; color: #ffffff; line-height: 32px; font-weight: var(--font-bold); margin: 60px auto 1rem; } 

.purple { background-color: #3E3576; } 
.orange { background-color: #ED9525; } 
.blue { background-color: #4C5FA6; } 
.green { background-color: #54B895; } 


.button{color: #ffffff; text-align: center; display: inline-block; font-weight: var(--font-bold);}
.button.lg{height: 56px; border-radius: 28px; line-height: 56px; padding: 0px 14px}
.button.xl{height: 64px; border-radius: 32px; line-height: 64px; padding: 0px 16px}
.button.main{background-color: var(--color-main); border: 1px solid var(--color-main); color: #ffffff;}
.button.point{background-color: var(--color-point); border: 1px solid var(--color-point); color: #ffffff;}
.button.border{background-color: rgba(0,0,0,0);}
.button.border.main{border: 1px solid var(--color-main); color: var(--color-main);;}
.button.border.point{border: 1px solid var(--color-point); color: var(--color-point);;}



.footer { background-color: var(--bg-white-3); display: flex; flex-flow: column; justify-content: center; align-items: center; height: 152px; } 
.footer .container { justify-content: space-between; } 
.footer .footer-logo { display: block; width: 175px; } 
.footer .footer-cont { display: flex; width: 904px; flex-flow: column wrap; justify-content: space-between; height: 44px; } 

.footer p { font-size: 1rem; font-weight: normal; color: #5D5D5D; } 
.footer p span { font-size: 1rem; font-weight: bold; color: #133269; margin-right: 8px; } 

.footer dl, .footer .privacy, .footer .copyright { font-size: 0.75rem; color: #3E3E3E; margin: 0px; } 
.footer .privacy { } 
.footer .copyright { font-weight: bold; } 

/* .main-footer .container { display: block; width: 100%; max-width: 1280px; padding: 32px; margin: 0 auto; } */


.footer-text { font-size: 0.8rem; } 
@media (max-width: 1279px) {
   html{font-size: 16px;}

    .nav{display: none;}
    .mobile-nav{display: block;}

    section.container .article.sub { padding: 0px 12rem 7.5rem; } 
    
    footer .container{ flex-flow: column wrap; align-content: center;}
    .footer .footer-cont{width: 100%;}
    footer .footer-logo{margin: 1rem auto 1rem;}

 }
 @media (max-width: 992px) {
   html{font-size: 14px;}
    section.container .article.sub { padding: 0px 8rem 7.5rem; } 

    footer.footer,.footer .footer-cont {height: auto;}
    .footer .footer-cont .d-flex.row{ flex-flow: column wrap; text-align: center;}
    .footer .footer-cont .d-flex.row p{padding: 0.5rem 0rem;}

    .footer .copyright { font-weight: bold; font-size: 0.5rem;margin-top: 1rem; margin-bottom: 2rem;} 
 }
@media (max-width: 768px) {
   html{font-size: 12px;}
    section.container .article.sub { padding: 0px 3rem 7.5rem; } 
 }

 @media (max-width: 576px) {
   html{font-size: 14px;}
    section.container .article.sub { padding: 0px 1rem 7.5rem; } 

    footer{}
 }