#layout{ min-height:100vh;display: flex;flex-direction: column;position: relative;background-color: #fff;}
#hd_belt{width:100%; display:none; padding: 0.9rem; text-align:center; color:#fff; background-color:#555;}
#hd_belt.fixed{position:fixed; top:0; left:0;}
/* IE10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    #hd_belt{display:block;}
}


#hd_logo{width:100%; max-width: 18.5rem;}
#header{width:100%; position:absolute; top:0; left:0; color:#000; background-color: transparent;}
#header.dark_mode{color:#fff;}
#header:not(.open) .black_logo{display:block;}
#header:not(.open) .white_logo{display:none;}
#header.open .black_logo{display:none;}
#header.open .white_logo{display:block;}
#header.dark_mode .black_logo{display:none;}
#header.dark_mode .white_logo{display:block;}
#header .hd_inner{height:11rem; display:flex; justify-content:space-between; align-items: center; padding: calc(3.5rem + 2rem) 6rem;}
#header .btn_hamburget_close{display:none; opacity: 0; width: 3.2rem; height: 3.2rem; position: absolute; top: 6rem; right: 6rem; border: 0; overflow: hidden; background-color:transparent; background-position: center; background-repeat: no-repeat; background-image: url('../../dist/images/common/icon_close_white.svg'); transition: transform 0.3s ease, opacity 0.3s ease;}
#header .btn_hamburget_close:hover{transform: rotate(90deg);}
#header .btn_hamburger{margin-left:4rem; width: 4rem; height: 4rem; padding:.6rem; border: 0; background-color:transparent;}
#header .btn_hamburger span{display:block; width:100%; height:3px; background-color:#000;transition: all .3s;}
#header.dark_mode .btn_hamburger span{background-color:#fff;}
#header .btn_hamburger span
#header .btn_hamburger span:nth-child(1){max-width:2.6rem;}
#header .btn_hamburger span:nth-child(2){max-width:3rem;}
#header .btn_hamburger span:nth-child(3){max-width:1.8rem;}
#header .btn_hamburger:hover span:nth-child(1) {animation: burger-hover 1s ease-in-out infinite alternate;}
#header .btn_hamburger:hover span:nth-child(2) {animation: burger-hover 1s ease-in-out .2s infinite alternate forwards;}
#header .btn_hamburger:hover span:nth-child(3) {animation: burger-hover2 1s ease-in-out .4s infinite alternate forwards;}
#header .btn_hamburger span + span{margin-top:.7rem;}

@keyframes burger-hover {
    0% {width: 100%;}
    50% {width: 50%;}
    to {width: 100%;}
}
@keyframes burger-hover2 {
    0% {width: 80%;}
    50% {width: 40%;}
    to {width: 80%;}
}


#header .hd_info{display:none; position: relative; flex:1;}
#header .hd_info::before{content:''; position: absolute; top: 50%; transform: translateY(-50%); left:0;  display:inline-block; width:1px; height:calc(100vh - 11rem - 11rem); background-color:#595C60;}
#header .hd_info .inner{width:55%; margin-left:auto;}
#header .hd_info .item + .item{margin-top:4.8rem;}
#header .hd_info .item .tit{margin-bottom: 1.2rem; color:#fff; font-size: 1.9rem; font-weight: 600;}
#header .hd_info .item p{color:#C8C8C8; font-size: 1.6rem; font-weight: 600; line-height: 1.6;}

#header .hd_sites{display:flex;align-items: center;}
#header .hd_sites .item{position:relative; color:#fff; font-size:1.4rem; border-radius: 20rem; padding:1rem 3.2rem 1rem 1.2rem;}
#header .hd_sites .item:nth-child(1){background-color:#BEA36B;}
#header .hd_sites .item:nth-child(2){background-color:#2D2D2D;}
#header .hd_sites .item:nth-child(3){background-color:#D80C18;}
#header .hd_sites .item:after{content:url('../../dist/images/common/icon_arrow_up_right_white.svg'); position:absolute; top: 50%; transform:translateY(-50%); right:1.2rem;}
#header .hd_sites .item + .item{margin-left:1rem;}

#header.open{width:100%; height:100vh; height:100dvh; background-color:#171C22;}
#header.open #hd_logo{position: absolute; top: 6.5rem; left:6rem;}
#header.open .hd_inner{display:flex; height:100%; overflow:auto;}
#header.open .sitemap{display:flex; justify-content: space-between;width: 100%; max-width: 128rem; margin: 0 auto;}
#header.open  #hd_links{flex:1; flex-direction: column;align-items: flex-start;}
#header.open  #hd_links .item{position:relative; color:#989898;  font-weight: 700;}
#header.open  #hd_links .item:hover{color:#FFFFFF;}
#header.open  #hd_links .item a{padding: 1rem 0;font-size: 5rem;}
#header.open  #hd_links .item + .item{margin-top: 4rem; margin-left: 0;}
#header.open .btn_hamburget_close{display: block;opacity: 1;}
#header.open .hd_info{display:block;}
#header.open .hd_sites{display:none;}

#hd_links{display:flex;align-items: center;}
/* #hd_links .item{text-align:center;min-width:6.2rem;} */
#hd_links .item a {display:block;font-size:1.8rem; position: relative; display: inline-block;}
#hd_links .item a::after {content: ''; position: absolute; bottom: 0; left: 0; height: 1px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease, transform-origin 0s 0.4s; pointer-events: none;}
#hd_links .item a:hover::after {transform: scaleX(1); transform-origin: left; transition: transform 0.4s ease;}
#hd_links .item a:not(:hover)::after {transform: scaleX(0); transform-origin: right; transition: transform 0.4s ease, transform-origin 0s;}
#hd_links .item + .item{margin-left: 11rem;}


@media screen and (max-width: 1820px) {
    #hd_links .item + .item{margin-left:5rem;}
    #header .hd_sites .item{display:none;}
}

@media screen and (max-width: 1400px){
    #header .hd_info .inner{width:70%;}
}

@media screen and (max-width: 1020px){
    #hd_logo {max-width:12.6rem;}
    #hd_links{display:none;}
    #header{padding-top:0rem;}
    #header .hd_inner{height:5.8rem;padding:2.2rem 2.4rem;}
    #header.open .hd_inner{display:block;}
    #header .btn_hamburger{padding:0; width:2.2rem; height:2.2rem;}
    #header .btn_hamburger span{height:2px;}
    #header .btn_hamburger span + span{margin-top: .4rem;}
    #header .btn_hamburget_close{top: 2.2rem; right: 2.4rem; width: 2.2rem; height: 2.2rem;}
    #header.open #hd_logo{top: 2.2rem; left: 2.4rem;}
    #header.open .sitemap{flex-direction: column;}
    #header.open #hd_links{display:block; padding-top: 12.8rem;}
    #header.open #hd_links .item{font-size: 2.8rem; line-height: 1.7;}
    #header.open #hd_links .item + .item{margin-top:.6rem;}
    #header.open #hd_links .item a{font-size: 2.8rem; line-height: 1.7;}


    #header.open .hd_info{margin-top: 6rem;}
    #header .hd_info .inner{margin-left: 0;}
    #header .hd_info::before{display: none;}
    #header .hd_info .item + .item{margin-top: 3rem;}
    #header .hd_info .item .tit{margin-bottom: .8rem;font-size: 1.5rem;}
    #header .hd_info .item p{font-size: 1.3rem;}
}





/* z-index 관리 */
#header{z-index:100;}
#btn_totop{z-index:30;}
#footer .ft_bottom .ft_familysite ul{z-index:3;}