@charset "utf-8";
@import url('unable/board.css');
@import url('unable/board_renew.css');
@import url('custom_board.css');

/*
	* layout.css.css
	* 레이아웃 공통요소들 작업요소에 맞게 수정하시면됩니다.
	*
	* 1) root 설정
	* 2) 폰트설정
	* 3) 레이아웃설정
	*
*/

/* 1) root 설정  */
:root{
	--color-base:#222; /* 선언이 안되면 #333 기본컬러로 적용됨 */
	--color-point: #f15929;
	--color-white:#fff;
	--color-black:#000;
	--font-base:16rem;
	--font-eng: "graphie", sans-serif;;
}

[data-ani]{opacity:0; transition:transform 1.6s ease, opacity 1.3s ease; transform-style:preserve-3d; will-change:transform;}
[data-ani].is_moved{opacity:1; transform:none;}
[data-ani="img"]{transform:translate(0%, 40%) matrix3d(1, 0, 0, 0, 0, 0.997564, 0.0697565, -0.00028, 0, -0.0697565, 0.997564, -0.00249391, 0, 0, 40, 0.9);}
[data-ani="top"]{transform:translateY(70rem); transition-delay:0.1s;}
[data-ani="right"]{transform:translateX(70rem); transition-delay:0.1s;}
[data-ani="left"]{transform:translateX(-70rem); transition-delay:0.1s;}
[data-ani="scale"]{transform:scale(1.15); transition-delay:0.1s; opacity:1 !important;}
[data-ani="rotate"]{transform:scale(1.15); transition-delay:0.1s; opacity:1 !important;}

/* start motion  for All contents */
.motion-on [data-motion]{transition:transform 1.4s ease, opacity 1.3s ease;transform: none;opacity:1;will-change: transform;}
[data-motion]{opacity:0;}
[data-motion="scrollTop"]{transform:translate(0%, 40%) matrix3d(1, 0, 0, 0, 0, 0.997564, 0.0697565, -0.00028, 0, -0.0697565, 0.997564, -0.00249391, 0, 0, 40, 0.9);}
[data-motion="top"]{transform: translateY(70rem);transition-delay:0.1s;}
[data-motion="right"]{transform:translateX(140rem); transition-delay:0.1s;}
[data-motion="scale"]{opacity:1 !important; transform:scale(1.15); transition-delay:0.1s;}
[data-motion="txt"].motion_in > *{transform:translateY(0);display: block;}
[data-motion="txt"] > *{opacity:1; transition:all 0.9s ease; transform:translateY(100%);}
[data-motion="txt"]{/* opacity:1 !important; */overflow:hidden; transition-delay:0.5s;}

/* delay set */
[data-delay="100"]{transition-delay:100ms !important;}
[data-delay="150"]{transition-delay:150ms !important;}
[data-delay="200"]{transition-delay:200ms !important;}
[data-delay="250"]{transition-delay:250ms !important;}
[data-delay="300"]{transition-delay:300ms !important;}
[data-delay="350"]{transition-delay:350ms !important;}
[data-delay="400"]{transition-delay:400ms !important;}
[data-delay="450"]{transition-delay:450ms !important;}
[data-delay="500"]{transition-delay:500ms !important;}
[data-delay="550"]{transition-delay:550ms !important;}
[data-delay="600"]{transition-delay:600ms !important;}
[data-delay="650"]{transition-delay:650ms !important;}

/* header mob menu style */
[data-util="menu"] {display: none;}
[data-util="menu"] {position: absolute; top: 50%; right: 30rem; width: 50rem; height: 50rem; background: var(--color-point); border-radius: 100%; transition: all 0.3s ease 0s; transform: translateY(-50%); z-index: 100;}
[data-util="menu"] span{position: relative; display: block; top: 50%; width: 19rem; height: 14rem; margin: 0 auto; transform: translateY(-50%);}
[data-util="menu"] span i,
[data-util="menu"] span:before,
[data-util="menu"] span:after{display:block; position:absolute; height:2rem; background: #fff; transform:rotate(0);}
[data-util="menu"] span:before,
[data-util="menu"] span:after{content:''; width:19rem;}
[data-util="menu"] span:before{right:0; top:0; transition:0.5s ease 0s;}
[data-util="menu"] span:after{left:0; bottom:0; transition:0.5s ease 0s;}
[data-util="menu"] span i{opacity:1; left:0; top:6rem; width:19rem; transition:opacity var(--trans-ani), transform 0.5s ease 1.1s;}
[data-util="menu"].active span i,
[data-util="menu"].active span:before,
[data-util="menu"].active span:after{background: #fff;}
[data-util="menu"].active i{opacity:0;}
[data-util="menu"].active span:before{right:0; top:6rem; transform:rotate(45deg);}
[data-util="menu"].active span:after{left:0; bottom:6rem; transform:rotate(-45deg);} 
[data-util="menu_pc"] {position: relative; display: block; width: 72rem; height: 72rem; border-radius: 100%; background: #f15929; z-index: 9;}
[data-util="menu_pc"] span {position: absolute; top: 50%; left: 50%; background: url('../images/common/ic-menu.svg') no-repeat; width: 23rem; height: 15rem; transform: translate(-50%, -50%);}
[data-util="menu_close"] {position: absolute; top: 30rem; right: 45rem; width: 50rem; height: 50rem;}
[data-util="menu_close"] span {position: relative; top: 50%; left: 50%; display: block; width: 35rem; height: 35rem; transform: translate(-50%, -50%);}
[data-util="menu_close"] span::before {content: ''; position: absolute; top: 50%; left: 50%; width: 100%; height: 2rem; background: #fff; transform: translate(-50%, -50%) rotate(45deg);}
[data-util="menu_close"] span::after {content: ''; position: absolute; top: 50%; left: 50%; width: 100%; height: 2rem; background: #fff; transform:translate(-50%, -50%)  rotate(-45deg);}

/* full menu */
.fullMenu {opacity: 0; visibility: hidden; position: fixed; top: 0; left: 0; width: 100%; height: 0; transition:all 0.5s ease; z-index: 1001;}
.fullMenu [data-full="menu-wrap"]{display: flex; align-items: center; height: 100%; padding: 0 200rem;}
.fullMenu [data-full="menu"] {display: grid; grid-template-columns: repeat(4,1fr); width: 100%;}
.fullMenu [data-full="menu"] *{color: #fff;}
.fullMenu [data-full="menu"] > li {position:relative; box-sizing: border-box; transition:all 0.4s ease; text-align: center;}
.fullMenu [data-full="menu"] > li > a{position:relative; margin-bottom: 40rem; font-size: 35rem; display:block; padding:0; font-weight:600; transition: all .3s;}
.fullMenu [data-full="menu"] > li > a > span{word-break:keep-all;}
.fullMenu [data-full="menu"] > li .box > ul > li:nth-child(n+2) {padding-top: 25rem;}
.fullMenu [data-full="menu"] > li .box > ul a{display:block; box-sizing: border-box; white-space:nowrap; word-break:break-word; transition:all 0.3s ease;}
.fullMenu [data-full="menu"] > li .box > ul li a span{font-size: 16rem; font-weight: 400; color: #fff; transition:all 0.3s ease;}
.fullMenu [data-full="menu"] > li .box > ul > li > a {opacity: .4;}
.fullMenu [data-full="menu"] > li .box > ul > li > a:hover {opacity: 1;}
.fullMenu [data-full="menu"] > li .box > ul > li > a span {font-size: 19rem; font-weight: 400;}
.fullMenu [data-full="menu"] > li .box > ul > li > a i {display: none;}
.fullMenu [data-full="menu"] > li .box > ul li div > ul {margin: 15rem 0;}
.fullMenu [data-full="menu"] > li .box > ul li div > ul > li {position: relative; padding-left: 15rem;}
.fullMenu [data-full="menu"] > li .box > ul li div > ul > li::before {content: ''; position: absolute; top: 8rem; left: 0; width: 3rem; height: 3rem; background: var(--color-white);}
.fullMenu [data-full="menu"] > li .box > ul li div > ul > li:nth-child(n+2) {margin-top: 10rem;}
.fullMenu.open{opacity: 1; visibility: visible; height: 100vh; background-color: rgba(0, 0, 0, 0.7); backdrop-filter: blur(15px);}

#header {position: fixed; top: 0; left: 0; width: 100%; height: 110rem; background: #fff; z-index: 9;}
#header .head-box {display: flex; align-items: center; max-width: 1840rem; height: 100%; margin: 0 auto; padding: 0 30rem;}
#header .gnb_area {display: flex; align-items: center; justify-content: space-between; width: 100%;}
#header .logo a {display: flex; align-items: center;}
#header .logo span {line-height: 0;}
#header .logo img {height: 42rem;}
#header .logo span:nth-child(2) {margin-left: 26rem; margin-top: 5rem;}
#header .gnb {display: flex; gap: 90rem; height: 110rem; margin-left: 340rem;}
#header .gnb > li {position: relative;}
#header .gnb > li > a {display: flex; align-items: center; font-size: 20rem; font-weight: 600; height: 100%;}

.scroll-top {display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 15rem; font-weight: 700; color: #888;}
.scroll-top.sub {display: none;}
body.sub .scroll-top {display: none;}
body.sub .scroll-top.sub {display: flex;}
.scroll-top i {display: block; text-align: center; margin-bottom: 3rem;}
.scroll-top i img {transform: rotate(-90deg); height: 15rem;}
.scroll-top__ft {display: none;}
.scroll-top__ft .scroll-top {width: 80rem; height: 80rem; background: #151515;}

/* 2) 폰트설정 */
body{font-size:var(--font-base, 16rem);}
@media (min-width:1921px){
	html{font-size:0.052vw /* 1px */;}
}
@media (max-width:1780px) {
	#header .gnb {margin-left: 0;}
}
@media (max-width:1500px){
	html{font-size:0.067vw /* 1px */;}
}
@media all and (min-width:1300px){
	/* header pc */
	#header nav .gnb > li > .box {display:none; position:absolute; opacity:0; visibility:hidden; left: 50%; transform: translateX(-50%); width:160%; padding: 20rem; background:#fff; box-shadow:15rem 20rem 29rem 0rem rgba(0, 0, 0, 0.23); transition:all 0.4s ease-out; transition-property:opacity, top, visibility; transition-delay:0s, 0s, 0s;}
	#header nav .gnb > li > .box.active {display:block; transition-delay:0.1s;}
	#header nav .gnb > li.active > .box {opacity:1; visibility:visible; top: 110rem; z-index:10; transition-delay:0s, 0s, 0s;}
	#header nav .gnb > li ul > li > a {display:block; position:relative; padding: 7rem 0rem; background:#fff; font-size:16rem; color: #999; text-align:center; transition:all 0.3s ease 0s;}
	#header nav .gnb > li ul > li > a:hover{color: var(--color-point); font-weight: 500;}
	#header nav .gnb > li ul > li > a i {display: none;}
    #header nav .gnb > li > a::before {content: ''; position: absolute; left: 50%; bottom: 0; width: 90rem; height: 3rem; margin-left: -45rem; background: var(--color-point); transform: scaleX(0); transition: transform 250ms ease-in-out; z-index: 99;}
    #header nav .gnb > li > a:hover::before {transform: scaleX(1);}
	#header nav .gnb > li > a.on::before {transform: scaleX(1);}
    #header .gnb > li:nth-child(4) .box {display: none !important;}
}
@media (max-width:1300px){
    html{font-size:0.077vw /* 1px */;}

    #header {height: 90rem;}
    #header .logo img {height: 38rem;}
    #header .logo span:nth-child(2) {margin-top: 10rem; margin-left: 18rem;}

	/* header mob menu block */
	[data-util="menu"] {display:block;}
	#header .head-box.active {padding: 0 30rem; transition: all .5s;}
	#header nav {position: fixed; top:90rem; right: -100%; z-index:99; width: 400rem; height: calc(var(--vh, 1vh) * 100); margin:0; background: var(--color-white); border-top: 1rem solid #e8e8e8; transition:all 0.6s ease-out 0s;}
	#header nav.active {right:0rem; background: #fff; transition:all 0.6s ease-out 0s; display: unset;}
	#header nav.active .btn_menu {position: fixed;}
    #header nav .gnb{display: block; position: absolute; left: 0; top: 100rem; width: 100%; box-sizing: border-box; padding: 0 30rem;}
	#header nav .gnb > li {display:block; position: relative;}
	#header nav .gnb > li:nth-child(n+2) {margin-top: 15rem;}
	#header nav .gnb > li {padding:0; height: auto;}
	#header nav .gnb > li > a {position: relative; display: block; line-height:1; height: auto; padding: 15rem 0; font-size: 26rem; color: #111; text-align:left;  font-weight: 600; transition:all 0.3s ease 0s;}
	#header nav .gnb > li > a::before {content: ''; position: absolute; top: 50%; transform: translateY(-50%); right: 0; background: url('../images/main/ic-menu__arrow.svg') no-repeat; width: 20rem; height: 14rem;}
	#header nav .gnb > li > a.active {opacity: 1;}
	#header nav .gnb > li > a.active::before {transform: translateY(-50%) rotate(180deg);}
	#header nav .gnb > li > .box {display: none; padding: 0rem 0 12rem; margin-top: 10rem;}
	#header nav .gnb > li ul > li > a {display: block; text-align: left; font-size: 18rem; color: #666; font-weight: 400;}
	#header nav .gnb > li ul > li:nth-child(n+2) > a {padding-top: 17rem;}
	#header nav .gnb > li ul > li > a i {display: none;}

	.fullMenu {display: none;}
	[data-util="menu_pc"] {display: none;}

    .nav-bg {position: fixed; top: 90rem; right: -100%; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); transition:all 0.5s ease-out 0s;}
    .nav-bg.active {right: 0; transition:all 0.5s ease-out 0s;} 

    .area-quick ul li:last-child {display: none;}
    .scroll-top__ft {display: block;}
}
@media (max-width:1024px){
    html{font-size:0.098vw /* 1px */;}
}
@media (max-width:768px){
    html{font-size:0.130vw /* 1px */;}
}
@media (max-width:620px){
    html{font-size:0.161vw /* 1px */;}

    #header {height: 80rem;}
    #header .head-box {padding: 0 20rem;}
    #header .logo img {height: 30rem;}
    #header .logo span:nth-child(2) {margin-top: 4rem; margin-left: 15rem;}
    #header nav {top: 80rem;}
    .nav-bg {top: 80rem;}

    [data-util="menu"] {right: 20rem;}
    .scroll-top__ft {display: block; margin-left: auto;}
}
@media (max-width:540px){
    html{font-size:0.201vw /* 1px */;}	
    #header .logo img {height: 28rem;}
}

/* 3) 레이아웃설정 */

/* width */
[data-width] {margin: 0 auto; padding: 0 120rem;}
[data-width="1610"] {max-width: 1610rem;}
[data-width="1200"] {max-width: 1200rem;}

/* quick menu */
.area-quick {position: fixed; top: 50%; right: 40rem; width: 102rem; padding: 15rem 10rem; border-radius: 100rem; box-sizing: border-box; background: #fff; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; z-index: 9; transform: translateY(-50%);}
.area-quick span {display: flex; align-items: center; justify-content: center; width: 72rem; height: 72rem; margin: 0 auto; border: 1rem solid #fac1ae; background: #fff5f2; border-radius: 100%; font-size: 14rem; font-weight: 600; color: #f15929;}
.area-quick span i {display: none;}
.area-quick p {padding-top: 12rem; font-size: 13rem; font-weight: 500;}
.area-quick p br {display: none;}
.area-quick ul {padding: 18rem 0 23rem;}
.area-quick ul li a {display: flex; justify-content: center; align-items: center; flex-direction: column;}
.area-quick ul li img {max-height: 30rem;}
.area-quick ul li:nth-child(n+2) {padding-top: 12rem; margin-top: 12rem; border-top: 1rem solid #f0f0f0;}
.area-quick ul li:last-child {padding-top: 25rem;}

/* footer */
#footer {background: #1b1b1b; z-index: 8;}
#footer .ft-inr {padding: 80rem 0;}
#footer .ft-link ul {display: flex; gap: 40rem;}
#footer .ft-link ul li a {font-size: 18rem; font-weight: 500; color: #dddeee;}
#footer .ft-info {display: flex; justify-content: space-between; padding-top: 62rem; margin-top: 62rem; border-top: 1rem solid rgba(255,255,255,.1);}
#footer .ft-info__rt {display: flex; flex-direction: column; align-items: end; gap: 38rem;}
#footer .ft-logo img {height: 50rem;}
#footer .family-site select {width: 230rem; height: 53rem; padding: 0 20rem; background: #151515 url(../../images/common/ic-arrow-down.svg) no-repeat calc(100% - 20rem) 50%; background-size: 10rem 6rem; border: 0; color: rgba(255,255,255,.8);}
#footer .family-site select option {color: #fff;}
#footer .family-logo {display: flex; gap: 7rem;}
#footer .family-logo a {display: block; width: 100%; height: 100%;} 
#footer address {padding-top: 28rem;}
#footer address span {padding-right: 20rem; font-size: 16rem; font-weight: 300; color: #bbbbbb; line-height: 1.8;}
#footer address .site-name {font-weight: 500; color: #57585a;}
#footer p.copy {padding-top: 50rem; font-size: 13rem; color: #666;}

@media (max-width:1300px) {
    [data-width] {padding: 0 40rem;}
    #footer address span {display: block;}
    #footer address br {display: none;}

    /* .area-quick {position: absolute; top: unset; bottom: 15rem; left: 0; right: unset; width: 100%; padding: 20rem; border-radius: 0; box-shadow: none;}
    .area-quick ul {display: grid; grid-template-columns: repeat(3, 1fr); padding: 20rem 0 0;}
    .area-quick ul li:nth-child(n+2) {padding-top: 0; margin-top: 0; border-top: 0; border-left: 1rem solid #eee;}
    .area-quick span {width: 100%; height: 40rem; border-radius: 0;} */

    .area-quick {right: -85rem; width: 85rem; border-radius: 10rem 0 0 10rem; transition: all .3s;}
    .area-quick span {display: flex; gap: 8rem; align-items: center; justify-content: center; position: absolute; top: 45%; left: -66rem; width: 92rem; height: 39rem; border-radius: 0 0 5rem 5rem; border-top: 0; transform: rotate(90deg);}
    .area-quick span i {display: inline-block; height: 6rem;}
    .area-quick span i img {height: 100%;}
    .area-quick p {text-align: center;}
    .area-quick p br {display: block;}
    .area-quick.active {right: 0; transition: all .3s;}
    .area-quick.active i {transform: rotate(180deg);}
}
@media (max-width:1024px) {
    #footer .ft-logo img {height: 40rem;}
    #footer .ft-info {margin-top: 40rem; padding-top: 40rem;}
    #footer .family-logo {flex-direction: column;}
}
@media (max-width:768px) {
    #footer .ft-inr {padding: 65rem 0;}
}
@media (max-width:620px) {
    [data-width] {padding: 0 20rem;}
    #footer .ft-info {flex-direction: column;}
    #footer .ft-info__rt {align-items: start; gap: 20rem;}
    #footer .ft-link ul {gap: 30rem;}
    #footer .ft-link ul li a {font-size: 17rem;}
    #footer p.copy {padding-top: 30rem;}
    #footer .family-logo {flex-direction: unset; width: 100%;}
    #footer .family-logo li {width: calc(100% / 3);}
    #footer .family-logo li a img {width: 100%;}
    #footer .ft-info__rt {margin-top: 50rem;}
    #footer address span {padding-right: 0; line-height: 1.4;}
    #footer address span:nth-child(n+2) {padding-top: 5rem;}
}
@media (max-width:540px) {
    #footer .family-logo img {width: 100%;}
    #footer address span {font-size: 15rem;}
}