@charset "utf-8";
/* body */
body.bg-green {background-color: #F3FBF0;}

/* flex_wrap */
.flex_wrap {display: flex;}

/* inner */
.inner{width: 100%; max-width: 1280px; margin:0 auto; position:relative;}

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

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * Header *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
/*--- top ---*/
#header .top {padding: 25px 0; box-sizing: border-box;}
#header .top .inner {align-items: center; gap: 50px;}
#header .top .search_wrap {position: relative; width: 100%; max-width: 285px;}
#header .top .search_wrap .input-type01 {max-width: unset;}
/* search_history */
#header .search_history {position: absolute; top: 100%; left: 50%; transform: translate(-50%, 15px); background-color: #fff; width: 100%; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15); padding: 15px; box-sizing: border-box; border-radius: 10px; z-index: 10; opacity: 0; visibility: hidden; transition: 0.25s;}
#header .search_history.on {opacity: 1; visibility: visible;}
#header .search_history > * + * {margin-top: 25px;}
#header .search_history .has_btn {display: flex; align-items: last baseline; justify-content: space-between;}
#header .search_history .has_btn a {font-weight: 500; font-size: 16px; line-height: 1.25em; color: #a5a5a5;}
#header .search_history li + li {margin-top: 10px;}
#header .delete_list li {cursor: pointer; display: flex; align-items: center;}
#header .delete_list li p {font-size: 14px; line-height: 1.14em; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: calc(100% - 16px); color: #6f6f6f;}
#header .delete_list li i {width: 16px; height: 16px; background: url(/icon/delete_16x16.svg) no-repeat center center / contain;}
/* search_history (recent) */
#header .recent .delete_list li p {padding-left: 20px; box-sizing: border-box; position: relative;}
#header .recent .delete_list li p::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 12px; height: 12px; background: url(/icon/clock_12x12.svg) no-repeat center center / contain;}
/* search_history (short-cut) */
#header .short-cut ul li a {display: block; font-weight: 500; font-size: 16px; line-height: 1.25em; position: relative; padding-right: 16px; box-sizing: border-box;}
#header .short-cut ul li a::before {content: ''; position: absolute; top: 50%; right: 0; width: 16px; height: 16px; background: url(/icon/chevron_right.svg) no-repeat center center / contain; transform: translateY(-50%);}
/*--- bot ---*/
#header .bot {border-bottom: 1px solid #dfdfdf;}
#header .bot .inner {align-items: center; justify-content: space-between; --gap: 35px;}
#header .bot ul {display: flex; align-items: center; gap: var(--gap);}
#header .bot ul li a {display: inline-block; font-size: 18px; line-height: 1.22em; position: relative; padding-bottom: 5px; box-sizing: border-box;}
#header .bot ul li a::before {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background-color: var(--deep-green); opacity: 0;}
/* hover & active */
#header .bot ul li.on > a,
#header .bot ul li:hover > a {font-weight: 700;}
#header .bot ul li.on > a::before,
#header .bot ul li:hover > a::before {opacity: 1; transition: 0.3s;}

@media all and (max-width: 767px) {
	#header .bot .inner {--gap: 20px; justify-content: center;}
}

#header .m_btn {display:none; width:24px; text-align:right; cursor:pointer; }
#header .m_btn i{display:inline-block; width:100%; height:2px; margin:3px 0; background:#000; 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);}


@media all and (max-width:1024px){
	#header .bot{display: none;}
	#header .m_btn{display: inline-block;}
	#header .top .inner{gap: 0; justify-content: space-between;}
}

.m_menu_bg {z-index:101; position:fixed; left:0; top:0; display:none; width:100%; height:100%; background:rgba(0,0,0,.7); cursor:pointer; }
#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; }
#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; display: flex; flex-wrap: wrap;}
#m_menu .login_box li{width: 50%; box-sizing: border-box; position: relative;}
#m_menu .login_box a {position:relative; padding:0 30px; font-size:20px; color:#fff; letter-spacing:-0.04em; display: block; box-sizing: border-box;}
#m_menu .login_box li:nth-child(1):before,
#m_menu .login_box li:nth-child(3):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; }

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * Footer *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
#footer {border-top: 1px solid #dfdfdf; font-size: 18px; color: #a5a5a5; line-height: 1.2em; padding: 65px 0 35px; box-sizing: border-box;}
#footer .flex_wrap {justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 30px;}
#footer .flex_row{display: flex; align-items: center; justify-content: space-between; flex-wrap:wrap;}
/* #footer h2 {font-weight: 400; font-size: 18px; color: #a5a5a5; line-height: 1.2em; margin: 30px 0 10px;} */
/* policy */
#footer .policy {display: flex; align-items: center; }
#footer .policy li {padding-right: 17px; position: relative;}
#footer .policy.fz16{flex-wrap: wrap; margin: 5px 0;}
#footer .policy.fz16 li{font-size: 16px;}
#footer .policy.mb0{margin-bottom:5px;}
#footer .policy.mt0{margin-top:5px;}
#footer .policy li:not(:last-child):before {content: ''; position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 1px; height: 15px; background-color: #a5a5a5;}
/* info */
#footer .info li{font-size: 16px;}
#footer .info li + li{margin-top:5px;}
#footer .info li i.call {display: inline-block; width: 20px; height: 20px; background: url(/icon/call_20x20.svg) no-repeat center center / contain; vertical-align: middle; margin-right: 8px;}
#footer .info li i.mail {display: inline-block; width: 20px; height: 20px; background: url(/img/email_icon01.png) no-repeat center center / contain; vertical-align: middle; margin-right: 8px;}
/* sns */
.sns_list_yoyo {display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 30px;}
.sns_list_yoyo li a {display: block; width: 42px; height: 42px; border-radius: 50%; border: 1px solid #a5a5a5; background: no-repeat center center; background-size: 26px auto;}
/* sns(icon) */
.sns_list_yoyo li a.insta {background-image: url(/icon/insta.svg);}
.sns_list_yoyo li a.youtube {background-image: url(/icon/youtube.svg);}
.sns_list_yoyo li a.blog {background-image: url(/icon/blog.svg);}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * float menu *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.float-menu {position: fixed; bottom: 30px; right: 30px; z-index: 30;}
.float-menu a {display: flex; gap: 15px; align-items: center; background-color: var(--deep-green); color: #fff; padding: 10px 15px; box-sizing: border-box;  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); font-weight: 700; font-size: 16px; line-height: 1em; border-radius: 55px;}
.float-menu a i {display: inline-block; width: 26px; height: 24px; background: url(/icon/headphone_26x24.svg) no-repeat center center / contain; vertical-align: middle;}

@media all and (min-width: 1921px) {
	.float-menu {right: calc(calc(100% - 1920px) / 2);}
}

@media all and (max-width:1024px){
	#footer{margin-bottom: 98px;}
}
/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * .m_quick *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.m_quick{display: none; position: fixed; bottom: 0; left: 0; width: 100%; box-sizing: border-box;  padding: 10px; background-color: #fff; z-index: 3;}
.m_quick ul{ display: flex; align-items: center;}
.m_quick ul li{ flex: 1;}
.m_quick ul li a{display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 15px; box-sizing: border-box; text-align: center;}
.m_quick ul li a i{display: flex; align-items: center; justify-content: center;  box-sizing: border-box;}
.m_quick ul li a span{font-size: 16px; font-weight: 300; display: inline-block; margin-top: 5px;}
#header .top .heart_icon{display: none;}

.pc_quick{position:fixed; bottom:30px; right:30px; z-index:3;}
.pc_quick ul li a{display: flex; padding: 12px 16px; align-items: center; gap: 16px; border-radius: 80px; background: #53803C; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);}
.pc_quick ul li a span{color: #FFF; font-size: 16px; font-weight: 700;}

@media all and (max-width:1024px){
	.m_quick{display: block;}
	#header .top .heart_icon{display: block;}
	.pc_quick{bottom: 122px;}
	.pc_quick ul li a span{display:none;}
	.pc_quick ul li a{padding:12px;}
}

#header .top .right_box{display: flex; align-items: center; gap: 10px;}


/* 2024 09 26 추가 */

#header .bot ul li{position: relative;}
#header .bot ul li:hover .depth02{display: flex;}
#header .bot .depth02{position: absolute; top:100%; z-index: 2; left: 0; display: none; gap: 10px;}
#header .bot .depth02 li a{font-size: 16px; padding: 15px 0; color: #666666; text-align: center;}
#header .bot .depth02 li > a{color: #000;}
#header .bot .comu_depth02 li a{display: block; min-width: 62px; box-sizing: border-box;}
#header .bot .comu_depth.on .comu_depth02{display: flex;}
.main #header .top{padding-bottom: 15px;}