:root{
  /* --mainColor : #fba012;
  --subColor : #FFCF50; */
  /* --mainColor : #44841a; */
  --mainColor : #336114;
  --subColor : #3b9649;
  --subColor2 : #44841a;
  --themeColor1 : #e70052;
  --themeColor2 : #562d80;
  --themeColor3 : #630235;
  --basic: rgba(0, 0, 0, .8);
  --lightFont: rgba(0, 0, 0, .5);
  --grayBg: #F0F0F0;
  --border: rgba(0, 0, 0, .13);
}

.header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 900;
	transition: 0.4s;
	transition-property: background, height;
	height: 0;
  }

  .header::after{
	content: '';
	display: block;
	position: absolute;
	opacity: 0;
	visibility: hidden;
	top: 50%;
	left: 10%;
	transform: translate(0, -50%);
	filter: brightness(0.6);
	background: url(../../images/common/logo_ci.png)no-repeat center center;
	background-size: contain;
	aspect-ratio: 1300/1063;
	width: 320px;
	z-index: -1;
  }
  
  .header .wrapper-base {
	background: rgb(255 255 255 / 60%);
	border-bottom: 1px solid transparent;
	transition: background 0.4s;
	box-sizing: border-box;
  }
  
  .header .wrapper {
	max-width: 1820px;
	width: 95%;
	margin: 0 auto;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	position: relative;
  }
  
  .header .ham-menu {
	width: 40px;
	height: 14px;
	position: relative;
	display: none;
	cursor: pointer;
  }
  .header .ham-menu span {
	width: 100%;
	height: 2px;
	/* background: #fff; */
	background: #000;
	position: absolute;
	top: 0;
	left: 0;
	transition: 0.4s;
  }
  
  .header .ham-menu span:nth-of-type(2) {
	width: 30px;
	right: 0;
	top: auto;
	bottom: 0;
	left: auto;
  }
  
  .header .logo {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
  }
  
  .header .logo img {
	width: 240px;
	/* filter: brightness(0) invert(1); */
  }
  
  .header nav {
	display: flex;
	padding-right: calc(110px - 40px);
  }
  
  .header nav .depth-base {
	position: relative;
  }
  
  .header nav .depth-base > a::after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 1px;
	background: var(--mainColor);
	transition: width 0.4s;
  }
  
  .header nav .depth-base > a {
	/* color: #fff; */
	color: #000;
	/* padding: 35px 70px 35px 0; */
	padding: 35px 100px 35px 0;
	display: inline-block;
	transition: color 0.4s;
	font-size: 24px;
	position: relative;
	font-weight: 500;
	/* width: 200px; */
	font-weight: bold;
  }
  
  .header nav .depth-base .depth {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	display: none;
	padding: 30px 0 0;
	box-sizing: border-box;
  }
  
  .header nav .depth-base:hover > a::after {
	width: 100%;
  }
  
  .header nav .depth-base .depth > li:first-child {
	margin-top: 0;
  }
  .header nav .depth-base .depth > li {
	/* margin-top: 30px; */
	margin-top: 20px;
	text-align: left;
  }
  
  .header nav .depth-base .depth > li p,
  .header nav .depth-base .depth > li a {
	color: #444444;
	letter-spacing: -0.045em;
	transition: color 0.4s;
	word-break: keep-all;
	line-height: 1.3;
	font-size: 20px;
  }
  
  .header nav .depth-base .depth > li p {
	display: flex;
	gap: calc(70 / 16 * 1em);
	justify-content: space-between;
	cursor: pointer;
	white-space: nowrap;
  }
  
  .header nav .depth-base .depth > li p:hover,
  .header nav .depth-base .depth > li a:hover {
	color: var(--mainColor);
  }
  
  .header nav .depth-base .depth > li a span {
	color: #777777;
  }
  
  .header nav .depth-base .depth > li .dropdown {
	padding-top: 30px;
	display: none;
  }
  
  .header nav .depth-base .depth > li .dropdown li + li {
	margin-top: 20px;
  }
  
  .header nav .depth-base .depth > li .dropdown li a {
	font-size: 14px;
	letter-spacing: -0.04em;
	color: #444444;
	transition: color 0.4s;
  }
  
  .header nav .depth-base .depth > li .dropdown li a:hover {
	color: var(--mainColor);
  }


  /* mouse-over */
  .header.visible {
	background: #fff;
	height: 440px;
	box-shadow: 1px 3px 5px 0 rgba(0, 0, 0, 0.04);
  }

  .header.visible::after{
	  opacity: 0.35;
	  visibility: visible;
	  transition: all 0.4s 0.2s;
  }
  
  .header.visible .wrapper-base {
	border-color: #e5e5e5;
  }
  
  .header.visible .logo img {
	filter: none;
  }
  
  .header.visible nav .depth-base > a {
	color: black;
  }
  .header.visible nav .depth-base:hover > a {
	color: var(--mainColor);
  }

  @media screen and (max-width:1600px) {
	.header::after{
		left: 5%;
	  }
  }
  
  @media screen and (max-width: 1480px) {
	.header .logo img {
		width: 180px;
	  }

	.header nav {
	  padding-right: 25px;
	}
  
	.header nav .depth-base > a {
	  padding: 35px 70px 35px 0;
	  font-size: 22px;
	}
  
	/* .header nav .depth-base .depth {
	  padding: 25px 0 0;
	} */
  }
  
  @media screen and (max-width: 1280px) {

	.header.visible{
		height: 380px;
	}

	.header::after {
		width: 280px;
        left: 0%;
    }

	.header nav {
	  padding-right: calc(25px / 2);
	}
	.header nav .depth-base > a {
	  font-size: 16px;
	  /* padding: 35px 0;
	  width: 155px; */
	}
  
	.header nav .depth-base .depth > li p {
	  gap: 25px;
	}
	.header nav .depth-base .depth > li p, .header nav .depth-base .depth > li a{
		font-size: 15px;
	}
  
	.header nav .depth-base .depth {
	  padding: 25px 0 0;
	}
  }
  
  @media screen and (max-width: 1024px) {
	.header {
	  pointer-events: none;
	}
	.header::after {
		content: none;
    }


	.header .wrapper {
	  height: 80px;
	}
	.header .logo {
	  pointer-events: all;
	}
	.header .logo img {
	  width: 160px;
	}
	.header nav {
	  display: none;
	}
	.header .ham-menu {
	  display: block;
	  pointer-events: all;
	}
  }
  
  @media screen and (max-width: 820px) {
	.header {
	  height: auto;
	}
  
	.header .wrapper-base {
	  /* height: 65px; */
	  height: auto;
	  box-sizing: border-box;
	}
  
	.header .full-menu {
	  height: calc(100vh - 65px);
	}
  
	.header .wrapper {
	  height: auto;
	  justify-content: space-between;
	  padding: 15px 0;
	}
  
	.header .logo {
	  position: static;
	  left: auto;
	  top: auto;
	  transform: none;
	}
  
	.header .logo img {
	  width: 150px;
	}
  }
  
  /* header.on */
  
  .header.on .wrapper-base {
	background: #fff;
	box-shadow: 5.8px 6.9px 8px 0 rgba(0, 0, 0, 0.04);
  }
  
  .header.on nav .depth-base > a {
	color: #000;
  }
  /* .header.on .logo img {
	filter: none;
  } */
  
  .header.on .ham-menu span {
	background: #000;
  }
  
  
  
  /* full-menu 클릭 */
  
  .header.menu-open .wrapper-base {
	background: #fff;
  }
  
  .header.menu-open .logo img {
	filter: none;
  }
  
  .header.menu-open .ham-menu {
	width: 25px;
  }
  .header.menu-open .ham-menu span {
	background: #000;
  }
  
  .header.menu-open .ham-menu span:nth-of-type(1) {
	transform: rotate(45deg) translateY(-50%);
	top: 50%;
	width: 100%;
  }
  .header.menu-open .ham-menu span:nth-of-type(2) {
	width: 100%;
	transform: rotate(-45deg) translateY(50%);
	bottom: 50%;
  }
  
  .header.menu-open .full-menu {
	pointer-events: all;
	clip-path: circle(200% at 0% 0%);
  }
  
  /* full-menu */
  .header .full-menu {
	background: #fff;
	padding: 50px 2.5%;
	box-sizing: border-box;
	overflow-y: auto;
	height: calc(100vh - 110px);
	clip-path: circle(0% at 0% 0%);
	pointer-events: none;
	transition: clip-path 0.4s;
	border-top: 1px solid #e5e5e5;
  }
  
  .header .full-menu .depth + .depth {
	margin-top: 35px;
  }
  
  .header .full-menu .depth > p {
	font-size: 20px;
	font-weight: 500;
	cursor: pointer;
  }
  
  .header .full-menu .t-depth {
	background: #ececec;
	padding: 30px 0;
	margin-top: 20px;
	border-radius: 10px;
	display: none;
  }
  
  .header .full-menu .t-depth p {
	text-align: center;
  }
  
  .header .full-menu .t-depth a {
	color: #000000;
	font-size: 16px;
	letter-spacing: -0.04em;
	font-weight: bold;
  }
  
  .header .full-menu .t-depth > li + li {
	margin-top: 20px;
  }
  
  .header .full-menu .t-depth .dropdown-flex {
	display: flex;
	gap: calc(70 / 16 * 1em);
	justify-content: center;
	cursor: pointer;
  }
  
  .header .full-menu .t-depth .dropdown {
	text-align: center;
	padding-top: 20px;
	display: none;
  }
  
  .header .full-menu .t-depth .dropdown li {
	font-size: 14px;
  }
  
  .header .full-menu .t-depth .dropdown li + li {
	margin-top: 15px;
  }
  
  @media screen and (max-width: 820px) {
	.header .full-menu {
	  height: calc(100vh - 65px);
	}
  
	.header .full-menu .t-depth .dropdown-flex {
	  gap: 35px;
	}
  }

/* ======= Footer ======= */
footer { overflow-x: hidden; width: 100%; background-color: #fff; }
footer .container { max-width: 1080px;
    -webkit-transition: ease-out .35s;
    -o-transition: ease-out .35s;
    transition: ease-out .35s;
    width: 100%;
    margin: 0 auto;
}

footer {background: #f1f1f1;}
.foot-nav ul { display: block; overflow: hidden;}
.foot-nav .depth1 { margin: 60px 0; }
.foot-nav .depth1 > li { position: relative; float: left; padding-left: 30px; }
.foot-nav .depth1 > li:after{
    content: ''; position: absolute; display: block; z-index: 2;
    top:0; right:0; width: 1px; height: 240px;
    background: #ebebeb;
}
.foot-nav .depth1 > li:first-child:before{
    content: ''; position: absolute; display: block; z-index: 2;
    top:0; left:0; width: 1px; height: 250px;
    background: #ebebeb;
}
.foot-nav .depth1 > li > ul { margin-top: 30px; }
.foot-nav .depth2 li { line-height: 28px; }


.footer-top { clear: both; padding: 26px 0 17px; }
.footer-top .container { position: relative; }
.pt-list { position: relative; }
.pt-list li { position: relative; padding: 0 15px; /* color: #cdd1e3; */ color: #fff; }
/* .pt-list li:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; margin: auto; width: 1px; height: 15px; background: rgba(0,0,0,.1); } */
.pt-list li:last-child:after { content: none; }
.pt-list li { padding: 0 15px; background: url('../../images/common/pt-list-bar.png') right center no-repeat; }
.pt-list li a { font-size: 18px; font-weight: 500; /* color: #cdd1e3 !important; */color: #fff !important;}
.pt-list .today { position: absolute; top: 0; right: 0; }

.sns-list {display: flex; margin: 10px 0;  gap: 10px; padding: 0 15px;}
.sns-list li{display: flex;align-items: center;justify-content: center;}
.sns-list li a{max-width: 24px; /* height: 24px; */ display: flex; justify-content: center; align-items: center;}
.sns-list li.youtube a{max-width: 28px; /* height: 24px; */}

.footer-bottom { /* background: #40424b; */ background: var(--mainColor); padding: 30px 0; /* color: #9ca0b1; */color: #fff; }
.footer-bottom .container { position: relative; }
.bottom-r { padding: 7px 0 20px; }
.bottom-r ul.list { }
.bottom-r ul.list li { background: url('../../images/common/bottom_bar_wh.png') right center no-repeat; }
.footer-r ul.list li a { /* color: #9ca0b1 !important; */ color: #fff; cursor: text; }
.footer-bottom ul.list { display: flex; gap: 5px 0; flex-wrap: wrap;}
.footer-bottom ul.list li { padding: 0 15px; }
.footer-bottom ul.list li:last-child { background: none; }
.footer-bottom ul.list li a { /* color: #9ca0b1; */ color: #fff;}
.footer-r ul.list li a { /* color: #9ca0b1; */ cursor: text; }
.copyright { margin-top: 20px; font-size: 13px; /* color: #9ca0b1; */ color: #fff; padding: 0 15px; }
.f-sns-ul { position: absolute; top: -10px; right: 15px; }
.f-sns { float: left; margin-right: 10px; }
.f-sns:last-child { margin-right: 0; }
.f-sns a { display: block; }
.f-sns a i { display: block; width: 29px; height: 29px; }


@media (max-width: 1024px){
.foot-nav { display: none; }
}
@media (max-width: 768px){
    .footer-top { padding: 20px 0 10px; }
    .pt-list li a { font-size: 14px; }
    .footer-bottom ul.list li a { font-size: 13px; }
}
@media (max-width: 550px){
    .f-sns-ul { display: none; }
    .bottom-r { padding-left: 0; }
}



#quick{right: 60px;top: 50%;transform: translateY(-50%);position: fixed;z-index: 999;opacity: 0; visibility: hidden; transition: 0.7s;}
#quick.on{opacity: 1; visibility: visible;}
#quick ul{background: #fff;width: 80px;right: 20px;padding: 25px 0;border-radius: 10px;border: 1px solid #D5E3EB;box-shadow: 0 0 40px rgba(0,82,126,0.1);}
#quick ul li{margin-bottom: 30px;}
#quick ul li:last-child{margin-bottom: 0}
#quick ul li a{display: block;text-align: center;}
#quick ul li a strong{display: block;font-size: 14px;font-weight: 400;line-height: 16px;color: #596870;margin-top: 8px;}
#quick ul li a path{transition: 0.7s}
#quick ul li a text{transition: 0.7s}
#quick ul li:hover a path{fill: var(--mainColor)}
#quick ul li:hover a text{fill: var(--mainColor)}
#quick button{width: 100%;height: 80px;background: var(--mainColor);border-radius: 10px;text-align: center;margin-top: 10px;}
#quick button i{display: block}
#quick button strong{font-size: 18px;color: #FFFFFF;margin-top: 3px;font-weight: 400; font-family: "Outfit", sans-serif;}


@media screen and (max-width:1825px) {
  #quick ul li{margin-bottom: 20px;}
}

@media screen and (max-width:1750px) {
  #quick{right: 30px;}
}

@media screen and (max-width:1600px) {
  #quick{right: 20px;}
}

@media screen and (max-width:960px) {
    #quick ul li a strong{display: none}
    #quick{right: 0}
    #quick ul{width: 50px;}
    #quick ul li:nth-child(1) a svg{width: 28px;height: auto}
    #quick ul li:nth-child(2) a svg{width: 28px;height: auto}
    #quick ul li:nth-child(3) a svg{width: 20px;height: auto}
    #quick ul li:nth-child(4) a svg{/* width: 27px; */width: 25px; height: auto}
    #quick ul li{margin-bottom: 10px;}
    #quick ul{padding: 10px 0}
    #quick button{height: 50px;}
    #quick button strong{display: none}
    #quick button i svg{width: 11px;height: auto}
    #quick ul{border-radius: 8px 0 0 8px;}
    #quick button{border-radius: 8px 0 0 8px;}
}



/* priv_modal popup */
.layerWrap {
    width: 100%;
    position: fixed;
    bottom:  0;
    left: 0;
    height: 100vh;
    z-index: 999;
    display: none;
  }
  
  .layerWrap .bg {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
  }
  .layerWrap .popWrap {
    position: relative;
    width: 90%;
    max-width: 900px;
    background-color: #fff;
    padding: 35px;
    box-sizing: border-box;
    line-height: 1.2;
    height: 70vh;
    top: 50vh;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .layerWrap .popWrap .popClose {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    position: absolute;
    bottom: 100%;
    right: 0;
    color: #fff;
    background-color: #000;
    cursor: pointer;
  }
  .layerWrap .popWrap .pop {
    overflow-y: auto;
    height: 100%;
  }
  .layerWrap .popWrap .pop dl dt {
    font-size: 18px;
  }
  .layerWrap .popWrap .pop dl dd {
    font-size: 14px;
    margin-top: 10px;
  }
  .layerWrap .popWrap .pop p {
    margin-top: 20px;
    font-size: 14px;
  }
  .layerWrap strong {
    font-weight: bold;
  }

  

  /*  pop_quick */
  .layerWrap.pop_quick .popWrap {
    position: relative;
    width: 90%;
    max-width: 900px;
    background-color: #fff;
    padding:50px 35px;
    box-sizing: border-box;
    line-height: 1.2;
    height: auto;
    top: 50vh;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .layerWrap.pop_quick .popWrap .pop .pop_call li {display: flex; gap: 10px; justify-content: center; align-items: center;}
  .layerWrap.pop_quick .popWrap .pop .pop_call li i{color: #888; font-size: 16px;}
  .layerWrap.pop_quick .popWrap .pop .pop_call li span{font-size: 18px; color: #333;}
  .layerWrap.pop_quick .popWrap .pop .pop_call li .title{font-weight: bold; font-size: 24px;}

  .layerWrap.pop_quick .popWrap .pop .pop_call li + li{
		margin-top: 20px;
  }


  @media screen and (max-width: 820px) {
    .layerWrap .popWrap {
      padding: 15px;
      height: 50vh;
    }

	.layerWrap.pop_quick .popWrap .pop .pop_call li .title{display: block;}
  }