@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-white:#fff;
	--font-base:16rem;
    --font-point: 'ONE-Mobile-Title', '맑은 고딕', sans-serif;
    --font-pointEng: 'Nunito', sans-serif;
    --font-pointEng02 : 'Play', sans-serif;
	--size100vh:calc(var(--vh, 1vh) * 100);
}

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

/* header */
#header {position: absolute; z-index: 10; width: 100%; margin: 0 auto; border-bottom: 1rem solid rgba(255,255,255,.1); box-sizing: border-box;}
#header .head-box {display: flex; align-items: center; justify-content: space-between; width: 79%; height: 89rem; padding: 0 3%; box-sizing: border-box;}
#header h1.logo{width:180rem; height:30rem;}
#header h1.logo img {height: 30rem;}
#header h1.logo a {display:block; width:100%; height:100%; line-height: 0; background:url(../images/common/logo.svg) no-repeat 50% 50%; background-size:auto 100%; font-size:0; }
#header.active{z-index:99999;}															

#header .gnb {height:100%;} 
#header .gnb {display: flex; justify-content: center; align-items: center; height: 90rem;}
#header .gnb > li {padding: 0 35rem;}
#header .gnb > li > a {display: block; height: 90rem; line-height: 90rem; font-size: 20rem; font-weight: 600; font-family: var(--font-ko); color: var(--color-white);}

#header .gnb-title {overflow: hidden; position: absolute; top: 0; width: 380rem; height: 100%; background: #e20d82;}
#header .gnb-title::before {content: ''; position: absolute; bottom: -10rem; left: -10rem; background: url('../images/common/bg-symbol.svg') no-repeat; width: 230rem; height: 230rem; opacity: .1;}
#header .gnb-title strong {position: absolute; top: 50%; left: 50%; width: 100%; padding: 0 15rem; text-align: center; font-size: 28rem; color: #fff; font-family: var(--font-ko); transform: translate(-50%, -50%);}

#header .menu .box {z-index: 590;}
#header .menu .box {display: none; position: absolute; top: 90rem; left: 0; z-index: 100; width: 79%; padding: 38rem 0; text-align: left; border-top: 1rem solid var(--color-gray02); background-color: var(--color-white); box-shadow: 0rem 16rem 26rem -11rem rgba(0,0,0,0.11)}
#header .menu .box > ul {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20rem 30rem; width: 900rem;}
#header .menu .box > ul:after {content: ""; display: block; clear: both}

#header .sub_menu > li > a {display: block; position: relative; height: 50rem; line-height: 50rem; border: 1rem solid #ddd; font-size: 17rem; font-weight: 500; color: var(--color-black02); transition: all .3s;}
#header .sub_menu > li > a span {display: block; position: relative; margin: 0 15rem;}
#header .sub_menu > li > a span::before {content: ''; position: absolute; top: 50%; right: 0; background: url(../images/main/ct-arrow_bk.svg) no-repeat; width: 9rem; height: 14rem; transform: translateY(-50%); transition: all .3s;}
#header .sub_menu > li.on > a {border: 1rem solid #e20d82; color: #e20d82; transition: all .3s;}
#header .sub_menu > li.on > a span::before {background: url(../images/main/ct-arrow_cr.svg) no-repeat; transition: all .3s;}

#header .depth3 {padding: 23rem 15rem 0 15rem;}
#header .depth3 li:nth-child(n+2) {padding-top: 16rem;}
#header .depth3 li a {position: relative; display: block; font-size: 16rem; color: #777;}
#header .depth3 li a:hover {opacity: 1;}

/* btn_menu_pc */
#header .btn_menu_pc {display: block; position: absolute; top: 50%; right: 7rem; z-index: 9999; width: 22rem; height: 18rem; font-size: 0rem; transform: translate(-50%, -50%);}
#header .btn_menu_pc::before {content: ''; position: absolute; top: 50%; left: 50%; width: 56rem; height: 56rem; background: #e20d82; border-radius: 100%; transform: translate(-50%, -50%);} 
#header .btn_menu_pc > span {display:block; position:absolute; right:0rem; width:100%; height:2rem; background:#fff;}
#header .btn_menu_pc > span:nth-of-type(1) {top:0;}
#header .btn_menu_pc > span:nth-of-type(2) {top:50%; width: 17rem;}
#header .btn_menu_pc > span:nth-of-type(3) {top:100%;}

.none {display: none;}
body.etc #header {border-bottom: 1rem solid #f0f0f0;}
body.etc #header .gnb > li > a {color:#222;}
body.etc .trigger .line {background: #222;}
body.etc #header [data-js=mgnb] > a.sw span i, 
body.etc #header [data-js=mgnb] > a.sw span:before, 
body.etc #header [data-js=mgnb] > a.sw span:after {background: #222;}
body.etc #header [data-js=mgnb] > a.sw.active span i, 
body.etc #header [data-js=mgnb] > a.sw.active span:before, 
body.etc #header [data-js=mgnb] > a.sw.active span:after {background: #fff;}


/* mobile */
#header [data-js=mgnb] .head {display: block; position: relative; overflow: hidden; height: 90rem; background: linear-gradient(-42deg, #ec008c, #00a8e5);}
#header [data-js=mgnb] .head::before {content: ''; position: absolute; top: 50%; left: 30rem; transform: translateY(-50%); background: url('../images/common/logo-wt.svg') no-repeat; width: 146rem; height: 25rem;} 
#header [data-js=mgnb] .bind {display:none; position: fixed; right:0; top: 0; z-index: 200; width: 100%; height: 100%; background-color: var(--color-white); transition: right .2s linear 0s;}
#header [data-js=mgnb] .midd {position: relative; height: calc(100% - 86rem);}
#header [data-js=mgnb] .midd > ul {overflow: hidden; position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 0; background-color: #f8f8f8; border-radius: 1rem;  transition: all .3s ease}
#header [data-js=mgnb] .midd > ul > li[data-open=on] > a {color: #e20d82;}
#header [data-js=mgnb] .midd > ul > li[data-open=on]>a+div {display: block;}
#header [data-js=mgnb] .midd > ul > li a {display: block; font-size: 1.7rem; color: #2D2D2D }
#header [data-js=mgnb] .midd > ul > li > a {position: relative; width: 200rem; line-height: 1.2em; padding: 20rem 0; text-align: center; box-sizing: border-box; font-size: 22rem;}
#header [data-js=mgnb] .midd > ul > li:nth-child(n+2) > a {border-top: 1rem solid #ddd;}
#header [data-js=mgnb] .midd > ul > li:nth-child(6) > a {border-bottom: 1rem solid #ddd}
#header [data-js=mgnb] .midd .box {display: none; overflow-x: hidden; overflow-y: auto; position: absolute; right: 0; top: 0; width: calc(100% - 200rem); height: 100%; padding: 30rem 0 0; background-color: #fff; border-left:1rem solid #ddd; }
#header [data-js=mgnb] .midd .box .depth2 > li {margin:0 35rem; box-sizing:border-box;}
#header [data-js=mgnb] .midd .box .depth2 > li > a {position: relative; line-height: 1.4; padding: 18rem 0; font-weight: 500; font-size: 18rem; border-bottom:1rem solid #e8e8e8; }
#header [data-js=mgnb] .midd .box .depth2 > li > a.child[data-open=on] {border-bottom: 1rem solid #e20d82}
#header [data-js=mgnb] .midd .box .depth2 > li > a.child[data-open=on] span:before {transform:rotate(90deg);}
#header [data-js=mgnb] .midd .box .depth2 > li > a:hover,#root #header [data-js=mgnb] .midd .box .depth2 > li > a[data-open=on] {color: #e20d82}
#header [data-js=mgnb] .midd .box .depth2 >li > div {position: relative; margin-bottom: 10rem; background: #f9f9f9; box-sizing: border-box;}
#header [data-js=mgnb] .midd .box .depth3 li {position: relative;}
#header [data-js=mgnb] .midd .box .depth3 li a {display: block; position: relative; font-weight: 400; font-size: 17rem; color: #666;}
#header [data-js=mgnb] .midd .box .depth3 li a:hover,
#header [data-js=mgnb] .midd .box .depth3 li a[data-open=on]{color: #e20d82;}
#header [data-js=mgnb] .midd .box .depth3 li:hover > a,
#header [data-js=mgnb] .midd .box .depth3 li[data-open=on]>a{color: #e20d82;}

#header .open_bg {width: 100%; height: 100vh; position: absolute; top: 0; left: 0; background: rgba(0,0,0,.6); z-index: 200; display: none;}
body[data-mgnb=on] #header [data-js=mgnb]>.bind {right: 0; transition: right .2s linear .2s; display:block;}
body[data-mgnb=on] #header [data-js=mgnb]:before {opacity: 1; left: 0; }

.area-fullMenu {opacity: 0; visibility: hidden; position: fixed; top: 0; left: 0; width: 100%; height: calc(var(--vh, 1vh) * 100); background: linear-gradient(-42deg, #ec008c, #00a8e5);; transition:all 0.5s ease; z-index: 1001;}

.area-fullMenu [data-full="menu-wrap"]{display: flex; align-items: center; justify-content: left; height: 100%;}
.area-fullMenu [data-full="menu"]{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; width: 100%; height: 100%;}
.area-fullMenu [data-full="menu"] *{color: #fff;}
.area-fullMenu [data-full="menu"] > li {position:relative; padding: 230rem 30rem 0; box-sizing: border-box; transition:all 0.4s ease;}
.area-fullMenu [data-full="menu"] > li:hover {background: rgba(255,255,255,.1);}
.area-fullMenu [data-full="menu"] > li:nth-child(n+2) {border-left: 1rem solid rgba(255,255,255,.1);}
.area-fullMenu [data-full="menu"] > li > a{position:relative; margin-bottom: 38rem; font-size: 30rem; display:block;padding:0;font-weight:600;  transition: all .3s;}
.area-fullMenu [data-full="menu"] > li > a > span{word-break:keep-all;}

.area-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;}
.area-fullMenu [data-full="menu"] > li .box > ul li a span{font-size: 16rem; font-weight: 400; color: #fff; transition:all 0.3s ease;}
.area-fullMenu [data-full="menu"] > li .box > ul > li:nth-child(n+2) {padding-top: 20rem;}
.area-fullMenu [data-full="menu"] > li .box > ul > li > a span {font-size: 20rem; font-weight: 500;}
.area-fullMenu [data-full="menu"] > li .box > ul li div > ul {margin: 15rem 0;}
.area-fullMenu [data-full="menu"] > li .box > ul li div > ul > li {position: relative; padding-left: 15rem;}
.area-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);}
.area-fullMenu [data-full="menu"] > li .box > ul li div > ul > li:nth-child(n+2) {margin-top: 10rem;}

.area-fullMenu.oepn{opacity: 1; visibility: visible;}

.trigger {position: relative; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; z-index: 9;}
.trigger.sub {display: none;}
.trigger .line {width: 27rem; height: 2rem; background-color: #ecf0f1; display: block; margin: 8rem auto; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.trigger:hover {cursor: pointer;}
.trigger.close {position: absolute; top: 40rem; right: 40rem;}
.trigger.close {-webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}
.trigger.close:before {border: 2rem solid rgba(255,255,255,.8);}
.trigger.close .line {width: 27rem; background-color: #ecf0f1 !important;}
.trigger.close .line:nth-child(2) {opacity: 0;}
.trigger.close .line:nth-child(1) {-webkit-transform: translateY(10rem); -ms-transform: translateY(10rem); -o-transform: translateY(10rem); transform: translateY(10rem);}
.trigger.close .line:nth-child(3) {-webkit-transform: translateY(-10rem) rotate(90deg); -ms-transform: translateY(-10rem) rotate(90deg); -o-transform: translateY(-10rem) rotate(90deg); transform: translateY(-10rem) rotate(90deg);}
.trigger:before {content: ""; position: absolute; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 55rem; height: 55rem; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 100%; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}


/* footer */
/*
#footer {position: relative; width:100%; background: url('../images/common/ft-bg.jpg') center/cover no-repeat; z-index: 9;}
#footer .ft-copy {padding-top: 16rem; font-size: 15rem; font-weight: 400; color: #606065;}
*/
#footer {position: relative; width:100%; background-color:#2a255c; z-index: 9;}
#footer .ft-wrap {max-width: 1622rem; height: 88rem; margin: 0 auto; padding: 0 30rem;}
#footer .ft-link {border-bottom: 1rem solid rgba(255,255,255,.07);}
#footer .ft-link ul {display: flex; align-items: center; height: 100%;}
#footer .ft-link ul li {position: relative;}
#footer .ft-link ul li a {font-size: 17rem; font-weight: 600; color: var(--color-white);}
#footer .ft-link ul li:nth-child(n+2) {margin: 0 0 0 20rem; padding: 0 0 0 20rem;}
#footer .ft-link ul li:nth-child(n+2)::before {content: ''; position: absolute; top: 3rem; left: 0; width: 1rem; height: 13rem; background: var(--color-white);}
#footer .ft-info {padding: 65rem 0;}
#footer .ft-info .ft-wrap{display:grid; grid-template:'a b' 'a c' / auto 1fr; gap:0 105rem; align-items:center; height:auto;}
#footer .ft-info .ft-logo{grid-area:a;}
#footer .ft-logo img {height: 29rem;}
#footer .ft-info address{grid-area:b;}
#footer .ft-copy {grid-area:c; opacity:0.3; padding-top: 16rem; font-size: 15rem; font-weight: 400; color: #aaa;}
#footer address {padding-top: 0;}
#footer address span {font-size: 16rem; font-weight: 400; color: rgba(255,255,255,.7);}
#footer address span:nth-child(n+2) {padding: 0 0 0 14rem;} 
#footer address span em {display: inline-block; padding-right: 3rem; font-weight: 500; color: rgba(255,255,255,.2);}
#footer .scroll-top {position: absolute; bottom: 65rem; right: 95rem; width: 70rem; height: 70rem; background: url('../images/common/ic-scrollTop.svg') center/14rem 9rem no-repeat, linear-gradient(-42deg, #ec008c, #00a8e5);}


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

@media (min-width:1921px){
	html{font-size:0.052vw /* 1px */;}
}
@media (max-width:1580px) {
    #header {width: 100%; padding: 0 30rem;}
    #header .head-box {padding: 0;}
    #header .gnb-title {display: none;}
	#header .gnb_wrap{display:none;}
    #header .gnb {display: block;}
    #header .gnb > li {padding: 0;}
    #header .gnb > li > a {height: unset; line-height: unset;}
    #header .gnb > li > a > span {line-height: 1.6;}
    #header .gnb > li > a > span > i {display: block;}
    
    #header .sub_menu > li > a {height: unset; border: 0; border-radius: 0;}
    #header .sub_menu > li > a span {margin: 0;}
    #header .sub_menu > li > a span::before {width: 12rem; height: 12rem;}
    
    #header .depth3 {padding: 22rem 18rem;}

	#header [data-js=mgnb] > a.sw {position: absolute; top: 50%; right: 30rem; transform: translateY(-50%); display: block; width: 50rem; height: 50rem; transition: 0.5s ease-in-out; z-index: 999;}
	#header [data-js=mgnb] > a.sw span{position: relative; display: block; top: 50%; width: 19rem; height: 17rem; margin: 0 auto; transform: translateY(-50%);}
    #header [data-js=mgnb] > a.sw span i,
    #header [data-js=mgnb] > a.sw span:before,
    #header [data-js=mgnb] > a.sw span:after{display:block; position:absolute; height:3rem; background: var(--color-white); transform:rotate(0);}
    #header [data-js=mgnb] > a.sw span:before,
    #header [data-js=mgnb] > a.sw span:after{content:''; width:19rem;}
    #header [data-js=mgnb] > a.sw span:before{right:0; top:0; transition:0.5s ease 0s;}
    #header [data-js=mgnb] > a.sw span:after{left:0; bottom:0; transition:0.5s ease 0s;}
    #header [data-js=mgnb] > a.sw span i{opacity:1; left:0; top:7rem; width:19rem; transition:opacity var(--trans-ani), transform 0.5s ease 1.1s;}
    #header [data-js=mgnb] > a.sw.active span i,
    #header [data-js=mgnb] > a.sw.active span:before,
    #header [data-js=mgnb] > a.sw.active span:after{background: var(--color-white);}
    #header [data-js=mgnb] > a.sw.active i{opacity:0;}
    #header [data-js=mgnb] > a.sw.active span:before{right:0; top:6rem; transform:rotate(45deg);}
    #header [data-js=mgnb] > a.sw.active span:after{left:0; bottom:8rem; transform:rotate(-45deg);}

    body[data-mgnb=on] #header [data-js=mgnb] {display: block; position: absolute; top: -8.8vh; right: 0; width: 100%; height: 100vh;} 
    body[data-mgnb=on] #header [data-js=mgnb] > a.sw {top: 19rem; transform: unset;}
    #footer {width: 100%;}
}
@media (max-width:1500px) {
    html{font-size:0.067vw /* 1px */;}
}
@media (max-width:1300px) {
    html{font-size:0.077vw /* 1px */;}

    #header .menu .box > ul {width: 840rem;}
    #header .gnb > li > a {font-size: 19rem;}
}
@media (max-width:1200px) {
    .main-visual__link {display: flex; align-items: center; justify-content: center; width: 167rem; height: 40rem; border-radius: 27rem; margin-left: auto; margin-top: 96rem; background: var(--color-white);}
    .main-visual__link li a {display: block;}
    .main-visual__link li:nth-child(n+2) {margin-left: 15rem;}
    .main-visual__link li:nth-child(1) img {height: 20rem;}
    .main-visual__link li:nth-child(2) img {height: 16rem; margin-top: 1rem;}
    .main-visual__link li:nth-child(3) img {height: 20rem;}
    .main-visual__link li:nth-child(4) img {height: 20rem;}
}
@media (max-width:1024px){
    html{font-size:0.098vw /* 1px */;}

    body[data-mgnb=on] #header [data-js=mgnb] > a.sw {top: 20rem;}

    #footer {position: relative;}
	#footer .info {padding: 58rem 0 180rem;}
	#footer .scroll-top {position: absolute; bottom: 30rem; right: 40rem; width: 50rem; height: 50rem;}
}
@media (max-width:768px) {
    html{font-size:0.130vw;}

	/* #header .head-box {height: 70rem;}
    #header h1.logo img {height: 25rem;}
    body[data-mgnb=on] #header [data-js=mgnb] > a.sw {top: 32rem;} */

	#footer .ft-info .ft-wrap{display:block;}
	#footer .ft-info .ft-wrap address{margin-top:10rem;}
}
@media (max-width:620px) {
    html{font-size:0.161vw /*  */;}

    #header {padding: 0 20rem;}
    #header [data-js=mgnb] > a.sw {right: 7rem;}
    #header [data-js=mgnb] .head {height: 80rem;}
    #header [data-js=mgnb] .head::before {left: 20rem;}
    #header [data-js=mgnb] .midd > ul > li > a {width: 192rem; padding: 18rem 0;}
    #header [data-js=mgnb] .midd .box {width: calc(100% - 193rem);}
    #header [data-js=mgnb] .midd .box .depth2 > li {margin: 0 40rem;}
    body[data-mgnb=on] #header [data-js=mgnb] > a.sw {top: 15rem;}

    #footer .ft-wrap {height:auto;}
    #footer .ft-info {padding: 50rem 0 180rem;}
    #footer .ft-link ul {display: grid; grid-template-columns: 1fr 1fr; gap: 10rem; padding: 30rem 0;}
    #footer .ft-link ul li:nth-child(n+2) {margin: 0; padding: 0;}
    #footer .ft-link ul li:nth-child(n+2)::before {display: none;}
    #footer .ft-link ul li {display: flex; align-items: center; justify-content: center; height: 64rem; padding: 13rem !important; text-align: center; border: 1rem solid rgba(255,255,255,.2); box-sizing: border-box; line-height: 1.4;}
	#footer .ft-link ul li a{word-break:keep-all;}
}
@media (max-width:540px) {
    html{font-size:0.220vw /* 1.3px */;}	

    #header .head-box {height: 60rem;}
    #header h1.logo img {height: 20rem;}
    #header h1.logo{height: 20rem; width: 120rem;}
    #header [data-js=mgnb] .head {height: 70rem;}
    #header [data-js=mgnb] .head::before {height: 20rem;}
    #header [data-js=mgnb] > a.sw::before {width: 38rem; height: 38rem;}
    #header [data-js=mgnb] .midd > ul > li > a {font-size: 18rem; width: 127rem;}
    #header [data-js=mgnb] .midd .box {width: calc(100% - 127rem); padding-top: 10rem;}
    #header [data-js=mgnb] .midd .box .depth2 > li {margin: 0 18rem;}
    #header [data-js=mgnb] .midd .box .depth2 > li > a {padding: 15rem 0; font-size: 17rem;}
    body[data-mgnb=on] #header [data-js=mgnb] > a.sw {top: 12rem;}

    #header .depth3 {padding: 22rem 12rem;}
    #header .depth3 li a span {padding-left: 15rem;}
    #header [data-js=mgnb] .midd .box .depth3 li a {font-size: 15rem;}

    #footer .ft-info {padding: 50rem 0 130rem;}
    #footer .ft-link ul li a {font-size: 16rem;}
    #footer address {padding-top: 28rem;}
    #footer address span {display: block;}
    #footer address span:nth-child(n+2) {padding: 10rem 0 0;}
}