#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: 20rem; flex-shrink: 0;}
#hd_logo a{width: 100%;}
#hd_logo img{width:100%; height: auto;}
#header{width:100%; padding-top:2rem; 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; gap: 2rem; 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-size: 100%; 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:2rem; width: 3.2rem; height: 3.2rem; 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:2.1rem; font-weight: 600;}
#header .hd_info .item p{color:#C8C8C8; font-size:1.8rem; 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.6rem; 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:5.2rem;}
#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:2rem; 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 a.active {color: #F22C2D !important; font-weight: 700 !important;}
#header.open #hd_links .item a.active {color: #F22C2D !important;}
#hd_links .item + .item{margin-left: 7rem;}


@media screen and (max-width: 1820px) {
    #hd_links .item + .item{margin-left:3rem;}
}

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

@media screen and (max-width: 1300px){
    #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:3rem; line-height: 1.7;}
    #header.open #hd_links .item + .item{margin-top:.6rem;}
    #header.open #hd_links .item a{font-size:3rem; 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.7rem;}
    #header .hd_info .item p{font-size:1.5rem;}
}

#content{width:100%; min-height:100vh;}


#footer{padding-left: 6rem; padding-right: 6rem;background-color: #232323;font-size:1.7rem;margin-top:auto; color:#999999;}
#footer .ft_inner{max-width:128rem;margin-left:auto;margin-right:auto;}
#footer .ft_top{padding:5rem 0;display: flex;align-items: center;flex-wrap:wrap; border-bottom: 1px solid #343333;}
#footer .ft_top .ft_links{display: flex;}
#footer .ft_top .ft_links .item + .item{margin-left: 4.9rem;}
#footer .ft_top .ft_links .item a{font-size:1.7rem; font-weight: 600; line-height: 2.6; transition: all 0.2s;}
#footer .ft_top .ft_links .item a:hover{color:#fff;}
#ft_logo{margin:0.5rem 7rem 0.5rem 0;}
#ft_logo svg{width:16rem;}
#ft_logo svg g{fill:var(--theme-footer-color);}


#footer .ft_bottom {padding:4rem 0 7.4rem; display: flex; justify-content: space-between; align-items: flex-start;}
#footer .ft_bottom .ft_info{display:flex;flex-wrap:wrap;max-width:84rem;opacity:0.7;word-break: keep-all;line-height: 1.6;}
#footer .ft_bottom .ft_info .ft_copy{width: 100%;}
#footer .ft_bottom .ft_familysite{position: relative; width: 18.5rem; text-align: center; z-index: 11; margin-top: -1rem;}
#footer .ft_bottom .ft_familysite strong{position:relative; font-size: 1.6rem; color: #999999; display: block; line-height: 1; border: 1px solid transparent; padding: 1.2rem 0; box-sizing: border-box; width: 100%; transition: all 0.2s ease-in-out; cursor: pointer;}
#footer .ft_bottom .ft_familysite strong::after{content: ''; width: 15rem; height: 100%; border-bottom: 1px solid #828282; display: block; position: absolute; bottom: 0; left: 50%; box-sizing: border-box; transition: all 0.1s; transform: translateX(-50%);}
#footer .ft_bottom .ft_familysite strong::before{content: ''; width: 100%; height: 0; display: block; position: absolute; bottom: 1px; left: 50%; box-sizing: border-box; transition: all 0.1s ease-in-out; transform: translateX(-50%);}
#footer .ft_bottom .ft_familysite:hover strong::after{width: 100%;}
#footer .ft_bottom .ft_familysite:hover strong::before{height: 100%; border-left: 1px solid #828282; border-right: 1px solid #828282; transition-delay: 0.1s;}
#footer .ft_bottom .ft_familysite:hover strong{background: #323232; color: #fff; transition: all 0.1s ease-in-out;}
#footer .ft_bottom .ft_familysite strong .arrow{display: inline-block; width: 1.6rem; height: 1.6rem; background: url('../../dist/images/common/icon_arrow_top_gray.svg') no-repeat center; background-size: contain; vertical-align: middle; margin-left: 3.6rem; transition: transform 0.2s ease-in-out;}
#footer .ft_bottom .ft_familysite:hover strong .arrow{transform: rotate(180deg);}
#footer .ft_bottom .ft_familysite ul {position: absolute; display: none; bottom: 4.0rem; left: 0; border: 1px solid #828282; background-color: #232323; width: 100%; color: #949494; font-size: 1.4rem; box-sizing: border-box; text-align: left; padding: 0; margin: 0;}
#footer .ft_bottom .ft_familysite:hover ul{display:block;}
#footer .ft_bottom .ft_familysite ul li {display: block; margin: 0;}
#footer .ft_bottom .ft_familysite ul li a {display: inline-block; width: 100%; padding: 1rem 2rem; box-sizing: border-box; transition: all 0.2s; color: #949494;}
#footer .ft_bottom .ft_familysite ul li a:hover {color: #fff; background: #323232;}

@media screen and (max-width: 1020px) {
    #footer{padding-left: 2.4rem; padding-right:2.4rem;}
    #footer .ft_top{padding:4rem 0 2.4rem; flex-direction: column;align-items: baseline;}

    #footer .ft_top .ft_links .item{font-size:1.5rem;line-height:2;}
    #footer .ft_top .ft_links .item + .item{margin-left: 2.2rem;}

    #ft_logo{margin:0 0 1rem 0;width:100%; max-width: 13rem;}

    #footer .ft_bottom{padding: 1.6rem 0 4rem; flex-direction: column-reverse;}
    #footer .ft_bottom .ft_info{font-size:1.4rem; line-height: 1.8;}
    #footer .ft_bottom .ft_info span{display: block;}
    #footer .ft_bottom .ft_info .gubun{display: none;}
    #footer .ft_bottom .ft_familysite{margin-bottom: 3.2rem; max-width: 100%; text-align: left; width: 100%; margin-top: 0;}
    #footer .ft_bottom .ft_familysite strong{font-size: 1.5rem; padding: 1.5rem 0; border: none; width: 100%; display: flex; justify-content: space-between; align-items: center;}
    #footer .ft_bottom .ft_familysite strong::before{display: none;}
    #footer .ft_bottom .ft_familysite strong::after{display: block; width: 100%; left: 0; transform: none;}
    #footer .ft_bottom .ft_familysite:hover strong{background: none; color: #999999;}
    #footer .ft_bottom .ft_familysite strong .arrow{width: 1.6rem; height: 1.6rem; margin-left: 0;}
    #footer .ft_bottom .ft_familysite ul {bottom: 100%; margin-bottom: 0; width: 100%;}

    #ft_top{padding:3rem 0 2rem;display: block;}
    #ft_logo img{display: block;}
    #ft_logo svg{width:11rem;}

}

#btn_totop{width: 6rem; height: 6rem;position:fixed; right:6rem; bottom:7rem; display:block;border-radius:50%;overflow:hidden;text-indent: -999em;background-position: center center;background-size: 2.7rem;background-repeat: no-repeat; border:0; background-color:  rgba(0, 0, 0, 0.4);background-image: url('../../dist/images/common/icon_totop.svg');}
#btn_totop.hide{display: none;}
@media screen and (max-width: 1020px) {
    #btn_totop{right:1.4rem; bottom:3.6rem; width: 4.4rem; height: 4.4rem; background-size: 2rem;}
}




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

#header .hd_sites .site_links {display: flex; align-items: center;}

@media screen and (max-width: 1300px) {
    #header .hd_sites .site_links {position: absolute; top: 8rem; left: 0; width: 100%; padding: 0 2.4rem; display: flex; justify-content: center; flex-wrap: nowrap;}
    #header .hd_sites .item{flex: 1; display:block; max-width: 20rem; font-size: 1.4rem; padding: 1rem 2.6rem 1rem 1.2rem;}
    #header .hd_sites .item:after{right: 1rem; transform: translateY(-50%) scale(0.9);}
    #header .hd_sites .item:nth-child(1){background-color:rgba(190, 163, 107, 0.8);}
    #header .hd_sites .item:nth-child(2){background-color:rgba(45, 45, 45, 0.8);}
    #header .hd_sites .item:nth-child(3){background-color:rgba(216, 12, 24, 0.8);}
    #header .hd_sites .item + .item{margin-left: 0.6rem;}
    #header .btn_hamburger{margin-left: 1.5rem;}
}