@charset "utf-8";


*{margin: 0; padding: 0; box-sizing: border-box;}


/*헤더*/
.hd{position: fixed; z-index: 15; width: 100%; top: 0; left: 0; pointer-events: none;}
.hd .hd-fixed-wrap{padding-top: 14px;position: relative;z-index: 20;max-width: 90%;margin: auto;}
.hd .hd-fixed-wrap .inner-con{display: flex; justify-content: space-between; align-items: center;}
.hd .hd-fixed-wrap .logo{display: inline-flex;width: 145px;pointer-events: all;position: relative;left: 45px;right: 0;padding-bottom: 6px;}
.hd .hd-fixed-wrap .logo img{display: block;width: 100%;transition: 0.8s;/* left: 25px; */}
.hd .hd-fixed-wrap .logo img.logo_white{opacity: 0;position: absolute;top: 0;}
.hd .hd-fixed-wrap .menu-btn {/* font-family: "Caudex",sans-serif; */font-size: 13px;font-weight: 400;color: #000000;pointer-events: all;position: relative;overflow: hidden;}
/* .hd .hd-fixed-wrap .menu-btn::after{content: ""; display: block; width: 100%; height: 1px; background-color: #000; transition: 0.8s;} */

.hd .hd-fixed-wrap .menu-btn {display: flex;flex-flow: column;align-items: center;justify-content: center;pointer-events: all;overflow: hidden;width: 50px;}
.hd .hd-fixed-wrap .menu-btn .btn{width: 30px;height: 30px;position: relative;display: block;cursor: pointer;}
.hd .hd-fixed-wrap .menu-btn .btn .line{width: 100%; height: 1px; background-color: white; display: block; transition: 0.4s; position: absolute; top: 50%;}
.hd .hd-fixed-wrap .menu-btn .btn .line1{transform: translateY(-6px);}
.hd .hd-fixed-wrap .menu-btn .btn .line3{transform: translateY(6px);}
.hd .hd-fixed-wrap .menu-btn .txt {color: #fff;font-size: 12px;}
.hd .hd-fixed-wrap .logo img.logo_white{opacity: 1;}
.hd .hd-fixed-wrap .logo img.logo_black{opacity: 0;}
.hd .hd-fixed-wrap .menu-btn .txt .txt1{display: block;}
.hd .hd-fixed-wrap .menu-btn .txt .txt2{display: none;;}
	

.hd .main-menu-wrap{width: 100vw;height: 100vh; opacity: 0;pointer-events: none;transition: 1.2s;position: absolute;top: 0;left: 0;}

.hd.on .main-menu-wrap{opacity: 1; pointer-events: all;}
.hd .main-menu-wrap .menu-wrap{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);text-align: center;z-index: 15;display: flex;}
.hd .main-menu-wrap .menu-wrap li {margin: 4px 30px;display: block;}
.hd .main-menu-wrap .menu-wrap > li > a{font-size: 32px;line-height: 2.6;color: #fff;letter-spacing: 2px;font-weight: 100;border-bottom: 1px solid #ccc;font-family: "Fredoka", sans-serif;}
.hd .main-menu-wrap .menu-wrap > li > a::after{content: "";width: 100%;height: 2px;background-color: #a2caed;display: block;position: relative;left: 0;top: 0;transform: scaleX(0);transition: 0.6s;transform-origin: left;margin-top: -23px;margin-bottom: 0.2em;}
.hd .main-menu-wrap .menu-wrap > li:hover > a::after{transform: scaleX(1);}



.hd .main-menu-wrap .menu-wrap .sub-menu{display: contents;justify-content: center;height: 0;overflow: hidden;transition: 0.6s;font-size: 15px;color: #fff;}
.hd .main-menu-wrap .menu-wrap li.on .sub-menu{height: 1.6em;}
.hd .main-menu-wrap .menu-wrap .sub-menu a{font-size: 14px;color: #fff;cursor: pointer;font-family:  'Pretendard-Regular';letter-spacing: 1px;}
.hd .main-menu-wrap .menu-background-wrap{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: #1f2123;}
.hd .main-menu-wrap .menu-background-wrap li{position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: 1.6s; opacity: 0; background-size: cover; background-repeat: no-repeat; background-position: center;}
.hd .main-menu-wrap .menu-background-wrap li.on{opacity: 0.25;}
.hd .main-menu-wrap .menu-wrap .sub-menu a:hover {border-bottom: 1px solid;}

.hd .hd-fixed-wrap .menu-revss-btn{display: flex;}
.hd .hd-fixed-wrap .menu_rev_btn{pointer-events: all;font-size: 12px;color: #fff;cursor: pointer;/* display: grid; */text-align: center;margin-left: 10px;}




.hd .hd-fixed-wrap .menu-btn{transition: 0.8s;}
.hd.on .hd-fixed-wrap .menu-btn{color: white;}
.hd.on .hd-fixed-wrap .logo img.logo_white{opacity: 1;}
.hd.on .hd-fixed-wrap .logo img.logo_black{opacity: 0;}
.hd.on .hd-fixed-wrap .menu-btn .line-wrap .line{background: white;}

.hd.on .hd-fixed-wrap .menu-btn .btn .line1{transform: rotate(45deg);}
.hd.on .hd-fixed-wrap .menu-btn .btn .line2{opacity: 0;}
.hd.on .hd-fixed-wrap .menu-btn .btn .line3{transform: rotate(-45deg);}
.hd.on .hd-fixed-wrap .menu-btn .txt1{display: none;}
.hd.on .hd-fixed-wrap .menu-btn .txt2{display: block;}
.hd.on .hd-logo{opacity: 0;}


.hd.down .hd-fixed-wrap .menu-btn .btn .line{background: black;}
.hd.down .hd-fixed-wrap .menu-btn .txt{color: black;}
.hd.down .hd-fixed-wrap .logo img.logo_white{opacity: 0;}
.hd.down .hd-fixed-wrap .logo img.logo_black{opacity: 1;}
.hd.down .hd-fixed-wrap .menu_rev_btn{color: #2B2B2B;}
.hd.down.on .hd-fixed-wrap .menu_rev_btn{color: #fff;}
.hd.down.on .hd-fixed-wrap .menu-btn .btn .line{background: white;}
.hd.down.on .hd-fixed-wrap .menu-btn .txt{color: white;}
.hd.down.on .hd-fixed-wrap .logo img.logo_white{opacity: 1;}
.hd.down.on .hd-fixed-wrap .logo img.logo_black{opacity: 0;}

.hd.nev_nd .hd-fixed-wrap .menu-btn .btn .line{background-color: #000;}
.hd.nev_nd .hd-fixed-wrap .menu-btn .txt .txt1 {color: #000;}
.hd.nev_nd .hd-fixed-wrap .logo img.logo_black{opacity: 1;}
.hd.nev_nd .hd-fixed-wrap .logo img.logo_white{opacity: 0;}
.hd.nev_nd .hd-fixed-wrap .menu_rev_btn{color: #000;}

.hd.nev_nd.on .hd-fixed-wrap .menu-btn .btn .line{background-color: #fff;}
.hd.nev_nd.on .hd-fixed-wrap .menu-btn .txt .txt1 {background-color: #fff;}
.hd.nev_nd.on .hd-fixed-wrap .logo img.logo_black{opacity: 0;}
.hd.nev_nd.on .hd-fixed-wrap .logo img.logo_white{opacity: 1;}
.hd.nev_nd.on .hd-fixed-wrap .menu_rev_btn{color: #fff;}

/*헤더*/



/* footer */

.ft{background-color: #f3f3f3;padding-top: 65px;}

.ft .ft-box{display: flex;align-items: flex-start;justify-content: space-between;width: 102%;}
.ft .inner-con { width: 80%; margin: 0 auto 50px auto;}

.ft .ft-lef {flex-flow: column;align-items: flex-end;color: #d6d4d2;width: 0;}
.ft .ft-lef .logo{display: block;margin-top: 50px;width: 250px;}

.ft .ft-cen { text-align:center;}
.ft .ft-cen a {font-size: 23px;display: inline-block;margin: 0 8px 40px;color: #5d6d75;font-weight: 600;font-family: 'Pretendard-Regular';}
.ft .ft-cen p {font-size: 15px;line-height: 2;font-family: 'Pretendard-Regular';}
.ft .ft-cen p b {padding-right: 7px;}
.ft .ft-ris h3 {margin-bottom: 11px;text-align: center;font-size: 25px;color: #5d6d75;font-weight: 300;border-bottom: 1px solid;font-family: "Fredoka", sans-serif;font-weight: 400;letter-spacing: 5px;}
.ft .ft-ris ul li {text-align: center;margin-top: 6px;}
.ft .ft-ris ul li a {color: #443129;font-weight: 300;font-size: 12px;font-family: 'Pretendard-Regular';}

.ft .copyright{text-align: center;margin: 0 auto;font-size: 12px;font-weight: 300;color: #443129;padding: 20px 0 30px;border-top: 1px solid #ccc;}
.ft .copyright a{ color: #443129; font-family: "Pretendard-Light",sans-serif;  }

.ft .f_bottom  a:before { content: "";display: inline-block;background-image: url("http://hi-web.co.kr/web/img/hi_web_s.png");vertical-align: middle;width: 20px;height: 20px;background-size: cover;background-position: center;margin: 0 1px 4px 4px;}

.top-btn{/*height: -2px;*/position: absolute;right: 2%;bottom: 15px;font-size: 17px;z-index: 10;cursor:pointer;color: #fff;background: #5d6d75;width: 30px;height: 30px;text-align: center;line-height: 1.7;}
	
	

/* 하단 */



/* media */

@media all and (max-width : 1455px){
	.hd .main-menu-wrap .menu-wrap{transform: translate(-30%,-50%);left: 40%;}
	
}



@media all and (max-width : 1285px){
	.hd .main-menu-wrap .menu-wrap li{margin: 4px 15px;}

}


/* 해상도 */

@media all and (max-width : 1025px){
	.hd .hd-fixed-wrap{max-width: 95%;}
	.hd .hd-fixed-wrap .logo{/* left: 40px; */}
	
	.hd .main-menu-wrap .menu-wrap > li > a::after{margin-top: -12px;}
	.hd .main-menu-wrap .menu-wrap{width: 100%;left: 0;right: 0;transform: translate(0px, -0px);margin: auto;top: 15%;display: block;}
    .hd .main-menu-wrap .menu-wrap .sub-menu{height: auto;flex-wrap: wrap;margin-bottom: 15px;}
    .hd .main-menu-wrap .menu-wrap .sub-menu li{margin-bottom: 8px; display: inline-block;}
	.hd .main-menu-wrap .menu-wrap > li > a{line-height: 2;}
	
	.ft .inner-con{max-width: 95%; width: 95%;}
	
	.ft .ft-lef{width: 100%; margin-bottom: 5%;}
	.ft .ft-lef .logo{margin: 50px auto 0;}
	.ft .ft-box{display: block;}
	.ft-ris{display: none;}
}


@media all and (max-width : 600px){
	
	.hd .hd-fixed-wrap{max-width: 95%;padding-top: 10px;}
	
	footer .f_top p{font-size: 12px;}
	.hd .hd-fixed-wrap .logo{width: 100px;/* left: 20px; */}
	.top-btn{display: none !important;}
	
	.hd .main-menu-wrap .menu-wrap .sub-menu a{font-size: 13px; margin: 0 6.5px;}
	.hd .main-menu-wrap .menu-wrap > li > a{font-size: 25px;}
	
	footer .f_top .mo_br{display: block;}
	footer .f_top span { display: none;}
	
	.hd .hd-fixed-wrap .menu_rev_btn{font-size: 11px; letter-spacing: -0.5px;}
	
	.hd .main-menu-wrap .menu-wrap .sub-menu li{margin: 0;}
	
	.ft{padding-top: 20px;}
	.ft .ft-lef .logo{width: 100px;}
	.ft .ft-cen a{font-size: 16px;}
	.ft .ft-cen p{font-size: 13px;}
}


@media all and (max-width : 455px){
	
	.hd .main-menu-wrap .menu-wrap{width: 95%;}
	.hd .main-menu-wrap .menu-wrap > li > a {font-size: 20px;}
	.hd .main-menu-wrap .menu-wrap .sub-menu a{margin: 0 5px;}
	.hd .main-menu-wrap .menu-wrap li{margin-bottom: 20px;}
}


@media all and (max-width : 380px){
	.hd .hd-fixed-wrap .logo{left: 30px;}
	.hd .main-menu-wrap .menu-wrap > li > a{font-size: 18px; letter-spacing: 1.5px;}
	.hd .main-menu-wrap .menu-wrap li{margin: 0;margin-bottom: 10px;}

}