@charset "utf-8";

/* layout */
.container {width: 100%; max-width: 1220px; margin: 0 auto;}
.sub-content {min-height: 70rem; padding: 6.4rem 0 13rem;}

/*============================================================*/
/* header */
/*============================================================*/
header {position: fixed; top: 0; left: 0; right: 0; width: 100%; height: var(--hd-height); padding: 3rem 7rem; background-color: transparent; z-index: 20;}
.header {position: relative; height: 100%;}
.header .hd-logo {position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 21rem; aspect-ratio: 140/20; z-index: 1;}
.header .hd-logo a {display: block; width: 100%; height: 100%; background-image: url("/img/logo_horiz_wt.png"); background-position: left center; background-size: contain; background-repeat: no-repeat;}

/* GNB */
.header .gnb {position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 100%;}
.header .gnb .depth1 {display: flex; gap: 7rem; height: 100%;}
.header .gnb .depth1 > li {flex: 1 0 auto; position: relative;}
.header .gnb .depth1 > li > a,
.header .gnb .depth1 > li > button {position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; height: 100%; padding: 0 1rem; color: #fff; font-weight: 400; transition: var(--trans-25);}
.header .gnb .depth1 > li::before {content: ''; position: absolute; display: block; bottom: 0; left: 0; right: 0;  width: 0; height: 2px; margin: auto; transition: var(--trans-25); background: rgb(144,122,35); background: linear-gradient(95deg, rgba(144,122,35,1) 0%, rgba(211,174,26,1) 25%, rgba(241,202,46,1) 50%, rgba(211,174,26,1) 75%, rgba(144,122,35,1) 100%);}
.header .gnb .depth1 > li > a.on,
.header .gnb .depth1 > li > button.on {background: rgb(144,122,35); background: linear-gradient(95deg, rgba(144,122,35,1) 0%, rgba(211,174,26,1) 25%, rgba(241,202,46,1) 50%, rgba(211,174,26,1) 75%, rgba(144,122,35,1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 800; transform: scale(1.13);}
.header .gnb .depth1 > li.active::before {width: 100%;}

/* LNB */
.header .gnb .depth2 {display: none; position: absolute; top: 130%; left: 50%; transform: translateX(-50%); width: max-content;}
.header .gnb .depth2 > li > a {display: block; width: 100%; height: 100%; padding: 10px 0; text-align: center; font-size: 1.5rem;}
.header .gnb .depth2 > li > a.on {color: var(--col-black);}
.header .gnb .depth2-bg {opacity: 0; visibility: hidden; position: absolute; left: 50%; transform: translateX(-50%); top: -6rem; width: 100vw; background: #fff; box-shadow: 0 1px 5px rgba(0,0,0,0.125); transition: all .3s;}
@media (hover: hover) and (pointer: fine) {
    .header .gnb .depth2 > li > a:hover {color: var(--col-brown); font-weight: 600;}
}


/* logout */
.hd_btn {display: inline-block; position: absolute; top: 50%; right: 0; transform: translateY(-50%);}
.btn-user {display: inline-block; width: 5rem; aspect-ratio: 1; background: url("/img/ico_user.png") center/3.5rem no-repeat;}

/* LNB .open */
#hd.open {box-shadow: 0px 3px 7px rgba(0,0,0,0.125);}
#hd.open .header .hd-logo a {background-image: url("/img/logo_horiz_bk.png");}
#hd.open .depth2-bg {opacity: 1; visibility: visible; top: -4rem;}
#hd.open .header .gnb .depth1 > li > a,
#hd.open .header .gnb .depth1 > li > button {color: var(--col-black); font-weight: 500;}
.header .gnb .depth2 > li > a.open  {color: var(--col-black);}
#hd.open .btn-user {background: url("/img/ico_user_bk.png") center/3.5rem no-repeat;}

/* .hdScroll */
header.hdScroll {background: #fff; box-shadow: 0 1px 5px rgba(0,0,0,0.125);}
header.hdScroll .hd-logo a {background-image: url("/img/logo_horiz_bk.png");}
header.hdScroll .gnb .depth1 > li > a,
header.hdScroll .gnb .depth1 > li > button {color: var(--col-black); font-weight: 500;}
header.hdScroll .burger-icon .burger-sticks {background: var(--col-black);}
header.hdScroll .burger-icon .burger-sticks:before,x
header.hdScroll .burger-icon .burger-sticks:after {background: var(--col-black);}
header.hdScroll .btn-user {background: url("/img/ico_user_bk.png") center/3.5rem no-repeat;}


/* 햄버거 버튼 */
.burger-icon {display: inline-block; display: none; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: auto; margin: 0; padding: 8px 0; user-select: none; cursor: pointer;}
.burger-icon .burger-sticks {background: #fff; display: block; height: 2px; position: relative; transition: background .2s ease-out; width: 26px; border-radius: 3px;}
.burger-icon .burger-sticks:before,
.burger-icon .burger-sticks:after {background: #fff; content: ''; display: block; height: 100%; position: absolute; transition: all .2s ease-out; width: 100%; border-radius: 3px;}
.burger-icon .burger-sticks:before {top: 8px;}
.burger-icon .burger-sticks:after {top: -8px;}

/* 모바일 햄버거 버튼 클로즈 */
.btn-close {display: inline-block; position: absolute; top: 33px; right: 0; width: auto;}
.btn-close .burger-sticks {background: transparent; display: block; height: 2px; position: relative; transition: background .2s ease-out; width: 26px;}
.btn-close .burger-sticks:before,
.btn-close .burger-sticks:after {background: var(--col-black); content: ''; display: block; height: 100%; position: absolute; transition: all .2s ease-out; width: 100%; }
.btn-close .burger-sticks:before { transform: rotate(-45deg); }
.btn-close .burger-sticks:after { transform: rotate(45deg); }

/*============================================================*/
/* sub visual */
/*============================================================*/
.sub-visual {position: relative; height: 36rem; background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #3D3D3D;}
.sub-visual.none {display: none;}
.sub-visual::before {content: ""; position: absolute; display: block; width: 100%; height: 100%; background: rgba(0,0,0, 0.35);}
.sub-visual .container {position: absolute; top: calc(50% + 3rem); left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center;}
.sub-visual h2 {position: relative; display: inline-block; padding-bottom: 1rem; color: #fff; font-size: 4.8rem; font-weight: 400; letter-spacing: -0.03em;}
.sub-visual h2::before {content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #fff; animation: w100 .7s;}

.vis01 {background-image: url("/img/visual/s_vis01.jpg");}
.vis02 {background-image: url("/img/visual/s_vis02.jpg");}
.vis03 {background-image: url("/img/visual/s_vis03.jpg");}
.vis04 {background-image: url("/img/visual/s_vis04.jpg");}
.vis05 {background-image: url("/img/visual/s_vis05.jpg");}
.vis06 {background-image: url("/img/visual/s_vis06.jpg");}
.vis07 {background-image: url("/img/visual/s_vis07.jpg");}

@-webkit-keyframes slidein {
    from {background-position: 45% 45%; background-size: auto 150%;}
    to {background-position: 50% 50%; background-size: auto 140%;}
}
@keyframes w100 {
    from {width: 0;}
    to {width: 100%;}
}

/*============================================================*/
/* sub menu */
/*============================================================*/
.sub-menu {margin-bottom: 7.5rem; text-align: center;}
.sub-menu ul { width: 100%; max-width: 1100px; margin: auto; display: flex; justify-content: space-between; }
.sub-menu ul li { font-size: 14px; width: 100%; /*max-width: 200px;*/ line-height: 55px; text-align: center; position: relative; font-weight: 500; box-sizing: border-box; margin: 0 -1px; background-color: #f3f3f3; }
.sub-menu ul li:before { content:''; width: 1px; height: 15px; position: absolute; top: 0; bottom: 0; margin: auto; left: 0; background-color: rgba(0,0,0,0.4); z-index: 9; }
.sub-menu ul li:first-child:before { display: none; }
.sub-menu ul li a { display: block; color: #222; font-weight: 400; position: relative; top: 1px; }
.sub-menu ul li.selected { background-color: var(--col-brown);}
.sub-menu ul li.selected:before,
.sub-menu ul li.selected + li:before {display: none;}
.sub-menu ul li.selected a {color: #fff; top: 0; }

/* sub title */
.sub-title {margin-bottom: 4rem;}
.sub-title h3 {margin-bottom: 0; font-size: 3.8rem; font-weight: 500; line-height: 100%;}
.title-line { width: 8px; height: 8px; margin: auto; margin-top: 22px; border-right: 1px solid #bbb; border-bottom: 1px solid #bbb; transform: rotate(45deg); }



/*============================================================*/
/* footer */
/*============================================================*/
footer {height: 24rem; padding: 3rem 0; background: var(--col-black); color: var(--col-gray); font-size: 1.5rem; font-weight: 400;}
footer .container {position: relative; display: flex; justify-content: space-between; align-items: flex-start;}
footer .container > div::after {content: ""; display: block; clear: both;}
footer .ft-logo {float: left; width: 20rem; aspect-ratio: 140/20; background: url("/img/logo_horiz_gray.png") left center/contain no-repeat;}
footer .ft-info-wrap {float: left; margin-left: 5rem;}
footer .ft-info {margin-top: .6rem;}
footer .ft-info li + li {margin-top: 1rem;}
footer .copyright {margin-top: 3.5rem;}
footer .link-wrap ul {display: flex; gap: 2.4rem;}
footer .link-wrap ul li a {display: flex; align-items: center; transition: var(--trans-25);}
footer .link-wrap ul li a svg {margin-left: .8rem;}
footer .link-wrap ul li a .svg-stroke {stroke: var(--col-gray); transition: var(--trans-25);}
@media (hover: hover) and (pointer: fine) {
    footer .link-wrap ul li a:hover {color: #fff;}
    footer .link-wrap ul li a:hover .svg-stroke {stroke: #fff;}
}
.familysite {position: absolute; bottom: 0; right: 0; width: 24rem;}
.familysite > div {position: relative; height: 5rem; line-height: 5rem; padding: 0 2.4rem; border: 1px solid var(--col-gray); color: var(--col-gray); cursor: pointer; user-select: none;}
.familysite > div::after {content: ""; position: absolute; top: 50%; right: 1.2rem; display: block; width: 2.4rem; height: 2.4rem; transition: var(--trans-25); background-image: url("/img/select_gray.svg"); background-position: center 50%; background-repeat: no-repeat; transform: translateY(-50%) rotate(-180deg);}
.familysite.active > div::after {transform: translateY(-50%);}
.familysite > ul {opacity: 0; visibility: hidden; z-index: 200; position: absolute; bottom: 100%; left: 0; right: 0; margin: 0; background: var(--col-black); border: 1px solid var(--col-gray); border-bottom: 0; transition: max-height .25s; overflow: hidden;}
.familysite > ul > li + li {border-top: 1px solid var(--col-gray);}
.familysite > ul > li > a {display: block; width: 100%; height: 100%; padding: 1.2rem 2.4rem;}
.familysite.active > div + ul {opacity: 1; visibility: visible;}
@media (hover: hover) and (pointer: fine) {
    .familysite > ul > li:hover {background-color: #111;}
}


/*============================================================*/
/* mobile navigation */
/*============================================================*/
.m-menu {opacity: 0; visibility: hidden; position: fixed; top: 0; bottom: 0; left: 0; right: 0; width: 100vw; height: 100vh;  padding: 0 30px; background-color: #fff; transition: all .2s ease-out;}
.m-menu.open {opacity: 1; visibility: visible; z-index: 20;}
body.openNav {overflow: hidden;}
.m-menu .header {position: relative; height: var(--hd-height-m);}
.m-menu .header .logo {position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 166px; aspect-ratio: 188/140; background-image: url("/img/logo_horiz_bk.png"); background-position: center; background-size: contain; background-repeat: no-repeat;}
.m-menu .header .logo a {display: block; width: 100%; height: 100%;}

.arc_l {border-bottom: 1px solid var(--col-gray); color: var(--col-gray); font-family: "Inter", sans-serif; font-weight: 500;}
.arc_l .arc_title {position: relative; padding: 18px 0 16px; border-top: 1px solid var(--col-gray); cursor: pointer;}
.arc_l .arc_title a {display: block; width: 100%; height: 100%;}
.arc_l li:first-child .arc_title {border-top: 1px solid var(--col-gray);}
.arc_l li .arc_title span,
.arc_l li .arc_title i {position:absolute; right: 10px; top:50%; transform: translateY(-50%); font-size: 24px; transition: all .3s ease;}
.arc_l li .arc_title span {right: 5px;}
.arc_l li .arc_title.show {color: var(--col-black);}
.arc_l li .arc_title.show i {transform:rotate(180deg); margin-top: -10px; transition: all .3s ease;}
.arc_l li .arc_txt {height:0; font-size: 90%; overflow:hidden; opacity:0; transition: all 0.6s cubic-bezier(0.42, 0.2, 0.08, 1);}
.arc_l li .arc_txt.show {opacity: 1; height: auto; padding-bottom: 18px;}
.arc_l li .arc_txt li + li {margin-top: 14px;}
.arc_l li .arc_txt li a {color: var(--col-gray); font-weight: 500;}

/*현재 페이지 표시*/
.arc_l li.on .arc_title,
.arc_l li .arc_txt li a.on {color: var(--col-black); font-weight: 700;}
.arc_l li.on .arc_txt {opacity: 1; height: auto; padding-bottom: 18px;}

.m-menu .btn-area {margin-top: 6rem; text-align: right;}

@media (max-width: 1600px) {
    header {padding: 3rem 4rem;}
    .header .gnb .depth1 {gap: 3rem;}
}
@media (max-width: 1400px) {
    .header .gnb {left: 57%;}
    .header .gnb .depth1 {gap: 3rem;}
    .header .gnb .depth2-bg {left: calc(1220px - 910px);}
}
@media (max-width: 1300px) {
    .container {padding: 0 3rem;}
    .familysite {right: 3rem;}
}
@media (max-width: 1200px) {
    header {height: var(--hd-height-m); padding: 2rem;}
    .header .gnb {opacity: 0; visibility: hidden; left: 0; right: 0; transform: none;}
    .hd_btn.pc {display: none;}
    .burger-icon {display: block;}
}
@media (max-width: 992px) {
    html {font-size: 58.6%;} /* 15px */
    .container {padding: 0 2rem;}
    .sub-content {min-height: auto; padding: 6rem 0;}
    .sub-visual {height: 30rem;}
    .sub-visual h2 {font-size: 3.4rem;}
    .sub-title h3 {font-size: 3rem;}
    .sub-menu {margin-bottom: 4rem;}
    .sub-menu ul li {line-height: 45px;}
    footer {height: auto;}
    footer .container {flex-direction: column; gap: 3rem;}
    footer .ft-logo {float: none;}
    footer .ft-info-wrap {float: none; margin: 2rem 0 0;}
    footer .ft-info li + li,
    footer .copyright {margin-top: 0.5rem;}
    .familysite {position: relative; right: auto; margin: 0 0 0 auto;}
}
@media (max-width: 768px) {
    .header .hd-logo {width: 16rem;}
    .sub-visual {height: 24rem;}
    .sub-visual .container {top: calc(50% + 2rem);}
    .sub-visual h2 {font-size: 2.4rem;}
    .sub-menu ul {justify-content: center;}
    .sub-menu ul li:before {display: none;}
    .sub-title h3 {font-size: 3rem;}
}