/* CSS 변수 */
:root {
    /* --대상-용도:반복속성값; */
    /* 글자크기 */
    --text-title70:4.375rem;
    --text-title40:2.5rem;
    --text-sub31:1.938rem;
    --text-contents21:1.313rem;
    --text-card18:1.125rem;
    --text-menu18:1.125rem;
    --text-sub14:0.875rem;
    --text-sub12:0.75rem;
    --text-indicator10:0.625rem;
    /* 행간 */
    --line-title:0.9;
    --line-contents:1.5;
    /* 자간 */
    --letter-minus2:-0.02rem;
    /* 굵기 */
    --weight-bold:700;
    --weight-semibold:600;
    /* 색상(테두리색, 배경색, 글자색 등) */
    --color-white:#fff;
    --color-gray4:#444;
    --color-graya:#aaa;
    --color-grayd:#ddd;
    --color-gray80:#808080;
    --color-grayfc:#fcfcfc;
    --color-grayf1:#f1f1f1;
    --color-grayf5:#f5f5f5;
    --color-path-gray67:#676767;
    --color-black:#000;
    --color-title-brown:#642c10;
    --color-title-indigo:#1d356d;
    --color-title-coral:#d43936;
    --color-point:#36b4e5;
    --color-orange:#f3c300;

    /* 레이아웃 정보 */
    --width-desktop:1440px;
    --margin-desktop-l-r-80:80px;
}
/* body */
body,html {scroll-behavior: smooth;}
/* header 포함 공통 */
#wrap {}
#wrap header {
    /* background:aqua; */
    /* 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;
    width: 100%; /* fixed or absolute 너비값을 재설정 해야한다 */
    background-color: #fff;
    left: 0; top: 0;
}
#wrap header h1 {}
#wrap header h1 a {}
#wrap header h1 a img {}
#wrap header nav {
    /* background:lime; */
}
#wrap header nav .gnb {
    display:flex;/* 자식 li 정렬 위한 값 */
    flex-flow:row nowrap;
    gap:70px;
}
#wrap header nav .gnb > li {}
#wrap header nav .gnb > li > ul.lnb {display: none;}
#wrap header nav .gnb > li > a {
    font-size:var(--text-menu18);
    /* background:yellow; */
    line-height:92px;
    display:block;
}

#wrap header nav .gnb > li:nth-child(3) > ul.lnb {
    position: absolute;
    z-index: 85;
    background-color: rgba(255, 255, 255, 0.7);
    width: 100%;
    padding: 31px 0;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: top;
    gap:80px;
    left:0 ;
    top: 92px;
    display: none;
}
#wrap header nav .gnb > li:nth-child(3):hover > ul.lnb {
    display: flex;
}
#wrap header nav .gnb > li:nth-child(3) > ul.lnb > li {
    text-align: center;
}
#wrap header nav .gnb > li:nth-child(3) > ul.lnb > li > a {
    margin-bottom: 15px;
    display: inline-block;
}
#wrap header nav .gnb > li:nth-child(3) > ul.lnb > li > ul.lnb_dth2 {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    gap: 15px;
}
#wrap header nav .gnb > li:nth-child(3) > ul.lnb li:nth-child(1) {
}
#wrap header nav .gnb > li:nth-child(5) > ul.lnb {
    /* display: none; */
    position: absolute;
    z-index: 90;
    background-color: rgba(255, 255, 255, 0.7);
    width: 100%; /* absolute와 함께 w100%가 있으면 relative 부모와의 너비와 같다 */
    padding: 45px 0;
     /* 시작점 */
    display: flex;
    left: 0;
    top: 92px;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    gap: 80px;
    display: none;
}
#wrap header nav .gnb > li:hover ul.lnb {
    display: flex;
}

#wrap header nav .gnb > li > ul > li > a {
    font-size: var(--text-menu18);
    font-weight: var(--weight-semibold);
}

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

#wrap header .right_menu > li:nth-child(2) {margin-right: 40px;
}
#wrap header .right_menu > li > a {
    font-size:var(--text-sub12);
}
#wrap header .right_menu > li {
    /* background-color: yellow; */
    /* 형제 또는 부모와 겹치는 요소 -> position:absolute 필요 */
}

#wrap header .right_menu > li:nth-child(2) {
    position: relative;
    /* 형제 또는 부모와 겹치는 요소 -> position:absolute 필요 */
}

#wrap header .right_menu > li:nth-child(2) .lang_sel {
    /* background: #d43936; */
    position: absolute; z-index:100; /* 0~999 */
    height: 140px;
    width: 40px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    display: none;
    /* 초기 숨기기 */
}

#wrap header .right_menu > li:nth-child(2):hover .lang_sel{
    display: flex;
}

#wrap header .right_menu > li:nth-child(2) .lang_sel a {
    background-color: #fff;
    width: 40px; height: 40px;
    text-align: center;
    line-height: 40px;
    border: #aaa 1px solid;
    border-radius: 50%;
    font-size: var(--text-sub12);
}
#wrap header .right_menu > li:nth-child(2) .lang_sel a.kr{
    
}
#wrap header .right_menu > li:nth-child(2) .lang_sel a.en{
    
}
#wrap header .right_menu > li:nth-child(2) .lang_sel a.cn{
}
/* 언어 선택시 활성화 디자인 */

/* 메인 */
#wrap main {}