@charset "utf-8";
a:hover {  text-decoration:none;}

/* list */
#shop_wrap #location {width:100%; }
#shop_wrap #location .location_left { float:left; }	
#shop_wrap #location .location_right { float:right; }
#shop_wrap #location::after { content:""; display:block; clear:both; }
#shop_wrap #location .location_left i {margin-right:5px; }	
#shop_wrap #location .location_right a { display:inline-block; margin-left:5px; padding:5px 10px; background-color: #09F; color:#fff; }
#shop_wrap #location .location_right a:hover { background-color:#06F;}
#shop_wrap #shopmenu {border:1px solid #ccc; margin:0 auto;margin-bottom:20px; margin-top:20px; padding:15px 20px; width:100%; box-sizing:border-box; background-color:#F8FCF8}
#shop_wrap #shopmenu > dd { font-size:105%; cursor:pointer; box-sizing:border-box; width:90%; padding-left:3%;}
#shop_wrap #shopmenu > dd ul > li {display:inline-block; padding:2px 10px; box-sizing:border-box;}
#shop_wrap #shopmenu > dd ul > li a:hover { text-decoration:none;color:#1aaebb; }
#shop_wrap #shopmenu > dt { position:relative;width:7%; text-align:center;box-sizing:border-box; padding-top:2px;}
#shop_wrap #shopmenu > dt:after {content:"|"; position:absolute; font-weight:normal; right:-7px; color:auto; font-size:70%; top:1px;;}
#shop_wrap #shopsort { text-align:right;}
#shop_wrap #shopsort select {margin-left:5px; vertical-align:middle;}
#shop_wrap #p_list{ display: grid; grid-template-columns: repeat(3,1fr);  grid-gap:10px; margin-top:10px; padding-top:10px; width:100%; }
#shop_wrap #p_list dl{ width:100%; text-align:center;	margin-bottom:20px; box-sizing:border-box;}
#shop_wrap #p_list dl dt {width:100%; height:250px;margin-bottom:10px; text-align:center; position:relative;}
#shop_wrap #p_list dl dt img {position: absolute;left: 50%;top: 50%; transform: translate(-50%,-50%);}
#shop_wrap #p_list dl dd {margin:0 0 1px 0; ;font-size:105%;}
#shop_wrap #p_list dl dd.price span{font-weight:bold;color:red;margin-top:8px;	}
#shop_wrap #p_list dl dd.title {text-overflow:ellipsis; overflow:hidden; white-space:nowrap; padding:0 5px; margin-top:20px;}
#shop_wrap #shop_bottom {margin-top:25px; width:100%; border-bottom:1px solid #ccc; padding:5px 0;}
#shop_wrap #shop_bottom #location{float:left;}
#shop_wrap #shop_bottom #location img{vertical-align:middle;}
#shop_wrap #shop_bottom #location span{color:#f99f01; font-weight:bold;}

/*페이지 목록*/
#pg_nb{float:right;	bottom:5px;}
#pg_nb li {float:left; width:21px; text-align:center; margin:0 2px;}
#pg_nb li span{height:19px; width:21px;	border:1px solid #a6a7a9; background-color:#000;	color:#FFF;	font-weight:bold; text-align:center; display:inline-block;}

/* detail */
#p_detail {border:1px solid #fff; margin-top:2px;}
#p_detail #p_top {width:100%; margin-left:0; padding-top:28px;}
#p_detail #p_top #img_view {width:49%; float:left; position:relative;margin-right:5%; box-sizing:border-box;}
#p_detail #p_top #img_view #p_photo {width:100%; min-height:350px; margin-bottom:4px; text-align:center;display:table;box-sizing:border-box; }
#p_detail #p_top #img_view #p_photo > div {display:table-cell; vertical-align:middle; text-align:center;}
#p_detail #p_top #img_view #imgshow { text-align:center; }
#p_detail #p_top #img_view #imgshow a { margin:0 10px; }
#p_detail #p_top #img_view #imgshow a span { border:1px solid #ccc; padding:5px 7px;}
#p_detail #p_top #img_view #imgshow a i { margin-right:2px;}
#p_detail #p_top #information{float:left; width:45%;}
#p_detail #p_top #information header {font-size:120%; text-align:center;}
#p_detail #p_top #information p{color:#e41a1a; font-size:12px; font-weight:bold;}
#p_detail #p_top #information table { width:100%; text-align:left;	margin-top:15px; border:1px solid #efefef; box-sizing:border-box;}
#p_detail #p_top #information table th {background-color:rgba(233,233,233,0.7); text-align:center; width:35%; height:41px; color:#000; font-weight:normal;}
#p_detail #p_top #information table td {padding-left:10px; height:41px; font-weight:bold;}
#p_detail #p_top #information table td span{color:#099fbf; font-weight:bold;}
#p_detail #p_top #information table td input { border:1px solid #ccc; height:25px; line-height:25px; margin-right:3px;}
#p_detail #p_top #information #now_order {margin-top:40px; text-align:center;}
#p_detail #p_top #information #now_order button { padding:10px 15px; font-size:110%; background-color:#36C; color:#fff; border:0; margin:0 5px;}
#p_detail #p_top #information #now_order button i { margin-right:5px;}
#p_detail #p_top #information #now_order button:hover { background-color: #06C; cursor:pointer;}
#p_detail #p_memo{width:100%; margin:0 auto; margin-bottom:30px; margin-top:60px;}
#p_detail #p_memo ul {clear:left; height:30px; margin:0 auto; padding:0;border-bottom:1px solid #ccc;border-left:1px solid #ccc;}
#p_detail #p_memo ul li {width:111px; height:29px; line-height:29px; text-align:center; background-color:rgba(233,233,233,0.7); border-right:1px solid #ccc;border-top:1px solid #ccc; float:left; cursor:pointer;}
#p_detail #p_memo ul li span {color:#000;}
#p_detail #p_memo ul li:hover {filter:alpha(opacity=50); opacity: 0.5; -moz-opacity:0.5;}
.zoom { display:inline-block; position: relative;   }   
.zoom img { display: block;}
.zoom img::selection { background-color: transparent; }
.p_contents{padding:20px 0;	clear:left; display:none;}
.p_contents img { max-width:100%; height;auto;}
#p_detail #p_memo ul li.thispage {font-weight:bold; background-color:#E0EBFF;}

/* review */
#shop_wrap #myreview {margin-top:20px;}
#shop_wrap .memolist {margin:10px 0;}
#shop_wrap .memolist p.r_title {margin-bottom:3px;}
#shop_wrap .memolist p.r_title span {margin-right:10px;}
#shop_wrap .memolist p.r_memo{border:1px solid; border-radius:3px; padding:5px;}
#shop_wrap #memoinput {width:100%; margin:10px auto;}
#shop_wrap #memoinput textarea {width:99%; height:50px; border:1px solid;}
#shop_wrap #memoinput p{text-align:right; margin-top:5px;}
#shop_wrap #memoinput p input {margin-left:5px;}
#shop_wrap #sns_to {text-align:right; margin-bottom:5px;}
#shop_wrap #sns_to img {margin-left:2px;}

/* cart */
#p_cart {padding-top:10px; width:100%;}
#p_cart h3{font-size:25px;}
#p_cart table{width:100%; margin-top:33px; border-collapse:collapse;}
#p_cart table tr th{height:30px; border-top:2px solid; background:url(img/slide.gif) no-repeat middle right;}
#p_cart table tr th:last-child{background:none;	}
#p_cart table tr td{height:95px; border-top:1px solid; border-bottom:1px solid; text-align:center;}
#p_cart table tr td dl dt{float:left; width:30%; text-align:center;	padding-right:2%;}
#p_cart table tr td dl dd.title{text-align:left; font-weight:bold; margin-top:10px;}
#p_cart table tr td dl dd.memo{text-align:left;	font-weight:bold; color:#F00;}
#p_cart table tr .pcode {width:10%;}
#p_cart table tr .pname {width:*;}
#p_cart table tr .price {width:10%;}
#p_cart table tr .pvolume {width:7%;}
#p_cart table tr .pdel {width:7%;}
#p_cart table tr .pname dl dt img {max-width:100%; height:auto;} 
#p_cart #price{padding:20px 0 10px 0; text-align:right; border-bottom:1px solid;}
#p_cart #price strong{color:#d70825; font-weight:bold; margin-right:3px; font-size:120%;}
#gobtn {text-align:right; margin-top:43px; width:100%;}
#gobtn #goshopping {text-align:center; color:#ffffff; background:#5fa245; font-weight:bold; padding:10px 15px;}
#gobtn #gomodify {text-align:center; color:#ffffff;	background:#1aaebb;	font-weight:bold; padding:10px;}
#gobtn #gobuynow {width:100px; text-align:center; color:#ffffff; background:#000; font-weight:bold; padding:10px 15px; margin-left:5px;	letter-spacing:-0.05em;}

/* order */
.ordering {margin:20px 0 10px 0; width:100%;}
.ordering h4 {margin:10px 0 5px 0; font-weight:bold;}    
.ordering dl{border-bottom:1px solid; border-top:1px solid; width:100%; padding:7px 0;}
.ordering dl dt{float:left;	width:15%; font-weight:bold;	padding:8px 0; text-align:center; margin:0;}
.ordering dl dd{width:85%; padding:8px 0; float:left; margin:0;}
.ordering dl dd img{margin-left:10px; vertical-align:middle; margin-bottom:5px;}
.check_minus { border:1px solid #ccc; border-right:0;font-weight:normal; font-size:200%; display:inline-block; height:25px; line-height:18px; width:20px; text-align:center; background:#f4f4f4; vertical-align:middle; border-top-left-radius:5px;border-bottom-left-radius:5px; cursor:pointer;}
.check_plus { border:1px solid #ccc; border-left:0;font-weight:normal; font-size:150%; display:inline-block; height:25px; line-height:19px; width:20px; text-align:center; background:#f4f4f4; vertical-align:middle; border-top-right-radius:5px;border-bottom-right-radius:5px; cursor:pointer;}
input#quantity { border:1px solid #ccc; text-align:center; padding:0;width:30px;}
#quantity { vertical-align:middle;}
#payment_info p{height:33px; line-height:33px; border-top:1px solid #dad9d9; border-bottom:2px solid #dad9d9; padding-left:15px; background-color:#fdfdfd; color:#868585; margin:8px 0;}
#payment_info p span{font-weight:bold; padding-right:15px;}
#payment_info dl dd span{font-weight:bold; color:#FF0000; font-size:130%; vertical-align:middle; display:inline-block; padding-bottom:5px;}
#payment_info dl dd em{font-style:normal;}
#bankpaydone {width:70%; margin:0 auto; margin-top:100px; margin-bottom:100px; text-align:center; height:500px;}
#bankpaydone #bankpaydone_inbox {border:1px solid; padding:30px; border-radius:5px;}
#bankpaydone_inbox > p {margin-bottom:30px; font-size:110%;}
#bankpaydone_inbox > p span {color:red; font-weight:bold;}

/*ordercheck*/
#order_check {width:50%; margin:0 auto;	text-align:center;	margin-top:10%;}
#order_check h3 {font-weight:bold; font-size:150%;	margin-bottom:20px;}
#order_check dl {width:100%;	border-top:1px solid #dddddd;	border-bottom:1px solid #dddddd;	padding:10px 0;}
#order_check dl dt {float:left; padding:5px 0; width:30%;}
#order_check dl dd {float:left;	padding:5px 0;	width:55%;}


@media handheld, only screen and (max-width: 767px) {
 
    #shop_wrap #menu { height:inherit; width:100%; padding:0;}
	#shop_wrap #menu > dt {float:none; width:100%; font-size:110%; font-weight:bold; margin:0; padding:5px 10px; text-align:left;  border-bottom:1px solid;}
    #shop_wrap #menu > dd.realmenu { padding-top:15px;}
    #shop_wrap #menu > dd {float:none; width:100%; font-size:110%; font-weight:bold; margin:0; padding:5px 0; cursor:pointer; }  
    #shop_wrap #menu > dt {border-top:0; content:"|"; }
    #shop_wrap #menu > dt:after {position:relative; content:"";}
	#shop_wrap #p_list { grid-template-columns: repeat(auto-fill, 50%); }
    #shop_wrap #p_list dl{ margin-bottom:50px;}
    
    #shop_wrap #menu > li:first-child {width:100%; padding:10px; box-sizing:border-box;text-align:left;}
    #shop_wrap #menu > li:last-child { width:100%; padding:10px; box-sizing:border-box;}
    #shop_wrap #menu > li > ul > li { padding:5px 15px 5px 0;}

    /*detail*/
    #p_detail {border:0; margin:0; padding:0;} 
    #p_detail #p_top {width:100%;}
    #p_detail #p_top #img_view{width:100%; height:auto; float:none; text-align:left; margin-bottom:20px; margin-right:0;}
	  #p_cart #price #total_amount {width:98%;}
    #p_detail #p_top #img_view img#photo {max-width:100%; height:auto;}
    #p_detail #p_top #information {float:none; width:100%; margin:0 auto; margin-top:40px !important;}
    #p_detail #p_top #information header,  #p_detail #p_top #information p {font-size:120%;}
    #p_detail #p_top #information table {width:100%;}
	  #p_cart .pprice {width:30%;}
	  #p_cart .pname {text-align:center;}
    #p_detail #p_memo {width:100%;}
    #p_detail #p_memo ul li {width:28%;}
    .p_contents{padding:20px 10px;}
    
    /*cart*/
    #p_cart table tr .pcode {
      display:none;
    }
	#p_cart table tr td #main_cartimg {display:none;}	
	#p_cart table tr td dl dd.title {text-align:center;}
    #p_cart table tr .pname {width:*; text-align:center;}
    #p_cart table tr .price {width:15%;}
    #p_cart table tr .pvolume {width:10%;}
    #p_cart table tr .pdel {width:10%;}
    
    /*order*/
    .ordering dl dt{width:20%;}    
    .ordering dl dd{width:80%;}   
    
    /*ordercheck*/
    #order_check dl {width:95%;}
    #order_check dl dt{width:100%;}
	#order_check dl dd {width:100%;}
  	
    /*orderresult */
    #order_result dl dt {width:33%; padding-left:2%;}
    #order_result dl dd {width:65%;}    
  	#order_mem {width:100%;}
            
}

@media handheld, only screen and (max-width: 468px) {

    #shop_wrap #top_menu {font-size:90%;}
    #shop_wrap #p_list {grid-template-columns: repeat(auto-fill, 100%);}
       
    /* detail */
    #p_detail {border:0; width:100%; margin:0; padding:0;box-sizing:border-box;} 
    #p_detail #p_top {width:100%;}
    #p_detail #p_top #img_view{width:100%; height:auto; float:none; text-align:left; margin-bottom:20px;box-sizing:border-box;}
    #p_detail #p_top #img_view img#photo {max-width:100%; height:auto;}
    #p_detail #p_top #information {float:none; width:100%;}
    #p_detail #p_top #information header,  #p_detail #p_top #information p {font-size:120%;}
    #p_detail #p_top #information table {width:100%;}
    #p_detail #p_memo {width:100%;}
    #p_detail #p_memo ul li {width:28%;}
    .p_contents{padding:20px 10px;}
     
    /*cart*/
    #p_cart #price span {display:block; margin-right:10px;}      
    #p_cart #price strong {margin-right:0;}
    #order_check {width:95%;}
    #order_result table .resul01 {width:15%;}
    #order_result table .resul05 {width:20%;}
  	#orderlist #list_table th:nth-child(1) {width:10%;}
	
}

@media handheld, only screen and (max-width: 320px) {
	
	.hidden {display:none;}
    #order_result dl dt {width:43%; padding-left:2%;}
    #order_result dl dd {width:55%;}
    #order_result #total p em{font-style:normal; font-weight:bold; display:block;}
    #order_result table .resul01 {display:none;}
  	#shop_wrap #top_menu li{width:80px;}
  	#payment_info dl dd {width:70%; padding-left:5%;}
  	#payment_info dl dd em{display:block; height:30px;}
  	#orderlist #list_table th:nth-child(2),	#orderlist #list_table td:nth-child(2) {display:none;}
  	#orderlist #list_table th:nth-child(4),	#orderlist #list_table td:nth-child(4) {display:none;}
  	#orderlist #list_table th:nth-child(6),	#orderlist #list_table td:nth-child(6) {display:none;}
  	#orderlist #write_bt {width:100%; margin-top:-6px;}
  	#orderlist #write_bt #orderdel	{float:left;}
  	#orderlist #write_bt #goinghome	{float:right;}

}