@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{
	--height-full: 100vh;
	--color-base:#222; /* 선언이 안되면 #333 기본컬러로 적용됨 */
	--color-point:#1e64c8;
	--color-white:#fff;
	--color-black:#111;
	--font-base:20rem;
	--font-play:'Playfair Display', Sans-serif;
}

/* 2) 폰트설정 */
body {line-height: 1.4; font-size:var(--font-base, 16rem); font-weight: 300;}
@media (min-width:1921px){
	html{font-size:0.052vw /* 1px */;}
}
@media (max-width:1500px){
	html{font-size:0.067vw /* 1px */;}
}
@media (max-width:1300px){
    html{font-size:0.077vw /* 1px */;}
}
@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 */;}
}
@media (max-width:480px){
    html{font-size:0.271vw /* 1.3px */;}	
	body {line-height: 1.3; font-size: 17rem;}
}


/* 3) 레이아웃설정 */
/* common */
.wrap {position: relative; width: 1520rem; margin: 0 auto;}
/* #content .wrap {overflow: hidden; } */
.font-play {font-family: var(--font-play); font-weight: 400;}

[data-flex] {display: flex;}
[data-flex="center"] {justify-content: center; align-items: center;}

[data-colum] {display: grid; gap:60rem 40rem;}
[data-colum="2"] {grid-template-columns: repeat(2, 1fr);}
[data-colum="3"] {grid-template-columns: repeat(3, 1fr);}
[data-colum="4"] {grid-template-columns: repeat(4, 1fr);}

/* animation */
@keyframes visualScale{
	0%{transform:scale(1.13);}
	100%{transform:scale(1);}
}

@keyframes visual_text_motion {
	from {opacity:0; -webkit-transform: translateY(50rem); transform: translateY(50rem); }
	to {opacity:1; -webkit-transform: translateY(0); transform: translateY(0);}
}

@media (max-width:1600px){
	.wrap {width: auto; margin: 0 50rem;}
}

@media (max-width:1023px){
	.wrap {margin: 0 30rem;}
}

@media (max-width:540px){
	.wrap {margin: 0 20rem;}
}

/* animation */
[data-motion] {opacity: 0; transition: 1.5s;}
[data-motion].active {opacity: 1 !important; transform:translate(0, 0) !important;}
[data-motion="fade-right"] {transform: translate(-80rem, 0);}
[data-motion="fade-left"] {transform: translate(80rem, 0);}
[data-motion="fade-up"] {transform: translate(0, 80rem);}

@media (max-width:620px){
    [data-motion="fade-right"],
    [data-motion="fade-left"] {transform: translate(0, 80rem);}
}

/* header */
#header {z-index: 9; position: absolute; left:0; top:0; width: 100%; height: 100rem; transition: .3s;}
#header .logo {position: absolute; left:0; top: 24rem;}
#header .logo a {display: flex; align-items:center;}
#header .logo a:before {display: inline-block; content:''; width: 129rem; height: 70rem; margin-right: 25rem; background-image: url(/images/common/logo_w.svg); background-repeat: no-repeat; background-size: contain; background-position: 50% 50%; transition: .3s;}
#header .logo a span {display: inline-flex; align-items:center; min-height:45rem; padding-left:25rem; line-height:1.5cap; border-left:1rem solid rgba(255,255,255,0.3); font-size: 18rem; font-weight: 500; color: #fff; transition: .3s;}

#header nav {position: absolute; right: 0; top: 30rem;}
#header .gnb > li {position: relative; display: inline-block;}
#header .gnb > li > a {display: block; margin: 0 37rem; padding: 20rem 0; font-size: 20rem; font-weight: 500; color: #fff;}

.fixed #header {background: #fff; box-shadow: 5rem 5rem 10rem rgba(0, 0, 0, .05);}
.fixed #header .logo a::before {background-image: url(/images/common/logo.svg);}
.fixed #header .logo a span {color: var(--color-point); border-color: var(--color-point);}
.fixed #header nav {top: 30rem;}
.fixed #header .gnb > li > a {color: var(--color-black);}

#header .btn-menu {display:none;}
#header .btn-menu{position:absolute; top:50rem; right:0; z-index:9999; width:27rem; height:17rem; font-size:0rem; transition:all 0.3s ease 0s;}
#header .btn-menu > span{display:block; position:absolute; left:0rem; width:100%; height:2rem; background:#fff;}
#header .btn-menu > span:nth-of-type(1){top:0;}
#header .btn-menu > span:nth-of-type(2){top:50%; transition:background 0.3s ease 0s;}
#header .btn-menu > span:nth-of-type(3){top:100%;}
#header .btn-menu > span:nth-of-type(1),
#header .btn-menu > span:nth-of-type(3){transition:all 0.3s ease; transition-property:top, transform; transition-delay:0.3s, 0s;}
#header .btn-menu.active {position:fixed; right: 50rem; top:65rem; transform:rotate(180deg);}
#header .btn-menu.active > span {background: #000;}
#header .btn-menu.active > span:nth-of-type(1){top:10rem; transform:rotate(-45deg);}
#header .btn-menu.active > span:nth-of-type(2){background:transparent;}
#header .btn-menu.active > span:nth-of-type(3){top:10rem; transform:rotate(45deg);}
#header .btn-menu.active > span:nth-of-type(1),
#header .btn-menu.active > span:nth-of-type(3){transition-delay:0s, 0.3s;}
#header .btn-close{position:fixed; opacity:0; visibility:hidden; top:0rem; left:0rem; z-index:99; width:-webkit-calc(100% - 320rem); width:100%; height:-webkit-calc(100vh - -0rem * 1); height:calc(100vh - -0rem * 1); background:#000; font-size:0; transition:all 0.3s ease-out 0s;}
.active #header .btn-close{opacity:0.5; visibility:visible;}

@media all and (min-width:1024px){
	#header nav .gnb > li .box{display:none; position:absolute; opacity:0; visibility:hidden; left: 50%; top:30rem; width:100%; padding:15rem 10rem; background:#fff; border-radius: 12rem; box-shadow:15rem 20rem 29rem 0rem rgba(0, 0, 0, 0.23); transform:translateX(-50%); 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:60rem; z-index:10; transition-delay:0s, 0s, 0s;}
	#header nav .gnb > li .box > ul > li > a{display:block; position:relative; padding:5rem 0rem; background:#fff; font-size:18rem; font-weight: 500; color: #444; text-align:center; transition:all 0.3s ease 0s;}
	#header nav .gnb > li .box ul > li > a:hover{opacity:0.5;}
	#header nav .gnb > li .box ul > li:first-child > a{border-top-width:0px;}
}

@media (max-width:1023px){
	#header .btn-menu {display:block;}

	#header nav {display: block; position: fixed; top: 0; right: 0; width: 80%; max-width: 50%; height: 100%; padding: 20rem; box-sizing: border-box; transform: translateX(101%); z-index: 998;}
	#header nav.active {transform: translateX(0); transition: all 0.5s ease-out 0s;}
	#header nav .gnb {height: 100%; padding: 30rem; padding-top: 100rem; border-radius: 30rem; background:#fff; box-sizing: border-box;}
	#header nav .gnb > li {display: block; padding: 0; margin-top: 0; text-align: left;}
	#header nav .gnb > li > a {position: relative; display: flex; align-items: center; margin: 0; padding: 25rem 0; line-height: 1; font-size: 27rem; font-weight: 600; color: var(--color-black); border-bottom: 1px solid #efefef;}
	#header nav .gnb > li > a.active {border-bottom: 2px solid #444;}
	#header nav .gnb > li > .box {display: none; padding: 20rem 0; border-bottom: 1px solid #efefef;}
	#header nav .gnb > li > .box a {display: block; padding: 8rem 0; color: #888;}
	#header nav .gnb > li:has(.box) > a::before {position: absolute; right: 0; top: 22rem; content:''; display: block; width: 30rem; height: 30rem;}
	#header nav .gnb > li:has(.box) > a::after {position: absolute; right: 0; top: 22rem; content:''; display: block; width: 30rem; height: 30rem; background: url(/images/common/ic-dropdown.svg) no-repeat center / 12rem;}
	#header nav .gnb > li:has(.box) > a.active i {border-color: var(--color-point); transform: rotate(90deg) scaleX(-1);}
	#header nav .gnb > li:has(.box) > a.active i::after {background-image: url(/images/common/ic-arrow-color.svg); opacity: 1;}

	#header nav h1 {position: absolute; left: 50rem; top: 60rem; display: flex; align-items: center; line-height: 1; font-size: 28rem; color: var(--color-point);}
	#header nav h1::before {content:''; display: block; width: 32rem; height: 32rem; margin-top: -5rem; margin-right: 12rem; background: url(/images/common/symbole.svg) no-repeat center / contain;}
	#header .gnb-sns {position: absolute; left: 0; bottom: 60rem; display: flex; align-items: center; justify-content: center; width: 100%;}
	#header .gnb-sns li {margin: 0 5rem;}
	#header .gnb-sns li a { display: flex; align-items: center; justify-content: center; width: 40rem; height: 40rem; border-radius: 8rem; background: #f5f5f5;}
	#header .gnb-sns li a img {height: 17rem; filter: invert(1); opacity: .2; transition: .3s;}
	#header .gnb-sns li a:hover img {opacity: .8;}
}

@media (max-width:768px){
	#header nav {max-width: none; width: 100%; background:#0d2144;}
	#header nav .gnb {border-radius: 20rem;}
}

@media (max-width:480px){
	#header .logo a::before {width: 80rem; height: 48rem; margin-right: 12rem;}
	#header .logo a span {padding: 6rem 10rem 5rem; font-size: 15rem;}
	#header .btn-menu {top: 42rem; width: 25rem; height: 15rem;}

	#header nav {padding: 10rem;}
	#header nav h1 {left: 30rem; top: 45rem; font-size: 21rem;}
	#header nav h1::before {width: 25rem; height: 25rem;}
	#header nav .gnb {padding: 20rem; padding-top: 80rem; border-radius: 12rem;}
	#header nav .gnb > li > a {padding: 20rem 0; font-size: 21rem;}
	#header nav .gnb > li:has(.box) > a::before {top: 16rem;}
	#header nav .gnb > li:has(.box) > a::after {top: 16rem; background-size: 10rem;}
	#header .gnb-sns {bottom: 40rem;}
	#header .gnb-sns li {margin: 0 3rem;}
	#header .gnb-sns li a {width: 35rem; height: 35rem; border-radius: 5rem;}
	#header .gnb-sns li a img {height: 15rem;}

	#header .btn-menu.active {right: 30rem; top: 52rem;}
}

/* footer */
#footer {padding: 60rem 0; font-size: 16rem; background: #16171a;}
#footer .wrap {display: flex; align-items: flex-start;}
.footer-logo {display: inline-block; margin-top: -20rem; margin-right: 78rem;}
.footer-logo img {height: 50rem;}
.footer-info h6 {line-height: 1.4; font-size: 18rem; font-weight: 300; color: #fff;}
.footer-info h6 strong {font-weight: 600;}
.footer-info p {margin-top: 8rem; color: #666;}
.footer-info p.copy {margin-top: 30rem;}
.footer-nav {margin-left: auto;}
.footer-nav .gnb {display: flex; align-items: flex-start;}
.footer-nav .gnb > li {margin-left: 40rem;}
.footer-nav .gnb > li > a {display: inline-block; margin-bottom: 5rem; font-size: 17rem; font-weight: 600; color: #fff;}
.footer-nav .gnb .box li {margin-bottom: 5rem;}
.footer-nav .gnb .box a {color: #666;}
.footer-family {position: relative; margin-top: -14rem; margin-left: 55rem;}
.footer-family p {position: relative; min-width: 165rem; padding: 15rem 0; font-size: 16rem; color: #fff; border-bottom: 2rem solid #fff; cursor: pointer;}
.footer-family p::after {position: absolute; right: 8rem; top: 23rem; content:''; width: 7rem; height: 5rem; background: url(/images/common/ic-dropdown.svg) no-repeat center / cover; filter: invert(1);}
.footer-family__list { overflow: hidden; opacity: 0; visibility: hidden; position: absolute; left:0; bottom: 55rem; width: 100%; height: 0; background: #fff; transition: .3s;}
.footer-family__list ul {opacity: 0; visibility: hidden; padding: 10rem 0;}
.footer-family__list ul a {display: block; padding: 5rem 10rem; color: #888;}
.footer-family__list.active {opacity: 1; visibility: visible; height: auto; box-shadow: 5rem 5rem 10rem rgba(0, 0, 0, .1);}
.footer-family__list.active ul {opacity: 1; visibility: visible;}

.footer-sns {position: absolute; right: 0; bottom: 0; display: flex; align-items: center;}
.footer-sns li {margin-left: 5rem;}
.footer-sns li a {display: flex; align-items: center; justify-content: center; width: 30rem; height: 30rem; border: 0px solid #fff; background: #282b31; box-sizing: border-box;}
.footer-sns li a:hover {border-width: 1px;}
.footer-sns li a img {height: 13rem;}

@media (max-width:1300px){
	.footer-logo {margin-right: 50rem;}
}

@media (max-width:1023px){
	.footer-nav {display: none;}
	.footer-family {margin-left: auto;}
}

@media (max-width:768px){
	#footer {padding: 30rem 0 50rem;}
	#footer .wrap {padding-top: 75rem;}
	.footer-logo {position: absolute; left: 0; top: 0; margin-top: 0; margin-right: 0;}
}

@media (max-width:540px){
	#footer {padding: 50rem 0;}
	#footer .wrap {flex-direction: column;}
	.footer-family {width: 50%; margin-left: 0; margin-top: 30rem;}
	.footer-family p {min-width: auto; width: 100%;}
}

@media (max-width:480px){
	.footer-info p.copy {margin-top: 15rem;}
	.footer-family {width: 100%;}
	.footer-sns {display: none;}
}