/* CSS 변수 */
:root {
    /* --대상-용도:반복속성값; */
    /* 글자 크기 */
    --text-title70:4.375rem; /* 70px */
    --text-title40:2.5rem;
    --text-contents21:1.313rem;
    --text-gnb18:1.125rem;
    --text-menu18: 1.125rem;
    --text-subtitle14:0.875rem;
    --text-rgt_menu12:0.75rem;
    --text-sub10:0.625rem;
    /* 행간 */
    --line-title:90%;
    --line-contents:150%;
    /* 자간 */
    --letter-min2:-0.02rem;
    /* 굵기 */
    --weight-bold:700;
    --weight-semibold:600;
    /* 색상 (border, background, color 등 될 수 있는 후보! */
    --color-white:#fff;
    --color-grey4:#444;
    --color-greya:#AAA;
    --color-grayd: #ddd;
    --color--grayFCF: #FCFCFC;
    --color-title_brown:#642c10;
    --color-title_drkblue:#1d356d;
    --color-title_drkred:#d43936;
    --color-point: #36B4E5;
    --color-pointY: #f3c300;
    --color-point--coral: #DA2128;
    /* 레이아웃 정보 */
    --width-desktop:1440px;
    --width-desktop-1140: 1140px;
    --margin-desktop-l-r-80: 80px;
}
body,html {
    scroll-behavior: smooth;
}
/* header 포함 공통 */
#wrap {padding-top: 92px;}
#wrap header {
    /* width: 100%; 블록의 기본값이라 안 써도 돼!*/ 
    padding: 0 80px;
    height: 92px;
    display: flex;
    flex-flow: row nowrap; /* 메인축(수평) 줄바꿈안함 */
    justify-content: space-between; /* 메인축 정렬(양쪽끝) */
    align-items: center; /* 교차축(수직) 가운데 */
    position: fixed; /* lnb 크기 & 위치 부모 기준 */ 
    z-index: 900; /* чтобы не было перекрития */ left: 0; top: 0; /* снова задаем координаты, так как после fixed он забыл свое место */
    width: 100%; /* fixed or absolute 너비값을 재설정해야한다! */
    background: var(--color-white);
}
#wrap header h1 {}
#wrap header h1 a {}
#wrap header h1 a img {}
#wrap header nav {}
#wrap header nav .gnb {
    display: flex;
    /* figma gap 70 */
    flex-flow: row nowrap;
    gap: 70px;
    
}
#wrap header nav .gnb > li {}
#wrap header nav .gnb > li > a {
    font-size: var(--text-menu18);
    line-height: 92px;
    display: block;
}

/* 메인 메뉴에 마우스 올렸을 때 서브메뉴 보이기(공통) */
#wrap header nav .gnb > li:hover .lnb {display: flex;}
/* 서브메뉴 시작 */
#wrap header nav .gnb > li .lnb {
    background: rgba(255, 255, 255, 0.7);
    /* 교차시키기 (absolute) + 중첩순서 (z-index) */
    position: absolute; z-index: 90;
    width: 100%; /* absolute와 함께 w100%가 있으면 position이 설정된 부모의 너비와 같다는 뜻 */
    left: 0; /* absolute + 좌표가 있다면? position이 설정된 부모 기준 좌표 설정 뜻 */
    top: 92px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center; gap: 80px; padding: 45px 0;
    display: none;
}
/* IR sub-menu */
#wrap header nav .gnb > li .lnb > li .lnb_depth2 {
    display: flex;
    flex-flow: column nowrap;
    align-items: center; gap: 15px;
}

#wrap header nav .gnb > li .lnb > li {
    display: flex;
    flex-flow: column nowrap;
    align-items: center; gap: 15px;
}
#wrap header nav .gnb > li .lnb > li > a {
    font-size: var(--text-menu18);
    font-weight: var(--weight-semibold);
}

#wrap header .rgt_menu {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}
#wrap header .rgt_menu > li {
}
#wrap header .rgt_menu > li:first-child::after {
    content: ''; display: block;
    width: 1px; height: 13px; background: var(--color-greya);
    margin: 0 40px;
}
#wrap header .rgt_menu > li:first-child {
    display: flex; /* customer와 구분선의 부모 */
    flex-flow: row nowrap;
}

#wrap header .rgt_menu > li > a {
    font-size: var(--text-sub12);
}
#wrap header .rgt_menu > li:nth-child(2) {margin-right:40px;}
#wrap header .rgt_menu > li > a img {}
/* 언어 선택 시 활성화 디자인 */
#wrap header .rgt_menu li:nth-child(2) {
    position: relative;
}
#wrap header .rgt_menu li:nth-child(2):hover .lang_select {
    display: flex;
}
#wrap header .rgt_menu li:nth-child(2) .lang_select {
    /* 형제 또는 부모와 겹치는 디자인 요소는 무조건 absolute */
    position: absolute; z-index: 100;
    display: flex;
    flex-flow: column nowrap; gap: 10px;
    display: none;
}
#wrap header .rgt_menu li:nth-child(2) .lang_select a {
    width: 40px; line-height: 40px;
    font-size: var(--text-sub12);
    background-color: var(--color-white);
    border-radius: 50%; border: 1px solid var(--color-greya);
    text-align: center;
}
#wrap header .rgt_menu li:nth-child(2) .lang_select a.kr {}
#wrap header .rgt_menu li:nth-child(2) .lang_select a.en {}
#wrap header .rgt_menu li:nth-child(2) .lang_select a.cn {}
/* 메인 */
#wrap main {}

/* footer */
#wrap footer {
    background: var(--color-white);
    padding: 54px 80px;
}

#wrap footer .ft_top {
    display: flex; flex-flow: row nowrap;
    justify-content: space-between; align-items: center;
}
#wrap footer .ft_top .info {
    display: flex; flex-flow: row nowrap;
    justify-content: space-between; align-items: center;
    gap: 50px;
}
#wrap footer .ft_top .info a {}
#wrap footer .ft_top .info a:first-child {color: var(--color-point);}
#wrap footer .ft_top .info a:nth-child(2) {color: var(--color-point--coral) ;}
#wrap footer .ft_top .info a img {}

#wrap footer .ft_top .site_all {
    display: flex; flex-flow: row nowrap;
    justify-content: space-between; align-items: center;
    gap: 12px; padding: 10px;
}
#wrap footer .ft_top .site_all li {
    border: 1px solid var(--color-grayd); 
    position: relative;
}
#wrap footer .ft_top .site_all li p {
    background-image: url(../images/footer_arrow_down.png);
    background-repeat: no-repeat;
    background-position: 90% center;
    line-height: 40px;
    padding-left: 8px;
}
#wrap footer .ft_top .site_all li:nth-child(1) p {width: 220px;}
/* hover */
#wrap footer .ft_top .site_all li:nth-child(1):hover .family_list {display: block;}
#wrap footer .ft_top .site_all li:nth-child(2) p {width: 140px;}

#wrap footer .ft_top .site_all li .family_list {
    display: none; /* 초기 숨기기 */
    position: absolute; width: 100%;
    bottom: 40px; height: 250px; overflow: auto;
    background: var(--color-white);
    border: 1px solid var(--color-grayd);
} 
#wrap footer .ft_top .site_all li .family_list li {
    padding: 10px; border: none;
}
#wrap footer .ft_top .site_all li .family_list li a {}

/* ------------------------------------배경 */
#wrap footer .ft_top .site_all li .sitemap_wrap {display: none;} /* 초기 숨기기 */
#wrap footer .ft_top .site_all li .sitemap_wrap .sitemap_contents {}
#wrap footer .ft_top .site_all li .sitemap_wrap .sitemap_contents h2 {}
/* ---------------------------------------------------------close button */
#wrap footer .ft_top .site_all li .sitemap_wrap .sitemap_contents .close {}

#wrap footer .ft_btm {}
#wrap footer .ft_btm address {padding: 25px 0; line-height: var(--line-contents);}
#wrap footer .ft_btm p {}