@charset "utf-8";
/*
 * File       : layout.css
 * Author     : gylee
 *
 * Dependency : css/reset.css

 *
 * SUMMARY:
 * 01) GLOBAL
 * 02) HEADER
 * 03) FOOTER
 * 04) SCROLL TOP
 * 06) CONTAINER
 * 07) PAGE
 * 08) SEARCH
 * 09) PRIVACY
 * 10) 404
 */

/*  @import url('https://fonts.googleapis.com/css2?family=Gothic+A1:wght@400;500;700&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo&family=Noto+Sans+KR:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');
 

/* **************************************** *
 * GLOBAL
 * **************************************** */
 .noto-sans-kr-bh {
  font-family: "Noto Sans KR", sans-serif;
  font-optical-sizing: auto; 
  font-style: normal;
}
.noto-serif-kr-bh {
  font-family: "Noto Serif KR", serif;
  font-optical-sizing: auto;
  font-style: normal;
}

html{font-size: clamp(14px, 0.875vw + 0.5rem, 18px); width: 100%;}

body.lang-ko {font-family:  'Montserrat' , "Noto Sans KR", "Noto Serif KR", 'Gothic A1',  sans-serif;}
body.lang-en {font-family:  'Montserrat' ,'NanumSquareNeo-Medium', sans-serif;}
body {overflow-x: hidden;word-break: keep-all;  }

a {color: #222;text-decoration: none;}
[lang="en"] {font-family: 'Montserrat', sans-serif;}

/* WRAP */
.wrap {max-width: 1200px;margin: 0 auto; position: relative;}

/* **************************************** *
 * HEADER
 * **************************************** */
header {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 20000;
	-webkit-transition: background .2s ease;
	-moz-transition: background .2s ease;
	-ms-transition: background .2s ease;
	-o-transition: background .2s ease;
	transition: background .2s ease;
	background: #fff;
	height: 120px;
	line-height: 80px;
	box-shadow: 0px 0px 10px rgb(120 130 140 / 30%);
}
.header-wrap .logo {
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 500;
	height: 80px;
}
.header-wrap .logo a { font-size: 0px; position: absolute; display: block; line-height: 80px; height: 80px; left: 0; top: 0; }
.header-wrap .logo a img { vertical-align: middle; }
.sub_header{background: #2b323e; color: #fff;}
.sub_header h1 a{color: #fff;}
.header-wrap {
	max-width: 1200px;
	margin: 0 auto;
	text-align:right;
	position:relative;
}

.gnb-area {
	float:left;
	width:60%;
	text-align:right;
}
.gnb {
	float:right;
	width: 100%;
}
.gnb li {
	display:inline-block;
	text-align: right;
	position: relative;
}
.gnb li a {
	line-height: 40px;
	font-size: clamp(14px, 0.875vw + 0.5rem, 18px);
	letter-spacing: -.05px;
	font-weight: 500;
}

.gnb li + li {
	margin-left: 4%;
}
.gnb li.active a{
	color: #3876ba;
}
#all-menu {
	display: none;
	position: absolute;
	right: 0;
	width: 60px;
	height: 60px;
	line-height: 0;
}
.header-wrap .nav-btns {
    position: absolute;
    top: 20px;
    right: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 8px;
}
/* ----------------------------------------------------------------
    aside
----------------------------------------------------------------- */
.side-menu {
	height: 100%;
	overflow: auto;
}
.top-area {
	position: fixed;
	left: 0;
	width: 100%;
	height: 60px;
	max-height: 60px;
	padding: 0 15px;
	border-bottom: 1px solid #e1e1e1;
	background: #fff;
	z-index: 100;
}
.top-area > * {
	height: 100%;
}
.top-area .logo {
	float:left;
	width: 13.5px;
}
.top-area .all-close {
	float: right;
	width: 20px;
	margin-right: 30px;
}
.side-menu .scroll-y {
	margin: 90px 0 20px;
	overflow-x: hidden;
	overflow-y: auto;
}
.side-gnb {
	padding: 20px 0;
}
.side-gnb li{line-height: 60px;height: 60px; margin: 20px 0;}
.side-gnb a {
	width: 100%;
	display: inline-block;
	font-weight: 400;
	color: #333;
 	letter-spacing: -.05px;
	font-size: 48px;
	line-height: 48px;
	margin: 50px 0;
	text-align: center;
	font-family: 'Nanum Myeongjo', Georgia, serif;
}
.side-gnb li.active a {
	position: relative;
	font-weight: 700;
	color: #1b74ef;
}
#aside-cont {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 90%;
	max-width: 340px;
	background: #fff;
	visibility: hidden;
	-webkit-transform: translate(400px, 0);
	-moz-transform: translate(400px, 0);
	-ms-transform: translate(400px, 0);
	-o-transform: translate(400px, 0);
	transform: translate(400px, 0);
	-webkit-transition: all .2s ease;
	-moz-transition: all .2s ease;
	-ms-transition: all .2s ease;
	-o-transition: all .2s ease;
	transition: all .2s ease;
	z-index: 20001;
}
#aside-cont.slide-left {
	-webkit-transform: translate(0, 0);
	-moz-transform: translate(0, 0);
	-ms-transform: translate(0, 0);
	-o-transform: translate(0, 0);
	transform: translate(0, 0);
	visibility: visible;
}
.aside-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	visibility: hidden;
	-webkit-transition: all .2s ease;
	-moz-transition: all .2s ease;
	-ms-transition: all .2s ease;
	-o-transition: all .2s ease;
	transition: all .2s ease;
}
aside .aside-overlay {
	background: rgba(0, 0, 0, .7);
	visibility: visible;
	z-index: 20000;
}
/* icon */
.ico {
	display: inline-block;
	vertical-align: middle;
	text-indent: -1000px;
	overflow: hidden;
	margin:0;
}
.ico-menu {
	width: 30px;
	height: 30px;
	background: url("../images/icon_all.svg") no-repeat 50% 50%;
}
.ico-close {
	width: 30px;
	height: 30px;
	background: url("../images/icon_close.svg") no-repeat 50% 50%;
}
/* 스크롤 */
.scrolldown{position:fixed;bottom:30px;right:10px;pointer-events: none;cursor: default; color: #333; font-size: 10px; letter-spacing: 0; z-index:9; transform:translateX(-50%);
animation:scrollDown03 1.4s ease 0s infinite; margin-left: -39px; opacity:1; transition: opacity 0.3s ease;}
.scrolldown.hidden{opacity:0;}
.scrolldown.white{color:#fff;}
.scrolldown.white i{background:#fff;}
.scrolldown em{display:block; margin-bottom:5px; text-transform: uppercase; writing-mode: vertical-rl;}

.scrolldown i{position: relative; display:block; opacity:0; margin:0 auto; width:1px; height:30px; margin:0 auto; background: #333; border-radius: 50%;
animation:scrollDown03 1.4s ease 0s infinite;}
.scrolldown.black i{background:rgba(0,0,0,.3);}
.scrolldown i + i{margin-top:8px;}
.scrolldown i:nth-child(2){animation-delay:0.1s;}

@keyframes scrollDown{
0%{opacity:0;}
100%{opacity:1;}
}
@keyframes scrollDown02{
0%{transform: scale(1); opacity: 0.3;}
40%{opacity: 0.3;}
100%{transform: scale(2); opacity: 0;}
}
@keyframes scrollDown03{
0%{transform: translate(0px,0px); opacity: 0.3;}
40%{opacity: 0.3;}
100%{transform: translate(0px,20px); opacity: 1;}
}
/* **************************************** *
 * footer
 * **************************************** */

 #footer{position: relative;padding: 0px 0 50px 0;}
.footer_link{background: #f5f5f5; height: 64px; line-height: 64px;}
.footer_link ul li{float:left; padding-right: 60px;}
#footer .copyright{padding-top: 60px; display: block;}
#footer .info{ float:left; width: 1000px; padding-bottom: 50px;}
#footer .info p{clear: both; padding-top: 20px; font-size: 14px;}
#footer dl dt, #footer dl dd{float:left; font-size: 14px; padding: 2px 0;} 
#footer dl dt{padding-right: 10px; }
#footer dl dt::after{content:":";  position: relative; top: 0; width: 20px; height: 20px; padding-left: 10px;}
#footer dl dd{padding-right: 20px; }
#footer h4{font-size: 24px; font-family: 'Montserrat', sans-serif; font-weight: 700; float:left; width: 200px; color: #333;}

@media screen and (max-width: 1200px) {
	.header-wrap {margin: 0 80px;}
	#footer .wrap {padding: 0 80px;}
	#footer h4 {padding: 30px 0;}
	#fp-nav{display:none;} 
	#footer .footer_link {padding:0px 0px;}  
}

/* **************************************** *
* 1024px
* **************************************** */
@media only screen and (max-width: 1024px) {
	
}
@media only screen and (max-width: 820px) {
	.scrolldown {display: none;}
	.gnb-area {display: none;}
	#all-menu {display: block;right: -15px; top: 5px}
	.header-wrap {margin: 0 30px;}
	#footer .wrap {padding: 0 30px;}
	
}
@media only screen and (max-width: 540px) {
	.header-wrap {
		display: flex;
		align-items: center;
		min-height: 60px;
	}
	.header-wrap .logo,
	.header-wrap .nav-btns,
	.header-wrap #all-menu {
		position: static;top: auto;right: auto;left: auto;
	}
	.header-wrap #all-menu {
		margin-right: -15px;
	}
	.header-wrap #all-menu { margin-right: -12px;}
	header .logo{ width: 150px; text-align: left;}
	.header-wrap .logo a img { width: 70%; position: relative; left:0;}
	.ico-close { top:3px;}
	#contents h2 {font-size: 24px;}
	#footer{width: 100%;;}
	#footer .info{width:100%;}
	#footer h4{padding-bottom:20px}
	#footer dl dt, #footer dl dd{font-size: 12px; letter-spacing: -0.1em; padding: 2px 0px 0 0px;}
	#footer dl dt::after{padding-left:3px; margin-right: 3px;}
	#footer dl dd::after{padding-right:15px; padding-left: 5px; content:"";  position: relative;}
	
}