/* CSS 변수 */
:root {
    /* --대상-용도:반복속성값; */
    /* 글자크기 */
    --text-title70:4.375rem;
    --text-title40:2.5rem;
    --text-semititle31:1.938rem;
    --text-contents21:1.313rem;
    --text-contents24:1.5rem;
    --text-menu18:1.125rem;
    --text-contents16:1rem;
    --text-sub14:0.875rem;
    --text-sub12:0.75rem;
    --text-sub10:0.625rem;
    /* 행간 */
    --line-title:0.9;
    --line-contents:1.5;
    /* 자간 */
    --letter-minus2:-0.02rem;
    /* 굵기 */
    --weight-bold:700;
    --weight-semibold:600;
    --weight-medieum:500;
    /* 색상(테두리색, 배경색, 글자색 등) */
    --color-white:#fff;
    --color-gray4:#444;
    --color-graya:#aaa;
    --color-grayd:#ddd;
    --color-title-brown:#642c10;
    --color-title-indigo:#1d356d;
    --color-title-coral:#d43936;
    --color-point1:#fcfcfc;
    --color-blue:#36b4e5;
    --color-yellow:#f3c300;
    
    /* 레이아웃 정보 */
    --width-desktop:1440px;
    --width-desktop2: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;/* 교차축(수직) 가운데 */
     /* lnb의 부모 크기+위치 부모 기준 */
    position: fixed; /* fixed들어가면 내용이 인라인으로 바뀜 너비값을 재설정 해줘야 한다.*/
    z-index: 900; left:0 ; top:0 ;
    width: 100%;
    background-color: white;
}
#wrap header h1 {}
#wrap header h1 a {}
#wrap header h1 a img {}
#wrap header nav {
}
#wrap header nav .gnb {
    display:flex;/* 자식 li 정렬 위한 값 */
    flex-flow:row nowrap;
    gap:70px;
}
#wrap header nav .gnb > li {
    display: flex;
    flex-flow: column nowrap;
    align-items:center;
    gap:15px;
}
#wrap header nav .gnb > li .lnb {
    padding: 48px 0;
    background-color: rgba(255,255,255,0.7);
    /* 교차시키기(absolute) + 중첩순서 (z-lndex) */
    width:100% ;/* absolute와 함께 w100%가 있으면 부모(pst)의 너비와 같다는뜻 */
    display: flex;
    display: none;
    justify-content:center ;
    gap:100px;
    position: absolute; z-index: 90;
    top:92px; left:0;/* absolute +좌표가 있다면? 부모(pst)기준 좌표 설정 뜻 */ 
}
#wrap header nav .gnb > li .lnb > li {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    gap: 15px;
}
#wrap header nav .gnb > li:nth-child(5) .lnb {}

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

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

    line-height:92px;
    display:block;
}
/* IR */
#wrap header nav .gnb > li {}
/* 서브메뉴시작 */
/* 메인메뉴에 마우스 올렸을때 서브메뉴 보이기(공용) */
#wrap header .right_menu {

    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 > a {
    font-size:var(--text-sub12);
}
#wrap header .right_menu > li > a img {}
/* 언어선택시 활성화 디자인 */
#wrap header .right_menu li:nth-child(2) {
    position: relative;
}
/* 두번째 li에 마우스 올렸을때 자식 언어선택 보이기 */
#wrap header .right_menu li:nth-child(2):hover .lang_select{
    display: flex;
}
#wrap header .right_menu li:nth-child(2) .lang_select {
    /* 형제 또는 부모와 겹치는 디자인 요소는 -> absolute 필수 */
    position: absolute; z-index: 100; /* 0~999 */
    display: flex; flex-flow: column nowrap; gap: 10px; 
    /* 초기숨기기 */
    display: none; 
}
#wrap header .right_menu li:nth-child(2) .lang_select a {
    width:40px ; line-height: 40px;
    text-align: center;
    border: 1px solid #aaa;
    border-radius: 50%;
    background-color: #fff;
    font-size: var(--text-sub12);
}
#wrap header .right_menu li:nth-child(2) .lang_select a .kr {} 
#wrap header .right_menu li:nth-child(2) .lang_select a .en {
    
}
#wrap header .right_menu li:nth-child(2) .lang_select a .cn {}
/* 메인 */
#wrap main {}
/* 푸터 */
#wrap footer { padding: 50px 80px; }

/* .ft_top */
#wrap footer .ft_top {
  
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}

#wrap footer .ft_top .menu {
    font-size: var(--text-sub14);
    display: flex;
    align-items: center;
}
#wrap footer .ft_top .menu a {
    color: #676767;
}

#wrap footer .ft_top .menu a:first-child {
    color: #DA2128;
    font-size: var(--text-contents16);
    font-weight: var(--weight-semibold);
}

#wrap footer .ft_top .menu a:nth-child(2) {
    color: #138FBF;
    font-size: var(--text-contents16);
    font-weight: var(--weight-semibold);
}

#wrap footer .ft_top .menu a { margin-right: 40px; }

/* .site_all */
#wrap footer .site_all { background-color: var(--color-white);
    display: flex;
    gap: 20px; }
    #wrap footer .site_all li {position: relative;}
#wrap footer .site_all li p {
    background-color: var(--color-white);
    background-image: url(../images/arrowdown.png);
    background-repeat: no-repeat;
    background-position: 90% center;
    line-height: 40px;
    padding-left: 10px;
    border: 1px solid var(--color-grayd);
    font-size: var(--text-sub12);
}
#wrap footer .site_all li:nth-child(1) p { width: 220px;}
#wrap footer .site_all li:nth-child(2) p { width: 140px; }

#wrap footer .site_all .family_list:hover  {} 
#wrap footer .site_all .family_list  { 
    display: none;
    background-color: #fff;
    overflow: auto;
    border: 1px solid #d9d9d9;
    position: absolute;
    width: 100%;
    height: 250px;
    font-size: var(--text-sub12);
    bottom:40px; }
#wrap footer .site_all li .family_list li {
    padding: 10px;
}
#wrap footer .site_all li:nth-child(1):hover .family_list {display: block;}
#wrap footer .site_all li .family_list li a {}

#wrap footer .site_all li .sitemap_wrap { display: none; }
#wrap footer .site_all li .sitemap_wrap .sitemap_contents {}
#wrap footer .site_all li .sitemap_wrap .sitemap_contents h2 {}
#wrap footer .site_all li .sitemap_wrap .sitemap_contents .close {}

/* footer bottom */
#wrap .ft_btm {}
#wrap .ft_btm address { padding: 25px 0;
    color: #808080;
    font-size: var(--text-sub14);}
#wrap .ft_btm p {color: #808080;
    font-size: var(--text-sub14);}