@charset "utf-8";
/* 2025-03-20 추가내용 아이콘 클래스 충돌 방지 */
.fa-classic,.fa-regular,.fa-solid,.far,.fas {  font-family: "Font Awesome 6 Free" !important}

body{position:relative;}

/* header .*/
#header_wrap {position: relative; width: 100%; z-index: 99; background: #FFCCFF;}
#header_wrap.ov {}
#header_wrap .header_list {width:100%;}
#header_wrap .search {margin-top:0}
.header_list > li {border-bottom: 1px solid #DDD; background: #FFF;}
.header_list > li > .inner {width:100%; max-width:1400px; margin:0 auto; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between;}
.header_list > li.top {}
.header_list > li.top > .inner {padding: 5px 15px;}
.header_list > li.top ul {display: flex;}
.header_list > li.top ul > li > a {display: block; padding: 0 10px; box-sizing: border-box;}
.header_list > li.top ul > li:last-child > a {padding-right: 0;}
.header_list > li.mid {}
.header_list > li.mid > .inner {padding: 15px; padding-right: 20px;}
.header_list > li.mid .logo{width: 25%; min-width: 200px;}
.header_list > li.mid .logo > a {    display: flex;    align-items: center;    gap: 10px; font-size: .9em;}
.header_list > li.mid .logo > a img{width:55px}
.header_list > li.mid .icon {width: 25%; display: flex; justify-content: flex-end; align-items: center;}
.header_list > li.mid .icon > a {display: flex; flex-direction: column; align-items: center; padding: 0 10px; box-sizing: border-box; position: relative;}
.header_list > li.mid .icon > a:last-child {padding-right: 0;}
.header_list > li.mid .icon > a > i {font-size: 2.5rem;}
.header_list > li.mid .icon > a.ico_cart > .count {display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 600; position: absolute; top: -10px; right: -10px; width: 25px; height: 25px; background: #FFCCFF; border-radius: 100%; color:#000;}
.header_list > li.mid .search {width: 40%; display: flex; align-items: center;}
.header_list > li.mid .search > form {display: flex; align-items: center; justify-content: flex-start; width: 100%; padding: 10px; box-sizing: border-box; background: #F4F4F4; border-radius: 30px;}
.header_list > li.mid .search > form > input {width: 90%; padding: 5px 10px; font-size: 1rem; border: none; background: #F4F4F4; box-sizing: border-box;}
.header_list > li.mid .search > form > button {width: 10%; display: block;}
.header_list > li.mid .search > form > button > i {font-size: 1.2rem; font-weight: 600;}
.header_list > li.btm {background:#E62367; border-bottom: 0;}
.header_list > li.btm.fix {position: fixed; top: 0; left: 0; width: 100%; box-shadow: 5px 5px 15px rgb(0 0 0 / 3%); transition: all 1s ease;}
.header_list > li.btm > .inner {padding: 0 15px;}

/* gnb */
#gnb {width: 100%; display: flex; align-items: center;}
#gnb a {display: block; font-size: 20px; font-weight: 600; padding: 16px 10px; box-sizing: border-box; color:#FFF;}

#gnb li:first-child i{animation: opacity 1s infinite linear;}
#gnb li:nth-child(2) i{animation: opacity2 1s infinite linear;}
@keyframes opacity {
	0% {opacity:.4}
	50% {opacity:1 }
	100% {opacity:.4} 
}
@keyframes opacity2 {
	0% {opacity:1}
	50% {opacity:.4}
	100% {opacity:1} 
}
#gnb > .logo {height: 0; visibility: hidden; opacity: 0; font-size: 0; padding: 0; color:#FFF;}
.header_list > li.btm.fix #gnb > .logo {height: auto; visibility: visible; opacity: 1; transition: all 0.3s; margin-right: 3%; font-size: 20px; padding: 0 10px;width:130px;}
#gnb > .main_menu {width:120px; text-align: left; position: relative }
#gnb > .main_menu > a {padding-left: 0;}
#gnb > .main_menu > a > i {margin-right: 7px;}
#gnb > .main_menu ol {
	height: 0; visibility: hidden; opacity: 0; padding: 15px 0; box-sizing: border-box; position: absolute; top: 57px; left: 0;
	width: 240px; background: #FFF; border: 1px solid #DDD; border-top: 0; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;
}
#gnb > .main_menu:hover ol {height: auto; visibility: visible; opacity: 1; transition: all 0.2s; box-shadow: 5px 5px 10px rgb(0 0 0 / 6%);}
#gnb > .main_menu ol > li {}
#gnb > .main_menu ol > li:hover {background: #FFCCFF; transition: all .3s;}
#gnb > .main_menu ol > li > a {padding: 7px 10px; font-size: 1.05rem; color: #000;}
#gnb > .main_menu ol > li > .lnb {
	padding: 15px 0; box-sizing: border-box; position: absolute; top: 0; left: 239px; width: 100%; height: 0; visibility: hidden; 
	opacity: 0; transform: translateX(-10%); background: #F4F4F4; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;
}
#gnb > .main_menu ol > li:hover > .lnb {display: block; height: 130%; visibility: visible; opacity: 1; transform: translateX(0); transition: all 0.2s; box-shadow: 5px 5px 10px rgb(0 0 0 / 6%); border: 1px solid #DDD;}
#gnb > .main_menu ol > li:nth-child(7):hover > .lnb{height:230%}
#gnb > .main_menu ol > li > .lnb > li > a {padding: 7px 10px; font-size: 1.05rem; color: #000;}
#gnb > .main_menu ol > li > .lnb > li:hover > a {text-decoration: underline;}


/* service_list */
.service_list {display: flex; justify-content:center; width: 100%;}
.service_list > li {text-align: center; padding:0px 1.3%; box-sizing: border-box;padding-right:0;}
.service_list > li > a {display: block;}
@media screen and (max-width:1400px){
	.service_list > li{padding:0;}
}

/* 모바일 */
.btn_mobileMenu{display:none;color:#000;font-size:2rem;}
.btn_mobileMenu > i.xi-bars {}
.btn_mobileMenuClose {font-size: 2rem;}
/* mobile_menu */
nav {visibility: hidden; opacity: 0; position: fixed; left: 0 ;top: 0; width: 0; height: 100%; z-index: -1; overflow-x: scroll;}
nav.on {visibility: visible; opacity: 1; background:#EEE; width: 100%; height: 100%; transition: all .3s; z-index: 99;}
.mobile_menu {width: 100%; height: 100%; overflow-x: scroll;}
.mobile_menu > .top {padding: 15px 20px; box-sizing: border-box; background: #E62367; display: flex; justify-content: space-between; align-items: center;}
.mobile_menu > .top a {color: #FFF;}
.mobile_menu > .top > ul {display: flex; align-items: center;}
.mobile_menu > .top > ul > li {border: 1px solid #FFF; border-radius: 20px; box-sizing: border-box; padding: 7px 12px; margin-right: 10px;}
.mobile_menu > .top > ul > li > a {font-size: 0.95rem;}
.mobile_menu > .icon {width: 100%; display: flex; justify-content: space-between; align-items: center; text-align: center; background:#FFF;}
.mobile_menu > .icon > a {width: 25%; display: flex; flex-direction: column; align-items: center; padding: 20px; box-sizing: border-box;}
.mobile_menu > .icon > a > i {font-size: 2.5rem; margin-bottom: 5px; position: relative;}
.mobile_menu > .icon > a.ico_cart .count {display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 600; position: absolute; top: -10px; right: -10px; width: 25px; height: 25px; background: #FFCCFF; border-radius: 100%; color:#000;}
.mobile_menu > .icon > a.ico_cart .count {top: -5px;}
.mobile_menu > .search {background: #FFF; margin: 20px 0; padding: 10px 15px; box-sizing: border-box; display: flex; align-items: center;}
.mobile_menu > .search > form {display: flex; align-items: center; justify-content: flex-start; width: 100%; padding: 10px; box-sizing: border-box; background: #F4F4F4; border-radius: 30px;}
.mobile_menu > .search > form > input {width: 90%; padding: 5px 10px; font-size: 0.85rem; border: none; background: #F4F4F4; box-sizing: border-box;}
.mobile_menu > .search > form > button {width: 10%; display: block;}
.mobile_menu > .search > form > button > i {font-size: 1.05rem; font-weight: 600;}

.mobile_menu > .cate {background: #FFF; margin: 20px 0;}
.mobile_menu > .cate > ul {display: flex; flex-wrap: wrap;}
.mobile_menu > .cate > ul > li {display: flex; justify-content: space-between; align-items: center; width: 50%; padding: 10px 20px; box-sizing: border-box; border: 0.5px solid #DDD; margin-top: -1px; margin-right: -1px;}
.mobile_menu > .cate > ul > li > a {display: block; width: 100%; height: 100%; font-size: 1.15rem; font-weight: 600;}
.mobile_menu > ol {background: #FFF;}
.mobile_menu > ol > li {border-bottom:1px solid #DDD;}
.mobile_menu > ol > li > a {display:flex; justify-content: space-between; align-items: center; padding:10px 20px; box-sizing:border-box; font-size:1.15rem; font-weight: 600;}
.mobile_menu > ol > li > a > i {font-size: 1.5rem;}
.mobile_menu > ol > li.on > a > i:before {content:'\e945';}
.mobile_menu > ol > li > .lnb {display:none; opacity: 1;visibility: visible; height: auto; padding:0 !important; border-top: 1px solid #888; border-bottom: 1px solid #888;}
.mobile_menu > ol > li > .lnb > li {border-bottom:1px solid #DDD; background: #fafafa;}
.mobile_menu > ol > li > .lnb > li:last-child {border-bottom:0;}
.mobile_menu > ol > li > .lnb > li > a {display: block; color: #000;font-size:1.05rem;padding:10px 20px;text-align:left;}
@media screen and (max-width:1200px){
	#header_wrap.ov .header_list {position: fixed; top:0; left: 0;}
	.header_list > li {background: #E62367; border: 0;}
	.header_list > li.top {display: none;}
	##header_wrap.on .header_list > li.mid {display: none !important;}
	.header_list > li.mid .search {display: none;}
	.header_list > li.mid a {color: #FFF;}
	.header_list > li.mid .logo {width: auto; text-align: center;}
	.header_list > li.mid .logo > a img{width:45px}
	.header_list > li.mid .icon {width: auto;}
	.header_list > li.mid .icon > a {display: none;}
	.header_list > li.mid .icon > a.ico_cart {display: block; padding: 0;}
	#gnb > .main_menu,
	.service_list {display: none;}

	/* 모바일 버튼	*/
	.btn_mobileMenu{display:block;}

	.header_list > li.btm {}
	.header_list > li.btm.fix {position: relative;}
	.header_list > li.btm.fix #gnb > .logo {display: none;}
}
@media screen and (max-width:640px){
	.header_list > li.mid > .inner {padding: 10px 13px; padding-right: 20px;}
	.header_list > li.mid .logo {min-width: 150px;}
	.header_list > li.mid .logo > a {font-size: 1.5rem;}

	.header_list > li.mid a,
	.header_list > li.mid .icon > a > i {font-size: 1.6rem;}
	.header_list > li.mid .icon > a.ico_cart > .count {width: 20px; height: 20px; font-size: 0.7rem; top: -6px;}

	/*	mobile_menu*/
	.btn_mobileMenuClose {font-size: 1.6rem;}
	.mobile_menu > .top > ul > li {padding: 3px 10px;}
	.mobile_menu > .top > ul > li > a {font-size: 0.85rem;}
	.mobile_menu > .icon > a {font-size: 0.85rem; padding: 17px 10px;}
	.mobile_menu > .icon > a > i {font-size: 1.8rem;}
	.mobile_menu > .icon > a.ico_cart .count {width: 20px; height: 20px; font-size: 0.7rem; top: -6px;}
	.mobile_menu > .cate > ul > li > a {font-size: 1rem;}
	.mobile_menu > ol > li {}
	.mobile_menu > ol > li > a {font-size: 1rem;}
	.mobile_menu > ol > li > a > i {font-size: 1.2rem;}
	.mobile_menu > ol > li > .lnb > li > a {font-size: 0.9rem;}
}
@media screen and (max-width:480px){
	.header_list > li.mid > .inner {padding: 10px 13px; padding-right: 20px;}
	.header_list > li.mid .logo {min-width: 140px;}
	.header_list > li.mid .logo > a {font-size: 1.35rem;}

	.header_list > li.mid a,
	.header_list > li.mid .icon > a > i {font-size: 1.5rem;}
	.header_list > li.mid .icon > a.ico_cart > .count {width: 16px; height: 16px; font-size: 0.65rem; top: -3px; right: -7px;}

	/*	mobile_menu*/
	.btn_mobileMenuClose {font-size: 1.5rem;}
	.mobile_menu > .top {padding: 10px 15px;}
	.mobile_menu > .top > ul > li {padding: 1px 8px;}
	.mobile_menu > .top > ul > li > a {font-size: 0.75rem;}
	.mobile_menu > .icon > a {font-size: 0.7rem; padding: 13px 10px;}
	.mobile_menu > .icon > a > i {font-size: 1.4rem; margin-bottom: 2px;}
	.mobile_menu > .icon > a.ico_cart .count {width: 16px; height: 16px; font-size: 0.65rem; top: -3px; right: -7px;}
	.mobile_menu > .search {padding: 10px;}
	.mobile_menu > .search > form {padding: 5px; border-radius: 20px;}
	.mobile_menu > .search > form > input {padding: 5px; font-size: 0.75rem;}
	.mobile_menu > .search > form > button > i {font-size: 0.9rem;}
	.mobile_menu > .cate > ul > li {padding: 10px;}
	.mobile_menu > .cate > ul > li > a {font-size: 0.85rem;}
	.mobile_menu > .cate > ul > li > i {font-size: 0.85rem;}
	.mobile_menu > ol > li {}
	.mobile_menu > ol > li > a {font-size: 0.85rem; padding: 10px;}
	.mobile_menu > ol > li > a > i {font-size: 1.05rem;}
	.mobile_menu > ol > li > .lnb > li > a {font-size: 0.8rem;}
}


/* btn-scroll */
.btn-scroll{display: none;width: 50px;height: 50px; position: fixed;bottom: 100px; left: 90%;z-index: 999;border-radius: 30px;box-shadow: 4px 4px 17px 0px #71717145;background:#FFF;justify-content:center; align-items: center;}
.btn-scroll > i{display:flex;justify-content:center; align-items: center;font-size:1.5rem;}
@media screen and (max-width:1200px){
	.btn-scroll{bottom: 50px;}
}
@media screen and (max-width:640px){
	.btn-scroll {left: auto; right: 5%;}
}
@media screen and (max-width:480px){
	.btn-scroll {width: 40px; height: 40px;}
}	


/* quick */
.quick {position:fixed;line-height: 0;top: 40%;right: 0;z-index:55;width:100px;}
.quick > a {display:flex; justify-content:center; align-items:center; margin-bottom:10px; width: 80px;height:80px; background:#FFF;border-radius:50%; padding:10px; box-sizing:border-box;box-shadow: 3px 10px 10px rgb(0 0 0 / 8%);}
.quick > a:last-child {background:#d3090b;color:#FFF;}
@media screen and (max-width:1200px){
	.quick {display: none;}
}


/* footer .*/
footer{color:#000;font-size:0.95rem;}
footer > div {padding: 0 15px; box-sizing: border-box;}
footer .policy_list {background: #555;}
footer div > ul {max-width: 1400px; width: 100%; margin: 0 auto; display: flex;}
footer .policy_list > ul > li {}
footer .policy_list > ul > li > a {display: block; color: #FFF; padding: 15px 10px; box-sizing: border-box; position: relative;}
footer .policy_list > ul > li:first-child > a {padding-left: 0;}
footer .policy_list > ul > li > a:after {content:''; position: absolute; top: 19px; right: 0; width: 1px; height: 10px; background:#DDD;}
footer .policy_list > ul > li:last-child > a:after {display: none;}
footer .info_list {margin: 50px 0;}
footer .info_list > ul > li {width: 25%; border-right: 1px solid #DDD; padding: 20px 3%; box-sizing: border-box;}
footer .info_list > ul > li:first-child {padding-left: 0;}
footer .info_list > ul > li:last-child {width: 50%; border:none; padding-right:0;}
footer .info_list > ul > li > span {display: block; font-size: 1.3rem; font-weight: 800; margin-bottom: 30px; padding-bottom: 10px; position: relative;}
footer .info_list > ul > li > span:after {content: ''; position: absolute; bottom:0; left: 0; width: 15px; height: 2px; background:#000;}
footer .info_list > ul > li > h4 {font-size: 1.5rem; font-weight: 900; margin-bottom: 10px;}
footer .info_list > ul > li > ol {}
footer .info_list > ul > li > ol > li {display: flex; margin-bottom: 7px;}
footer .info_list > ul > li > ol > li:last-child {margin-bottom: 0;}
footer .info_list > ul > li > ol > li span {margin-right: 5px; font-weight: 600;}
footer .info_list > ul > li.company > ol > li {flex-wrap: wrap;}
footer .info_list > ul > li.company > ol > li > div {display: flex; margin-right: 12px; margin-bottom: 7px;}
@media screen and (max-width: 768px){
	footer .policy_list > ul {flex-wrap: wrap; padding: 15px; box-sizing: border-box;}
	footer .policy_list > ul > li > a {padding: 0 10px;}
	footer .policy_list > ul > li > a:after {top: 4px;}
	footer .info_list > ul {flex-direction: column;}
	footer .info_list > ul > li {width: 100%; padding: 0; margin-bottom: 20px; text-align: center; border-right: 0; border-bottom: 1px solid #DDD; padding-bottom: 20px;}
	footer .info_list > ul > li:last-child {width: 100%; margin-bottom: 0; padding-bottom: 0;}
	footer .info_list > ul > li > span {width: fit-content; margin: 0 auto; margin-bottom: 30px;}
	footer .info_list > ul > li > ol > li {justify-content: center;}
	footer .info_list > ul > li.company > ol > li > div {margin-right: 0;}
}
@media screen and (max-width:480px){
	footer .policy_list > ul {padding: 15px 0;}
	footer .policy_list > ul > li > a {line-height: 1.8; font-size: 0.85rem; padding: 0 5px;}
	footer .policy_list > ul > li > a:after {top: 6px; right: -1.5px;}
	footer .info_list {margin: 30px 0;}
	footer .info_list > ul > li > span {font-size: 1.05rem; margin-bottom: 20px;}
	footer .info_list > ul > li > h4 {font-size: 0.95rem;}
	footer .info_list > ul > li > ol > li {font-size: 0.8rem; margin-bottom: 5px;}
}	

/* clearfix */
.clearfix:after{content:'';display:block;clear:both;}

/* img_box > img */
.img_box > img{width:100%;height:100%;}

/* f_box */
.f_box{display:flex;}
@media screen and (max-width:640px){
	.f_box{display:block;}
}

/* 시안 선택 */
ul.tab {width:100%; border-bottom:1px solid #777; display:flex; border-top:1px solid #777;}
ul.tab li {width:50%;font-size:20px; font-weight:600; line-height:45px; text-align:center; background-color:#fff; background-color:#f9f9f9; box-sizing:border-box; color:#666; border-right:1px solid #777;}
ul.tab li a {color:#666 !important; width:100%; display:inline-block; }
ul.tab li.on {background-color: #444;border: 1px solid #666;}
ul.tab li.on > a{color:#FFF !important;}