@charset "utf-8";

/* 프로그램리스트 모바일 버전 */
.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;}



.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;}
}


/* 최근본 상품 퀵메뉴 */
.quick {overflow:hidden; z-index:110; position:fixed; right:20px; top:50%; width:113px;  -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%) ;}
.quick > ul {margin-bottom:0; border:1px solid #d9d9d9; box-sizing:border-box; background-color:#fff; border-radius:10px;  overflow:hidden;}
.quick ul li.recent_prod {}
.quick ul li.recent_prod p {height:30px; font-size:16px; color:#656565; letter-spacing:-0.025em; line-height:30px; background-color:#d9d9d9; text-align:center; }
.quick ul li.recent_prod ul {padding:14px; box-sizing:border-box; }
.quick ul li.recent_prod ul li {border:1px solid #d9d9d9; margin-bottom:12px; box-sizing:border-box; }
.quick ul li.recent_prod ul li:last-of-type {margin-bottom:0; }
.quick ul li.recent_prod ul li img {width:100%; height:auto; }
.quick ul li.recent_prod .quick_pager {margin-top:0; margin-bottom:30px; }
.quick ul li.recent_prod .quick_pager a {display:inline-block; vertical-align:middle; width:auto; height:auto; border:0 none; margin:0 3px; line-height:14px; font-size:14px; color:#b6b6b6; }
.quick ul li.recent_prod .quick_pager a.active {color:#666666; }
.quick ul li.recent_prod .quick_pager .page_prev,
.quick ul li.recent_prod .quick_pager .page_next {display:inline-block; vertical-align:middle; width:9px; height:11px; border:0 none; text-indent:-9999px; }
.quick ul li.recent_prod .quick_pager .page_prev {background:url('/img/theme/quick_prev_btn.png') no-repeat center center; }
.quick ul li.recent_prod .quick_pager .page_next {background:url('/img/theme/quick_next_btn.png') no-repeat center center; }
.quick ul.zzim{margin-top:30px;}

.quick ul li.top_btn {width:100%; height:48px; background-color:#666666; box-sizing:border-box; line-height:48px; text-align:center;}
.quick ul li.top_btn a {display:block; color:#fff; line-height:48px; font-size:16px; letter-spacing:-0.025em; }

.quick_top_btn {display:none; z-index:999; position:fixed; right:20px; bottom:-60px; width:57px; height:57px; background-color:#798ebb; border-radius:50%; text-align:center; cursor:pointer; transition:all 0.5s; }
.quick_top_btn.on {bottom:60px; }
.quick_top_btn img {padding-top:12px; }
.quick_top_btn p {font-size:16px; color:#ffffff; letter-spacing:-0.025em; }

@media all and (max-width:1000px){
	.quick {display:none; }
	.quick_top_btn {display:block; }
}

/* ==========================================================================
	공통
========================================================================== */
.mont{font-family:'Montserrat', sans-serif;}

body.overflow{overflow:hidden;}

.inner{width:100%; max-width:1200px; margin:0 auto; position:relative;}
.inner.full {width: 100%; max-width: 1920px;}
.inner.w1600 {max-width: 1600px;}
.inner1000{width:100%; max-width:1000px; margin:0 auto; position:relative;}
.inner:after{clear:both; content:""; display:block; height:0; visibility:hidden;}

@media all and (max-width: 1600px) {
	.inner.w1600{width:93.75%;}
}

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

@media all and (max-width:1000px){
	.inner1000{width:93.75%;}
}

@media all and (max-width: 640px) {
	.inner {width: 100%; padding: 0 40px; box-sizing: border-box;}
}

/* ==========================================================================
	header_pop
========================================================================== */
.header_pop_bg{display:none; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:999;}
.header_pop{display:none; position:fixed; left:50%; top:50%; max-width:600px; width:93.75%; z-index:1000; text-align:center; -webkit-transform:Translate(-50% , -50%); -moz-transform:Translate(-50% , -50%); -ms-transform:Translate(-50% , -50%); -o-transform:Translate(-50% , -50%); transform:Translate(-50% , -50%);}
.header_pop .close_btn{text-align:right; margin-bottom:20px;}
.header_pop .close_btn a{display:inline-block; font-size:20px; font-weight:300; letter-spacing:-0.045em; color:#fff;} 
.header_pop .close_btn a img{display:inline-block; vertical-align:middle; margin-left:10px; margin-top:-3px;}
.header_pop .box{}
.header_pop .box .txt_box{padding:55px 10px; box-sizing:border-box; background:#fff; }
.header_pop .box .txt_box i{display:inline-block; margin-bottom:15px;}
.header_pop .box .txt_box p{font-size:26px; font-weight:500; letter-spacing:-0.045em; color:#222222;}
.header_pop .box .btn_box{font-size:0; letter-spacing:-4px;}
.header_pop .box .btn_box a{display:inline-block; vertical-align:top; width:50%; box-sizing:border-box; height:80px; line-height:80px; background:#c3c3c3; font-size:22px; font-weight:500; letter-spacing:-0.045em; color:#fff;}
.header_pop .box .btn_box a.yellow{background:#444444;}
.header_pop .box .btn_box a.black{background:#000000;}


/* ==========================================================================
	main_quick
========================================================================== */
#main_quick{display:none; position:fixed; right:20px; bottom:20px; z-index:100;}
#main_quick ul{}
#main_quick ul li + li{margin-top:20px;}
#main_quick ul li a{display:block;}
#main_quick ul li a img{max-width:100%}

@media all and (max-width:1000px){
	#main_quick {display:block;}
}

/* ==========================================================================
	header
========================================================================== */
#header{position:relative; padding:21px 40px; font-size:0; letter-spacing:-4px; box-sizing:border-box; border-bottom:1px solid #e5e5e5; background:#fff; z-index:500;}
#header .left_box{display:inline-block; vertical-align:top; width:50%;}
#header .left_box ul.gnb{}
#header .left_box ul.gnb > li{position:relative; display:inline-block; vertical-align:top; margin-right:40px;}
#header .left_box ul.gnb > li > a{display:block; font-size:18px; color:#222222; letter-spacing:-0.045em; font-weight:500; line-height:1.6; padding:10px 0;}
#header .left_box ul.gnb > li > a.mont{letter-spacing:0em; font-weight:600;}
#header .left_box ul.gnb > li ul.depth02{position:absolute; min-width:170px; display:none; padding:20px 20px 40px; background:rgba(0, 0, 0, 0.78); box-sizing:border-box; z-index:10;}
#header .left_box ul.gnb > li ul.depth02 li{padding-bottom:10px;}
#header .left_box ul.gnb > li ul.depth02 li a{display:block; font-size:18px; color:#fff; letter-spacing:-0.045em; font-weight:300;}
#header .left_box ul.gnb > li:hover ul.depth02{display:block;}
#header .logo{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%);}
#header .logo a{display:inline-block;}
#header .right_box{display:inline-block; vertical-align:top; width:50%; text-align:right;}
#header .right_box ul{display:inline-block; vertical-align:middle; font-size:0; letter-spacing:-4px;}
#header .right_box ul li{position:relative; display:inline-block; vertical-align:middle; padding:0 20px;}
#header .right_box ul li:before{content:''; position:absolute; top:50%; right:0; display:block; width:1px; height:14px; background:#e4e4e4; transform:translateY(-50%); -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%);}
#header .right_box ul li:last-of-type:before{display:none;}
#header .right_box ul li a{display:block; font-size:18px; color:#666666; letter-spacing:-0.045em; font-weight:300; line-height:1.6; padding:10px 0;}
#header .right_box ul li p{font-size:18px; color:#666666; letter-spacing:-0.045em; font-weight:300; line-height:1.6; padding:10px 0;}
#header .right_box ul li p b{color:#444444; font-weight:500;}
#header .right_box ul li h6{position:absolute; min-width:255px; font-size:18px; color:#fff; letter-spacing:-0.045em; font-weight:500; text-align:left; margin:0; margin-top:5px; padding:10px 12px; border-radius:5px; border-top-left-radius:0; background:#000000; box-sizing:border-box; z-index:5;}
#header .right_box ul li h6:before{content:''; position:absolute; top:-10px; left:0; display:block; width:0; height:0; border-left:5px solid #000; border-bottom:5px solid #000; border-right:5px solid transparent; border-top:5px solid transparent;}
#header .right_box ul li h6 b{color:#444444;}
#header .right_box > a{position:relative; display:inline-block; vertical-align:middle; font-size:16px; color:#fff; letter-spacing:-0.045em; font-weight:500; text-align:center; width:130px; padding:8px 8px 8px 40px; border-radius:40px; background:linear-gradient(180deg, #ffd481, #ffba37); box-sizing:border-box;}
#header .right_box > a:before{content:''; position:absolute; top:0; left:0; display:block; width:40px; height:40px; border-radius:50%; background:#444444 url('/img/header_icon03.png') no-repeat center center;}
#header .m_btn{position:absolute; top:50%; right:20px; display:none; transform:translateY(-50%); -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%);}
#header .m_btn a{display:inline-block; width:35px; font-size:0; letter-spacing:-4px;}
#header .m_btn a i{display:inline-block; vertical-align:top; width:12px; height:12px; margin:2.5px; border:3px solid #000; border-radius:50%; box-sizing:border-box;}
#header .m_btn a i:first-of-type{border-color:#444444; background:#444444;}
#header .m_btn.on a{width:auto;}
#header .m_btn.on a i{display:block; width:24px; height:2px; background:#000000; border:0;}
#header .m_btn.on a i:nth-of-type(n+3){display:none;}
#header .m_btn.on a i:nth-of-type(1){margin:10px 0 0; transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); background:#000000;}
#header .m_btn.on a i:nth-of-type(2){margin:-2px 0 10px; transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -o-transform:rotate(-45deg);}

.header_noline #header{border-bottom:none;}

#header.onScroll{position:fixed; top:0; left:0; width:100%;}
#header_blank{display:none; width:100%; height:90px;}

@media all and (max-width:1400px){
	#header{padding:21px 20px;}
}
@media all and (max-width:1200px){
	#header{padding:21px 10px;}
	#header .left_box ul.gnb > li{margin-right:20px;}
	#header .right_box ul{padding-right:10px;}
	#header .right_box ul li{padding:0 5px;}
	#header .right_box > a{width:100px; font-size:14px; padding:10px 8px 10px 40px;}
}
@media all and (max-width:1000px){
	#header{padding:40px 10px;}
	#header .left_box ul.gnb{display:none;}
	#header .right_box{display:none;}
	#header .m_btn{display:block;}
}

/* m_menu */
.m_menu{position:fixed; top: 0; right:-100vh; display:block; width:80%; max-width:400px; height:calc(100%); text-align:center; background:#fff; z-index:100; box-sizing:border-box; transition:all 0.3s;}
.m_menu.on{right: 0;}
.m_menu ul.gnb li{padding: 10px 0;}
.m_menu ul.gnb li a{display:inline-block; font-family: 'Pretendard'; width: 100%; text-align: left; font-size:16px; color:#000; letter-spacing:-0.045em; font-weight:300; line-height:1.6;}
.m_menu ul.btns{padding: 30px 20px 0;}
.m_menu ul.btns li{padding:8px 0;}
.m_menu ul.btns li a{display:inline-block; font-family: 'Pretendard'; width:100%; max-width:360px; height:65px; font-size:16px; color:#000; letter-spacing:-0.045em; font-weight:300; line-height:65px; border:1px solid #000000;}
.m_menu ul.btns li a.col03{color:#fff; background:#444444; border-color:#444444;}



.m_menu .logo {padding: 10px 0;}
.m_menu .logo img {filter: invert(1);}
.m_menu .top_box{display: flex; justify-content: space-between; align-items: center; }
.m_menu .close_btn{cursor: pointer;} 
.m_menu .border{border-bottom: 1px solid rgba(0, 0, 0, 1);padding: 20px 20px; box-sizing: border-box; }
.m_menu ul.gnb.m_h230{min-height: 230px;}
.m_menu ul.gnb.m_h130{min-height: 130px;}






.top_banner{position:relative; text-align:center; background:#444444;}
.top_banner .banner_box a{display:block; font-size:16px; color:#fff; letter-spacing:-0.045em; font-weight:300; padding:12px 0;}
.top_banner .banner_box a p{display:inline-block;}
.top_banner .banner_box a p:before{content:''; display:inline-block; vertical-align:middle; width:50px; height:1px; background:rgba(255, 255, 255, 0.4); margin-right:20px;}
.top_banner .banner_box a p:after{content:''; display:inline-block; vertical-align:middle; width:50px; height:1px; background:rgba(255, 255, 255, 0.4); margin-left:20px;}
.top_banner .banner_box a p b{font-weight:500;}
.top_banner .banner_box a p span{font-size:22px; font-weight:600;}
.top_banner .banner_x{position:absolute; top:10px; right:20px; display:block; font-size:20px; color:#fff; line-height:1; z-index:1;}

@media all and (max-width:1000px){
	.top_banner .banner_box a{font-size:14px;}
	.top_banner .banner_box a p:before{width:30px; margin-right:10px;}
	.top_banner .banner_box a p:after{width:30px; margin-left:10px;}
	.top_banner .banner_box a p span{font-size:20px;}
	.top_banner .banner_x{top:5px; right:5px;}
}


/* 20230925 renewal */
/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * Footer *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
#footer {color: #676767; padding: 70px 0; box-sizing: border-box;}
#footer .left {flex: 1;}
#footer .right {margin-left: auto;}
/* btns */
#footer .btn_wrap {gap: 20px 65px; flex-wrap: wrap;}
#footer .btn_wrap a {font-size: 18px; letter-spacing: -0.05em;}
#footer .btn_wrap a.cursor_none{cursor: auto;}
/* info */
#footer .info {display: flex; flex-wrap: wrap; font-size: 14px; line-height: 1.55em; letter-spacing: -0.05em; gap: 5px 15px; margin-top: 40px;}
#footer .info li:first-child {width: 100%;}
#footer .info li {flex-shrink: 1;}
/* copyright */
#footer .copyright {font-size: 14px; line-height: 1.55em; letter-spacing: -0.05em; margin-top: 15px;}
/* customer */
#footer .customer .row + .row {margin-top: 25px;}
#footer .customer h6 {font-weight: normal; font-size: 14px; letter-spacing: -0.05em; color: #929292;}
#footer .customer .tel {font-weight: 700; font-size: 14; letter-spacing: -0.05em; color: #797979;}
#footer .customer ul {font-size: 14px; letter-spacing: -0.05em;}

@media all and (max-width: 640px) {
	#footer .btn_wrap {gap: 30px;}
	#footer .btn_wrap a {font-size: 16px;}
	#footer .customer {margin-top: 40px;}
	#footer .info {display: block;}
}

#header02 {position: fixed; top: 0; left: 0; width: 100%; color: #000; z-index: 99; background-color: #fff;}
#header02 .inner {gap: 15px; padding: 20px 35px; box-sizing: border-box;}
#header02 .inner::after {display: none;}
#header02 h2 img {filter: invert(1);}
#header02 .gnb ul {display: flex; align-items: center; --gap: 10px; gap: var(--gap);}
#header02 .gnb ul li a {font-weight: 300; font-size: 12px;}
#header02 .gnb ul li.on a {font-weight: 600;}
#header02 .gnb ul li:not(:first-child) {padding-left: var(--gap); position: relative;}
#header02 .gnb ul li:not(:first-child)::before {content: ''; position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 1px; height: 12px; background-color: #000;}

#header02 .user {margin-left: auto;}
#header02 .user ul {display: flex; --gap:20px; gap: var(--gap);}
#header02 .user ul li a {font-weight: 300; font-size: 12px;}

#header02 .m_btn {display:inline-block; width:15px; text-align:right; cursor:pointer; align-self: center;}
#header02 .m_btn i{display:inline-block; width:100%; height:1px; background:#000; margin-top: 4px;}

@media all and (max-width: 640px) {
	#header02 .gnb {display: none;}
}

.white #header02.on {color: #fff; background-color: transparent;}
.white #header02.on h2 img {filter: unset}
.white #header02.on .gnb ul li:not(:first-child)::before {background-color: #fff;}
.white #header02.on .m_btn i {background-color: #fff;}