@import url(../fonts/pretendard.css);
/*reset*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, #header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, #header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1.2;
font-family: 'Pretendard';
font-weight: 400;
height: 100%;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
*{
box-sizing: border-box;
word-break: keep-all;
}
button {
margin: 0;
padding: 0;
border: 0;
font: inherit;
color: inherit;
background: transparent;
overflow: visible;
cursor: pointer;
line-height: 1;
}
.blind {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
select {
appearance: none; 
-webkit-appearance: none; 
-moz-appearance: none; 
}
  
/* 기본스타일 선언 */
:root {
--gray-500: #2D2D2D;
--gray-400: #5B5B5B;
--gray-300: #ACACAC;
--gray-200: #EBEBEB;
--gray-100: #F5F5F5;
--default-white: #fff;
--default-black: #000;
--navy-500: #0D3768;
--navy-400: #1A4F8C;
--navy-300: #3869A1;
--blue-300: #00C2FF;
--blue-200: #69F6FF;
--blue-100: #B7EEFF;
--font-headline-large: 3.75vw;
--font-headline-small: 3.13vw;
--font-title-large: 2.50vw;
--font-large: 60px;
--font-title-medium: 36px;
--font-title-small: 28px;
--font-body-large: 28px;
--font-body-medium: 20px;
--font-body-small: 18px;
--font-body-xsmall: 16px;
--font-caption-large: 14px;
--font-caption-small: 12px;
--padding-width-large: 10.42vw;
--padding-height-large: 100px;
--padding-width-medium: 50px;
--padding-height-medium: 40px;
--margin-top-large: 60px;
--margin-small: 30px;
--gap-large: 40px;
--gap-small: 20px;
}
body {
font-family: 'Pretendard', sans-serif;
font-weight: 500;
font-size: 14px;
overflow-x: hidden;
color: var(--gray-500);
}
body.overflow{
overflow: hidden;
}
.mr10{
margin-right: 10px;
}
/* 버튼 */
.navy-button{
background-color: var(--navy-500);
color: var(--default-white);
font-size: var(--font-body-small);
display: flex;
gap: 10px;
align-items: center;
justify-content: center;
padding: 20px 30px;
border-radius: 10px;
text-decoration: none;
}
.navy-button:hover{
background-color: var(--navy-400);
}
.blue-button{
background-color: var(--blue-300);
color: var(--default-white);
font-size: var(--font-body-small);
display: flex;
gap: 10px;
align-items: center;
justify-content: center;
padding: 10px 15px;
border-radius: 10px;
text-decoration: none;
}
.blue-button:hover{
background-color: var(--blue-300);
}
.white-button{
background-color:transparent;
color: var(--default-white);
border: 1px solid var(--default-white);
font-size: var(--font-body-small);
display: flex;
gap: 10px;
align-items: center;
justify-content: center;
padding: 20px 30px;
border-radius: 10px;
text-decoration: none;
}
.white-button:hover{
color: var(--blue-300);
border: 1px solid var(--blue-300);
}

/* 애니메이션 효과 */
.ani-bottom-top{
opacity: 0;
transform: translateY(30px);
transition: all 1s ease;
}
.ani-bottom-top.show {
opacity: 1;
transform: translateY(0);
}
.ani-left-right{
opacity: 0;
transform: translateX(-50px);
transition: all 2s ease;
}
.ani-left-right.show {
opacity: 1;
transform: translateX(0);
}
.ani-fade-in{
opacity: 0;
transition: all 2s ease;
}
.ani-fade-in.show{
opacity: 1;
}
/* 메인 인트로 부분 */
body.intro{
overflow: hidden;
}

body #intro{
opacity: 0;
}
body #intro .ani-logo{
display: none;
}
body.intro #intro{
width: 100vw;
height: 100%;
z-index: 1000;
background-color: #fff; 
position:fixed;
left: 0;
top: 0;
opacity: 1;
transition: opacity 2s ease;
}
body.intro #intro .ani-logo{
width: 100vw;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}

/* 상단 메뉴 부분 */
#header{
width: 100vw;
height:100px;
position: absolute;
top: 0;
z-index: 2;
padding: 0 4.17vw;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
}
#header::before{
content: "";
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100vw;
opacity: 0;
height: 347px;
transition: .5s;
background: var(--default-white) 
}
#header .logo{
display: flex;
background-position: center;
width: 8.33vw;
height: 2.19vw;
background-image: url(../images/Logo.svg);
background-size: contain;
background-repeat: no-repeat;
}
#header .top-menu, #header .top-menu ul{
display: flex;
align-items: center;
}
#header .top-menu > ul {
width: 100%;
}
#header .top-menu > ul > li {
display: flex;
justify-content: center;
width: 8.33vw;
height: 100px;
position: relative;
align-items: center;
}
header .top-menu >  ul > li::before {
content: "";
position: absolute;
left: 50%; 
bottom: 0px;
height: 4px;
width: 0;
z-index: 110;
background-color: var(--blue-300);
transform: translateX(-50%); 
transition: 0.5s;
}
header .top-menu >  ul > li:hover::before {
width: 100%; 
transform: translateX(-50%) scaleX(1); 
transition: 0.5s;
}
#header .top-menu ul > li > a{
font-size: 20px; 
color: var(--gray-500);
text-decoration: none;
display: flex;
justify-content: center;
}
#header .top-menu .deps-menu{
display: none;
flex-direction: column;
position: absolute;
top:100px;
padding: 24px 0;
}
#header .top-menu .deps-menu li {
padding: 10px;
display: flex;
}
#header .top-menu .deps-menu li > a {
font-size: var(--font-body-small);
width: 100%;
color: var(--gray-400);
}
#header .top-menu .deps-menu li > a:hover {
color: var(--blue-300);
}
#header .icon-bar{
width: 1.67vw;
height: 1vw;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
cursor: pointer;
position: relative;
z-index: 10000;
}
#header .icon-bar span{
width: 1.67vw;
height: 3px;
background-color: var(--gray-500);
transition: background-color 0.3s, transform 0.3s, margin-top 0.3s;
}
#header .expand-menu{
display: none;
}

/* #header 마우스 오버시 */
#header.hover::after{
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 1px;
width:100vw;
z-index: 110;
background-color: var(--gray-200);   
}
#header.hover::before{
opacity: 1;
}
#header.hover .top-menu .deps-menu{
display: flex;
}

/* 펼침 메뉴 */
#header.hover.all-menu::after{
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 0px;
width:100vw;
z-index: 110;
background-color: var(--gray-200);   
}
#header.all-menu .icon-bar span{
background-color: var(--default-white);
}
#header.all-menu .icon-bar span:first-child{
transform: rotate(45deg);
position: absolute;
top: 50%;
left: 0;
margin-top: -1px;
}
#header.all-menu .icon-bar span:last-child{
transform: rotate(-45deg);
position: absolute;
top: 50%;
left: 0;
margin-top: -1px;
}
#header.all-menu .logo{
position: relative;
z-index: 2000;
background-image: url(../images/Logo-w.svg);
}
#header.all-menu .top-menu{
opacity: 0;
}
#header.all-menu .expand-menu::before{
content: "";
position: fixed;
top: 0;
backdrop-filter: blur(10px); 
background-color: rgba(0, 0, 0, 0.8); 
z-index: 2000;
width: 100vw;
height: 100vh;
}
#header.all-menu .expand-menu{
position: fixed;  
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
z-index: 2000;
}
#header.all-menu .expand-menu > ul{
width: 100vw;
display: flex;
justify-content: center;
position: relative;
z-index: 2000;
}
#header.all-menu .expand-menu > ul > li {
border-right: 1px solid var(--gray-200);
width: 100%;
padding: 1vw;
}
#header.all-menu .expand-menu > ul > li:last-child{
border-right: none;  
}
#header.all-menu .expand-menu > ul > li > a{
text-decoration: none;
font-size: var(--font-title-small);
padding: 20px;
width: 100%;
display: flex;
justify-content: center;
color: #fff;
}
#header.all-menu  .expand-menu .deps-menu {
width: 100%;
font-size: var(--font-body-small);
display: flex;
flex-direction: column;
}
#header.all-menu  .expand-menu .deps-menu li {
width: 100%;
}
#header.all-menu  .expand-menu .deps-menu li a{
width: 100%;
color: var(--gray-300);
text-decoration: none;
padding: 0.5vw;
display: flex;
justify-content: center;
}
#header.all-menu  .expand-menu .deps-menu li a:hover{
color:var(--blue-300);
}

/* 서브 푸터 부분 */
#footer{
width: 100vw;
background-color: var(--gray-500);
padding: 3vw 5.42vw;
}
#footer .link{
gap: 30px;
display: flex;
}
#footer .link li{
display: flex;
gap: 10px;
}
#footer .link a{
font-size: var(--font-body-small);
text-decoration: none;
color: var(--gray-100);
}
#footer .lnfo{
margin-top: 50px;
display: flex;
font-size: var(--font-body-xsmall); 
color: var(--gray-300);
}
#footer .lnfo li::after{
content: "|";
color: #aaa;
margin: 0 10px;
}
#footer .lnfo li:last-child:after{
content: "";
margin: 0 0px;
}
#footer .Copyright{
margin-top: 30px;
font-size: var(--font-body-xsmall); 
color: var(--gray-300);
}
#footer-main .top-button{
display: flex;
padding: 20px 24px;
background-color: var(--navy-500);
position: fixed;
right: 30px;
bottom: 60px;
top: auto;
opacity: 0;
z-index: -1;
transition:  .5s;
}
#footer-main .top-button.on{
opacity: 1;
z-index: 1;
}

#footer .top-button{
display: flex;
padding: 20px 24px;
background-color: var(--navy-500);
position: fixed;
right: 30px;
bottom: 60px;
top: auto;
opacity: 0;
z-index: -1;
transition:  .5s;
}
#footer .top-button.on{
opacity: 1;
z-index: 1;
}

/* 모바일 반응형  */

@media (max-width: 1550px){
#header .top-menu > ul > li {
width: 160px;
}
}

@media (max-width:1280px){
:root {
--font-headline-large: 34px;
--font-headline-small: 28px;
--font-title-large: 22px;
--font-title-medium: 20px;
--font-title-small: 18px;
--font-body-large: 16px;
--font-body-medium: 14px;
--font-body-small: 13px;
--font-body-xsmall: 12px;
--font-caption-large: 13px;
--font-caption-small: 12px;
--padding-width-large: 20px;
--padding-height-large: 30px;
--margin-top-large: 30px;
--gap-large: 20px;
--padding-width-medium: 20px;
--padding-height-medium: 15px;
--margin-top-large: 20px;
--margin-small: 10px;
}
#header {
height: 50px;
box-sizing: border-box;
}
#header::before {
display: none;
}
.navy-button, .white-button{
gap: 5px;
padding: 10px 15px;
}
#header .logo {
width: 100px;
height: 20px;
}
#header .top-menu{
display: none;
}
#header .icon-bar{
width: 24px;
height: 16px;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
cursor: pointer;
position: relative;
z-index: 10000;
}
#header .icon-bar span{
width: 24px;
height: 2px;
}
#header.all-menu .expand-menu {
align-items: flex-start;
}
#header.all-menu .expand-menu > ul {
margin-top: 50px;
flex-direction: column;
justify-content: left;
}
#header.all-menu .expand-menu > ul > li {
width: calc(100% - 40px);
border-bottom: 1px solid var(--gray-400);
margin: 0 20px;
border-right: none;
display: flex;
flex-direction: column;
padding: 10px;
}
#header.all-menu .expand-menu > ul > li:last-child{
border-bottom: none;
}
#header.all-menu .expand-menu > ul > li > a {
justify-content: left;
padding: 10px;
}
#header.all-menu .expand-menu .deps-menu li a {
justify-content: left;
margin-left: 40px;
}

#footer-main .top-button, #footer .top-button{
display: none;
}
#footer .lnfo {
flex-wrap: wrap;
margin-top:20px;
}
#footer .Copyright {
margin-top: 10px;
}
#footer-main .lnfo li::after{
content: "";
color: #aaa;
margin: 0 10px;
}
}

/* 서브 탭 메뉴 */
.sub-menu {
width: 100%;
position: sticky;
top: 0;
z-index: 100;
background-color: var(--default-white);
display: flex;
justify-content: center;
border-bottom: 1px solid var(--gray-200);
}
.sub-menu.iconbar{
display:none}
.sub-menu > ul {
display: flex;
justify-content: center;
}
.sub-menu > ul > li{
padding: 20px 30px;
}
.sub-menu > ul > li a{
color: var(--gray-400);
text-decoration: none;
font-size: var(--font-body-small);
}
.sub-menu > ul > li.active{
border-bottom: 2px solid var(--navy-500);
}
.sub-menu > ul > li.active a{
color: var(--gray-500);    
}

@media (max-width:620px){
.sub-menu > ul > li {
padding: 10px 15px;
}
body.intro #intro .ani-logo{
padding: 0 20px;
}
}

@media (min-width:1921px){
    body{
        --padding-width-large: 20.31vw;
    }
}