@charset "utf-8";

header{
	width:1620px; height: 80px; line-height:80px; position: fixed; top: 50px; left: 50%; transform: translateX(-50%); z-index:990;
	background:#fff; box-shadow: 0px 7px 35px 0 rgba(35, 31, 32, 0.25); font-size:22px; transition:.5s;
}
header.on{top: 0; width: 100%;}

	header h1{margin:-8px 69px 0 25px; width:117px; height:inherit; float:left;}
	
	header .log_before_wrap{float:left; display:flex;}
		header .log_before_wrap li{margin-right:56px;}
			header .log_before_wrap li a{font-family: 'Pretendard-Light'; }
			header .log_before_wrap li a.act{font-family: 'Pretendard-Bold';}
	
	header .log_before_wrap li a.act:after{display:block; content:""; position:relative; bottom:4px; width:auto; height:4px; background:#2f2f4a;}
	header .log_before_wrap_ico{float:right; display:flex;}
		header .log_before_wrap_ico li{margin-right:35px;}
			header .log_before_wrap_ico img{max-width:30px;}
	
	header .log_after_wrap{float:right; display:flex; padding:0 84px; background:#2f2f4a; font-size: 16px;}
		header .log_after_wrap li{margin-right:40px;}
		header .log_after_wrap li:last-child{margin-right:0;}
			header .log_after_wrap a{font-family:'Pretendard-Light'; /*font-family: 'Pretendard-Medium';*/ color:#fdfd0d; font-size:22px;}





/* 햄버거 */
.btn_ham{width:30px; height:inherit; }

.btn_ham .btn {display: inline-block; padding: 8px 0 !important; width:inherit; cursor: pointer; user-select: none;}

.btn_ham .bar {/* 2nd bar */
  display: block;  position: relative; width: 15px; height: 4px;
  transition: background .2s ease-out; background: #2f2f4a;
  
  float:right;
}

.btn_ham .bar:before, .btn_ham .bar:after {
  content: ''; display: block;
  width: 30px; height: 100%; position: absolute; transition: all .2s ease-out;
  background: #2f2f4a; 
}

.btn_ham .bar:before {top: 10px; right:0;}
.btn_ham .bar:after {top: -10px; right:0;}
.btn_ham .checkbox {display: none;}

/*
.btn_ham .checkbox:checked~.menu_content {max-width: 100%; right:0; }
.btn_ham .checkbox:checked~.btn .bar {background: transparent;}
.btn_ham .checkbox:checked~.btn .bar i{border: transparent;}
.btn_ham .checkbox:checked~.btn .bar:before {transform: rotate(-45deg);}
.btn_ham .checkbox:checked~.btn .bar:after {transform: rotate(45deg);}
.btn_ham .checkbox:checked~.btn:not(.steps) .bar:before,
.btn_ham .checkbox:checked~.btn:not(.steps) .bar:after {top: 0;}
*/


/* 햄버거2 */
.btn_ham2{width:30px; height:inherit; position:absolute; top:50%; right:20px; transform:translateY(-50%); }

.btn_ham2 .btn {display: inline-block; padding: 8px 0 !important; width:inherit; cursor: pointer; user-select: none;}

.btn_ham2 .bar {/* 2nd bar */
  display: block;  position: relative; width: 15px; height: 4px;
  transition: background .2s ease-out; background: #2f2f4a;
  
  float:right;
}

.btn_ham2 .bar:before, .btn_ham2 .bar:after {
  content: ''; display: block;
  width: 30px; height: 100%; position: absolute; transition: all .2s ease-out;
  background: #2f2f4a; 
}

.btn_ham2 .bar:before {top: 10px; right:0;}
.btn_ham2 .bar:after {top: -10px; right:0;}
.btn_ham2 .checkbox {display: none;}

.btn_ham2 .checkbox~.menu_content {max-width: 100%; right:0; }
.btn_ham2 .checkbox~.btn .bar {background: transparent;}
.btn_ham2 .checkbox~.btn .bar i{border: transparent;}
.btn_ham2 .checkbox~.btn .bar:before {transform: rotate(-45deg);}
.btn_ham2 .checkbox~.btn .bar:after {transform: rotate(45deg);}
.btn_ham2 .checkbox~.btn:not(.steps) .bar:before,
.btn_ham2 .checkbox~.btn:not(.steps) .bar:after {top: 0;}


/* 사이트맵  */
.sitemap_wrap{display:none; overflow-y: auto; width:100%; height:100%; position: fixed; z-index: 999; background: #fff; transition: all 900ms cubic-bezier(0.86, 0, 0.07, 1);  }

	.sitemap_head{ padding:20px; display:flex; justify-content:space-between; margin-bottom:50px; position:relative;}
	.sitemap_head:after{content:initial;}
		.sitemap_head h2 img{max-width:117px; /*54px;*/}

	.sitemap { padding:20px; display:flex; justify-content: flex-start; height: 72vh; overflow: auto;}
		.sitemap > li { width:16.666%; margin-right:30px;}
		.sitemap > li:last-child {margin-right:0}
		.sitemap > li > p { border:1px solid #e5e5e5;; font-size:17px; font-weight:400; color:#111; margin-bottom:8px; padding:10px 0; text-align:center; margin-bottom:25px;}
		.sitemap > li > ul > li { font-size:15px; padding:8px 10px;}
		.sitemap > li > ul > li a:hover{color:#2f2f4a;}


@media screen and (max-width:1679px){
	header{width:86%}
}

@media screen and (max-width:1500px){
	header{width:92%}
	header .log_after_wrap{padding:0 30px;}
}

@media screen and (max-width: 1279px) {
	header .log_after_wrap li{margin-right:0;}
}

@media screen and (max-width: 1023px) {
	header .log_before_wrap{display:none;}

	.sitemap{flex-wrap:wrap; }
	.sitemap > li {width: calc(25% - 20px); margin-right:20px; margin-bottom:30px;}
	.sitemap > li:last-child {margin-right:0}
}

@media screen and (max-width: 767px) {
	header{top:0; width:100%;}

	.sitemap_head{margin-bottom:0;}

	.sitemap > li { width: calc(50% - 20px); margin-right:20px;}
	.sitemap > li:last-child {margin-right:0}
}

@media screen and (max-width: 479px) {
	header h1{margin-right:0; margin-top:-4px; width:100px;}
	header .log_after_wrap{padding:0 25px;}
	header .log_after_wrap li a img{width:24px;}
	header .log_before_wrap_ico li{margin-right:20px;}
	header .log_before_wrap_ico img{max-width:24px;}

	.sitemap_head h2 img {max-width: 110px;}
	.sitemap > li { width: 100%; margin-right:0;}
	.sitemap > li > p{margin-bottom:15px;}
}

/* 스크롤 막기 */
.noscroll{
	height:100%; min-height:100%; 
	overflow:hidden !important; 
	touch-action:none;
}


/* 20220810 헤더수정 (태블릿까지는 members~ qi_program 보이게) */
@media screen and (max-width: 1560px) {
	header .log_before_wrap li a, header .log_after_wrap a{font-size:20px;}
}

@media screen and (max-width: 1280px) {
	header h1{margin:-8px 30px 0 25px;}
	header .log_before_wrap_ico li{margin-right:20px;}
	header .log_before_wrap li, header .log_after_wrap li{margin-right:30px;}
}

@media screen and (max-width: 1100px) {
	header .log_before_wrap li a, header .log_after_wrap a{font-size:18px;}
}

@media screen and (max-width: 1023px) {
	header .log_before_wrap {display: flex;}
	header .log_before_wrap li, header .log_after_wrap li{margin-right:20px;}
}

@media screen and (max-width: 980px) {
	header h1{margin:-8px 20px 0 25px;}
	header .log_before_wrap li a, header .log_after_wrap a{font-size:17px;}
	header .log_after_wrap{padding:0 20px;}
	header .log_before_wrap_ico img{max-width:20px;}
	header .log_before_wrap_ico li {margin-right: 15px;}
}

@media screen and (max-width: 899px){
	header .log_before_wrap {display: none;}
}

@media screen and (max-width: 580px){
	header .log_before_wrap_ico img{max-width:30px;}
	header .log_after_wrap li{margin-right:0}
}