@charset "utf-8";

/*.mapo{font-family: 'MapoFlowerIsland';}
.pretend{font-family: 'Pretendard-Regular';}
.josefin{font-family: "Josefin Sans", sans-serif;}
*/

.clearfix::after{ content:""; clear:both; }

/*menu*/
.gnb{ width:100%; height:80px; position:absolute; top:0; left:0; z-index:99999; }
.gnb .gnb-in{  width:1800px; height: 100%; display: flex; justify-content: space-between; align-items: center; margin:0 auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,.1));}
.gnb .gnb-in .logo a{ display:block; width:100%; height:100%; }
.gnb .gnb-in .logo a img{ width:150px;  }

.btn-area{ display:flex; justify-content:space-between; align-items:center; }
.gnb .gnb-in .btn-area .res-btn a i{ font-size:34px; color: #fff;}
.ham-btn{ position:relative; width:39px; height:31px; margin-left:30px; cursor:pointer;}
.ham-btn::before, .ham-btn::after, .ham-btn div{ content:""; display:block; height:2px; margin:10px 0; transition: all 0.1s ease-in-out; background-color:#fff; }
.ham-btn::before{ margin-top:0; }
/*.ham-btn div{ transition: all 0.3s ease-in-out; }*/
/*.ham-btn::before, .ham-btn::after{ transition-delay:0.2s; }*/

.gnb.scroll .ham-btn div, .gnb.scroll .ham-btn::before, .gnb.scroll .ham-btn::after{ background-color:#393939; }
.gnb.hammenu-on .ham-btn div, .gnb.hammenu-on .ham-btn::before, .gnb.hammenu-on .ham-btn::after{ background-color:#393939; }
.gnb.hammenu-on .btn-area .res-btn a i{ color:#393939; }
.gnb.hammenu-on .ham-btn div{ background-color:transparent; }
.gnb.hammenu-on .ham-btn::before{ transform:translateY(16px) rotate(45deg); }
.gnb.hammenu-on .ham-btn::after{ transform:translateY(-8px) rotate(-45deg); }
.gnb.hammenu-on .logo h1 a img{ content: url(../img/logo2.png); width: 150px; }

/*menu scroll*/
.gnb.scroll{ width:100%; height:80px; background-color: #fff; transition:all 0.5s ease-in-out; position:fixed; }
.gnb.scroll .gnb-in{ justify-content:space-between; }
.gnb.scroll .gnb-in h1{ display:block; }
.gnb.scroll .gnb-in h1 a{ display:block; }
.gnb.scroll .gnb-in h1 a img{ width:150px; }
.gnb.scroll .btn-area .res-btn a i{ color:#393939;  }

/*hammenu*/
.hammenu{ position:fixed; top:0; right:-50%;z-index:-1; width:30%; height:100vh; background-color:#fff; }

.hammenu .hammenu-in{ width:100%; height:100%; display: flex; align-items: center; justify-content: center;}
.hammenu .hammenu-in .menu{ display:flex; justify-content:center; flex-direction: column; width: 50%;}
.hammenu .hammenu-in .menu li a{ font-family: "Josefin Sans", sans-serif; color:#000000;font-size: 18px; font-weight: 500; text-align:center; display: block; padding: 15px 0;}
.hammenu .hammenu-in .menu li a::after{ content:"+"; margin-left:20px; font-weight:300; transition:all 0.3s ease-in-out; }
.hammenu .hammenu-in .menu li.on a::after{ content:"x"; transform: rotate(45deg); }
.hammenu .hammenu-in .menu > li > .sub{ display:none; margin-bottom:20px; }
.hammenu .hammenu-in .menu > li > .sub > li{ margin:0; }
.hammenu .hammenu-in .menu > li > .sub > li a::after{ content:""; }
.hammenu .hammenu-in .menu > li > .sub > li > a{ font-family: 'Pretendard'; color: #acacac; font-size: 14px; font-weight: 100; display: block; padding: 10px 0;}
.hammenu .hammenu-in .menu > li > .sub > li > a:hover{color: #515151; font-weight: 400; display: block; padding: 10px 0;}

header .gnb.hammenu-on .hammenu{ right:0; }

/*footer*/
footer{ width:100%; border-top: 1px solid #7b7b7b; margin-top: 120px;}
footer .footer-in{ width:1800px; margin:0 auto; padding: 110px 0; display: flex; justify-content: space-around; align-items: center;}
.footer-in .footer-l{ display: none;}
.footer-in .footer-l h1{ display:none; }
.footer-in .footer-l ul li{ margin-bottom:0px; line-height: 1.5em;}
.footer-in .footer-l ul li span{ font-family: 'Pretendard'; font-size: 14px; color: #515151;}
.footer-in .footer-l ul li span a{ font-family: 'Pretendard'; font-size: 20px; color: #515151;}

.footer-in h1 a{ display:block;}
.footer-in h1 a img{ vertical-align:middle; width:200px; }
.footer-in h1 span{ display: block; margin-top: 36px; font-size: 18px;}

.footer-in .footer-r ul li{ line-height: 1.5em;}
.footer-in .footer-r ul li span{ font-family: 'Pretendard'; font-size: 14px; color: #515151;}
.footer-in .footer-r ul li span img{ width:25px; vertical-align:middle; }
.footer-in .footer-r ul li span a{ font-family: 'Pretendard'; font-size: 14px; color: #515151;  transition: all 0.3s ease-in-out;}
.footer-in .footer-r ul li span a:hover{ color: #ff5a53;}
.footer-in .footer-r ul li span a span{ color: #515151;transition: all 0.3s ease-in-out;}
.footer-in .footer-r ul li span a:hover span{ color: #ff5a53;transition: all 0.3s ease-in-out;}


/***********************************************************************반응형*****************************************************************************/

@media all and (max-width: 1600px){
	.gnb .gnb-in{ width:95%; }
	footer .footer-in{ width:95%; }

}
@media all and (max-width:1024px){
	footer .footer-in{ flex-direction:column; padding: 80px 0; }
	.footer-in .footer-l h1{ display:block; margin-bottom:45px; text-align: center;}
	.footer-in .footer-l ul li{ text-align:center; }
	.footer-in > h1 > a{ display:none; }
	.footer-in .footer-r{ margin-top: 36px; }
	.footer-in .footer-r ul li{ text-align:center; }

	.gnb.hammenu-on .logo a img{ filter: invert(0); }
	header .gnb.hammenu-on .hammenu{ width:100%; }
}

@media all and (max-width: 520px){
	.gnb .gnb-in .logo a img{ width: 130px;}
	.gnb.scroll .gnb-in h1 a img{ width: 130px;}
	.gnb .gnb-in .btn-area .res-btn a i{ font-size: 36px;}
	/* .ham-btn::before, .ham-btn::after, .ham-btn div{ margin: 9px auto;}
	.ham-btn::before{ margin-top: 0;} */
	.gnb.hammenu-on .ham-btn::before{ transform: translateY(15px) rotate(45deg);}

	/* .ham-btn{margin: 6px 10px 6px 20px;} */

	footer{ margin-top: 80px;}
}