@charset "utf-8";
/* CSS Document */



.nav { float: left; width:250px; height: 800px; border-right: 1px solid #bfbfbf;}
.main { 
	margin-left : 20px;
	min-height : 700px;
	margin-top : 120px;
	-webkit-margin-before : 0px;
}
.footer { 
	margin: 5px 10px;
	color: #ddd;
	background: #424242; 
	}
	
.grid-container > div {
  padding: 5px 0;
  
}

.header { 
	grid-area: header;
	position:fixed;
    width:100%;
    height:120px;
    top:0;
    left:0;
    /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
	background-color: #fff;
	opacity: 0.0;
	
}
.menu { grid-area: menu; }
.main { grid-area: main; }
.footer { grid-area: footer; }

.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'main main main main main main'
    'footer footer footer footer footer footer';
  grid-gap: 5px;
  padding-top : 10px;
  grid-template-columns : auto auto auto auto auto auto ;
  grid-template-rows: 100px auto 80px ;
  overflow: auto;

}

.grid-container-pop {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'main main main main main main'
    'footer footer footer footer footer footer';
  grid-gap: 5px;
  padding-top : 10px;
  grid-template-columns : auto auto auto auto auto auto ;
  grid-template-rows: 0px auto 0px ;
  overflow: hidden;

}


/* �헤더 시작 */

.headerflex {
	display : flex;
	align-items: center;
	width : 100%;
	height : 60px;
	margin-top : 15px;
}


.headerflex .headerlogo {
	width : 250px;
	height : 35px;
	text-align : center;
	line-height : 35px;
	font-size : 20px;
	color : #4A5390;
	transition : color 0.5s ease;
}



.headerflex .headerlogo:hover {
	color : #d8137f;
}

.headerflex > .dropdown {
	padding : 0 0 0 0px;
	flex : 1;
	height : 35px;
	font-size : 13px;
	color : #222;
	text-align : center;
	line-height : 35px;
	background: #fafafa;
	border-radius : 5px;
	transition : background-color 0.7s ease;
	border: 1px solid #ccc;
}


.headerflex > a {
	border-left: 0px solid #ccc;
}

.headerflex > a:nth-child(2) {
	border-left: 1px solid #ccc;
}

.headerflex > .dropdown:hover {
	background-color : #ddd;
}

.headerflex > .dropdown > a > .topMenuClass {
	background-color : #677ba6;
	color : #fff;
	border-radius : 5px;
	transition : background-color 0.9s ease;
}

.logout  {
  position: absolute;
  width : 70px;
  right:10px; 
  top:5px;
  background-color: #FF0066;
  z-index: 1;
  text-align : center;
  border-radius : 5px;
}

.logout > a  {
  color : #fff;
  font-weight : bold;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 250px;
  height :40px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 10px 10px;
  text-decoration: none;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}




/* 메뉴 css 시작*/
.admin_name { padding: 20px 20px 0; text-align:center; line-height: 60px;  font-size:16px; color:#222; font-weight:bold; }
.admin_title { margin-bottom: 30px; text-align:center; line-height: 30px;  font-size:13px; color:#787878; }
.menu_title { padding-left:10px; margin-bottom: 30px; width:210px; height: 40px; font-weight: bold; font-size:14px; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.12); border-radius: 4px; border: 1px solid #ccc; line-height: 40px;}

.nav > ul { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;}
.nav .menu1 {position:relative;}
.nav .menu1_tab { position: absolute; left:0; top:3px; padding-top: 3px; float: left; width:3px; height:45px; border-radius: 10px; background: #ff7f7a; }
.nav .menu1_title { padding: 5px 5px 5px 15px; }
.nav .menu1_title:hover {background: #f6f6f6; cursor:hand;}
.nav .menu1_title a {display: inline-block; width:170px; height:50px; font-size:15px; text-align: left; line-height: 50px; }


.nav .menu1_subul {position:relative; list-style:none; width:100%; height:130px; background: #f6f6f6;}
.nav .menu1_subul li { height:50%; width:100%;}
.nav .menu1_subul li a {padding: 0px 0px 0px 25px; display: inline-block; width:170px; height:65px; font-size:14px; text-align: left; line-height: 65px; }


/* 메인 페이지 타이틀 */


.content_body_title { width: 100%; height:60px; }
.content_body_list { width: 100%; height:800px;}
.content_body_paging { width: 100%; height:80px;}

.content_searchpage {
	float : right;
	padding: 2px 10px 0px 20px;
	margin: 10px 0px; 
	width:10%; 
	height:40px; 
	border-radius: 8px;
	text-align : right;
	background-color: #fff;
}
.content_searchpage > select {
	width:130px; 
	height:40px; 
	border-radius: 8px;
	border: 2px solid #ddd;  
}

.content_top {
	float : right;
	margin: 10px 20px; 
	width:30%; 
	height:40px; 
	border: 2px solid #ddd;  
	border-radius: 8px;
	position : relative;
	background-color: #fff;
}


/*
.content_top input[type=text] {
  
  background-image: url('/Home/images/search.jpg');
  background-position: 5px 8px;
  background-repeat: no-repeat;
  
  }
  


.searchform_btn { 
	padding: 5px 5px; 
	margin-top: 5px; 
	width:60px; 
	background-color: #ddd; 
	font-size: 10px;
	text-align: center;
	position : absolute;
	top : 20px;
	right : 27px;
	
}
*/

.searchbox {
	display : flex;
	background: #ffffff; 
	padding: 5px 5px;
	width : 320;
	border: solid 1px rgba(210, 215, 217, 0.75);
}

.searchbox input[type=text] {
  
  /*background-image: url('/Home/images/search.jpg');*/
  background-position: 5px 8px;
  background-repeat: no-repeat;
  width : 180px
  border: none;
  
  }
 
.searchbtn {
  
  font-size : 30px;
  cursor: pointer;
  
  }
  
.searchbtn:hover {
  
  font-size : 32px;
  cursor: pointer;
  color: #ff7f7a
  }

.carticon {
	display : flex;
}

.cartalam {
	position: relative;
	left : -8px;
	top : -10px;
	height: 15px;
  width: 15px;
  line-height: 15px;
  text-align: center;
  background-color: #f960d8;
  border-radius: 15px;
  display: inline-block;
  color : #ffffff;
  font-size : 10px;    
}

.carthidden {
	display : none;
}
  
.listtext {
	display : flex;
}

.viewTop {
	display : flex;
	width: 50%;
}

.listmorebtn {
	position: relative;
	left : 40px;
	top : 40px;
	height : 30px;
}

.morebtn {
	position : absolute;
	padding: 0 2.25em;
	left : 270px;
}

.searchform_btn:hover {
	background: #ff7f7a; 
	cursor: pointer;
	color: #ffffff !important;
}



.content_body {margin: 30px 30px; width:95%; height:800px; }

.content_body_title1 {
	margin-top : 30px;
	padding-left: 30px;  
	height:40px; 
	font-size:18px; 
	border-bottom: 2px solid #ff7f7a; 
	}
	
.content_body_title2 {padding-top:20px; height:60px; line-height: 40px;}

.allcheck { 
	padding: 5px 5px; 
	margin-top: 0px; 
	margin-left: 0px; 
	width:80px; 
	background-color: white; 
	font-size: 16px; 
	border : 1px solid #ccc; 
	border-radius: 4px; 
	cursor: pointer;
}
.allcheck:hover {
	background: #f6f6f6; 
	cursor: pointer;
}

.flex-container2 input[type=checkbox] {
	width: 20px; 
	height: 20px;
}
/*  // 메인 페이지 타이틀 */





/* Login page */

.loginmain input[type=text], input[type=password] {
	width : 60%;
	box-sizing: border-box;
}

.loginmain button {
  background-color: #f56a6a;
  font-size : 16px;
  color: white !important;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  text-align : center;
  line-height : 40px;
  cursor: pointer;
  width: 100%;
}

.loginmain button:hover {
  background-color: #aa1e79;
}

.loginmain {
	margin : 15% auto;
	width : 40%;
	margin-top: 50px;
    margin-left: 300px;
	
}

.member {
	margin : 15% auto;
	width : 60%;
	margin-top: 0px;
    margin-left: 100px;
	
}

.loginmember {
	color : white;
	cursor : pointer;
}


.loginheader{
	padding : 10px;
	height : 60px;
	color : white;
	font-size : 18px;
	text-align : center;
	line-height : 40px;
	background: #3f4c8c;
	border-radius : 8px;
}

.loginbody {
	margin-top : 10px;
	background: #8574ab;
	border-radius : 8px;
	box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3);
	
}


.loginbody > ul > li {
	display : flex ;
	align-items: center;
	justify-content: left;
	width : 100%;
	padding: 5px;
}

.loginbody > ul > li > span {
	padding-right : 20px;	
	width : 20%;
	font-size : 14px;
	text-align : right;
	color : white;
	
}

.loginbody .listbtn {
	justify-content: center;
}

.loginbody .zipcode button {
	background-color: #f56a6a;
    font-size: 12px;
    color: white !important;
    padding: 2px 2px;
    margin: 0;
    border: none;
    text-align: center;
    line-height: 20px;
    cursor: pointer;
    width: 25%;
    height: 25px;
}

.loginbody .address1 input[type=text] {
	width : 60%;
	height: 25px;
	font-size: 12px;
	box-sizing: border-box;
}

.loginbody2 > ul > li > span {
	padding-right : 5px;	
	width : 30%;
	font-size : 12px;
	text-align : left;
	color : white;
	
}

.loginbody > ul > li > div {
	width : 50%;
	height : 40px;
	text-align : center;
	line-height : 40px;
	color : white;
	font-size : 14px;
}


.modalbody {
	margin-top : 1px;
	background: #fafafa;
	border-radius : 8px;
	box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3);
	
}

.modalbody > ul > li > input[type=text] {
	height: 1.75em;
}

.modalbody > ul > li > input#zipcode {
	width: 130px;
}

.modalbody > ul > li {
	display : flex ;
	align-items: center;
	justify-content: center;
	width : 90%;
	height : 60px;
}

.modalbody > ul > li > span {
	padding-right : 20px;	
	width : 20%;
	font-size : 12px;
	text-align : right;
	color : #000000;
	
}

.modalbody2 > ul > li > span {
	padding-right : 5px;	
	width : 40%;
	font-size : 12px;
	text-align : left;
	color : black;
	
}

.modalbody > ul > li > div {
	width : 50%;
	height : 40px;
	text-align : center;
	line-height : 40px;
	color : white;
	font-size : 14px;
}


.loginfooter {
	padding : 10px;
	height : 60px;
	font-size : 13px;
	text-align : center;
	line-height : 60px;
}


.paperbutton {
	display : flex ;
	text-align : center;
	align-items: center;
	justify-content: center;
}


.member input[type=text] {
	width : 30%;
	height: 25px;
	box-sizing: border-box;
	font-size: 12px;
}

.member .passwd input[type=password] {
	width : 30%;
	height: 25px;
	box-sizing: border-box;
	font-size: 12px;
}


/* 메인 상품 리스트 css 시작*/

.listall {
	padding-top : 10px;
}

.flex-container {
	margin : 0px;
  display: flex;
  align-items: stretch;
  background-color: #fafafa;
}

.flex-container > div {
  background-color: #f1f1f1;
  width : 50px;
  margin: 1px;
  text-align: center;
  line-height: 50px;
  font-size: 14px;
}


.flex-container .listtitle1 { flex-grow: 1; }
.flex-container .listtitle2 { flex-grow: 1; }
.flex-container .listtitle3 { flex-grow: 7; }
.flex-container .listtitle4 { flex-grow: 2; }
.flex-container .listtitle5 { flex-grow: 2; }
.flex-container .listtitle6 { flex-grow: 4; }
.flex-container .listtitle7 { flex-grow: 1; }
.flex-container .listtitle8 { flex-grow: 1; }


.flex-container2 {
	margin-top : 10px;
  display: flex;
  align-items: stretch;
  border-bottom : 1px solid #ddd
}

.flex-container2 > div {
  width : 50px;
  margin: 1px;
  text-align: center;
  line-height: 20px;
  font-size: 13px;
  padding : 5px 5px;
}
	
.liststat_ing {
	background-color : 	#f6f6f6;
}
.liststat_ready {
	background-color : 	#FFFFFF;
}
.liststat_soldout {
	background-color : 	#f3f3c0;
}

.liststat_jinsang {
	background-color : 	#f68d8d;
}

.liststat_glsout {
	background-color : 	#e7e7e7;
}

.sale_ing {
	background-color : 	#caefd2;
}



.flex-container2 .listtitle1 { flex-grow: 1; }
.flex-container2 .listtitle2 { flex-grow: 1; }
.flex-container2 .listtitle3 { flex-grow: 7; }
.flex-container2 .listtitle4 { flex-grow: 2; }
.flex-container2 .listtitle5 { flex-grow: 2; }
.flex-container2 .listtitle6 { flex-grow: 4; }
.flex-container2 .listtitle7 { flex-grow: 1; }
.flex-container2 .listtitle8 { flex-grow: 1; }


.flex-container2 > p {
	height : 20px;	
}

.flex-container2 .listtitle3, 
.flex-container2 .listtitle6 {
	padding: 10 0 0 10px;
	text-align : left;
	}

.flex-container2 .listtitle3 {
	padding: 10 0 0 10px;
	text-align : left;
	}

.flex-container2 > .listtitle3 > a {
	border : 1px solid #ddd;
	color : #bbb;
	font-size : 14px;
}

.flex-container2 > ul {
	font-size: 11px;
	color : #000;
}

.flex-container2 > .listtitle3 > ul > li {
	padding: 3px 3px; 
	color : darkgreen;
}
.flex-container2 .listtitle3 > ul > li > .subject {
	color : darkgreen;
}

.p_name {
	font-size: 14px;
	padding-top : 5px;
}
.actionbutton {
	font-size: 12px;
	padding-top : 5px;
}

.actionbutton > button {
	width : 50px;
}

.flex-container2 .listtitle7 {
	align-items: center;
	}


.jaego,
.productup { 
	background-color: #eee;
	padding: 3px 3px; 
	font-size: 13px;
	border: 1px solid #ccc;
	border-radius : 5px;
	color: black;	
	cursor : pointer;
}
/*
.jaego:hover,
.productup:hover { 
	background-color: #4CAF50;
	color: white;	
	
}
*/

.jaegoch,
.productupch { 
	background-color: #4CAF50;
	border: none;
	border-radius : 7px;
	color: white;
}

.totaljaego { 
	background-color: #4CAF50;
	border: none;
	border-radius : 7px;
	color: white;
}

.totalchulgo { 
	background-color: #4CAF50;
	border: none;
	border-radius : 7px;
	color: white;
}

.flex-container2 .listtitle6 {
	padding: 10 0 0 10px;
	text-align : center;
	}

.modalbtn {
	margin-top : 5px;
    color: #fff;
    background: #FF0066;
    padding: .5rem 1rem;
    display: inline-block;
    border-radius: 4px;
    transition-duration: .25s;
    border: none;
    font-size: 14px;
    cursor : pointer;
}
.modalbtn:hover {
    background: #000;
}


.modalbtn2 {
	margin-top : 2px;
    color: #fff;
    width : 90px;
    background: #FF0066;
    padding: 3px 5px;
    display: inline-block;
    border-radius: 4px;
    transition-duration: .25s;
    border: none;
    font-size: 12px;
    cursor: pointer;
}
.modalbtn2:hover {
    background: #000;
}

.modalbtn3 {
	margin-top : 2px;
    color: #fff;
    width : 90px;
    background: #677ba6;
    padding: 3px 5px;
    display: inline-block;
    border-radius: 4px;
    transition-duration: .25s;
    border: none;
    font-size: 12px;
    cursor: pointer;
}

.modalbtn3_ch {
	background: #233266;
}
.modalbtn3:hover {
    background: #233266;
}

.list_paging {
	display : flex;
	flex-wrap: nowrap;
	width : 100%;
	height : 40px;
	justify-content: center;
	
	
}

.list_paging a {
	display : inline-block;
	margin: 3px;
	width : 35px;
	font-size: 11px;
	text-align : center;
	line-height: 30px;
	background: #f6f6f6;
	border-radius : 5px;
}

.list_paging a:hover {	
	background: #ccc;
	}
	
.list_paging span {
	display : inline-block;
	margin: 3px;
	width : 35px;
	font-size: 11px;
	text-align : center;
	line-height: 30px;
	background: #ccc;
	border-radius : 5px;
}	
	

.list_paging > .bottomarea {
	width : 180px;
	border : 0px solid #ddd;
	text-align : center;
	line-height: 40px;
	font-size : 15px;
}

.list_paging > .bottomarea > h3 {
	display : inline-block;
	color : red;
}


/* product Edit */

.imageform {
	width : 100%;
}

.imageform .input-images{
	cursor : pointer;
}

.imageform input[type=text] {
	width : 70%;
}

.textprice input[type=text] {
	width : 8%;
}

.imageform input[type=text]:focus {
	border: none;
	border-radius: 0px;
	border-bottom: 2px solid red;
 	/*background-color: lightblue;*/
}

.counterdaytop  input[type=text] {
	border: 1px solid #ccc;
	width : 130px;
}

.imageform select {
	width : 30%;
}
.imageform .input-field {
	margin-top : 10px;
	width : 70%;
}

.imageform .input-field:first-child {
	width : 90%;
}


.formblank {
	margin-bottom : 50px;
}

.imageform .formtitle {
	padding: 0 0 0 10px;
	float : left;
	width : 100px;
	height : 40px;
	font-size : 12px;
	text-align : left;
	line-height : 40px;
}

.imageform .scantitle,
.scanlist {
	padding: 0 0 0 10px;
	float : left;
	width : 200px;
	height : 40px;
	font-size : 12px;
	text-align : center;
	line-height : 30px;
}

.imageform .scannum {
	width : 50px;
}

.imageform textarea {
	width : 70%;
	height : 150px;
}


.imageform button {
	margin-top : 40px;
	margin-left : 100px;
	width: 50%;
	height : 30px;
	border-radius : 8px;
	background-color: #d8137f;
  	font-size : 16px;
  	color: white;
  	cursor : pointer;
}

.imageform button:hover {
  background-color: #aa1e79;
}


/* order edit */

.orderedit_flex,
.orderedit_addr {
  margin : 0px;
  display: flex;
  width : 60%;
  align-items: stretch;
  background-color: #fafafa;
}



.orderedit_flex .listtitle1 { flex-grow: 1; max-width:130px;}
.orderedit_flex .listtitle2 { flex-grow: 2; background-color: #fff; text-align:left;}
.orderedit_flex .listtitle3 { flex-grow: 1; max-width:130px;}
.orderedit_flex .listtitle4 { flex-grow: 2; background-color: #fff; text-align:left;}


.orderedit_addr .listtitle1 { flex-grow: 1; max-width:130px; }
.orderedit_addr .listtitle2 { flex-grow: 5; background-color: #fff; text-align:left;}

.orderedit_flex > div,
.orderedit_addr > div {
  background-color: #f1f1f1;
  width : 100px;
  min-height : 40px;
  margin: 1px;
  text-align: center;
  line-height: 40px;
  font-size: 12px;
}

.orderedit_flex > div > input[type=text],
.orderedit_addr > div > input[type=text] {
	width : 70%;
	border : 1px solid #ddd;
}

.orderedit_flex > div > input[type=text]:focus,
.orderedit_addr > div > input[type=text]:focus,
.orderedit_addr > div > textarea:focus {
	border-bottom : 2px solid red;
}

.orderedit_addr > div > textarea {
	width : 70%;
	height : 70px;
}


.orderedit_flex button,
.orderedit_flex > .listtitle2 > .editbutton {
	margin-top : 10px;
	margin-left : 10px;
	width: 65%;
	height : 40px;
	border-radius : 8px;
	background-color: #d8137f;
  	font-size : 16px;
  	color: white;
  	cursor : pointer;
}

.orderedit_flex button:hover,
.orderedit_flex > .listtitle2 > .editbutton:hover  {
  background-color: #aa1e79;
}

#result {
	position: absolute;
	width: 500px;
	max-width : 600px;
	cursor: pointer;
	overflow-y : auto;
	max-height: 300px;
	box-sizing: border-box;
	z-index:1001;
	background-color : #fff;
}
#result > li {
	height : 40px;
}

/* 팝업 flex */


.popup-flex-container {
  margin : 0px;
  display: flex;
  align-items: stretch;
  background-color: #fafafa;
}

.popup-flex-container > div {
  background-color: #f1f1f1;
  width : 100px;
  margin: 1px;
  text-align: center;
  line-height: 50px;
  font-size: 12px;
}


.popup-flex-container .listtitle1 { flex-grow: 1; }
.popup-flex-container .listtitle2 { flex-grow: 1; }
.popup-flex-container .listtitle3 { flex-grow: 4; }
.popup-flex-container .listtitle4 { flex-grow: 2; }
.popup-flex-container .listtitle5 { flex-grow: 2; }
.popup-flex-container .listtitle6 { flex-grow: 2; }
.popup-flex-container .listtitle7 { flex-grow: 1; }
.popup-flex-container .listtitle8 { flex-grow: 1; }


.popup-flex-container2 {
	margin-top : 10px;
  display: flex;
  align-items: stretch;
  border-bottom : 1px solid #ddd
}

.popup-flex-container2 > div {
  width : 100px;
  margin: 1px;
  text-align: center;
  line-height: 20px;
  font-size: 13px;
  padding : 5px 5px;
}

.popup-flex-container2:hover {	
	background: #f6f6f6;
	}

.popup-flex-container2 .listtitle1 { flex-grow: 1; }
.popup-flex-container2 .listtitle2 { flex-grow: 1; }
.popup-flex-container2 .listtitle3 { flex-grow: 4; }
.popup-flex-container2 .listtitle4 { flex-grow: 2; }
.popup-flex-container2 .listtitle5 { flex-grow: 2; }
.popup-flex-container2 .listtitle6 { flex-grow: 2; }
.popup-flex-container2 .listtitle7 { flex-grow: 1; }
.popup-flex-container2 .listtitle8 { flex-grow: 1; }



.modal_flex_container {
  margin : 0px;
  display: flex;
  align-items: stretch;
  background-color: #fafafa;
}

.modal_flex_container > div {
  background-color: #f1f1f1;
  width : 100%;
  margin: 3px 1px;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
}


.modal_flex_container .listtitle1 { flex-grow: 1; }
.modal_flex_container .listtitle2 { flex-grow: 1; }
.modal_flex_container .listtitle3 { flex-grow: 1; }
.modal_flex_container .listtitle4 { flex-grow: 3; }


/* popup 공통 */
.pop_flex_jaego {
  margin : 0px;
  display: flex;
  align-items: stretch;
  
}

.pop_flex_jaego .listtitle1 { flex-grow: 3; }
.pop_flex_jaego .listtitle2 { flex-grow: 1; }
.pop_flex_jaego .listtitle3 { flex-grow: 1; }
.pop_flex_jaego .listtitle4 { flex-grow: 5; }
.pop_flex_jaego .listtitle5 { flex-grow: 1; }
.pop_flex_jaego .listtitle6 { flex-grow: 1; }
.pop_flex_jaego .listtitle7 { flex-grow: 1; }
.pop_flex_jaego .listtitle8 { flex-grow: 1; }

.pop_flex_jaego > div {
  width : 50px;
  margin: 1px;
  text-align: center;
  line-height: 30px;
  font-size: 12px;
}

.pop_flex_jaego.pop_list > div {
	line-height: 30px;
	height : 140px;
		
}


/* 통계 공통 */
.counter_container {
  margin : 0px;
  display: flex;
  align-items: stretch;
  background-color: #fafafa;
}

.counter_container .listtitle1 { flex-grow: 1; }
.counter_container .listtitle2 { flex-grow: 1; }
.counter_container .listtitle3 { flex-grow: 2; }
.counter_container .listtitle4 { flex-grow: 2; }
.counter_container .listtitle5 { flex-grow: 2; }
.counter_container .listtitle6 { flex-grow: 2; }
.counter_container .listtitle7 { flex-grow: 2; }
.counter_container .listtitle8 { flex-grow: 2; }
.counter_container .listtitle9 { flex-grow: 2; }
.counter_container .listtitle10 { flex-grow: 2; }

.counter_container > div {
  background-color: #f1f1f1;
  width : 50px;
  margin: 1px;
  text-align: center;
  line-height: 30px;
  font-size: 12px;
}

.counter_container.pop_list > div {
	background-color: #fff;
	font-size : 9px;
	text-align : right;
	height : 20px;
	line-height: 20px;
	
}

.counter_container > .item3 > ul > li {
	background-color: #ddd;
	font-size : 11px;
	text-align : center;
	height : 20px;
	line-height: 20px;
}



.counter_product {
  margin : 0px;
  display: flex;
  align-items: stretch;
  background-color: #fafafa;
}
.counter_product .listtitle1 { flex-grow: 1; }
.counter_product .listtitle2 { flex-grow: 1; }
.counter_product .listtitle3 { flex-grow: 5; }
.counter_product .listtitle4 { flex-grow: 2; }
.counter_product .listtitle5 { flex-grow: 4; }
.counter_product .listtitle6 { flex-grow: 2; }
.counter_product .listtitle7 { flex-grow: 1; }
.counter_product .listtitle8 { flex-grow: 1; }
.counter_product .listtitle9 { flex-grow: 1; }
.counter_product .listtitle10 { flex-grow: 1; }

.counter_product > div {
  background-color: #f1f1f1;
  width : 50px;
  margin: 1px;
  text-align: center;
  line-height: 30px;
  font-size: 12px;
}

.counter_product.productcnt_list > div {
	background-color: #fff;
	font-size : 11px;
	text-align : center;
	height : 100px;
	line-height: 20px;
	
}

.counter_product > .item3 > ul > li {
	background-color: #ddd;
	font-size : 11px;
	text-align : center;
	height : 20px;
	line-height: 20px;
}



.counter_people {
  margin : 0px;
  display: flex;
  align-items: stretch;
  background-color: #fafafa;
}
.counter_people .listtitle1 { flex-grow: 1; }
.counter_people .listtitle2 { flex-grow: 5; }
.counter_people .listtitle3 { flex-grow: 2; }
.counter_people .listtitle4 { flex-grow: 4; }
.counter_people .listtitle5 { flex-grow: 2; }
.counter_people .listtitle6 { flex-grow: 2; }
.counter_people .listtitle7 { flex-grow: 1; }


.counter_people > div {
  background-color: #f1f1f1;
  width : 50px;
  margin: 1px;
  text-align: center;
  line-height: 30px;
  font-size: 12px;
}

.counter_people.productcnt_list > div {
	background-color: #fff;
	font-size : 11px;
	text-align : center;
	height : 30px;
	line-height: 20px;
	
}

.counter_people > .item3 > ul > li {
	background-color: #ddd;
	font-size : 11px;
	text-align : center;
	height : 20px;
	line-height: 20px;
}


/* popup 공통 */
.pop_flex_cslist2 {
  margin : 0px;
  display: flex;
  align-items: stretch;
  background-color: #fff;
}

.csbtn {
	width : 60px;
	height : 110px;
	cursor : pointer;
	background-color: #d8137f;
	color : #fff;
	
}
.csbtn:hover {
	background-color: #000;
}

.pop_flex_cslist {
  margin : 0px;
  display: flex;
  align-items: stretch;
  background-color: #fafafa;
}

.pop_flex_cslist .listtitle1 { flex-grow: 1; }
.pop_flex_cslist .listtitle2 { flex-grow: 1; }
.pop_flex_cslist .listtitle3 { flex-grow: 1; }
.pop_flex_cslist .listtitle4 { flex-grow: 5; }
.pop_flex_cslist .listtitle5 { flex-grow: 1; }
.pop_flex_cslist .listtitle6 { flex-grow: 1; }
.pop_flex_cslist .listtitle7 { flex-grow: 1; }
.pop_flex_cslist .listtitle8 { flex-grow: 1; }

.pop_flex_cslist > div {
  background-color: #f1f1f1;
  width : 50px;
  min-height : 50px;
  margin: 5px 1px;
  text-align: center;
  font-size: 12px;
  
}

.pop_flex_cslist.pop_list > div {
	background-color: #fff;
	min-height : 80px;
		
}
.pop_flex_cslist.delclass > div {
	background-color: #ffee9c;
}

.pop_flex_cslist.csholdclass > div {
	background-color: #f7aeae;
}

.pop_flex_cslist.focusclass > .listtitle4 {
	background-color: #4CAF50;
	color : #fff;
	font-size : 16px;
}

pop_flex_cslist2 > div > input[type=text] {
	width : 300px;
	height : 30px;
	
}


.pop_flex_cslist2 input[type=text] {
	width : 100%;
	border : 1px solid #ddd;
}

.pop_flex_cslist2 input[type=text]:focus {
	border: none;
	border-radius: 0px;
	border-bottom: 2px solid red;
 	/*background-color: lightblue;*/
}

.smbtn {
	width : 80px;
	height : 140px;
	cursor : pointer;
	background-color: #d8137f;
	color : #fff;
	
}
.smbtn:hover {
	background-color: #000;
}

/* 송장/발주서 */

.input-field > input[type=file] {
	width : 500px;
}


.formbutton button {
	margin-top : 10px;
	margin-left : 50px;
	width: 50%;
	height : 40px;
	border-radius : 8px;
	background-color: #d8137f;
  	font-size : 16px;
  	color: white;
  	cursor : pointer;
}


.filebox {display:inline-block; margin-right: 10px;}


.filebox label {
  display: inline-block;
  padding: .5em .75em;
  color: #999;
  font-size: inherit;
  line-height: normal;
  vertical-align: middle;
  background-color: #fdfdfd;
  cursor: pointer;
  border: 1px solid #ebebeb;
  border-bottom-color: #e2e2e2;
  border-radius: .25em;
}

.filebox input[type="file"] {  /* 파일 필드 숨기기 */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip:rect(0,0,0,0);
  border: 0;
}

.filebox.bs3-primary label {
  color: #fff;
  background-color: #337ab7;
    border-color: #2e6da4;
}

.filebox.bs3-success label {
  color: #fff;
  background-color: #5cb85c;
    border-color: #4cae4c;
}

.filebox .upload-name { 
	display: inline-block; 
	padding: .5em .75em; /* label의 패딩값과 일치 */ 
	width : 300px;
	font-size: 12px; 
	font-family: inherit; 
	line-height: normal; 
	vertical-align: middle; 
	background-color: #f5f5f5; 
	border: 1px solid #ebebeb; 
	border-bottom-color: #e2e2e2; 
	border-radius: .25em; 
	-webkit-appearance: none; /* 네이티브 외형 감추기 */ 
	-moz-appearance: none; 
	appearance: none; 
}


/* 주문관리 공통 */


.orderhead {
  	margin : 0px;
  	display: flex;
  	align-items: stretch;
  	margin-top : 20px;
	height:40px; 
	font-size:18px; 
  	background-color: #fff;
}


.orderhead .listtitle1 { flex-grow: 1; }
.orderhead .listtitle2 { flex-grow: 4;  text-align:right;}
.orderhead .listtitle3 { flex-grow: 1;  text-align:center;}
.orderhead .listtitle4 { flex-grow: 1;  text-align:center;}
.orderhead .listtitle5 { flex-grow: 1;  text-align:center;}
.orderhead .listtitle6 { flex-grow: 2; }

.orderhead > div { 
	font-size:12px; 
	background:#fff;
	
}

.counterdaytop {
	text-align : center;
	margin-top : 20px;
}

.listtitle5 > input[type=text] {
	width : 120px;
	height : 25px;
}

.listtitle6 > input[type=text] {
	width : 200px;
	height : 25px;
}
.orderhead > .listtitle2 > select,
.orderhead > .listtitle3 > select,
.orderhead > .listtitle4 > select { 
	height:25px; 
	font-size:12px; 
	color:#373737; 
	border:1px solid #e9e9e9; 
	background:#fff;
	border-radius: 5px;
}

.ordersearch_btn,
.countersearch_btn { 
	padding: 5px 5px; 
	margin-left: 0px; 
	width:80px; 
	background-color: #ddd; 
	font-size: 16px;
}
.ordersearch_btn:hover,
.countersearch_btn:hover {
	background: #ff7f7a; 
	color:#fff; 
	cursor: pointer;
}


.glsnumclass {
	color: red;
	font-weight : bold;
	font-size : 15px;
	
}


.order_flex {
  margin : 0px;
  display: flex;
  align-items: stretch;
  background-color: #fafafa;
  width: 1000px;
}

.order_flex .listtitle3 { flex-grow: 1; }
.order_flex .listtitle4 { flex-grow: 1; }
.order_flex .listtitle5 { flex-grow: 1; }
.order_flex .listtitle6 { flex-grow: 1; }
.order_flex .listtitle7 { flex-grow: 1; }
.order_flex .listtitle8 { flex-grow: 1; }
.order_flex .listtitle9 { flex-grow: 1; }
.order_flex .listtitle10 { flex-grow: 1; }
.order_flex .listtitle11 { flex-grow: 1; }


.order_flex2 {
  margin-top : 5px;
  display: flex;
  align-items: stretch;
  border-bottom : 1px solid #ddd;
  width: 1000px;
}

.order_flex2 .listtitle3 { flex-grow: 1; }
.order_flex2 .listtitle4 { flex-grow: 1; }
.order_flex2 .listtitle5 { flex-grow: 1; }
.order_flex2 .listtitle6 { flex-grow: 1; }
.order_flex2 .listtitle7 { flex-grow: 1; }
.order_flex2 .listtitle8 { flex-grow: 1; }
.order_flex2 .listtitle9 { flex-grow: 1; }
.order_flex2 .listtitle10 { flex-grow: 1; }
.order_flex2 .listtitle11 { flex-grow: 1; }


.order_flex3 {
  margin-top : 5px;
  display: flex;
  align-items: stretch;
  border-bottom : 1px solid #ddd;
  width: 1000px;
}

.order_flex3 .listtitle3 { flex-grow: 1; }
.order_flex3 .listtitle4 { flex-grow: 1; }
.order_flex3 .listtitle5 { flex-grow: 1; }
.order_flex3 .listtitle6 { flex-grow: 1; }
.order_flex3 .listtitle7 { flex-grow: 1; }
.order_flex3 .listtitle8 { flex-grow: 1; }
.order_flex3 .listtitle9 { flex-grow: 1; }
.order_flex3 .listtitle10 { flex-grow: 1; }
.order_flex3 .listtitle11 { flex-grow: 1; }




.jumun_flex {
  margin : 0px;
  display: flex;
  align-items: stretch;
  background-color: #fafafa;
  width: 1000px;
}

.jumun_flex .listtitle3 { flex-grow: 1; }
.jumun_flex .listtitle4 { flex-grow: 5; }
.jumun_flex .listtitle5 { flex-grow: 1; }
.jumun_flex .listtitle6 { flex-grow: 1; }
.jumun_flex .listtitle7 { flex-grow: 3; }
.jumun_flex .listtitle8 { flex-grow: 1; }
.jumun_flex .listtitle9 { flex-grow: 1; }


.order_title {
  margin-top : 5px;
  margin-bottom : 20px;
  display: flex;
  align-items: stretch;
  border-bottom : 3px solid #f56a6a;
  width: 200px;
}

.listall .cartresult {
  margin-top : 40px;
  margin-bottom : 10px;
  display: flex;
  align-items: stretch;
  border-bottom : 3px solid #f56a6a;
}


.order_flex > div {
  background-color: #f1f1f1;
  width : 80px;
  height : 50px;
  margin: 1px;
  text-align: center;
  font-size: 14px;
  line-height : 50px;
  
}
.order_flex2 > div {
  width : 80px;
  margin: 1px;
  text-align: center;
  font-size: 12px;
  padding : 0px 0px;
  border-right : 1px solid #ddd;
}

.order_flex3 > div {
  width : 80px;
  margin: 1px;
  text-align: center;
  font-size: 12px;
  padding : 0px 0px;
  
}

.order_flex2 .wetakclass {
	background: #e7e9f6; 
}

.order_flex2 .wetakclass2 {
	background: #cccccc; 
}

.order_flex2 .domaeipok_class {
	background: #ccc; 
}

.order_flex2 > div > ul > li {
  padding : 3px 0px;
}

.order_flex2  .ordername {
	font-size : 14px;
	color : darkgreen;
}

.ordername > input[type=text] {
	width : 300px;
	border : 1px solid #ccc;
}

.order_flex2  .orderaddress {
	font-size : 14px;
	color : darkgreen;
	text-align: left;
	padding : 10px 10px;
}

.ordername > .s_site {
	font-size : 16px;
	font-weight : bold;
	color : #000;
}
.s_ea {
	font-size : 25px;
	font-weight : bold;
	color : red;
}





.order_flex2 textarea {
	width : 95%;
	height : 80px;
	ime-mode:active;
}

.order_flex2 textarea:focus {
	border : 2px solid red;
}
.order_flex2 .cstextarea {
	border : 2px solid red;
	background-color: #b1ebb3;
}

.order_flex2 ul > li > input[type=text] {
	width : 80px;
	height : 25px;
}



.orderbtn { 
	background-color: #eee;
	padding: 3px 3px; 
	font-size: 13px;
	border: 1px solid #ccc;
	border-radius : 5px;
	color: black;	
	cursor : pointer;
}

.orderbtnch { 
	background-color: #4CAF50;
	color: white;	
}

.orderbtn:hover { 
	background-color: #4CAF50;
	color: white;	
}

.orderbtnbig { 
	background-color: #eee;
	padding: 6px 6px; 
	font-size: 13px;
	border: 1px solid #ccc;
	border-radius : 5px;
	color: black;	
	cursor : pointer;
}

.orderbtnbig:hover { 
	background-color: #4CAF50;
	color: white;	
}


.order_flex2 > ul > li {
	padding : 5px 0;
}

.xi-cog {
	color : #8b8b8b;
	font-size : 12px;
	cursor : pointer;
}
.xi-cog:hover {
	color : #f56a6a;
	cursor : pointer;
}


#xiconfont {
	font-size : 25px;
	cursor : pointer;
}

.displayOn {
	display : block;
}

.displayOff {
	display : none;
}


/* media  */

@media screen and (max-width: 800px) {
  .loginmain {
	margin : 10% auto;
	width : 50%;
	
	}
}

@media screen and (max-width: 900px) {
  .loginmain {
	margin : 10% auto;
	width : 70%;
	
	}
}

@media screen and (max-width: 500px) {
	.loginmain {
	margin : 10% auto;
	width : 100%;
	}
	
	.loginbody > ul > li > span {
	width : 25%;
	}
}


.posts article .mainlist {
	    margin: 0 0 1em 0;
}

.posts article .mainh3	 {
	line-height: 1.0;
    margin: 0 0 0.5em 0;
}

.posts article .mainp	 {
	margin: 0 0 1em 0;
}


.listatag { 
	cursor : pointer;
}

.detailimgdiv  {
  background-color: #f5f6f7;
  border-radius : 5px;
  object-fit: cover;
}
.detailimg  {
	margin: 0 0 2em 0;
  border-radius : 20px;
  object-fit: cover;
  width:100%;
}

.carttextbox > input[type=text] {
	width : 50px;
	height : 25px;
	display : -webkit-inline-box;
}

#cartea {
	/* position: absolute; */
	width: 60px;
	overflow-y : auto;
	box-sizing: border-box;
	z-index:1001;
	background-color : #fff;
}

.favobtn { 
	background-color: #f1ffde;
	margin-top : 5px;
	//border: none;
	//border-radius : 7px;
	//color: white !important;
}


.imground {
	width: 92px;
    border-radius : 50px;
    height: 92px;
}


.note-num {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    height: 20px;
    width: 20px;
    line-height: 20px;
    text-align: center;
    background-color: red;
    border-radius: 15px;
    display: inline-block;
}

#notification {
    background-image: url('/Home/images/alam.png');
    position: relative;
}




.grand-parent {
    /* 박스 스타일링 */
    height: 500px;
    border: 5px dotted lightsalmon;
    /* padding : border와 content사이에 주는 간격 */
    padding: 50px;
}

.parent {
    /* 박스 스타일링 */
    height: 500px;
    border: 5px dotted lightslategray;
    padding: 10px;
}

.child {
    /* 박스 스타일링 */
    width: 150px;
    height: 100px;
    border: 3px dotted crimson;
    border-radius: 12px;
    background-color: lightyellow;

    /* 텍스트 정렬 */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
}

/*  position: relative
-> element가 원래 본인 위치 기준으로 자리를 잡음 */
.relative {
    position: relative;
    left: 100px;
    top: 5px;
}

.checkboxlabel {
	display : none;
}
@media screen and (max-width: 500px) {
	
	.checkboxlabel {
		display : block;
		width : 50px;
	}
	.cart_flex {
		width: 380px;
		background-color: #ffffff;
	}
	
	.cart_flex > div {
	    text-align: center;
	    font-size: 10px;
	    padding: 0px 0px;
	    border-right: 0px solid #fff;
	    background-color: #ffffff;
	    vertical-align: middle;
	}
	
	.cart_flex .listtitle1 {
		width: 30px;
		background-color: #ffffff;
	}
	.cart_flex .listtitle2 {
		width: 80px;
		display : none;
		background-color: #ffffff;
	}
	.cart_flex .listtitle2 {
		display : none;
		background-color: #ffffff;
	}
	.cart_flex .listtitle3 {
		display : none;
	}
	.cart_flex .listtitle4 {
		display : none;
	}
	.cart_flex .listtitle5 {
		display : none;
	}
	.cart_flex .listtitle6 {
		display : none;
	}
	.cart_flex .listtitle11 {
		display : none;
	}
	
	.cart_flex2 {
		width: 380px;
		/*flex-direction : column;
		display : block;*/
	}
	
	.cart_flex2 > div {
	    text-align: center;
	    font-size: 10px;
	    padding: 5px 0px;
	    border-right: 0px solid #ffffff;
	}
	
	.cart_flex2 img {
	    width: 50px;
	    height: 60px;
	}
	
	.cart_flex2 br{
	    display:none !important;
    }
    
    .cart_flex2 .p_ea_p{
	    margin: 0 0 1em 0;
    }
    
	.cart_flex2 .cartlistcol4 br{
	    display:block;
    }
	.cart_flex2 .cartlistcol1 {
		width: 30px;
	}
	
	.cart_flex2 .cartlistcol2 {
		width: 80px;
	}
	
	.cart_flex2 .cartlistcol6 {
		display : none;
	}
	
	.cart_flex2 .cartlistcol3 {
		width: 100px;
	}
	
	.cart_flex2 input[type=text] {
		font-size: 10px;
		width : 30px;
		padding: 5px;
	}
	.cart_flex2 .button {
		width : 60px;
		font-size: 8px;
		font-weight: bold;
		padding: 0 0em;
	}
	
	.cart_flex2 .deletebtn {
		width : 40px;
		font-size: 8px;
		font-weight: bold;
		padding: 0 0em;
	}
	
	
	.cart_flex3 {
		width: 380px;
		/*flex-direction : column;
		display : block;*/
	}
	
	.cart_flex3 > div {
		width: 50px;
	    text-align: center;
	    font-size: 11px;
	    padding: 5px 0px;
	    border-right: 0px solid #ffffff;
	}
	
	.cart_flex3 .cartlistcol1 {
		display : none;
	}
	.cart_flex3 .cartlistcol2 {
		display : none;
	}
	.cart_flex3 .cartlistcol3 {
		display : none;
	}
	.cart_flex3 .cartlistcol4 {
		width: 80px;
	}
	.cart_flex3 .cartlistcol5 {
		display : none;
	}
	.cart_flex3 .button{
		font-size: 9px;
	}
	.cart_flex3 .cartlistcol7 {
		display : none;
	}
	.cart_flex3 h3{
		font-size: 11px !important;
	}
	.cart_flex3 h2{
		font-size: 13px !important;
	}


	
/* 주문리스트 */

	.cart_jumun {
		width: 380px;
		background-color: #ffffff;
	}
	.cart_jumun > div {
	    text-align: center;
	    font-size: 10px;
	    padding: 0px 0px;
	    border-right: 0px solid #fff;
	    background-color: #ffffff;
	    vertical-align: middle;
	}
	.cart_jumun .listtitle1 {
		width: 80px;
		background-color: #ffffff;
	}
	.cart_jumun .listtitle2 {
		width: 100px;
		display : none;
		background-color: #ffffff;
	}
	.cart_jumun .cartlistcol3 {
		width: 100px;
	}
	
	.cart_jumun2 {
		width: 380px;
		/*flex-direction : column;
		display : block;*/
	}
	.cart_jumun2 > div {
	    text-align: center;
	    font-size: 10px;
	    padding: 5px 0px;
	    border-right: 0px solid #ffffff;
	}
	.cart_jumun2 img {
	    width: 60px;
	    height: 60px;
	}
	.cart_jumun2 .cartlistcol1 {
		width: 80px;
	}
	.cart_jumun2 .cartlistcol2 {
		width: 100px;
	}
	.cart_jumun2 .cartlistcol3 {
		width: 100px;
	}
	.cart_jumun2 .button {
		width : 60px;
		font-size: 8px;
		font-weight: bold;
		padding: 0 0em;
	}
	
	.cart_jumun3 {
		width: 380px;
		/*flex-direction : column;
		display : block;*/
	}
	.cart_jumun3 > div {
		width: 50px;
	    text-align: center;
	    font-size: 11px;
	    padding: 5px 0px;
	    border-right: 0px solid #ffffff;
	}
	.cart_jumun3 .cartlistcol4 {
		width: 80px;
	}
	.cart_jumun3 .button{
		font-size: 9px;
	}
	.cart_jumun3 h3{
		font-size: 11px !important;
	}
	.cart_jumun3 h2{
		font-size: 13px !important;
	}
	

/* 모바일 메인 */
	.features article {
    margin: 0 0 0 30;
    width: 33%;
    align-items: center;
	}
	
	.mainimglist {
    margin: 0 0 0 0;
    text-align: center;
	}
	
	.indeximg {
		width: 100px;
		height: 110px;
		vertical-align: middle;
		text-align: center;
    overflow: hidden;
    border-radius : 5px;
		
	}
	
	.indextext {
		padding: 5px 2px 2px 5px;
    font-size: 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    justify-content: space-between;
    font-family: 'Noto Sans KR', sans-serif;
	}
	
	.indexcolor {
		display: none;
	}
	
	
	.indexprice  {
		font-size: 13px;
		color: #d8137f;
		margin-top: 5px;
	}
}
/* 모바일 media 끝 */

.cartjasonprice {
	margin-top : 45px;
}


.mylistpagenum {
  margin-top : 5px;
  padding:  10px;
  text-align: center;
  size: 20px;
  border-bottom : 1px solid #ddd;
  width: 100%;
}



.gls_flex {
  margin : 0px;
  background-color: #ffffff;
  width: 100%;
}

.glsradiodiv1 {
  margin : 0px;
  display: flex;
  
  background-color: #ffffff;
  width: 100%;
}

.glsradio1 {
  
  padding-left : 5px;
  display: flex;
  justify-content: flex-start;
  font-size: 10px;
  text-align: left;
  background-color: #ffffff;
  width: 100px;
}

input[type="radio"] + label {
  
  font-size: 12px;
  
}


@media screen and (min-width: 1681px) {
	.posts {
	    margin: 0 0 0 0;
	}        

	.posts article {
	    width: calc(50% - 6em); 
	}
   
	.favocss article {
	    width: calc(50% - 12em); 
	}  
}
        

.jumunstat1 {
		background-color: #f6f7ee;
	}    

.jumunstat2 {
		background-color: #ffffff;
	}  
.jumunstat3 {
		background-color: #fafafa;
	}    
	
.loginbody .comtext {
	padding-right: 5px;
    width: 60%;
    font-size: 12px;
    text-align: left;
    color: white;
}	


.tokclass {
	vertical-align: middle;
}

.tok_liclass {
	displace: block;
	align: left;
	padding: 0 0 0 0;
}