@charset "UTF-8";

body {font-family:'Noto Sans KR', 'Montserrat'; font-size: 13px; font-weight: 400; color: #262626; letter-spacing: 0.06em; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; margin: 0;}
pre {font-family:'Noto Sans KR', 'Montserrat'; font-size: 13px; font-weight: 400; color: #333333; }

/* Top ares */
.wrap-loading{ /*화면 전체를 어둡게 합니다.*/
	position: fixed; left:0; right:0; top:0; bottom:0; background: rgba(0,0,0,0.4); /*not in ie */
	filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#20000000', endColorstr='#20000000');    /* ie */
	z-index: 9999;
}
.wrap-loading div{ /*로딩 이미지*/ position: fixed; top:50%; left:50%; margin-left: -200px; margin-top: -200px; }
.display-none{ /*감추기*/ display:none; }


/* Header Top */
.header-wrapper{ position: fixed; top: 0px; right: 0px; left: 0px; background: #ffffff; z-index: 100;}
.header-top { border-bottom: solid 1px #d9d9d9;}
.header-top-messae-bar {display: flex; background: #FF5906; color: #fff; justify-content: center; align-items: center; width: 100%;}
.usps-bar {margin-left: auto; margin-right: auto; font-size: 10px;}
.header-top-content { display: flex; position: relative; margin-left: auto; margin-right: auto; height: 100%; padding-left: 16px !important; padding-right: 16px !important; justify-content: space-between;}
.header-top-link-left {line-height: 69px; justify-content: start; margin: unset; display: flex; align-items: center;}
.header-top-link-left .header-top-logo-link a img {width: 100%; height: 35px;}
.header-top-link-right .person-link-area{ display: flex; justify-content: end; width: 300px; }
.header-top-link-right .person-link-area .person-link-div{ width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; }
.header-top-link-right .person-link-area .person-link-div img {cursor: pointer;}
.header-top-link-right .header-user-name{ position: absolute; top: 40px; cursor: default;}
.header-top-link-right .header-user-price{ text-wrap: nowrap;  display: flex; align-items: center; justify-content: center; }


/* Header Side Menu*/
.header-side
{
    height: 100%;
    width: 75%;
    max-width: 300px;
    position: fixed;
    z-index: 999;
    top: 0;
    right: 0;
    border-left: 1px solid #bbbbbb; 
    background-color: #fff;
    overflow-x: hidden;
    display: none;
    outline: var(--border);
}
.header-side .header-side-top { position: fixed; top: 0px; width: inherit; max-width: inherit; background: #ffffff; border-bottom: 1px solid #bbbbbb; padding-left: 10px; }
.header-side .header-side-top .header-side-manager { position: absolute; top: 4px; left: 10px; font-size: 12px; padding-top: 10px; padding-right: 10px; cursor: pointer; color: #ff7400 }
.header-side .header-side-top .header-side-close { position: absolute; top: 0px; right: 12px; font-size: 20px; padding-top: 10px; padding-right: 10px; cursor: pointer;; }
.header-side .header-side-top .header-side-title { margin-top: 40px; padding-right:12px;}
.header-side .header-side-bottom { display: grid; row-gap: 10px; padding: 0 16px; margin-top: 100px; }
.header-side .header-side-bottom .header-side-menuList { padding-left: 0px; }
.header-side .header-side-bottom .header-side-menuList > li {list-style: none;}
.header-side .header-side-bottom .header-side-menuList > li > a { display: grid; padding: 10px; text-decoration: none; line-height: 22px; text-transform: capitalize; grid-template-columns: 40px 1fr; gap: 1rem; align-items: center; }
.header-side .header-side-bottom .header-side-menuList > li > a > img { width: 22px; height: 22px; }
.header-side .header-side-bottom .header-side-menuList-2nd { padding-left: 70px; }
.header-side .header-side-bottom .header-side-menuList-2nd > li {list-style: none; line-height: 30px;}
.header-side .header-side-bottom .span_header-side-menuList-2nd-open-toggle:before{ content: "▼"; }
.header-side .header-side-bottom .span_header-side-menuList-2nd-open-toggle.open:before{ content: "▲"; }

/* Option*/
#option_mens-button {border: 0;}
#option_womens-button {border: 0;}
.option-prod{border-top: solid 1px #d9d9d9; border-bottom: solid 1px #d9d9d9; position: fixed; top: 90px; left: 0px; right: 0px; background: #ffffff;}
.option-prod .option-prod-form { min-height: 43px; display: flex; justify-content: center; align-items: center; }





/* Content */
.content-area {display: flex; justify-content: center; margin-top: 90px;}
.prod-area{margin-top: 90px;}
.prod-area .contents {padding-left: 20px; padding-right: 20px;}

.categorylist .categorylist-cardImage {
	max-height: 580px; 
	width: 100%;
	border-radius: 6px;
    object-fit: contain;
    object-position: top center;
}
.categorylist .categorylist-header-area .categorylist-header{
    margin: 0;
    margin-top: 10px;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -0.04em;
    text-align: center;
}



body {margin:0; padding:0; font-size:12px; color:#666; scroll:auto;}
table, tr, td, th {font-size:11px; color:#333333;}
.listtd {padding:10px 5px 8px 5px; border-bottom:1px solid #e5e5	e5;}
.linktd > a{color:#000000 !important; font-weight: bold;}
th {background-color:#F3F5E0; background:url(../../images/egovframework/example/th_bg.gif) 0 0 repeat; height:26px; text-align:center; vertical-align:middle; color:#003366;}
img {border:0; vertical-align:middle;}
p { height:20px; margin:0; padding:5 0 0 0;}
.check ul {margin:0; padding:0; float:left;}
.check li {list-style-type:none; float:left; margin:0 0 0 0; padding:0 0 0 3px;}
.top {vertical-align:top;}

a:link { font-size:11px; color:#3A5870; text-decoration:none; line-height:100%;}
a:visited { font-size:11px; color:#3A5870; text-decoration:none}
a:active { font-size:11px; color:#339999; text-decoration:none;}
a:hover { font-size:11px; color:#339999; text-decoration:none;}

#content {float:left; text-align:left; /*overflow:hidden;*/width:1600px; background-color:#FFFFFF; padding:10px 0px 10px 0px;}
#content_pop {float:left; text-align:left; /*overflow:hidden;*/width:1200px; background-color:#FFFFFF; padding:10px 10px 10px 10px;}
#title {float:left; text-align:left; margin:0 0 10 0; padding:0; height:30px; border-bottom:1px solid #e5e5e5; width:100%;}
#title ul {float:left; margin:0; padding:0;}
#title li {list-style-type:none; width:500px; padding:3px 0px 2px 0px; float:left; font-size:16px; font-weight:bold; color:#000000;}
#title .location {float:right; height:20px; margin:0; padding:5 0 0 0; font-size:11px;}
#foot {margin:0; padding:0 0 0 0; text-align:left; /*overflow:hidden;*/ height:40px; clear:both; background-color:#F7F7F7; border-top:1px solid #e5e5e5; font-size:11px; color:#999999;}
#search {float:right; margin:0; padding:10px 0 10px 0; width:100%;}
#search ul {margin:0; float:right;}
#search li {list-style-type:none; float:left; margin:0 0 0 0; padding:0 0 0 3px;}
#table {float:left; margin:0 0 10px 0; padding:0 0 0 0; width:100%;}
#table table {width: 100%; BORDER-TOP:#C2D0DB 2px solid; BORDER-LEFT:#ffffff 1px solid; BORDER-RIGHT:#ffffff 1px solid; BORDER-BOTTOM:#C2D0DB 1px solid; border-collapse: collapse;}
#paging {padding:0 0 0 0; text-align:center; width:100%;}
#paging ul {display:inline;}
#paging li {display:inline; list-style-type:none; padding:0 10px 0 10px; font-size:11px; color: #333333;}
#paging li.pre10 {padding:0 2px 0 2px;}
#paging li.pre1 {padding:0 2px 0 2px;}
#paging li.next10 {padding:0 2px 0 2px;}
#paging li.next1 {padding:0 2px 0 2px;}
#paging li.line {background:url(../../images/egovframework/example/paging_line.gif) 0 2px no-repeat;}
#paging li.first {padding:0 5px 0 0;}
#paging li.last {background:url(../../images/egovframework/example/paging_line.gif) 0 2px no-repeat; padding:0 5px 0 0;}
#sysbtn {float:right; text-align:right; padding:0; margin:0; display:inline;}
#sysbtn ul {margin:0; padding:0; float:left; display:inline;}
#sysbtn li {list-style-type:none; margin:0 auto; padding:0 0 0 3px; float:left; display:inline;}

#sysbtn1 {text-align:left; padding-top:10px; padding-bottom:0px; margin-bottom:0px; width:1200px;}
#sysbtn1 ul {margin:0; padding:0; float:left; display:inline;}
#sysbtn1 li {list-style-type:none; margin:0 0 0 0; padding:0 0 0 3px; float:left; display:inline;}
#idwrap {float:left; padding-top:0px; padding-bottom:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; margin-top:0px; padding-left:0px; padding-right:0px; }
#idwrap ul {float:left; padding:0; margin:0;}
#idwrap li {list-style-type:none; float:left; margin:0; padding-right:3px;}
button {cursor:hand; border:0px solid #FFFFFF; padding:0px 0px 0px 0px; background-color:#FFFFFF; white-space:nowrap;}
.btn_blue_l {float:left; background:url(../../images/egovframework/example/btn_bg_l.gif) 0 0 no-repeat; height:20px; padding:0px 0px 0px 10px; margin:0px 0px 0px 0px;}
.btn_blue_r {float:left; background:url(../../images/egovframework/example/btn_bg_r.gif) 0 0 no-repeat; background-position:right; height:20px; font-size:11px; color:#000000; margin:0px 0px 0px 0px; padding-top:0px; _padding-top:0px; padding-left:10px; padding-right:10px; padding-bottom:0px; text-align:center;}
input { height:20px; font-size:12px; color:#000000; padding:2px 2px 0px 2px; margin-top:0px; _margin-top:-1px;}
input::placeholder { color: #999999; }
select { font-size:12px; margin-top:0px; height:20px; padding-top:0px;}
.tbtd_caption {font-weight:bold; color:#003366; background-color:#E5EDF3; text-align:right; padding:10px 10px 9px 5px; margin:0;}
.tbtd_content {background-color:#F5F8FA; padding:7px 10px 5px 10px; margin:0;}
.tbtd_caption_re {font-weight:bold; color:#666633; background-color:#F6F5E5; text-align:right; padding:10px 10px 9px 5px; margin:0;}
.tbtd_content_re {background-color:#F9F9F2; padding:7px 10px 5px 10px; margin:0;}
input.txt               {height:18px; background-color:#FFF; border:1px solid #BCC8D8; padding-top:2px; color:#5e5e5e; cursor:text;}
input.essentiality  {height:18px; background-color:#ebebeb; border:1px solid #BCC8D8; padding-top:2px; color:#000; cursor:text;}
.title {padding-left: 20px;}
.no_img {object-fit: cover !important;}
.imgModveActive {cursor: pointer;}

/* Favorite */
.icon-favorite.no-wish  {width: 26px; height: 26px; background-image: url(/images/old/icon_wish.png); background-position: 50% 0; background-repeat: no-repeat; background-size: 26px auto; border: 0; top: 0; }
.icon-favorite.yes-wish {width: 26px; height: 26px; background-image: url(/images/old/icon_wish.png); background-position: 50% 100%; background-repeat: no-repeat; background-size: 26px auto; border: 0; top: 0; }    
    
.prod-info-order-confirm .btn-order {
									width: 100%;
								    display: flex;
								    align-items: baseline;
								    justify-content: center;
								    color: #ffffff; 
								    background: #FF5906;
								    border: 1px solid #FF5906;
								    transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
								    min-height: 50px;
								    line-height: 50px;
								    text-transform: capitalize;
								    border-radius: 6px;
								    padding: 0 32px;
								    font-weight: bold; cursor: pointer;
}


.content-area div#table {border: 1px solid #cccccc;}
.content-area div.listTable {height:700px; overflow-x: auto; overflow-y: auto; }


/* Filter List */
.filterList-left{ min-height: 500px; }
.filterList-right{ padding-left: 83px; padding-right: 60px; }

.border { border: 2px solid #333333; }
.toggles { width: 200px; }
.toggle-wrap, .shape { display: inline-block;vertical-align: top; }
.toggles .ui-checkboxradio-label { min-width: 180px; text-align: left; }
.filter-search-area {min-height: 40px; }
.filter-search { border-width: 0 0 1px; border-color: #cccccc; }
.filter-search:focus { outline: none; }
.filter-carditem-area {
	display: grid;
	row-gap: 60px;
	column-gap: 40px;
    grid-template-columns: repeat(10, 1fr);
}
.filter-carditem-productImage{
	object-fit: contain;
    height: 100%;
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: 6px;
}
.filter-carditem-text-area .product_keyItem {line-height: 24px;}
.filter-carditem-text-area .product_keyItem.KEY {background: #ED7D31; padding: 4px 4px 4px 4px; color: #ffffff; font-weight: bold;}
.filter-carditem-text-area .product_keyItem.KEY:before {content: "KEY ITEM"}
.filter-carditem-text-area .product_name1{ text-weight: bold;
    font-weight: bold;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0.03em;
 }
.filter-carditem-text-area .product_name2{ 
	font-size: 13px;
    line-height: calc(20 / 13);
    margin: 0;
    text-transform: uppercase;
}
.filter-carditem-text-area .product_name3{ font-size: 13px;}
.filter-carditem-text-area .column-price{margin-top: 25px;}
.filter-carditem-fav {z-index: 1; position: absolute; top: 6px; right: 6px; font-size: 20px !important; border-radius: 20px; background: white; padding: 2px;}
.filter-carditem-fav.selected {color: #ff3333 !important;}


.STOCK_LIMIT1 {border-bottom: 2px solid #ff0000; border-left: 1px solid #aaaaaa; border-top: 1px solid #aaaaaa; border-right: 1px solid #aaaaaa;}
.STOCK_LIMIT2 {border-bottom: 2px solid #ff9b00; border-left: 1px solid #aaaaaa; border-top: 1px solid #aaaaaa; border-right: 1px solid #aaaaaa;}
.STOCK_LIMIT3 {border-bottom: 2px solid #00ff00; border-left: 1px solid #aaaaaa; border-top: 1px solid #aaaaaa; border-right: 1px solid #aaaaaa;}




.icon-Account:before { content: "\e930"; }



/* Invoce */

.invoice-area .invoice-prod-list-area .invoice-size-cancel-list { margin-top: 20px;}
.invoice-area .invoice-prod-list-area .invoice-size-cancel-list table{ width: 95%; }
.invoice-area .invoice-prod-list-area .invoice-size-cancel-list th{ color: #000000; }

.invoice-area .invoice-prod-list-area .prod-grp-cancel-title { font-size: 30px; text-align: center; color: #FF5906; }

		.prod-grp-cancel-area {margin-left: auto; margin-right: auto; width: 90%; display: flex; border: 1px solid #cccccc; margin-top: 20px;}
		.prod-grp-cancel-img {position: relative; width: 150px;}
		.prod-grp-cancel-img img{min-height: 220px; object-fit: none;  width: 100%;}
		.prod-grp-cancel-info {position: relative; margin-left: 20px;}
		.prod-grp-cancel-info table th {font-weight: bold; color: #000000; border-top: 1px solid #cccccc; border-bottom: 2px solid #cccccc; background: #ffffff;}
		.prod-grp-cancel-info table td {text-align: center;}
