@charset "utf-8";
/* 기본프로그램 사용자모듈 메뉴 - PC */
.all_m_btn {padding:10px; background:#323337;}
.all_m_btn img {position:absolute; top:28%; left:15px; width:10%; max-width:40px; cursor:pointer;}
.all_m_btn .mutit {text-align:center; font-weight:900; font-size:26px; color:#fff;}
.pro_m_wrap {display:none; font-family:'Pretendard', sans-serif; transition:all 0.3s linear;}
.pro_m_wrap .m_menu {width:200px;}
.pro_m_wrap .bg_black {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); z-index:-1;}


/* 기본프로그램 사용자모듈 메뉴 - MOBILE */
.pro_m_wrap .subleftmenu {
	list-style:none;
	margin:0;
	padding:0;
}
.pro_m_wrap .subleftmenu li {
	border-bottom:1px solid #515155;
	background:#323337;
}
.pro_m_wrap .subleftmenu a {
	display:block;
	color:#b5b2b2;
	font-size:14px;
	padding:11px 5px 11px 15px;
	font-family:'Noto Sans KR';
}
.sub_title_m{
	font-size:28px !important;
	font-weight:bold;
	color:#fff !important;
	padding:12px 5px 12px 15px !important;
}
.pro_m_wrap .subleftmenu a:hover {
	background:#307dd4;
	color:#fff;
}
.sub_title_m:hover {
	background:#323337 !important;
	cursor:default;
}

@media all and (max-width:999px){
	.pro_m_wrap {display:block; position:absolute; left:-100%; top:0; z-index:999;}
	.pro_m_wrap.view {left:0;}
}

@font-face {
    font-family: 'KIMM_Light';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2212@1.0/KIMM_Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'KIMM_Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2212@1.0/KIMM_Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}


/* basic */


.inner{width:100%; max-width:1640px; margin:0 auto; position:relative;}
.inner.w1400{width:100%; max-width:1400px; margin:0 auto; position:relative;}

.wrap h1,
.wrap h2,
.wrap h3,
.wrap h4,
.wrap h5,
.wrap h6{margin: 0; padding: 0;}

@media all and (max-width: 1640px) {
	.inner{width:93.75%;}
}
@media all and (max-width: 1400px) {
	.inner.w1400 {width: 93.75%;}
}


/* font */
.mont{font-family:'Montserrat' !important}
.pre{ font-family: 'Pretendard' !important;}
.kim_l{font-family: 'KIMM_Light' !important;}
.kim_b{font-family: 'KIMM_Bold' !important;}


/* header */
#header {position: fixed; top: 0; left: 0; width: 100%; z-index: 99; height: 100px;}
#header > .inner{display: flex; justify-content: flex-end; height: 100%; box-sizing: border-box; }
#header h1{margin: 0; position: absolute; left:0; top: 50%; transform: translateY(-50%);}
#header h1 a{display: block; width: 198px; height: 46px; background: url(/img/header_logo_off01_new.png)no-repeat center / contain;}
#header .gnb{display: flex; align-items: center;}
#header .gnb > ul{ display: flex; height: 100%; align-items: center;}
#header .gnb > ul > li{ height: 100%; position: relative; box-sizing: border-box;}
#header .gnb > ul > li > a{font-size: var(--fz-20); width: 180px; text-align: center; height: 100%; position: relative; box-sizing: border-box; font-weight: 500; letter-spacing: -0.025em; text-align: center; color:#fff;  display: flex; align-items: center; justify-content: center;}
#header .gnb > ul > li:hover .depth02{opacity: 1; top: 100%; background-color: var(--bg);}
#header .gnb > ul > li:hover > a{background-color: var(--bg);}
#header .gnb > ul > li:hover > a{}

#header.on .gnb > ul > li .depth02,
#header.active .gnb > ul > li .depth02{display: block; top: 100%; opacity: 1; height: auto;}


#header .gnb > ul > li .depth02{transition: all 0.5s; opacity: 0;  width: 100%; box-sizing: border-box; padding: 5px 0; position: absolute; top: -250px; left: 50%; transform: translateX(-50%); z-index: 50;}
#header.active .gnb > ul > li .depth02,
#header.on .gnb > ul > li .depth02{transition: all 0s;}
/* #header .gnb > ul > li .depth02:before{content: ''; height: 100%; width: 1px; background: #e5e5e5; left: 0; top: 0; position: absolute;} */
#header .gnb > ul > li .depth02:hover:before{content: none;}

#header .gnb > ul > li .depth02 li a{font-size: var(--fz-18); box-sizing: border-box; font-weight: 300; color: #666666; letter-spacing: -0.025em; padding: 12.5px 30px; position: relative; display: flex; align-items: center; gap: 5px; text-align: center; justify-content: center;}
#header .gnb > ul > li .depth02 li a:before{position: relative; content:none; width: 7px; height: 12px; background:url(/img/menu_arrow.png)no-repeat center center / cover; left: 0; display: block; flex-shrink: 0;}
#header .gnb > ul > li .depth02 li a:hover:before{content: '';}

#header .gnb > ul > li:hover .depth02 li a{ color:#fff;}
#header .gnb > ul > li .depth02 li a:hover{font-weight: 700;}

/* 20230807 추가 */
#header .lang_wrap{width: 120px; padding: 0 8px; box-sizing: border-box; display: flex; justify-content: center; align-items: center; margin: 0 50px 0 5%; position: relative;}
#header .lang_wrap a{font-size: var(--fz-16); color: #fff; font-weight: 400; display: flex; align-items: center; }
#header .lang_wrap a.active::after{content: ''; display: inline-block; width: 12px; height: 7px; margin-left: 20px; background:url(/img/lang_arr_icon.png);}
#header .lang_wrap a::before{content: ''; display: inline-block; margin-right: 8px; width: 18px; height: 18px; background: url(/img/lang_icon01.png);}

#header .lang_wrap .lang_box{width: 100%; display: none; position: absolute; padding: 0 15px; box-sizing: border-box; top: calc(50% + 20px); left: 0; }
#header .lang_wrap .lang_box a{height: 100%; }




#header .all_btn{display: inline-block; vertical-align: middle; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; box-sizing: border-box; background: url(/img/all_btn_off.png)no-repeat center center /cover;}
#header .m_btn {display:none; width:24px; position:absolute; top:50%; right:0; transform: translateY(-50%); text-align:right; cursor:pointer; }
#header .m_btn i{display:inline-block; width:100%; height:2px; margin:3px 0; background:#fff; transition:all 0.5s;}
#header .m_btn i:nth-of-type(2){width:84%;}
#header .m_btn.on i:nth-of-type(1){margin:11px 0 -2px; transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);}
#header .m_btn.on i:nth-of-type(2){width:0; margin:0;}
#header .m_btn.on i:nth-of-type(3){margin:0 0 11px; transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg);}

[data-type="product"] #header .lang_wrap a,
#header.active .lang_wrap a {color: #222;}
[data-type="product"] #header .lang_wrap a::before,
[data-type="product"] #header .lang_wrap a.active::after,
#header.active .lang_wrap a::before,
#header.active .lang_wrap a.active::after{filter: opacity(0.5) drop-shadow(0 0 0 #000);}

@media all and (max-width:1300px){
	#header .lang_wrap{margin: 0 30px 0 0;}

}
@media all and (max-width:1100px){
	#header .gnb > ul > li > a{width: 150px;}

}

@media all and (max-width:1024px){
	#header .all_btn{display: none;}
	#header .m_btn {display:inline-block;}
}

.header_bg{display:none;position: absolute; top: 100%; width: 100%; height: 400px; z-index: 1; background-color: #fff;}
.header_bg.on,
.header_bg.active{display: block;}

/* header.on*/
#header.on,
#header.active,
.sub #header{background-color: #fff;}
#header.on:before,
#header.active:before,
.sub #header:before{content: ''; background: #e5e5e5; width: 100%; bottom: 0; left: 0; height: 1px; position: absolute;}
#header.on .gnb > ul > li > a,
#header.active .gnb > ul > li > a,
.sub #header .gnb > ul > li > a{color:#000;}
#header.on .gnb > ul > li:hover > a,
#header.active .gnb > ul > li:hover > a,
.sub #header .gnb > ul > li:hover > a{color: #ffffff;}
#header.on h1 a,
#header.active h1 a,
.sub #header h1 a{filter:invert(1);}
#header.on .all_btn,
#header.active .all_btn,
.sub #header .all_btn{background-image: url(/img/all_btn_on.png);}




#header .gnb > ul > li:hover > a{color: #FFF !important;}

#m_menu {z-index:102; position:fixed; right:-100%; top:0; width:500px; max-width:80%; height:100%; background-color:#fff; box-sizing:Border-box; transition:all 0.5s; overfloW-y:auto;}
#m_menu.on {right:0; }
#m_menu .top_box {position:relative; padding:10px; box-sizing:border-box; height: 100px;}
#m_menu .top_box .close_btn {position:absolute; right:20px; top:calc(50% - 15px); width:30px; height:30px; }
#m_menu .top_box .close_btn i {display:block; width:100%; height:2px; background-color:#333; }
#m_menu .top_box .close_btn i:first-of-type {-webkit-transform:rotate(45deg) translate(9px,9px); -moz-transform:rotate(45deg) translate(9px,9px); -ms-transform:rotate(45deg) translate(9px,9px); -o-transform:rotate(45deg) translate(9px,9px); transform:rotate(45deg) translate(9px,9px); }
#m_menu .top_box .close_btn i:last-of-type {-webkit-transform:rotate(-45deg) translate(-7px,8px); -moz-transform:rotate(-45deg) translate(-7px,8px); -ms-transform:rotate(-45deg) translate(-7px,8px); -o-transform:rotate(-45deg) translate(-7px,8px); transform:rotate(-45deg) translate(-7px,8px); }
#m_menu .login_box {padding:20px 0; background-color:#292929; text-align:center; }
#m_menu .login_box a {position:relative; padding:0 30px; font-size:20px; color:#fff; letter-spacing:-0.04em; }
#m_menu .login_box a:first-of-type:before {content:''; position:absolute; right:-1px; top:calc(50% - 7px); width:2px; height:15px; background-color:#fff; }
#m_menu .gnb_box {border-top:1px solid #ddd; }
#m_menu .gnb_box > ul > li {border-bottom:1px solid #dddddd; }
#m_menu .gnb_box > ul > li > a {position:relative; display:block; padding:20px 20px; font-size:20px; font-weight:bold; color:#222222; letter-spacing:-0.04em; box-sizing:border-box; }
#m_menu .gnb_box .depth02 {display:none; padding:10px 0; background-color:#000; }
#m_menu .gnb_box .depth02 li a {position:relative; display:block; padding:7px 20px; font-size:18px; color:#fff; letter-spacing:-0.04em; box-sizing:border-box; }

body[class*="black_white"] #header {background-color: #fff;}
/* body[class*="black"] #header h1 a{background-image: url(/img/header_logo_on01_new.png);} */

body[class*="black"] #header h1 a{filter:invert(1);}

body[class*="black"] #header .all_btn{background-image: url(/img/all_btn_on.png);}
body[class*="black"] #header .gnb > ul > li > a{color:#000;}
body[class*="black"] #header .m_btn i,
.sub #header .m_btn i{background-color: #000;}

body[class*="black"] #header .lang_wrap a{color: #000;}
body[class*="black"] #header .lang_wrap a::before{filter: opacity(0.5) drop-shadow(0 0 0 #000);}
body[class*="black"] #header .lang_wrap a.active::after{filter: opacity(0.5) drop-shadow(0 0 0 #000);}


body[class*="footer"] #header{background-color: #fff;}

@media all and (max-width:1024px){
	#header.on:before{content: none;}
	#header.on{background-color: transparent;}
	.header_bg.on, .header_bg.active{display: none;}
	#header .gnb > ul{display: none;}
	.m_menu_bg{width: 1000vh; display: none; background-color: rgba(0,0,0,0.3); position: fixed; top: 0; left: 0; z-index: 50; height: 1000vh;}
}

/* footer */
#footer {background-color: #141719; position: relative; padding: 50px 0;}
#footer .top_menu > ul{display: flex; width: 100%; border-top: 1px solid #5b5d5e; border-bottom: 1px solid #5b5d5e;}
#footer .top_menu > ul > li{width: 25%; font-size: var(--fz-16); font-weight: 400; letter-spacing: -0.025em; padding: 45px 0; text-align: center; border-right: 1px solid #5b5d5e; color: #fff; transition: .5s;}
#footer .top_menu > ul > li:hover {background-color: var(--bg);}
#footer .top_menu > ul > li:hover .depth02 li{color:#fff;}
#footer .top_menu > ul > li:last-child{border-right: none;}
#footer .top_menu > ul > li .depth02{padding: 20px 0;}
#footer .top_menu > ul > li .depth02 li{font-size: var(--fz-16); font-weight: 400; letter-spacing: -0.025em; color: #5b5d5e; transition: .5s;}
#footer .top_menu > ul > li .depth02 li + li{padding-top: 15px;}
#footer .top_menu > ul > li .depth02 li a{position: relative;}
#footer .top_menu > ul > li .depth02 li a:before{content: ''; position: absolute; bottom: 0; width: 0; height: 1px; left: 0; background: rgba(255,255,255,.3); transition: .5s;}
#footer .top_menu > ul > li .depth02 li a:hover:before{width: 100%;}

#footer .bot_footer .inner{display: flex; justify-content: space-between; padding: 30px 0;}
#footer .bot_footer h1{margin-right: 30px;}
#footer .bot_footer .adr_box{width: fit-content; -webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center;-moz-align-items: center;-ms-flex-align: center; align-items: center; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex;}
#footer .bot_footer .adr_box li{font-weight: 400; font-size: var(--fz-16); letter-spacing: -0.025em; color: #5b5d5e; padding-right: 30px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex;}
#footer .bot_footer .adr_box li b{font-weight: bold; margin-right: 10px;}
#footer .bot_footer .adr_box li:last-child{padding-right: 0;}
#footer .copy{color: #FFF; font-size: var(--fz-13); text-align: center;}
#footer .top_btn{position: absolute; right: 0; top: 50%; transform: translateY(-50%);}

@media all and (max-width:1000px) {
	#footer .top_menu > ul > li{ padding: 35px 0;}
	#footer .bot_footer .inner{flex-direction: column; gap: 30px;}
}
@media all and (max-width:560px) {
	#footer .top_menu > ul{flex-wrap: wrap;}
	#footer .top_menu > ul > li{width: 50%; border: none; padding: 25px 0;}
}

/*scroll box*/
.scroll_box{position: absolute; bottom: 110px; right: 140px; z-index: 30;}
.scroll_box a{font-size: var(--fz-16); letter-spacing: 0.075em; font-weight: 700; display: flex; align-items: center; color:#fff; gap: 10px;}
.scroll_box a .img_box{width: 38px; height: 38px; box-sizing: border-box; border-radius: 50%; border: 1px solid rgba(255,255,255,.6); overflow: hidden;}
.scroll_box a .img_box i{width: 5px; height: 5px; box-sizing: border-box; border-radius: 50%; background-color: #fff; display: block; animation: scrollBox infinite 1s linear; margin: 0 auto;} 

@keyframes scrollBox {
	0% {
	  transform: translateY(-10px);
	}
	45%{
		transform: translateY(18px);
	}
	55%{
		transform: translateY(20px);
	}
	100% {
	  transform: translateY(48px);
	}
  }

  @media all and (max-width:768px){
	.scroll_box {right: 10px;}
  }