@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:#000; /* 선언이 안되면 #333 기본컬러로 적용됨 */
	--color-point:#f27010;
	--color-primary:#10a162;
	--color-white:#fff;
	--color-black:#000;
	--font-base:16rem;
	--font-hanam:'HANAMDAUM',Sans-serif;
	--font-eng:'Poppins',Sans-serif;
}

/* 2) 폰트설정 */
body{font-size:var(--font-base, 16rem);}
@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 */;}	
}

/* 3) 레이아웃설정 */
.inr {position: relative; width: 1400rem; margin: 0 auto;}
.narrow-inr {position: relative; width: 1160rem; margin: 0 auto;}
.font-hanam {font-family: var(--font-hanam); font-weight: normal;}

[data-flex] {display: flex;} 
[data-colum] {display: grid; gap:40rem 60rem;}
[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);}
}

[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:767px){
    [data-motion="fade-right"],
    [data-motion="fade-left"] {transform: translate(0, 80rem);}
}

@media (max-width:620px){
    [data-colum] {display: grid; gap:40rem 20rem;}
	[data-colum="4"] {grid-template-columns: repeat(2, 1fr);}
}

@media (max-width:500px){
    [data-colum] {display: grid; gap:40rem 20rem;}
	[data-colum="3"] {grid-template-columns: repeat(2, 1fr);}
}


/* header */
#header {position: absolute; left:0; top: 0; width: 100%; background: #fff; z-index: 99;}
#header .logo {margin-right: 50rem;}
#header .logo a {display: inline-block; width: 95rem; height: 56rem; background: url(../images/common/logo.jpg) no-repeat center / contain;}
#header .inr {display: flex; justify-content: center; align-items: center; height: 100rem;}
#header .gnb > li {position: relative; display: inline-block;}
#header .gnb > li > a {position: relative; display: block; margin: 0 50rem; padding: 20rem 0; font-size: 22rem; font-weight: 700; color: #000;}

.area-util a {margin: 0 50rem; font-weight: 700; color: #000; transition: .1s;}
.area-util a:hover {color: var(--color-point);}
.area-util img {width: 16rem; margin-top: -3rem; margin-right: 10rem; vertical-align: middle;}
.area-util a:last-child img {width: 14rem;}

#header .btn-menu {display:none;}
#header .btn-menu{position:absolute; top:30rem; 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:#000;}
#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:32rem; transform:rotate(180deg);}
#header .btn-menu.active > span {background: #fff;}
#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:var(--color-primary); border-radius: 8rem; box-shadow:5rem 5rem 20rem 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 {margin: 5rem 0;}
	#header nav .gnb > li .box > ul > li > a{display:block; position:relative; padding:5rem 0rem; font-size: 17rem; color: #fff; 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:1300px){
	.inr {width: auto; margin: 0 50rem;}

	#header .logo {margin-right: 40rem;}
	#header .gnb > li > a,
	.area-util a {margin: 0 40rem;}
}

@media (max-width:1023px){
	.narrow-inr {width: auto; margin: 0 50rem;}

	#header .btn-menu {display:block;}
	#header .logo {position: absolute; left:0; top: 50%; transform: translateY(-50%);}
	#header .logo a {width: 90rem; height: 50rem;}

	.area-util {position: absolute; right: 60rem; top: 9rem;}
	.area-util a {display: inline-block; margin: 0 20rem; padding: 20rem 0;}

	#header .inr {display: block; height: 80rem;}
	#header nav {display: block; position: fixed; top: 0; right: 0; width: 100%; max-width: 55%; height: 100%; transform: translateX(101%); background:var(--color-primary) url(../images/main/link-bg.png) no-repeat right bottom / contain;  z-index: 998;}
	#header nav.active {transform: translateX(0); transition: all 0.5s ease-out 0s;}
	#header nav .gnb {height: 100%; padding: 30rem 0; padding-top: 80rem; 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 50rem; padding: 25rem 0; line-height: 1; font-size: 30rem; font-family: var(--font-hanam); font-weight: normal; color: #fff; transition: .3s;}
	#header nav .gnb > li > a::before {opacity: 0; visibility: hidden; position: absolute; left:0; top: 34rem; content:''; width: 7rem; height: 7rem; border-radius: 100%; background: #fff;  transition: .3s; transition-delay: .1s;}
	#header nav .gnb > li > a.active {padding-left: 20rem;}
	#header nav .gnb > li > a.active::before {opacity: 1; visibility: visible;}
	#header nav .gnb > li > .box {display: none; padding:20rem 50rem; background: rgba(255, 255, 255, .1);}
	#header nav .gnb > li > .box li {margin: 10rem 0;}
	#header nav .gnb > li > .box a {opacity: .6; display: inline-block; padding: 7rem 20rem; font-size: 18rem; font-weight: 600; color: #fff; transition: .3s;}
	#header nav .gnb > li > .box a:hover {opacity: 1;}
	#header nav .gnb-util {display: none;}
}

@media (max-width:767px){
	.inr,
	.narrow-inr {margin: 0 20rem;}
}

@media (max-width:500px){
	.area-util {display: none;}
	.area-util a {position: relative; margin: 0 20rem; padding-left: 32rem; font-size: 18rem; color: #fff;}	
	.area-util a img {display: none;}
	.area-util a::before {position: absolute; left:0; top:50%; content:''; width: 18rem; height: 18rem; background-repeat: no-repeat; background-size: contain; background-position: center; transform: translateY(-50%);}

	.area-util a:first-child {margin-left: 0 !important;}
	.area-util a:first-child::before {background-image: url(../images/common/ic-header-call-w.svg);}
	.area-util a:last-child::before {background-image: url(../images/common/ic-header-link-w.svg);}

	#header nav {max-width: none;}
	#header .btn-menu.active {right: 20rem;}
	#header nav .gnb-util {position: relative; display: block; margin: 12rem 50rem;}
	#header nav .gnb-util .area-util {position: relative; right: auto; top: auto; display: block;}
}

@media (max-width:480px){
	#header .logo {top: 12rem; transform:none;}
	#header .logo a {width: 65rem; height: 37rem;}
	#header .inr {height: 60rem;}
	#header .btn-menu {top: 21rem; width: 24rem; height: 15rem;}

	#header nav .gnb {padding: 20rem 0 0;}
	#header nav .gnb-util {margin: 10rem 30rem;}
	#header nav .gnb > li > a {margin: 0 30rem; padding: 20rem 0; font-size: 24rem;}
	#header nav .gnb > li > a.active {padding-left: 14rem;}
	#header nav .gnb > li > a::before {top: 30rem; width: 4rem; height: 4rem;}
	#header nav .gnb > li > .box {padding: 12rem 30rem;}
	#header nav .gnb > li > .box a {padding: 5rem 14rem; font-size: 17rem;}

	.area-util a {margin: 0 11rem; padding-left: 27rem; font-size: 16rem;}
	.area-util a:hover {color: #fff;}
	.area-util a::before {width: 15rem; height: 15rem;}
}

/* footer */
#footer {padding: 60rem 0; background:url(../images/common/footer-bg.jpg) repeat;}
#footer address {font-size: 14rem; font-weight: 300; color: #fff;}
#footer address span {display: inline-block; margin-right: 30rem; padding: 5rem 0;}
#footer address b {margin-right: 10rem; font-weight: 600; color: #888;}
#footer .copy {display: block; margin-top: 20rem; font-size: 13rem; font-weight: 300; color: #666;}
.footer-link {position: absolute; right: 0; top: 0; display: flex; align-items: center;}
.footer-link li {margin-left: 40rem;}
.footer-link a {font-size: 15rem; font-weight: 600; color: #fff;}
.footer-link li:last-child a {color: var(--color-point);}

@media (max-width:1023px){
	#footer {padding: 40rem 0;}
	#footer .inr {display: flex; flex-direction: column;}
	.footer-link {order: 1; position: relative; right: auto; top: auto; margin-bottom: 30rem;}
	.footer-link li {margin-left: 0; margin-right: 40rem;}
	#footer address {order: 2;}
	#footer .copy {order: 3;}
}

@media (max-width:480px){
	.footer-link li {margin-right: 25rem;}
}