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

/*
 * layout.css
 * 레이아웃 공통요소들 작업요소에 맞게 수정하시면됩니다.
 *
 * 1) root 설정
 * 2) 폰트설정
 * 3) open-control
 * 4) 언어선택
 * 5) 준비중
 * 6) 관련사이트-목록열기형
 * 7) 레이아웃설정
 *
 */

.inr{position:relative; margin:0 auto; max-width:1400rem; width:92%;}
.inr-wide{position:relative; margin:0 auto; max-width:1600rem; width:92%;}

/* 애니메이션 */
[data-motion="blur"]{filter:blur(10px); opacity:0; transform:scale(1.1); transition:1s ease 0s;}
[data-motion="blur"].motion_in{filter:blur(0); opacity:1; transform:scale(1);}
[data-motion="slide-up"]{opacity:0; transform:translateY(50rem); transition:1s ease 0s;}
[data-motion="slide-up"].motion_in{opacity:1; transform:translateY(0);}
[data-motion="slide-left"]{opacity:0; transform:translateX(50rem); transition:1s ease 0s;}
[data-motion="slide-left"].motion_in{opacity:1; transform:translateX(0);}
[data-motion="slide-right"]{opacity:0; transform:translateX(-50rem); transition:1s ease 0s;}
[data-motion="slide-right"].motion_in{opacity:1; transform:translateX(0);}
[data-motion="slide_show_right"]{clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); transition:clip-path var(--aniTime, 1.5s) var(--aniEase, ease) 0s;}
[data-motion="slide_show_right"].motion_in{clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%); transition-delay: var(--aniDelay, 0.1s);}
[data-motion="slide_show_left"]{clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); transition:clip-path var(--aniTime, 1.5s) var(--aniEase, ease) 0s;}
[data-motion="slide_show_left"].motion_in{clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%); transition-delay: var(--aniDelay, 0.1s);}
[data-motion="slide_show_down"]{clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); transition: clip-path var(--aniTime, 1.5s) var(--aniEase, ease) 0s;}
[data-motion="slide_show_down"].motion_in{clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition-delay: var(--aniDelay, 0.1s);}
[data-motion="slide_show_up"]{clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); transition: clip-path var(--aniTime, 1.5s) var(--aniEase, ease) 0s;}
[data-motion="slide_show_up"].motion_in{clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition-delay: var(--aniDelay, 0.1s);}


/* 1) root 설정  */
:root{
	--color-base:#222; /* 선언이 안되면 #333 기본컬러로 적용됨 */
	--color-point:/*#1284bc*/ #1D2088; /* 포인트컬러 예시 */
	--color-point2:/*#005c9d*/ #14165C; /* 포인트컬러 예시 */
	--color-white:#fff;
	--color-black:#000;
    --gradient-toLeft:linear-gradient(to right, var(--color-point), var(--color-point2));
    --gradient-120deg:linear-gradient(120deg, var(--color-point), var(--color-point2));
    --color-shadow:rgba(0,35,60,.3);
	--font-base:16rem;
	
	--font-eng:'Montserrat', Sans-serif;
	--font-combine:'Montserrat', 'Pretendard', Sans-serif;
	--trans-ani:0.3s ease 0s;
    
    --hd-height:110rem;
    
    @media(max-width:1400px){
        --hd-height:100rem;
    }
    @media(max-width:1024px){
        --hd-height:90rem;
    }
    @media(max-width:768px){
        --hd-height:80rem;
    }
    @media(max-width:480px){
        --hd-height:60rem;
    }
}

/* 2) 폰트설정 */
body{font-size:var(--font-base, 16rem);}
@media (min-width:1921px){
	html{font-size:0.052vw /* 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:480px){
    html{font-size:0.271vw /* 1.3px */;}	
}

/* 3) open-control */
/* div.open-control
 *     button.open-control__btn
 *     div.list or ul.list
 * */
.open-control{position:relative;}
.open-control .list{display:none; position:absolute; top:100%; width:100%; padding:15rem; background-color:#fff; border:1rem solid #eee;}
.open-control .list a{display:inline-block;}

/* 4) 언어선택 */
.lang-area{position:relative; min-width:120rem;}
.lang-area .open-control__btn{display:flex; align-items:center; gap:10rem; background-color:transparent; font-size:17rem; font-weight:500;}
.lang-area .list ul{display:flex; flex-direction:column; gap:5rem; font-size:15rem;}
.lang-area .list a{opacity:0.5; font-weight:600; transition:0.3s ease;}
.lang-area .list a:hover{opacity:1;}

/* 5) 준비중 */
.ready-page{text-align:center;}
.ready-page strong{display:block; font-size:35rem;}
.ready-page strong i{opacity:0.2; display:block; margin-bottom:10rem; font-size:45rem;}
.ready-page p{margin-top:20rem; font-size:18rem; line-height:1.4;}
@media (max-width:480px){
	.ready-page	strong{font-size:30rem;}
	.ready-page	p{font-size:16rem; word-break:keep-all;}
	.ready-page	p br{display:none;}
}

/* 6) 관련사이트-목록열기형 */
.relate-site{position:relative; max-width:260rem;}
.relate-site .open-control__btn{position:relative; width:100%; height:55rem; box-sizing:border-box; padding:0 30rem 0 20rem; background-color:transparent; border:1rem solid rgba(14,14,14,0.15); font-size:15rem; font-weight:600; text-align:left; color:#333; transition:0.3s ease;}
.relate-site .open-control__btn .xi-plus-min{position:absolute; right:20rem; top:50%; margin-top:-10rem; font-size:20rem; transition:transform 0.3s;}
.relate-site .open-control__btn.active{border-color:#111;}
.relate-site .open-control__btn.active .xi-plus-min{transform:rotate(45deg);}
.relate-site .list{display:none; position:absolute; bottom:100%; top:auto; width:100%; box-sizing:border-box; padding:35rem 20rem; background:#fff; border:1rem solid #111; border-bottom:0;}
.relate-site .list ul > li{margin-top:10rem;}
.relate-site .list ul > li:first-child{margin-top:0;}
.relate-site .list a{opacity:0.5; display:inline-block; font-size:14rem; font-weight:500; transition:opacity 0.3s;}
.relate-site .list a:hover{opacity:1;}
@media (max-width:480px){
	.relate-site{max-width:100%;}
}

/* 7) 레이아웃설정 */
#header{display:flex; justify-content:flex-end; align-items:center; position:fixed; z-index:90; padding:0 60rem; width:100%; height:var(--hd-height); background:#fff; transition:.3s ease;}
#header h1{position:absolute; left:60rem;}
#header h1 a{display:block; height:60rem; transition:.3s ease;}
#header h1 a img{display:block; height:100%;}
.isScrolled #header{height:calc(var(--hd-height) - 30rem); border-bottom:1px solid #eaeaea;}
.isScrolled #header h1 a{display:block; height:50rem;}
.active.isScrolled #header{border-bottom:none;}
@media(max-width:1600px){
    #header{padding:0 4%;}
    #header h1{left:4%;}
}
@media(max-width:1024px){
    #header h1 a{height:50rem;}
    .isScrolled #header h1 a{height:45rem;}
    .isScrolled #header{height:calc(var(--hd-height) - 15rem);}
}
@media(max-width:480px){
    #header h1 a{height:38rem;}
    .isScrolled #header h1 a{height:35rem;}
    .isScrolled #header{height:calc(var(--hd-height) - 10rem);}
}


/* gnb */
.mob-none{display:none !important;}
#header nav{height:100%; transition:.3s ease;}
#header nav .gnb{display:flex; align-items:center; height:100%;}
#header nav .gnb li a{display:inline-block; word-break:keep-all;}
#header nav .gnb > li{position:relative; height:100%;}
#header nav .gnb > li > a{display:flex; align-items:center; padding:0 45rem; height:100%; font-size:var(--fs20); font-weight:500; color:#111; line-height:1;}
#header nav .gnb > li .box:not(.depth03){width:100%; min-width:180rem; padding:25rem 20rem; background-color:#fff; border:1rem solid #eee; box-shadow:0 20rem 30rem rgba(0,0,0,0.15); text-align:center;}
#header nav .gnb > li .box:not(.depth03) a{display:block; font-size:var(--fs18); font-weight:500; transition:opacity 0.3s ease;}
#header nav .gnb > li .box:not(.depth03):is(:hover) a{opacity:0.5;}
#header nav .gnb > li .box:not(.depth03):is(:hover) a:hover{opacity:1;}
#header nav .gnb .box > ul{display:flex; flex-direction:column; gap:10rem;}
#header nav .gnb .box.depth03{margin-left:10rem;}
	/* gnb active */
#header nav .gnb .box:not(.depth03){opacity:0; visibility:hidden; position:absolute; left:50%; transform:translate(-50%, -30rem); transition:0.3s ease; transition-property:opacity, visibility, transform;}
#header nav .gnb .active .box:not(.depth03){opacity:1; visibility:visible; transform:translate(-50%, 0);}
.active #header nav{opacity:0; visibility:hidden;}
@media(max-width:1600px){
    #header nav .gnb > li > a{padding:0 30rem;}
}
@media(max-width:1400px){
    #header nav{display:none;}
}


/* util */
.util-area{display:flex; align-items:center; gap:50rem; margin-left:45rem;}
.logWrap{display:flex; align-items:center; gap:30rem;}
.logWrap a{display:flex; align-items:center; gap:6rem; font-size:var(--fs16); font-weight:500; line-height:1; color:#999;}
.logWrap a i{display:block; font-size:var(--fs22);}
.logWrap-mo{display:none;}
@media(max-width:1600px){
    .util-area{gap:40rem; margin-left:30rem;}
    .logWrap{gap:22rem;}
    .logWrap a{gap:4rem;}
}
@media(max-width:768px){
    .logWrap-pc{display:none;}
    .logWrap-mo{display:flex; gap:30rem; padding:0 40rem; height:60rem; background:#f6f6f6;}
}
@media(max-width:480px){
    .logWrap-mo{justify-content:center; height:50rem;}
}


/* maga menu */
.mega-menu{opacity:0; visibility:hidden; display:flex; align-items:stretch; position:fixed; top:var(--hd-height); left:0; z-index:-1; width:100%; background-color:rgba(0,0,0,0); transition:.3s ease;}
.mega-menu.active{opacity:1; visibility:visible;}
.gnb-pc{position:relative; width:100%; height:0; background:#fff; box-shadow:0 50rem 50rem rgba(0,0,0,.15); transition:.3s ease;}
.mega-menu.active .gnb-pc{height:420rem;}
.gnb-pc .gnb{display:flex; justify-content:space-between; position:absolute; left:50%; transform:translateX(-50%); padding-top:90rem; max-width:1400rem; width:92%;}
.gnb-pc .gnb > li > a{display:block; font-size:var(--fs35); font-weight:bold; color:#111; line-height:1;}
.gnb-pc .gnb .box ul{display:flex; flex-direction:column; gap:15rem; margin-top:40rem;}
.gnb-pc .gnb .box a{font-size:var(--fs20); color:#333; line-height:1; transition:.3s ease;}
.gnb-pc .gnb .box a:hover{color:var(--color-point);}
.gnb-mob{display:none; overflow-y:auto; padding:60rem 40rem; width:100%; background-color:#fff;}
.gnb-mob .gnb > li{position:relative; margin-bottom:40rem;}
.gnb-mob .gnb > li > a{display:flex; align-items:center; padding:5rem 0; font-size:var(--fs35); font-weight:500; color:#111;}
.gnb-mob .gnb > li .open{position:absolute; top:11rem; right:0; width:20rem; height:20rem; background-color:transparent; font-size:0;}
.gnb-mob .gnb > li .open:before{content:'\e913'; display:block; font-family:xeicon !important; font-size:20rem;}
.gnb-mob .gnb > li > a.active ~ .open:before{content:'\e91a';}
.gnb-mob .gnb > li > a.on{color:var(--color-point);}
.gnb-mob .box{display:none; padding:30rem 20rem 20rem;}
.gnb-mob .box ul{display:flex; flex-direction:column; gap:15rem;}
.gnb-mob .box a{display:block; font-size:var(--fs20);}
.gnb-mob .box a span{line-height:1.4; background:linear-gradient(90deg, #222, #222); background-size:0 2rem; background-repeat:no-repeat; background-position:0 100%; transition:0.5s;}
.gnb-mob .box a.on span{background-size:100% 2rem; font-weight:700;}
[class*="mega-menu__"]{display:block; position:relative; width:36rem; height:36rem; background-color:transparent;}
[class*="mega-menu__"] span{display:flex; align-items:center; justify-content:center; position:relative; width:100%; height:100%; margin:0 auto;}
[class*="mega-menu__"] span i,
[class*="mega-menu__"] span:before,
[class*="mega-menu__"] span:after{height:2px; background:#333; transform:rotate(0);}
[class*="mega-menu__"] span:before,
[class*="mega-menu__"] span:after{display:block; position:absolute; content:''; width:100%;}
[class*="mega-menu__"] span:before{right:0; top:7rem; transition:0.5s ease 0s;}
[class*="mega-menu__"] span:after{left:0; bottom:7rem; transition:0.5s ease 0s;}
[class*="mega-menu__"] span i{display:block; margin-left:auto; opacity:1; width:100%; transition:width 0.3s, transform 0.5s ease 1.1s;}
[class*="mega-menu__"].active i{width:0;}
[class*="mega-menu__"].active span:before{top:17rem; transform:rotate(45deg);}
[class*="mega-menu__"].active span:after{bottom:17rem; transform:rotate(-45deg);}
.isScrolled .mega-menu{top:calc(var(--hd-height) - 30rem);}
@media(hover: hover){
	.gnb-mob .box a:hover span{background-size:100% 2rem;}
}
@media(max-width:1024px){
    .mega-menu.active .gnb-pc{height:300rem;}
    .gnb-pc .gnb{justify-content:space-evenly; padding-top:50rem;}
    .gnb-pc .gnb > li{padding:0 30rem;}
    .gnb-pc .gnb > li > a{font-size:var(--fs25);}
    .gnb-pc .gnb .box a{font-size:var(--fs18);}
    .isScrolled .mega-menu{top:calc(var(--hd-height) - 15rem);}
}
@media(max-width:768px){
    .mega-menu{display:block; height:calc(100% - var(--hd-height)); clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); transition:.5s ease; opacity:1;}
    .mega-menu.active{height:calc(100% - (var(--hd-height) - 15rem)); clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);}
    .gnb-pc{display:none;}
    .gnb-mob{display:block; height:calc(100% - 60rem);}
}
@media(max-width:480px){
    .mega-menu.active{height:calc(100% - (var(--hd-height) - 10rem));}
    .gnb-mob{padding:40rem; height:calc(100% - 50rem);}
    .gnb-mob .gnb > li > a{font-size:var(--fs28);}
    .gnb-mob .gnb > li .open{top:7rem; transform-origin:right; transform:scale(.9);}
    [class*="mega-menu__"]{transform-origin:right; transform:scale(.8);}
}


/* footer */
footer{padding:60rem 0; background:#272e34;}
footer h2{font-size:var(--fs18); font-weight:bold; line-height:1; color:rgba(255,255,255,.8);}
footer address{margin:20rem 0 25rem; font-size:var(--fs15); color:#999;}
footer address span{display:inline-block; margin:0 25rem 8rem 0;}
footer p.copy{font-size:14rem; color:rgba(255,255,255,.2); line-height:1.3; text-transform:uppercase;}
footer .link{position:absolute; right:0; top:50%; transform:translateY(-50%);}
footer .link li+li{margin-top:5rem;}
footer .link a{display:flex; align-items:center; justify-content:center; width:150rem; height:40rem; font-size:var(--fs15); color:rgba(255,255,255,.8); background:rgba(255,255,255,.1); border-radius:5rem; transition:.3s ease;}
@media(hover:hover){
    footer .link a:hover{color:#fff; background:rgba(255,255,255,.2);}
}
@media(max-width:1600px){
    footer .link{right:80rem;}
}
@media(max-width:768px){
    footer .link{display:flex; gap:5rem; position:relative; top:auto; right:auto; transform:none; margin-top:35rem;}
    footer .link li+li{margin-top:0;}
}
@media(max-width:480px){
    footer{padding:50rem 0;}
    footer address{margin-bottom:20rem;}
    footer p.copy{padding-right:110rem; font-size:12.5rem;}
    footer .link{padding-right:50rem;}
    footer .link li:nth-child(1){width:27%;}
    footer .link li:nth-child(2){width:27%;}
    footer .link li:nth-child(3){width:calc(46% - 10rem)}
    footer .link a{width:100%;}
}


/* quick bar */
.quickBar{position:fixed; right:1%; bottom:40rem; z-index:99;}
.quickBar a{display:flex; align-items:center; justify-content:center; width:80rem; aspect-ratio:1/1; border-radius:50%;}
.quickBar a+a{margin-top:10rem;}
.quickBar a img{display:block; height:35rem;}
.quickBar a.kakao{background:linear-gradient(120deg, #ffe600, #f8b500);}
.quickBar a.tel{background:/*var(--gradient-120deg);*/ var(--color-point);}
@media(max-width:1024px){
    .quickBar{bottom:20rem;}
    .quickBar a{width:70rem;}
    .quickBar a img{height:30rem;}
}
@media(max-width:480px){
    .quickBar{right:2%;}
    .quickBar a{width:50rem;}
    .quickBar a+a{margin-top:6rem;}
    .quickBar a img{height:25rem;}
}