@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&family=Noto+Serif+KR:wght@200..900&display=swap');


/*common*/
html { font-size:1px; }
body { font-size:18rem; font-family: "Noto Sans KR", sans-serif; font-optical-sizing: auto; font-weight:400; color:#333; letter-spacing:-0.7rem; line-height:1.6; }
a {color:#333;}
@media all and (max-width:768px){
    html { font-size:0.95px; }
}
@media all and (max-width:480px){
    html { font-size:0.9px; }
}
:root {
	--serif : "Noto Serif KR", serif;
	--sprite : url('../img/sprite.png') no-repeat;
	--p_color : #692117;
	--blue : #132650;
	--orange : #e16539;
	--center : translate(-50%, -50%);
	--hcenter : translateY(-50%);
	--wcenter : translateX(-50%);
}
.wrap { max-width:1300px; width:94%; margin:0 auto;}


header { position:absolute; left:0; top:0; width:100%; height:120rem; display:flex; align-items:center; justify-content:space-between; gap:40rem; padding:0 3%; z-index:30; }
header.on {background:#fff;}
header h1 a {display:inline-flex; vertical-align:top; }
header h1 a::before { content:''; display:block; width:285px; height:55px; background:var(--sprite) 0 -140px; }
header a.link { display:flex; align-items:center; gap:3rem; font-size:17rem; }
header a.link::before {content:''; display:block; width:31px; height:26px; background:var(--sprite) -235px 0; }
header a.sitemap {display:flex; align-items:center; font-size:15rem; gap:5rem; }
header a.sitemap::before {content:''; display:block; width:31px; height:15px; background:var(--sprite) -276px 0; }

nav { flex-grow:1; }
.pc_nav .depth1 { justify-content:center; gap:50rem; }
.pc_nav .depth1 > li > a {font-size:22rem; font-weight:500; }
.pc_nav .depth2_wrap,
.pc_nav .depth2_wrap::after { top:120rem; }
.pc_nav+.nav_bg { top:120rem; }

#m_nav_open {display:none;}


footer { background:#eff2f9; padding:50rem 0; }
footer .wrap { display:flex; align-items:center; gap:100rem; }
footer .wrap a.logo { text-indent:-999999px; }
footer .wrap a.logo::before { content:''; display:block; width:285px; height:55px; background:var(--sprite) 0 -140px; }
footer .address {display:flex; flex-wrap:wrap; gap:5rem 30rem; }
footer .address strong { margin-right:10rem; }
footer .address p.copy { width:100%; font-size:14rem; color:#9f9f9f; margin-top:10rem;  }


@media all and (max-width:1500px){
	header {gap:20rem;}
	.pc_nav .depth1 { gap:30rem; }
}
@media all and (max-width:1300px){
	header a.link {display:none;}
	.pc_nav .depth1 { gap:25rem; }
	.pc_nav .depth1 > li > a { font-size:20rem; }
}
@media all and (max-width:1023px){
	.pc_nav,
	header a.sitemap {display:none;}
	#m_nav_open {display:flex;}
	footer .wrap {gap:50rem; }
}
@media all and (max-width:768px){
	footer .wrap a.logo {display:none;}
	footer { padding:40rem 0;}
}
@media all and (max-width:480px){
	header h1 a {zoom:90%;}
	.pc_nav,
	header a.sitemap {display:none;}
	#m_nav_open {display:flex; text-indent:-99999px; }
}


/*메인 서브 공통 비주얼*/
.visual_img img { position:absolute; bottom:0; left:50%; }
.visual_img .triangle { margin-left:-10%; z-index:0; animation:triangle 1.1s both; }
.visual_img .tree3 { margin-left:22%; z-index:1; animation:tree .5s cubic-bezier(.25,.46,.45,.94) both; animation-delay:1s; }
.visual_img .tree2 { margin-left:5%; z-index:1; animation:tree .5s cubic-bezier(.25,.46,.45,.94) both; animation-delay:0.8s;  }
.visual_img .tree1 { margin-left:-33%; z-index:1; animation:tree .5s cubic-bezier(.25,.46,.45,.94) both; animation-delay:0.5s; }
.visual_img .building { z-index:2; animation:building .8s cubic-bezier(.23,1.000,.32,1.000) both; animation-delay:1.5s; }
.visual_img .cloud1 { margin-left:-27%; bottom:150rem; zoom:70%; z-index:3; animation:cloud 3s cubic-bezier(.25,.46,.45,.94) infinite both; animation-delay:2s; }
.visual_img .cloud2 { margin-left:-13%; bottom:-55rem; z-index:3; animation:cloud 5s cubic-bezier(.25,.46,.45,.94) infinite both; animation-delay:2.5s; }
.visual_img .cloud3 { margin-left:-2%; bottom:530rem; zoom:75%; z-index:3; animation:cloud 4s cubic-bezier(.25,.46,.45,.94) infinite both; animation-delay:3s; }
.visual_img .cloud4 { margin-left:20%; bottom:150rem; z-index:3; animation:cloud 4.7s cubic-bezier(.25,.46,.45,.94) infinite both; animation-delay:2s;}
@keyframes building {
    0%{transform:var(--wcenter) translateY(1000px) scaleY(2.5) scaleX(.2);transform-origin:50% 100%;filter:blur(40px);opacity:0}
    100%{transform:var(--wcenter) translateY(0) scaleY(1) scaleX(1);transform-origin:50% 50%;filter:blur(0);opacity:1}
}
@keyframes triangle {
    0%{transform:translateY(-500px);animation-timing-function:ease-in;opacity:0}
    38%{transform:translateY(0);animation-timing-function:ease-out;opacity:1}
    55%{transform:translateY(-65px);animation-timing-function:ease-in}
    72%{transform:translateY(0);animation-timing-function:ease-out}
    81%{transform:translateY(-28px);animation-timing-function:ease-in}
    90%{transform:translateY(0);animation-timing-function:ease-out}
    95%{transform:translateY(-8px);animation-timing-function:ease-in}
    100%{transform:translateY(0);animation-timing-function:ease-out}
}
@keyframes tree {
    0%{transform:scale(0);transform-origin:50% 100%;opacity:1}
    100%{transform:scale(1);transform-origin:50% 100%;opacity:1}
}
@keyframes cloud{
    0%{transform:rotateX(-30deg) translateX(300px) skewX(30deg);opacity:0}
    50%{ opacity:1}
    100%{transform:rotateX(0deg) translateX(0) skewX(0deg);opacity:0}
}



/*sub layout*/
.sub_visual { background:url('../img/main_bg.jpg') repeat center; overflow:hidden; }
.sub_visual .wrap { position:relative; padding:150rem 0 70rem; }
.sub_visual .title { color:var(--p_color); font-family:var(--serif); }
.sub_visual .title h3 { font-size:30rem; margin-bottom:20rem; }
.sub_visual .title p { font-size:40rem; line-height:1.4; }
.sub_visual .title span { display:block; }
.sub_visual .visual_img { position:absolute; bottom:-30rem; right:-10%; zoom:60%; width:80%; }
.sub_nav_wrap { border-bottom:1px solid #e6e6e6; }
.sub_nav > ul {min-height:60rem;} /*서브네비 높이*/
.sub_nav .depth2 {top:60rem;} /*펼침메뉴 위치*/
.sub_util .share div {top:43rem;}
#content { padding:70rem 0; }

@media all and (max-width:768px){
	.sub_visual .wrap { position:relative; padding:120rem 0 40rem; }
	.sub_visual .visual_img { display:none; }
	.sub_visual .title {text-align:center;}
	.sub_visual .title h3 {font-size:40rem; margin-bottom:10rem; }
	.sub_visual .title p {font-size:20rem;}
	.sub_visual .title span { display:inline; }
	#content { padding:40rem 0; }
}