@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) 레이아웃설정
 *
 */

html, body {overflow-x: hidden; position: relative;}

/* 1) root 설정  */
:root{
	--inr:1500;
	--inr-1600:1600;
	--inr-width: .92;
	--color-base:#111; /* 선언이 안되면 #333 기본컬러로 적용됨 */
	--color-white:#fff;
	--color-black:#000;
	--font-base:16rem;
	--font-eng:'Playfair Display', serif;;
	--font-serif:'Noto Serif KR', serif;;
}

/* inner */
.inr {position: relative; margin: 0 auto; max-width: calc(var(--inr) * 1rem); width: calc(var(--inr-width) * 100%);}
.inr-1600 {max-width: calc(var(--inr-1600) * 1rem);}

/* header mob menu style */
[data-util="menu"] {display: none;}
[data-util="menu"] {position: absolute; top: 50%; right: 30rem; width: 50rem; height: 50rem; 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: 17rem; 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:3rem; background: #000; 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:7rem; 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: #000;}
[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:8rem; transform:rotate(-45deg);} 

[data-util="menu_pc"] {display: block; width: 50rem; height: 50rem; z-index: 9;}
[data-util="menu_pc"] span {position: relative; display: block; top: 50%; width: 35rem; height: 25rem; margin: 0 auto; transform: translateY(-50%);}
[data-util="menu_pc"] span i,
[data-util="menu_pc"] span:before,
[data-util="menu_pc"] span:after{display:block; position:absolute; height:1rem; background: #000;}
[data-util="menu_pc"] span:before,
[data-util="menu_pc"] span:after{content:''; width: 100%;}
[data-util="menu_pc"] span:before{right:0; top:0;}
[data-util="menu_pc"] span:after{left:0; bottom:0;}
[data-util="menu_pc"] span i {display: block; left:0; top:50%; width: 100%; height: 1rem; background: #000; transform: translateY(-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: 1rem; background: #fff; transform: translate(-50%, -50%) rotate(45deg);}
[data-util="menu_close"] span::after {content: ''; position: absolute; top: 50%; left: 50%; width: 100%; height: 1rem; background: #fff; transform:translate(-50%, -50%)  rotate(-45deg);}


/* header style */
#header {position: absolute; top: 0; left: 0; width: 100%; height: 100rem; background: #f2f4ef; z-index: 9;}
#header.fixed {position: fixed; top: 0; left: 0; }
#header.fixed .head-box {padding: 0 30rem;}
#header .head-box {display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0 100rem; transition: all .5s;}
#header h1.logo {font-size: 0;}
#header h1.logo img {height: 37rem;}
#header .gnb {display: flex;}
#header .gnb > li {position: relative;}
#header .gnb > li > a {position: relative; display: flex; align-items: center; height: 100rem; padding: 0 43rem; font-size: 18rem; font-weight: 600;}

/* full menu */
.fullMenu {opacity: 0; visibility: hidden; position: fixed; top: 0; left: 0; width: 100%; height: calc(var(--vh, 1vh) * 100); background: #252f23; transition:all 0.5s ease; z-index: 1001;}
.fullMenu::before {content: ''; position: absolute; top: 0; left: 0; background: url('../images/common/full-menu__img.jpg') no-repeat center/cover; width: 28%; height: 100vh;}
.fullMenu::after {content: 'Bareumi'; position: absolute; bottom: 0; right: 0; font-size: 240rem; font-family: var(--font-eng); color: #fff; opacity: .02; line-height: 1;}

.fullMenu [data-full="menu-wrap"]{display: flex; align-items: center; height: 100%; margin-left: 31%;}
.fullMenu [data-full="menu"] *{color: #fff;}
.fullMenu [data-full="menu"] > li {position:relative; box-sizing: border-box; transition:all 0.4s ease;}
.fullMenu [data-full="menu"] > li:nth-child(n+2) {margin-top: 42rem;} 
.fullMenu [data-full="menu"] > li > a{position:relative; margin-bottom: 20rem; 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 {display: flex;}
.fullMenu [data-full="menu"] > li .box > ul > li:nth-child(n+2) {padding-left: 30rem;}
.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: .2; transition: all .5s;}
.fullMenu [data-full="menu"] > li .box > ul > li > a:hover {opacity: 1; transition: all .5s;}
.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.oepn{opacity: 1; visibility: visible;}

/* footer */
#footer {padding: 62rem 0 72rem; background: #323232;}
#footer .ft-wrap {display: flex; justify-content: space-between; max-width: 1400rem; margin: 0 auto; padding: 0 30rem;}
#footer .ft-inr {display: flex; width: 94%;}
#footer .ft-logo {flex: none;}
#footer .ft-info {margin-left: 10%;}
#footer .ft-info__link {display: flex;}
#footer .ft-info__link li:nth-child(n+2) {position: relative; padding: 0 0 0 22rem; margin: 0 0 0 22rem;}
#footer .ft-info__link li:nth-child(n+2)::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 1rem; height: 15rem; background: rgba(255,255,255,.2);} 
#footer .ft-info__link li a {font-size: 16rem; font-weight: 500; color: var(--color-white);}
#footer address {padding-top: 28rem; color: rgba(255,255,255,.8);}
#footer address span {font-size: 16rem; font-weight: 300;}
#footer address span:nth-child(n+2) {padding: 0 0 0 22rem;} 
#footer address span em {font-weight: 600;}
#footer p.copy {padding-top: 58rem; font-size: 16rem; font-family: var(--font-eng); color: rgba(255,255,255,.34); line-height: 1.5;}
#footer .ft-util {display: flex;}
#footer .ft-util li:nth-child(n+2) {padding-left: 22rem;}
#footer .ft-util li img {height: 20rem;}

/* 2) 폰트설정 */
body{font-size:var(--font-base, 16rem);}
.eng {font-family: var(--font-eng);}
.serif {font-family: var(--font-serif);}

/* 3) 레이아웃설정 */
@media (min-width:1921px){
	html{font-size:0.052vw /* 1px */;}
}
@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:100%; padding: 20rem; background:#fff; box-shadow:15rem 20rem 29rem 0rem rgba(0, 0, 0, 0.02); 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: 100rem; 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:left; transition:all 0.3s ease 0s;}
	#header nav .gnb > li ul > li > a:hover{color: #15360e; 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:#15360e; transform: scaleX(0); transition: transform 250ms ease-in-out;}
    #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 .head-box {height: 90rem; padding: 0 30rem 0 90rem;}

	/* header mob menu block */
	[data-util="menu"] {display:block;}
	#header .head-box.active {padding: 0 30rem; transition: all .5s;}
	#header .head-box.active .lnb .dept_list {display: none;}
	#header nav {position: fixed; top:90rem; right: -100%; z-index:99; width: 100%; height: calc(var(--vh, 1vh) * 100); margin:0; background: var(--color-white); transition:all 0.5s ease-out 0s;}
	#header nav.active {right:0rem; background: #15360e; box-shadow:-5rem 0rem 15rem rgba(0,0,0,0.1); transition:all 0.5s ease-out 0s; display: unset; z-index: 50;}
	#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 65rem;}
	#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: 20rem 0; font-size: 35rem; color: var(--color-white); 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: 24rem; color: rgba(255,255,255,.6); 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;}

	#footer .ft-inr {flex-direction: column;}
	#footer .ft-info {margin-left: 0; margin-top: 50rem;}
	#footer .ft-wrap {align-items: baseline;}
}
@media (max-width:1024px){
    html{font-size:0.098vw /* 1px */;}
}
@media (max-width:768px){
    html{font-size:0.130vw /* 1px */;}

	#footer address span {display: block;}
	#footer address span:nth-child(n+2) {padding: 7rem 0 0;}
	#footer p.copy {padding-top: 28rem;}
}
@media (max-width:620px){
    html{font-size:0.161vw /* 1px */;}

	#header {height: 70rem;}
	#header.fixed .head-box {padding: 0 20rem;}
	#header h1.logo img {height: 27rem;}
	#header .head-box {height: 70rem; padding: 0 20rem;}
	#header .head-box.active {padding: 0 20rem;}
	#header .btn_menu {right: 15rem;}
	#header nav {top: 70rem;}
	#header nav .gnb > li > a {padding: 15rem 0; font-size: 30rem;}
	#header nav .gnb > li ul > li > a {font-size: 20rem;}

	#footer .ft-wrap {flex-direction: column;}
	#footer .ft-inr {width: 100%;}
	#footer .ft-util {margin-top: 50rem;}
    #footer .ft-logo img {height: 35rem;}
    #footer .ft-info {margin-top: 40rem;}
}
@media (max-width:540px){
    html{font-size:0.240vw /* 1px */;}	

	#header {height: 60rem;}
	#header .head-box {height: 60rem;}
	#header nav {top: 60rem;}
	#header nav .gnb {top: 70rem; padding: 0 35rem;}
	#header nav .gnb > li > a {padding: 12rem 0; font-size: 25rem;}
	#header nav .gnb > li ul > li > a {font-size: 18rem;}

	#footer .ft-wrap {padding: 0 20rem;}
	#footer .ft-info__link {display: grid; grid-template-columns: 1fr 1fr; gap: 10rem;}
	#footer .ft-info__link li {border: 1rem solid rgba(255,255,255,.2); padding: 10rem !important; text-align: center;}
	#footer .ft-info__link li:nth-child(n+2) {padding: 0; margin: 0;}
	#footer .ft-info__link li:nth-child(n+2)::before {display: none;}
}