﻿
h6 {height:30px; line-height:30px; text-indent:20px; font-size:1.2rem; font-weight:700; color:#333; background-color:#d1d7e1;}
h6 span {color:red; font-size:1.2rem;}


.box_explain_01 {width:100%; text-align:left; padding:5px; border:3px solid #e7e7e7; font-size:1.05rem;}
.box_explain_01 ul li {width:100%; text-align:left; padding:5px; border-bottom:1px dotted #ddd; font-size:1.05rem;}
.select_h {height:30px; padding-right:25px; border:1px solid #ddd;}

fieldset {border:1px solid #e7e7e7; padding:10px;}
fieldset legend {background-color:#3b5998; color:white; font-size:12px; font-weight:700; padding:5px 10px;}


ul {font-size:0;}



#wrapper {position:relative; width:100%; height:100%; margin:0 auto;}


#upward_left    {position:fixed; left:0; bottom:200px; width:50px; height:50px; text-align:center; border:0px solid black; background-color:transparent; opacity:1.0; z-index:100;}
#upward_left ul li    {width:100%; height:100%; overflow:hidden;}
#upward_left ul li a   {width:100%; height:100%;}
#upward_left ul li a img   {vertical-align:top; width:100%; height:100%; transition:all 0.6s;}
#upward_left ul li:hover a img   {transform:scale(1.2);}

#upward_right    {position:fixed; right:0; bottom:200px; width:50px; height:50px; text-align:center; border:0px solid black; background-color:transparent; opacity:1.0; z-index:100;}
#upward_right ul li    {width:100%; height:100%; overflow:hidden;}
#upward_right ul li a   {width:100%; height:100%;}
#upward_right ul li a img   {vertical-align:top; width:100%; height:100%; transition:all 0.6s;}
#upward_right ul li:hover a img   {transform:scale(1.2);}


#header             {display:table; width:100%; border-bottom:1px solid #ddd; height:auto;}
#header_menu        {display:table; min-width:1280px; width:100%; margin:5px auto;}
#header_menu .box01 {display:table-cell; width:250px; text-align:left; text-indent:10px;}
#header_menu .box01 ul li {font-size:24px; font-weight:bold; color:#ff1493;}
#header_menu .box01 ul li:hover {color:#dc143c; cursor:pointer;}
#header_menu .box02 {display:table-cell; width:400px; vertical-align:top;}
#header_menu .box03 {display:table-cell; vertical-align:top;}

#header_menu .box04 {display:table-cell; width:760px; vertical-align:top;}

#header_menu .box04_sub {width:100%; text-align:right;}
#header_menu .box04_sub ul {width:100%; height:100%;}
#header_menu .box04_sub ul li {position:relative; display:inline-block;  padding:0 10px; font-size:12px; font-weight:400; height:30px; line-height:30px; cursor:pointer;}
#header_menu .box04_sub ul li:before {content:""; position:absolute; width:1px; height:7px; background-color:#666; top:50%; left:0; transform:translateY(-50%);}
#header_menu .box04_sub ul li:first-child:before {display:none;}
#header_menu .box04_sub ul li:hover {color:#ff1493;}




#search_main      {display:table; width:100%;}
#search_main div  {display:table-cell; border:0px solid green; position: relative;}
#search_main div form {border:1px solid green; position: relative;  box-sizing:border-box;}
#search_main div.search_01 {background: #fff;}
#search_main div.search_01 input { width: 350px;  height: 30px; padding-left: 5px;  border: 1px solid #999;  border-radius: 3px;  outline: none;  background: #fff;  color: #333;}
#search_main div.search_01 input:focus { border: 1px solid #666; }
#search_main div.search_01 button { position: absolute;   top: 0;  right: 0px;  width: 100px;  height: 30px;  border: 1px solid #999;  background: #999;  border-radius: 0 3px 3px 0;  cursor: pointer;  transition:0.5s;}
#search_main div.search_01 button .fas {color:#ebebeb; font-size:20px; line-height:20px;}
#search_main div.search_01 button:hover  { background:#666;}


/*

#search_sub      {display:table; width:100%;}
#search_sub div  {display:table-cell; border:0px solid green;position: relative;}
#search_sub div form {border:0px solid green; position: relative;  box-sizing:border-box;}
#search_sub div.search_10 {background: #fff;}
#search_sub div.search_10 input {
  width: 350px;
  height: 30px;
  padding-left: 5px;
  border: 2px solid orangered;
  border-radius: 5px;
  outline: none;
  background: #fff;
  color: #333;
}
#search_sub div.search_10 button {
  position: absolute; 
  top: 0;
  right: 0px;
  width: 100px;
  height: 30px;
  border: 2px solid orangered;
  background: orangered;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  color: #fff;
  font-size:15px;
}
#search_sub div.search_10 button:before {
  content: "";
  font-size: 14px;
  color: #fff;
}

*/

/* 이하새로작성한 css */




#portal_maker_10 {position:relative; display:table; text-align:center; width:100%; min-width:1280px;}
#portal_maker_10 ul {display:block; margin:0 auto;}
#portal_maker_10 ul li.type_10 {display:inline-block; border:1px solid #ddd; width:150px; background-color:#fff; height:40px; line-height:40px; padding:0; margin:5px; text-align:center; 
                        color:#333; font-size:16px; font-weight:700; text-shadow: -1px -1px 0px #ddd, 3px 3px 0px #ddd, 6px 6px 0px #feffef; cursor:pointer;
                        border-radius:10px 0 0 0; 
}
#portal_maker_10 ul li.type_20 {display:inline-block; border:1px solid #ddd; width:150px; background-color:#fff; height:40px; line-height:40px; padding:0; margin:5px; text-align:center; 
                        color:#333; font-size:16px; font-weight:700; cursor:pointer;
}
#portal_maker_10 ul li.type_30 {display:inline-block; border:1px solid #ddd; width:200px; background-color:#fff; height:300px; padding:0; margin:5px; text-align:center; 
                        color:#333; font-size:16px; font-weight:700; cursor:pointer;
}

#portal_maker_10 ul li:hover { opacity: 0.8; filter:alpha(opacity=80);  -ms-filter:"alpha(opacity=80)"; /* For IE 8 */ }
#portal_maker_10 ul li:focus {
    outline: none;
}


#portal_maker_link {position:relative; display:table; text-align:center; width:100%; min-width:1280px; margin-top:15px;}
#portal_maker_link ul li {display:inline-block;  text-align:center; width:170px; height:60px; border:1px solid crimson; margin:1px; line-height:150%; cursor:pointer; overflow:hidden;}



#nav  {display:table; width:100%; min-width:1280px; height:auto; border-bottom:1px solid #ddd;  margin:0 auto;}
#nav > div {display:table; width:1280px; min-width:1280px; height:auto; border-bottom:1px dotted #ddd;  margin:0 auto;}


#menu_main_10 ul      {display:table; width:100%; text-align:center; margin:1px;}
#menu_main_10 ul li   {display:table-cell; position:relative; text-align:center; padding:5px; font-size:1.00rem; border:1px solid #ddd; font-weight:400;}
#menu_main_10 ul li:first-child:before {display:none;}
#menu_main_10 ul li:first-child {border-left:none;}
#menu_main_10 ul li:last-child {border-right:none;}
#menu_main_10 ul li:hover {color:#ff1493; cursor:pointer;}

#menu_kinds_10 ul      {display:table; width:100%; text-align:center; margin:1px;}
#menu_kinds_10 ul li   {display:table-cell; position:relative;  text-align:center; padding:5px; font-size:1.00rem; border:1px solid #ddd; font-weight:400;}
#menu_kinds_10 ul li:first-child:before {display:none;}
#menu_kinds_10 ul li:first-child {border-left:none;}
#menu_kinds_10 ul li:last-child {border-right:none;}
#menu_kinds_10 ul li:hover {background-color:#ff69b4; color:#f1f1f1; cursor:pointer;}

#menu_mall_10 ul      {display:table; width:100%; text-align:center;  margin:1px;}
#menu_mall_10 ul li   {display:table-cell; position:relative;  text-align:center; padding:5px; font-size:1.00rem; border:1px solid #ddd; font-weight:400;}
#menu_mall_10 ul li.sub_01 {font-size:1.05rem; font-weight:700; color:#ff1493;}
#menu_mall_10 ul li:first-child:before {display:none;}
#menu_mall_10 ul li:first-child {border-left:none;}
#menu_mall_10 ul li:last-child {border-right:none;}
#menu_mall_10 ul li:hover {background-color:#ff1493; color:#fff; cursor:pointer;}


#container {display:table; width:100%; min-width:1280px; height:auto; border-bottom:0px solid red;  margin:0 auto;}

#container .menu_left {display:table-cell; width:140px; height:auto; border-left:1px solid #ddd;  border-right:1px solid #ddd; vertical-align:top;}
#container .menu_left h4 {padding:4px; background-color:#e7e7e7; border-top:1px solid #ddd; border-bottom:1px solid #ddd; color:#708090; font-size:1.05rem; font-weight:700; text-align:right;}
#container .menu_left ul li {padding:3px; 5px; text-align:right; font-weight:400;}
#container .menu_left ul li:hover {background-color:#e7e7e7;  color:green;  cursor:pointer;}
#container .menu_left ul.alphabet li {display:inline-block; width:26px; height:26px; margin:2px; line-height:26px; background-color:#ffb6c1; color:white; border-radius:50%; transition:0.4s; box-shadow: 2px 2px 10px #666 ; text-shadow: 2px 2px 10px #666;}
#container .menu_left ul.alphabet li:hover {background-color:red; cursor:pointer; box-shadow: 2px 2px 10px #999; text-shadow: 2px 2px 10px #999;}

#container .menu_right {display:table-cell; width:140px; height:auto; border-left:1px solid #ddd;  border-right:1px solid #ddd; vertical-align:top;}
#container .menu_right h4 {padding:4px; background-color:#e7e7e7; border-top:1px solid #ddd; border-bottom:1px solid #ddd; font-size:1.1rem; font-weight:700; text-align:left;}
#container .menu_right ul li {padding:3px; 5px; font-weight:400;}
#container .menu_right ul li:hover {background-color:#e7e7e7; color:green; cursor:pointer;}


#container .content  {display:table-cell; min-width:1000px; height:auto; border-right: 0px solid red;}
#container .content .makerpack      {width:100%;}

/* 메이커 뿌려주기 */
#container .content .makerpack .box01     {border:1px solid #ddd;}
#container .content .makerpack .box01 ul li {display:inline-block; width:180px; text-indent:5px; padding:3px 0;  border-bottom:1px dotted #ddd; color:#444; border-left:1px solid #ddd; transition:0.4s;}
#container .content .makerpack .box01 ul li:hover {background-color:#e7e7e7; cursor:pointer;}


/* 메이커네임 */
#container .content .makerpack .box12       {width:100%; background-color:#e7e7e7;}
#container .content .makerpack .box12 ul li {display:inline-block;}

#container .content .makerpack .box12 ul li h5 {display:table-cell; height:30px; line-height:30px; text-indent:20px; font-size:1.2rem; font-weight:700; background-color:#e7e7e7;}
#container .content .makerpack .box12 ul li h5.maker_cha  {width:240px; background-color:#000; color:white;}
#container .content .makerpack .box12 ul li h5.maker  {width:220px; background-color:#065535; color:white;}
#container .content .makerpack .box12 ul li h5.data  {width:100px; background-color:#e7e7e7; color:#333; text-align:right;}
#container .content .makerpack .box12 ul li h5.recs  {width:100px; background-color:#e7e7e7; color:#ff00ff; text-align:center;}
#container .content .makerpack .box12 ul li h5.pcs  {width:30px; background-color:#e7e7e7; color:#333; text-align:left;}

/* 매장디피 */
#container .content .makerpack .box02 {width:100%; min-width:1000px; margin:0 auto; text-align:center;}
#container .content .makerpack .box02 > ul {display:inline-block; width:220px; height:auto; padding:3px 20px;}
#container .content .makerpack .box02 ul li {padding:3px 5px;}
#container .content .makerpack .box02 ul li img {border:3px solid #ddd; width:100%; height:auto;}
#container .content .makerpack .box02 ul li img:hover {opacity:0.8; cursor:pointer;}

/* 개별메이커차수나오기 */
#container .content .makerpack .box03 {width:100%; margin:0 auto;}
#container .content .makerpack .box03 ul li {display:inline-block; width:180px; background-color:#CD5C5C; color:white; text-indent:5px; padding:7px 0; border-bottom:1px dotted #A52A2A; border-left:1px solid #A52A2A; cursor:pointer; transition:0.4s;}
#container .content .makerpack .box03 ul li:hover {background-color:#ADFF2F; color:#333;}

/* 신상 이월 추천 */
#container .content .makerpack .box04 {width:100%; margin:0 auto; text-align:center; margin-top:5px; margin-bottom:5px;}
#container .content .makerpack .box04 ul {width:100%; margin:0 auto; font-size:0;}
#container .content .makerpack .box04 ul li {display:inline-block; width:150px; border:1px solid #999; border-radius:0; margin-right:20px; margin-left:20px; cursor:pointer; padding:3px 0; background-color:#d7d7d7;}
#container .content .makerpack .box04 ul li:nth-child(1) {color:#333;}
#container .content .makerpack .box04 ul li:nth-child(2) {color:blue;}
#container .content .makerpack .box04 ul li:nth-child(3) {color:red;}
#container .content .makerpack .box04 ul li:nth-child(4) {color:black;}
#container .content .makerpack .box04 ul li:hover {background-color:#e7e7e7; color:red; cursor:pointer;}

/* 종류 */
#container .content .kindsorting             {width:100%; border:1px solid #ddd;}
#container .content .kindsorting ul          {font-size:0;}
#container .content .kindsorting ul li       {display:inline-block; width:180px; text-indent:5px; padding:3px 0; border-bottom:1px solid #ddd; color:#444; transition:0.4s;}
#container .content .kindsorting ul li:hover {background-color:orangered; color:white; cursor:pointer;}

/* 정렬 */
#container .content .goodsarray_10 {display:table; text-align:center; border:0px solid #666; margin:0 auto; margin-top:5px;}
#container .content .goodsarray_10 ul li {display:table-cell; border-radius:10px 0 0 0; padding:5px 25px; background-color:#e5e5e5; border:1px solid #999; cursor:pointer;}
#container .content .goodsarray_10 ul li:hover {background-color:orangered; color:white;}


/* 사진배열 */
#dp_item {position:relative; width:100%; min-width:1000px; margin:0 auto; text-align:left; border:0px solid red;}
#dp_item ul {position:relative; display:inline-block; margin:2px; width:240px; height:440px; border-left:0px dotted #ddd; border-right:0px dotted #ddd; border-bottom:1px dotted #ddd; text-align:center margin:0 auto; !important;}
#dp_item ul:hover li img {opacity:0.8;}
#dp_item ul li {display:block; text-align:center; cursor:pointer; margin:0 auto;}
#dp_item ul li p {display:inline-block; margin-left:5px; padding:2px; font-size:0.9rem; text-align:center; margin:0 auto;}
#dp_item ul li p.p1 {border:1px solid #ddd;}
#dp_item ul li p.p2 {border:1px solid #ddd; background-color:wheat; color:blue;}
#dp_item ul li p.p3 {border:1px solid #ddd; background-color:red; color:white;}
#dp_item ul li p.p4 {border:1px solid #ddd; background-color:pink; color:red;}
#dp_item ul li p.p7 {border:1px solid #ddd; background-color:green; color:white;}
#dp_item ul li:nth-child(1) {position:relative;}
#dp_item ul li:nth-child(1) img {width:100%; height:auto; border:1px solid #ddd;}
#dp_item ul li:nth-child(2) {position:absolute; right:2px; top:2px; z-index:100;}
#dp_item ul li:nth-child(3) {padding:3px 0;}
#dp_item ul li:nth-child(4) {padding:3px 0;}
#dp_item ul li:nth-child(5) {font-size:1.05rem; font-weight:700; color:#222; padding:3px 0;}
#dp_item ul li:nth-child(6) {padding:3px 0;}
#dp_item ul li:nth-child(7) {color:#6666ff; padding:3px 0;}
#dp_item ul li:nth-child(8) {color:#746267; padding:3px 0;}
#dp_item ul li:nth-child(9) {color:#655870; padding:3px 0;}
#dp_item ul li:nth-child(10) {color:#746267; padding:3px 0;}
#dp_item ul li:last-child   {color:#d84c00; padding:3px 0;}


#dp_item_nors ul li   {background-color:#eee;}
#dp_item_nors ul li p {display:inline-block; margin-left:5px; padding:2px; font-size:0.9rem; text-align:center; margin:0 auto;}
#dp_item_nors ul li p.p1 {border:1px solid #ddd;}
#dp_item_nors ul li p.p2 {border:1px solid #ddd; background-color:wheat; color:blue;}
#dp_item_nors ul li p.p3 {border:1px solid #ddd; background-color:red; color:white;}
#dp_item_nors ul li p.p4 {border:1px solid #ddd; background-color:pink; color:red;}
#dp_item_nors ul li p.p7 {border:1px solid #ddd; background-color:green; color:white;}






#details       {display:table; width:100%; margin:0 auto; border-bottom:1px solid #ddd;}
#details .box01 {display:table-cell; width:50%; border:0px dotted #b7b7b7; vertical-align:top;}
#details .box01 ul    {text-align:center;}
#details .box01 ul li {font-size:0;}
#details .box01 ul li.width_imgbig {width:70%; height:auto; margin:0 auto;}
#details .box01 ul li.width_imgsmall {width:90px; height:90px; display:inline-block; margin:3px;}
#details .box01 ul li img {width:100%; height:100%; border:1px solid #ddd;}
#details .box01 ul li img:hover {opacity:0.8; filter: alpha(opacity=50); cursor:pointer;}



#details .box02 {display:table-cell; width:50%; border-bottom:1px solid #ddd; text-align:left; vertical-align:top;}
#details .box02 ul li {display:inline-block; height:25px; padding:3px 8px;}
#details .box02 ul li:first-child {width:120px; text-align:right; font-size:12px; color:#999999;}
#details .box02 ul li:first-child:after {content:'::'; color:#133337; font-weight:700;}
#details .box02 ul li:last-child  {text-align:left; font-size:12px; color:#444444;}

#details .box03                   {display:block; width:100%; margin:0 auto;}
#details .box03 ul                {font-size:0; margin-top:5px;}
#details .box03 ul li             {display:inline-block; vertical-align:middle;}
#details .box03 ul li:nth-child(1) {width:160px; text-align:right;}
#details .box03 ul li:nth-child(2) {text-align:center;}
#details .box03 ul li:nth-child(3) {text-align:left;}



#footer_box {position:relative; display:table; min-width:1280px; width:100%; height:300px; border-top:1px solid #ddd; background-color:#fff; margin-bottom:0 auto;}
#footer_box .box00 {position:relative; display:block; min-width:1280px; width:100%; background-color:#fff; margin:0 auto;}
#footer_box .box01 {display:block; position:absolute;}
#footer_box .box02 {display:block; position:absolute; width:350px; height:200px; left:410px; top:40px; z-index:10; border:10px solid #e7e7e7;}
#footer_box .box02 ul li {padding:2px; margin:7px;}

#footer_box .box03 {display:block; position:absolute; width:300px; height:200px; left:60px; top:40px; z-index:50; border:10px solid #e7e7e7;}
#footer_box .box03 ul li {padding:2px; margin:5px;}

#footer_box .box05 {display:block; position:absolute; text-align:right; width:150px; height:200px; right:60px; top:40px; z-index:10; border:10px solid #e7e7e7;}
#footer_box .box05 ul li {padding:2px; margin:5px; cursor:pointer;}
#footer_box .box05 ul li:hover {color:crimson;}

#footer_box .box06 {display:block; position:absolute; text-align:right; width:150px; height:200px; right:260px; top:40px; z-index:10; border:10px solid #e7e7e7;}
#footer_box .box06 ul li {padding:2px; margin:5px; cursor:pointer;}
#footer_box .box06 ul li:hover {color:crimson;}

#footer_box .box99 {display:block; position:absolute; border-top:1px solid #ddd; min-width:1280px; width:100%; height:50px; right:0px; top:250px; z-index:60;}
#footer_box .box99 ul li {padding:2px;}

#footer_box .box_img {display:block; position:absolute; top:50px; left:50px; width:1000px; height:210px;}
#footer_box .box_explain {display:block; padding:5px; text-align:center; border-bottom:1px solid #ddd;}
#footer_box .box_explain ul li {display:inline-block; padding:5px 20px;}
#footer_box .box_explain ul li:hover {color:red; cursor:pointer;}


/* page array */
#page_array                       {display:table; border:0px solid #333; margin:0px auto; text-align:center; margin-top:12px; margin-bottom:10px; width:100%;}
#page_array ul                    {display:block; width:90%; margin:0 auto; border:0px solid #333; font-weight:bold;}
#page_array ul li                 {display:inline-block; text-align:center; padding:8px; border:1px solid dimgrey; font-size:1.06rem; color:#fff; background-color:grey; transition:all 0.4s;}
#page_array ul li:hover                 {background-color:slategrey; color:#fff; cursor:pointer;}
#page_array ul li:first-child                 {background-color:slategrey; color:#fff;}
#page_array ul li:last-child                 {background-color:slategrey; color:#fff;}
#page_array ul li:first-child:hover                 {background-color:dimgrey;}
#page_array ul li:last-child:hover                 {background-color:dimgrey;}