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

body{background:var(--wrap-color);}
.inr{position:relative; margin:0 auto; max-width:1400rem; width:92%;}
.inr-wide{position:relative; padding:0 5.7%;}
@media(max-width:1700px){
    .inr-wide{padding:0 4%;}
}

/* 애니메이션 */
[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.2s);}
[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);}

/* 1) root 설정  */
:root{
	--color-base:#fff; /* 선언이 안되면 #333 기본컬러로 적용됨 */
	--color-point:#1540ff;
	--color-point2:#99acff;
	--color-white:#fff;
	--color-black:#000;
    --wrap-color:#13151c;
	--font-base:16rem;
	
	--font-eng:'Montserrat', Sans-serif;
	--font-combine:'Montserrat', 'Pretendard', Sans-serif;
	--trans-ani:0.3s ease 0s;
    
    --hd-height:100rem;
    
    @media(max-width:1024px){
        --hd-height:90rem;
    }
    @media(max-width:768px){
        --hd-height:80rem;
    }
    @media(max-width:480px){
        --hd-height:65rem;
    }
}

/* 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{position:fixed; left:0; top:0; z-index:90; width:100%; height:var(--hd-height); transition:.3s ease;}
#header:before{content:''; display:block; position:absolute; left:0; top:0; width:100%; height:100%; background:linear-gradient(to bottom, #000, transparent); opacity:.5;  transition:.3s ease;}
#header *{box-sizing:border-box; word-break:keep-all;}
#header .inr-wide{display:flex; justify-content:space-between; align-items:center; height:100%; z-index:10000;}
#header h1 a{display:block; height:45rem; transform-origin:left center; transition:.3s ease;}
#header h1 a img{display:block; height:100%;}
#header nav{display:none;}
#header .util-area{display:flex; align-items:center; gap:40rem; transform-origin:right center; transition:.3s ease;}
#header .util-area a.linkedin{display:block; width:35rem; border-radius:7rem; overflow:hidden;}
#header .util-area a.linkedin img{display:block; width:100%;}
.isScrolled #header{height:calc(var(--hd-height) - 20rem);}
.isScrolled #header:before{opacity:.8;}
.isScrolled h1 a{transform:scale(.9);}
.isScrolled #header .util-area{transform:scale(.9);}
@media(max-width:768px){
    #header h1 a{height:40rem;}
    #header .util-area{gap:30rem;}
    #header .util-area a.linkedin{width:32rem;}
}
@media(max-width:480px){
    #header h1 a{height:30rem;}
    #header .util-area{gap:20rem;}
    #header .util-area a.linkedin{width:30rem;}
    .isScrolled #header{height:calc(var(--hd-height) - 15rem);}
}


/* maga menu */
.mega-menu{padding-top:var(--hd-height); opacity:0; visibility:hidden; display:flex; align-items:stretch; position:fixed; top:0; left:0; z-index:9999; width:100%; height:100%; background-color:#111; transition:0.3s ease;}
.isScrolled .mega-menu{padding-top:calc(var(--hd-height) - 20rem);}
.mega-menu.active{opacity:1; visibility:visible;}
.gnb-mob{overflow-y:auto; width:100%;}
.gnb-mob .gnb{display:flex; flex-direction:column; justify-content:center; gap:60rem; margin:auto; width:50%; height:100%;}
.gnb-mob .gnb > li{position:relative; transition:.3s ease;}
.gnb-mob .gnb > li:before{content:''; display:block; position:absolute; left:0; top:15rem; width:0; height:3rem; background:var(--color-point); transition:.3s ease;}
.gnb-mob .gnb > li > a{display:flex; align-items:center; font-size:var(--fs30); font-family:var(--font-eng); font-weight:bold; color:rgba(255,255,255,.5); line-height:1; transition:.3s ease;}
.gnb-mob .gnb > li.active{padding-left:70rem;}
.gnb-mob .gnb > li.active:before{width:50rem;}
.gnb-mob .gnb > li.active > a{color:#fff;}
.gnb-mob .gnb > li .open{display:none;}
.gnb-mob .gnb > li > a.on{color:#fff;}
.gnb-mob .box{display:none; padding-top:30rem;}
.gnb-mob .box ul{display:flex; flex-direction:column; gap:15rem;}
.gnb-mob .box a{display:block; font-size:var(--fs18); font-weight:300; color:#fff; line-height:1.4; transition:.3s ease;}
.gnb-mob .box a.on{color:var(--color-point2);}
.gnb-img{position:relative; width:100%; height:100%;}
.gnb-img img{display:block; width:100%; height:100%; object-fit:cover;}
/* maga control */
[class*="mega-menu__"]{display:block; position:relative; padding-left:70rem; height:40rem; background-color:transparent;}
[class*="mega-menu__"]:before,
[class*="mega-menu__"]:after{display:block; position:absolute; left:0; top:50%; transform:translateY(-50%); font-size:var(--fs16); font-weight:500; font-family:var(--font-eng); color:#fff; line-height:1; transition:0.5s ease 0s;}
[class*="mega-menu__"]:before{content:'MENU'; opacity:1;}
[class*="mega-menu__"]:after{content:'CLOSE'; opacity:0;}
[class*="mega-menu__"] span{display:flex; align-items:center; justify-content:center; position:relative; width:40rem; height:100%; margin:0 auto;}
[class*="mega-menu__"] span i,
[class*="mega-menu__"] span:before,
[class*="mega-menu__"] span:after{height:2px; background:#fff; 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; opacity:1; width:100%; transition:width 0.3s, transform 0.5s ease 1.1s;}
[class*="mega-menu__"].active:before{opacity:0;}
[class*="mega-menu__"].active:after{opacity:1;}
[class*="mega-menu__"].active i{width:0;}
[class*="mega-menu__"].active span:before{top:19rem; transform:rotate(45deg);}
[class*="mega-menu__"].active span:after{bottom:19rem; transform:rotate(-45deg);}
@media (hover: hover){
	.gnb-mob .box:hover a{opacity:.5}
	.gnb-mob .box:hover a:hover{opacity:1;}
}
@media (max-width:1700px){
    .gnb-mob .gnb{width:80%;}
}
@media (max-width:1024px){
	.mega-menu .open{display:block;}
    .gnb-mob{padding:80rem 0;}
    .gnb-mob .gnb{justify-content:flex-start; height:auto;}
}
@media (max-width:768px){
    .gnb-mob{padding:50rem 0;}
    .gnb-mob .gnb{gap:50rem;}
    .gnb-mob .gnb > li:before{top:10rem;}
    .gnb-mob .gnb > li.active{padding-left:45rem;}
    .gnb-mob .gnb > li.active:before{width:30rem;}
    .gnb-mob .box{padding-top:25rem;}
    [class*="mega-menu__"]{padding-left:60rem;}
}
@media (max-width:480px){
    .gnb-img{display:none;}
    [class*="mega-menu__"]{padding-left:50rem;}
    [class*="mega-menu__"] span{width:32rem;}
    [class*="mega-menu__"] span:before{top:9rem;}
    [class*="mega-menu__"] span:after{bottom:9rem;}
    [class*="mega-menu__"]:before, [class*="mega-menu__"]:after{font-size:13rem;}
}


/* footer */
footer{padding:80rem 0;}
footer *{box-sizing:border-box; word-break:keep-all;}
footer .inr{font-size:0; text-align:center;}
footer .ftLogo{display:inline-block; height:45rem;}
footer .ftLogo img{display:block; height:100%;}
footer h2{margin:50rem 0 30rem; font-size:var(--fs20); font-weight:500; line-height:1; color:#fff;}
footer address{font-size:var(--fs15); color:#fff; line-height:1.4; font-weight:300; opacity:.7;}
footer address span{display:inline-block; margin:4rem 15rem;}
footer .copy{display:block; margin-top:30rem; font-size:13rem; color:#fff; line-height:1; font-weight:300; opacity:.4;}
@media(max-width:768px){
    footer{padding:60rem 0;}
    footer .ftLogo{height:40rem;}
    footer h2{margin:40rem 0 25rem;}
}
@media(max-width:480px){
    footer{padding:50rem 0 100rem;}
    footer .ftLogo{height:30rem;}
    footer h2{margin:30rem 0 18rem;}
    footer address span{margin:2rem 10rem;}
    footer .copy{margin-top:25rem;}
}


/* contactBar */
.contactBar{position:fixed; bottom:40rem; right:2%; z-index:10;}
.contactBar button{display:block; position:relative; width:80rem; aspect-ratio:1/1; background:linear-gradient(-45deg, var(--color-point), var(--color-point2)); border-radius:50%; overflow:hidden; z-index:1;}
.contactBar button i{display:flex; align-items:center; justify-content:center; position:absolute; left:0; top:0; width:100%; height:100%; color:#fff; text-align:center; transition:.3s ease;}
.contactBar button i.open{margin-top:3rem; font-size:var(--fs16); font-family:var(--font-eng); font-weight:600; line-height:1.1; letter-spacing:-0.5rem;}
.contactBar button i.close{font-size:var(--fs30); font-weight:500; opacity:0;}
.contactBar button.active i.open{opacity:0;}
.contactBar button.active i.close{opacity:1;}
.contactBar .info{display:none; position:absolute; padding:30rem 20rem; right:40rem; bottom:40rem; width:330rem; background:linear-gradient(-45deg, #0d173b, #20316c); box-shadow:0 0 30rem rgba(0,0,0,.2);}
.contactBar .info em{display:block; margin-bottom:15rem; font-size:var(--fs16); font-family:var(--font-eng); font-weight:bold; line-height:1; color:#fff;}
.contactBar .info p{font-size:14rem; font-weight:300; color:#fff; line-height:1.4; opacity:.8;}
.contactBar .info ul{margin-top:10rem;}
.contactBar .info ul li{display:flex; align-items:center; gap:10rem;}
.contactBar .info ul li+li{margin-top:10rem;}
.contactBar .info ul li span{display:flex; justify-content:center; align-items:center; width:30rem; aspect-ratio:1/1; background:#fff; border-radius:50%;}
.contactBar .info ul li span i{display:block; font-size:var(--fs22); color:#222; line-height:1;}
.contactBar .info ul li a{font-size:14rem; font-weight:300; color:#fff; line-height:1; opacity:.8;}
.contactBar .info2{margin-top:20rem; padding-top:20rem; border-top:1px dashed rgba(255,255,255,.3);}
@media(max-width:768px){
    .contactBar{bottom:20rem;}
}
@media(max-width:480px){
    .contactBar button{width:62rem;}
    .contactBar button i.open{font-size:13rem;}
    .contactBar .info{padding:25rem 20rem; right:31rem; bottom:31rem; width:280rem;}
}