@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.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);}
[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:#0080c4; /* 포인트컬러 예시 */
	--color-white:#fff;
	--color-black:#000;
	--font-base:16rem;
	
	--font-eng:'Montserrat', Sans-serif;
	--font-combine:'Montserrat', 'SUIT Variable', sans-serif;
	--trans-ani:0.3s ease 0s;
    
    --header-height:95rem;
    
    @media(max-width:1024px){
        --header-height:70rem;
    }
    @media(max-width:768px){
        --header-height:65rem;
    }
    @media(max-width:480px){
        --header-height:54rem;
    }
}

/* 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; gap:60rem; position:fixed; left:0; top:0; z-index:90; padding:0 60rem;}
#header *{box-sizing:border-box; word-break:keep-all;}
#header, .hdHeight{width:100%; height:var(--header-height); transition:.3s ease;}
#header h1{position:absolute; left:60rem; z-index:9999;}
#header h1 a{display:block; height:35rem; transition:.3s ease;}
#header h1 a img{display:block; position:absolute; height:100%; transition:.3s ease;}
#header h1 a img.logo1{opacity:0;}
.isScrolled #header{background:#fff; border-bottom:1px solid #e5e5e5;}
.isScrolled #header,
.isScrolled .hdHeight{height:calc(var(--header-height) - 15rem);}
.isScrolled #header h1 a{height:33rem;}
body.active #header h1 a img.logo1,
.isScrolled #header h1 a img.logo1{opacity:1;}
body.active #header h1 a img.logo2,
.isScrolled #header h1 a img.logo2{opacity:0;}
@media(max-width:1600px){
    #header{gap:20rem;}
}
@media(max-width:1420px){
    #header{padding:0 30rem;}
    #header h1{left:30rem;}
}
@media(max-width:1400px){
    #header{padding:0 4%;}
    #header h1{left:4%;}
}
@media(max-width:1024px){
    #header h1 a{height:32rem;}
    .isScrolled #header h1 a{height:30rem;}
}
@media(max-width:768px){
    #header h1 a{height:30rem;}
    .isScrolled #header h1 a{height:27rem;}
}
@media(max-width:480px){
    #header h1 a{height:25rem;}
    .isScrolled #header h1 a{height:22rem;}
    .isScrolled #header,
    .isScrolled .hdHeight{height:calc(var(--header-height) - 8rem);}
}
    

/* gnb */
#header nav{transition:.3s ease;}
#header nav .gnb{display:flex; align-items:center;}
#header nav .gnb li a{display:inline-block; word-break:keep-all;}
#header nav .gnb > li{position:relative;}
#header nav .gnb > li > a{display:flex; align-items:center; justify-content:center; padding:0 30rem; font-size:var(--fs18); font-weight:500; color:#fff; height:var(--header-height); line-height:1;}
#header nav .gnb > li .box:not(.depth03){width:100%; min-width:180rem; padding:30rem 20rem; background-color:#fff; border:1rem solid #eee; box-shadow:0 20rem 30rem rgba(0,0,0,0.15); border-radius:5rem; box-shadow:5rem 10rem 30rem rgba(0,0,0,.15);}
#header nav .gnb > li .box:not(.depth03) a{display:block; font-size:var(--fs17); font-weight:500; color:#333; line-height:1; text-align:center; 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:15rem;}
#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%, -45rem); transition:0.3s ease; transition-property:opacity, visibility, transform;}
#header nav .gnb .active .box:not(.depth03){opacity:1; visibility:visible; transform:translate(-50%, -15rem);}
.isScrolled #header nav .gnb > li > a{color:#090909;}
body.active #header nav{opacity:0; visibility:hidden;}
@media(max-width:1600px){
    #header nav .gnb > li > a{padding:0 20rem;}
}
@media(max-width:1420px){
    #header nav .gnb > li > a{font-size:var(--fs17);}
}
@media (max-width:1024px){
	#header nav{display:none;}
}

/* util / menu btn */
.util-area{display:flex; align-items:center; position:relative; z-index:9999;}
.util-area .logWrap{display:flex; align-items:center; gap:35rem; padding:0 0 0 60rem; border-left:1px solid rgba(255,255,255,.5); transition:.3s ease;}
.util-area .logWrap a{display:block; font-family:var(--font-eng); font-size:var(--fs16); font-weight:500; line-height:1; color:rgba(255,255,255,.9); transition:.3s ease;}
.isScrolled .util-area .logWrap{border-color:#ccc;}
.isScrolled .util-area .logWrap a{color:#777;}
body.active .util-area .logWrap{border-left:none;}
body.active .util-area .logWrap a{color:#777;}
	/* maga control */
[class*="mega-menu__"]{display:none; width:30rem; height:30rem; background:transparent;}
[class*="mega-menu__"] span{display:flex; flex-direction:column; justify-content:center; position:relative; width:30rem; height:30rem; margin:0 auto; font-size:0;}
[class*="mega-menu__"] span i,
[class*="mega-menu__"] span:before,
[class*="mega-menu__"] span:after{display:block; position:absolute; height:2rem; background:#fff; transform:rotate(0);}
[class*="mega-menu__"] span:before,
[class*="mega-menu__"] span:after{content:''; width:100%;}
[class*="mega-menu__"] span:before{right:0; top:5rem; transition:0.5s ease 0s, background .3s ease;}
[class*="mega-menu__"] span:after{left:0; bottom:5rem; transition:0.5s ease 0s, background .3s ease;}
[class*="mega-menu__"] span i{opacity:1; right:0; width:100%; transition:width 0.3s, transform 0.5s ease 1.1s, background .3s ease;}
[class*="mega-menu__"].active i{width:0; background:#111;}
[class*="mega-menu__"].active span:before{right:0; top:14rem; transform:rotate(45deg); background:#111;}
[class*="mega-menu__"].active span:after{left:0; bottom:14rem; transform:rotate(-45deg); background:#111;}
.isScrolled [class*="mega-menu__"] span i,
.isScrolled [class*="mega-menu__"] span:before,
.isScrolled [class*="mega-menu__"] span:after{background:#111;}
@media(max-width:1600px){
    .util-area .logWrap{gap:30rem; padding:0 0 0 40rem;}
}
@media(max-width:1024px){
    .util-area .logWrap{padding:0 40rem; border:none;}
    [class*="mega-menu__"]{display:block;}
}
@media(max-width:768px){
    .util-area .logWrap{gap:25rem; padding:0 35rem;}
    [class*="mega-menu__"]{width:28rem; height:28rem;}
    [class*="mega-menu__"] span{width:28rem; height:28rem;}
    [class*="mega-menu__"] span:before{top:6rem;}
    [class*="mega-menu__"] span:after{bottom:6rem;}
    [class*="mega-menu__"].active span:before{top:13rem;}
    [class*="mega-menu__"].active span:after{bottom:13rem;}
}
@media(max-width:480px){
    .util-area .logWrap{gap:15rem; padding:0 20rem;}
    .util-area .logWrap a{font-size:13rem;}
}


/* maga menu */
.mega-menu{opacity:0; visibility:hidden; display:flex; flex-direction:column; position:fixed; top:0; left:0; z-index:999; width:100%; height:100%; background-color:#fff; transition:0.3s ease; transition-property:opacity, visibility;}
.mega-menu.active{opacity:1; visibility:visible;}
.gnb-pc{position:relative; width:100%; height:calc(100% - var(--header-height)); transition:.3s ease;}
.isScrolled .gnb-pc{height:calc(100% - (var(--header-height) - 15rem));}
.gnb-pc:after{content:''; display:block; position:absolute; right:0; top:0; height:100%; width:calc(50% - 160rem); background:url('/images/common/allmenu_img.jpg')no-repeat center/cover;}
.gnb-pc .inr-wide{height:100%;}
.gnb-pc .gnb{display:flex; flex-direction:column; gap:100rem; width:calc(50% + 160rem); padding:100rem 50rem 50rem 0; overflow-y:auto; height:100%;}
.gnb-pc .gnb > li > a{display:block; font-size:var(--fs30); font-weight:bold; line-height:1; color:#090909;}
.gnb-pc .gnb .box ul{display:flex; flex-wrap:wrap; gap:15rem 50rem; margin-top:35rem;}
.gnb-pc .gnb .box a{display:block; font-size:var(--fs18); line-height:1; color:#666; transition:.3s ease;}
.gnb-mob{display:none; overflow-y:auto; width:80%;}
.gnb-mob .gnb{padding:30rem;}
.gnb-mob .gnb > li{position:relative; border-bottom:1rem solid rgba(0,0,0,0.1);}
.gnb-mob .gnb > li > a{display:flex; align-items:center; padding:20rem 20rem; font-size:var(--fs22); font-weight:500;}
.gnb-mob .gnb > li .open{position:absolute; top:22rem; right:20rem; 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; background-color:#f3f3f3;}
.gnb-mob .box ul{display:flex; flex-direction:column; gap:10rem;}
.gnb-mob .box a{display:block; font-size:var(--fs18);}
.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;}
@media(hover:hover){
    .gnb-pc .gnb .box a:hover{font-weight:600; color:#222;}
}
@media(max-width:1400px){
    .gnb-pc .gnb{gap:70rem; padding:70rem 50rem 50rem 0;}
    .gnb-pc .gnb .box ul{margin-top:25rem;}
}
@media(max-width:1024px){
    .gnb-pc .gnb{gap:50rem; padding:50rem 50rem 50rem 0;}
    .gnb-pc .gnb > li > a{font-size:var(--fs25);}
}
@media(max-width:768px){
    .gnb-pc{display:none;}
    .gnb-mob{display:block; width:100%;}
}
@media(max-width:480px){
    .gnb-mob .gnb > li > a{padding:20rem 0rem;}
    .gnb-mob .gnb > li .open{top:20rem; right:0;}
    .gnb-mob .box{padding:25rem 20rem;}
}


/* footer */
footer{padding:70rem 0; background:#eee;}
footer .inr-wide{display:flex;}
.ftLogo{display:block; width:340rem; height:35rem;}
.ftLogo img{display:block; height:100%;}
.ftCnt{margin-top:10rem; width:calc(100% - 340rem);}
.ftCnt_link{display:flex; gap:50rem;}
.ftCnt_link li{}
.ftCnt_link li a{display:block; font-size:var(--fs15); font-weight:600; line-height:1; color:#666;}
.ftCnt_info{margin-top:30rem; padding-top:45rem; border-top:1px solid #ccc;}
.ftCnt_info .location{display:flex;}
.ftCnt_info .location li{display:flex; gap:20rem; font-size:var(--fs18); line-height:1;}
.ftCnt_info .location li+li{margin-left:50rem; padding-left:50rem; border-left:1px solid #bbb;}
.ftCnt_info .location em{font-weight:bold; color:#333;}
.ftCnt_info .location p{color:#555;}
.ftCnt_info address{margin:35rem 0 55rem; font-size:var(--fs16); line-height:1.4; color:#777;}
.ftCnt_info address span{display:inline-block; margin-right:50rem;}
.ftCnt_info i{display:block; font-size:var(--fs14); line-height:1.4; color:#999;}
footer .top-btn{display:flex; align-items:center; justify-content:center; position:fixed; right:2%; bottom:0; width:80rem; aspect-ratio:1/1; border-radius:50%; background:rgba(155,155,155,.35); opacity:0; visibility:hidden; transition:.5s ease;}
footer .top-btn img{display:block; width:25rem;}
.isScrolled footer .top-btn{bottom:30rem; opacity:1; visibility:visible; z-index:99;}
@media(max-width:1024px){
    footer{padding:60rem 0;}
    footer .inr-wide{display:block;}
    .ftLogo{width:auto; height:32rem;}
    .ftCnt{margin-top:40rem; width:100%;}
    .ftCnt_link{gap:30rem;}
    .ftCnt_info{margin-top:20rem; padding-top:35rem;}
    .ftCnt_info .location li{gap:10rem;}
    .ftCnt_info .location li+li{margin-left:30rem; padding-left:30rem;}
    .ftCnt_info address{margin:25rem 0 40rem;}
    .ftCnt_info address span{margin-right:30rem;}
    footer .top-btn{width:70rem;}
    footer .top-btn img{width:22rem;}
    .isScrolled footer .top-btn{bottom:20rem;}
}
@media(max-width:480px){
    footer{padding:50rem 0 60rem;}
    .ftLogo{height:28rem;}
    .ftCnt{margin-top:30rem;}
    .ftCnt_info{margin-top:15rem; padding-top:30rem;}
    .ftCnt_info .location{display:block;}
    .ftCnt_info .location li+li{margin-top:12rem; margin-left:0; padding-left:0; border-left:none;}
    .ftCnt_info address{margin-bottom:30rem;}
    .ftCnt_info address span{margin-bottom:5rem; margin-right:20rem;}
    footer .top-btn{width:50rem;}
    footer .top-btn img{width:18rem;}
}


/* quickmenu */
.quickMenu {position: fixed; bottom: 130rem; right: 2.5%; text-align: center; opacity: 0; z-index: 90; transition: all 0.3s ease 0s;}
.quickMenu .fold {position: absolute; top: 50%; left: -35rem; transform: translateY(-50%); width: 35rem; height:65rem; display: none; align-items: center; justify-content: center; background: var(--color-point); color: var(--color-white); border-radius: 3rem 0 0 3rem;}
.quickMenu p {font-size: 14rem; letter-spacing: -0.015em; margin-top: 5rem}
.quickMenu .menu {display: flex; flex-direction: column; align-items: flex-end; gap: 10rem;}
.quickMenu .menu li svg {height: 25rem; fill: var(--color-white);}
.quickMenu .menu li .icon {width:60rem; height: 60rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;  gap: 10rem; background: #222; box-shadow : rgba(0, 0, 0, 0.08) 0 0 20rem;  transition :  .4s}
.quickMenu .menu li .icon span {display: none; white-space: nowrap; color: var(--color-white);}
.quickMenu .menu li:nth-child(1) .icon {background: #03CF5D;}
.quickMenu .menu li:nth-child(2) .icon {background: #2dabed;}
.quickMenu .menu li:nth-child(3) .icon {background: #3eb044;}
.quickMenu .menu li:nth-child(4) .icon {background: #03cf5d;}
.quickMenu .menu li:nth-child(5) .icon {background: var(--color-point);}
.fp-viewing-main01 .quickMenu .menu li p, .fp-viewing-main02 .quickMenu .menu li p {color: var(--color-white);}
body:not(.fp-viewing-lastPage) .quickMenu {opacity: 1; display: block; visibility:visible;}

.quickMenu li:hover .icon {width:150rem; border-radius: 30rem; }
.quickMenu li:hover .icon span {display: block;}
.quickMenu li:hover p {opacity: 0;}


@media (max-width:1400px){
    .fp-viewing-main02 .quickMenu .menu li p, .fp-viewing-main03 .quickMenu .menu li p {color: var(--color-black);}
}
@media (max-width:1080px){
    .quickMenu {bottom: 20rem; right: 20rem;}
    .quickMenu .menu li p {display: none;}
    .quickMenu.active {right: -80rem;}
    .quickMenu svg {height: 22rem;}
 }
    footer .address ul {gap:12rem 30rem;}
}
@media (max-width:767px){
    .quickMenu {width: 100%; right: 0; bottom: 0;}
    .quickMenu .menu {display: grid; grid-template-columns: repeat(5,1fr); gap: 0;}
    .quickMenu .menu li .icon {width: 100%; height: 75rem; border-radius: 0; flex-direction: column; background: var(--color-point3) !important; border-left: 1rem dotted rgba(255, 255, 255, 0.25); box-shadow: none; gap: 6rem;}
    .quickMenu .menu li .icon span {display: block; white-space: wrap; font-size: 12rem;}
    .quickMenu .menu li svg {width: 20rem; height: auto;}
    .quickMenu .menu li:nth-child(1) .icon {border-left: 0;}
    .quickMenu .menu li:hover .icon {background: #eb670a !important; }
    body.fp-viewing-lastPage .quickMenu {opacity: 1; display: block; visibility:visible;}

    
}
@media (max-width:480px){
}