@charset "utf-8";

@import url(https://use.fontawesome.com/d00b556be3.css);

@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 400;
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v4/NanumGothic-Regular.eot);
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v4/NanumGothic-Regular.eot?#iefix) format('embedded-opentype'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v4/NanumGothic-Regular.woff2) format('woff2'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v4/NanumGothic-Regular.woff) format('woff'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v4/NanumGothic-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 700;
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v4/NanumGothic-Bold.eot);
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v4/NanumGothic-Bold.eot?#iefix) format('embedded-opentype'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v4/NanumGothic-Bold.woff2) format('woff2'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v4/NanumGothic-Bold.woff) format('woff'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v4/NanumGothic-Bold.ttf) format('truetype');
}
@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 800;
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v4/NanumGothic-ExtraBold.eot);
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v4/NanumGothic-ExtraBold.eot?#iefix) format('embedded-opentype'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v4/NanumGothic-ExtraBold.woff2) format('woff2'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v4/NanumGothic-ExtraBold.woff) format('woff'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v4/NanumGothic-ExtraBold.ttf) format('truetype');
}

@font-face { 
  font-family: 'Noto Sans KR'; 
  font-style: normal; 
  font-weight: 100; 
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'), 
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'), 
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype'); 
} 
@font-face { 
  font-family: 'Noto Sans KR'; 
  font-style: normal; 
  font-weight: 300; 
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'), 
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'), 
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype'); 
} 
@font-face { 
  font-family: 'Noto Sans KR'; 
  font-style: normal; 
  font-weight: 400; 
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'), 
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'), 
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype'); 
 } 
@font-face { 
  font-family: 'Noto Sans KR'; 
  font-style: normal; 
  font-weight: 500; 
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'), 
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'), 
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype'); 
 } 
@font-face { 
  font-family: 'Noto Sans KR'; 
  font-style: normal; 
  font-weight: 700; 
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'), 
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'), 
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype'); 
 } 
@font-face { 
  font-family: 'Noto Sans KR'; 
  font-style: normal; 
  font-weight: 900; 
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'), 
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'), 
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype'); 
 }

* { padding:0; margin:0 }
*, :after, :before { -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box; }

html { overflow-y:scroll; height:100% }
body { font-size:14px !important; font-family:noto sans kr, dotum, sans-serif !important; color:#222; height:100%; font-weight:300; text-align:center }

ul, ol { list-style:none }
html, h1, h2, h3, h4, h5, h6, form, fieldset, img { border:0 }
h1, h2, h3, h4, h5, h6 { font-weight:700; font-size:1em; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block }
ul, dl,dt,dd { list-style:none }
ul:after { display:block; clear:both; content:"" }

img { max-width:100% !important }

.prd_list { width:860px; margin:0 auto; color:#444; }
.prd_list a { text-decoration:none; color:#444 }
.prd_list h2.title { background:#e43074 !important; text-align:center; line-height:38px; height:40px; color:rgba(255,255,255,0.7); font-size:17px; font-weight:700; margin:10px 0 5px 0 }
.prd_list h2 small { font-size:17px; font-weight:400 }
.prd_list ul { list-style:none; display:flex; flex-wrap:wrap; justify-content:space-between; }
.prd_list li { width:50%; border:1px solid #d3d3d3; border-top:0; padding:9px; position:relative; list-style:none }
.prd_list li:nth-child(even) { border-left:0 }
.prd_list li .img { text-align:center; margin:0 0 5px }
.prd_list li .img img { min-width:100% !important }
.prd_list li .subj { text-align:left; position:absolute; top:425px; left:9px }
.prd_list li .subj i { display:inline-block; color:#fff; background:#e94583 !important; font-style:normal; font-weight:500; line-height:1.2; border-radius:3px; font-size:1.3rem; width:95px; padding:18px 0 0 0; text-align:center; vertical-align:top; height:90px; word-break:keep-all }
.prd_list li .subj span { font-weight:800; color:#222; font-size:20px; vertical-align:top; margin:0 0 0 10px; line-height:1.2 }
.prd_list li .opt { margin:35px 0 0 110px; font-size:15px; text-align:left }
.prd_list li .opt p { line-height:1.3; letter-spacing:-1px }
.prd_list li .opt strong { font-weight:700; color:#222; text-transform:uppercase; width:55px; display:inline-block }
.prd_list li .price { text-align:left; margin-left:110px; font-weight:700; font-size:15px }
.prd_list li .price strong { font-weight:800; color:#e43074; font-size:22px; vertical-align:-2px }

/* 이미지 경로 맞춰서 수정 img/hover.png */
.prd_list li .hover { position:absolute; width:calc(100% + 2px); height:calc(100% + 2px); background:rgba(200,2,77,0.8) url(http://gi.esmplus.com/njoyweb/bien/slip/commonimg/hover.png) no-repeat center; left:-1px; top:-1px; transition:opacity .2s; opacity:0 }
.prd_list li:hover .hover { opacity:1; z-index:3 }
.prd_list li.soldout .hover { opacity:1; z-index:3; background:rgba(0,0,0,0.8) url(http://gi.esmplus.com/njoyweb/bien/slip/commonimg/soldout.png) no-repeat center; }
.prd_list li.soldout, .prd_list li.soldout a { pointer-events: none; cursor:default }

.prd_detail { width:780px; margin:0 auto; }
.prd_detail h2.title { font-size:17px; margin:0 0 20px; letter-spacing:-1px; font-weight:800 }
.prd_detail header { text-align:center; margin:0 0 40px }
.prd_detail header .num { background:#e43074; color:#fff; width:120px; height:120px; border-radius:50%; margin:70px auto 20px auto; font-size:40px; font-weight:700; line-height:1 }
.prd_detail header .num small { display:block; font-weight:400; padding:24px 0 5px 0; font-size:20px }
.prd_detail header h2 { font-size:50px; line-height:1.3; margin:0 0 30px }
.prd_detail header table { margin:0 auto; font-size:24px; }
.prd_detail header table th { background:#ddd; border-radius:10px; padding:10px 40px 11px 40px; font-weight:500 }
.prd_detail header table td { text-align:left; padding:10px 15px; font-weight:500 }

.prd_detail .detail01 { margin:50px 0; }
.prd_detail .table01 th { background:#ddd; border-radius:10px; padding:5px 40px 6px 40px; font-weight:500 }
.prd_detail .table01 td { font-weight:500; padding:0 15px }
.prd_detail .table02 { border:5px solid #e43074; width:100%; border-collapse:collapse }
.prd_detail .table02 th, .prd_detail .table02 td { padding:5px 0 10px 0; text-align:center; font-weight:500 }
.prd_detail .table02 th { background:#e43074; color:#fff; }
.prd_detail .detail01 .table01 { font-size:16px; margin-bottom:40px }
.prd_detail .detail01 .table02 { font-size:16px; margin-bottom:5px }

.prd_detail .detail02 { margin:50px 0 }
.prd_detail .detail02 ul:after { content:""; display:block; clear:both }
.prd_detail .detail02 ul { margin:0 0 0 1px }
.prd_detail .detail02 li { float:left; border:1px solid #ddd; margin:0 0 0 -1px; width:calc(100%/5); text-align:center; padding:100px 0 30px 0; line-height:1.3; background-repeat:no-repeat; background-position:center 30px }
.prd_detail .detail02 .li01 { background-image:url(http://gi.esmplus.com/njoyweb/bien/slip/commonimg/icon01.png) }
.prd_detail .detail02 .li02 { background-image:url(http://gi.esmplus.com/njoyweb/bien/slip/commonimg/icon02.png) }
.prd_detail .detail02 .li03 { background-image:url(http://gi.esmplus.com/njoyweb/bien/slip/commonimg/icon03.png) }
.prd_detail .detail02 .li04 { background-image:url(http://gi.esmplus.com/njoyweb/bien/slip/commonimg/icon04.png) }
.prd_detail .detail02 .li05 { background-image:url(http://gi.esmplus.com/njoyweb/bien/slip/commonimg/icon05.png) }

.prd_detail .detail03 { margin:0 0 50px }
.prd_detail .detail03 dl:after { content:""; display:block; clear:both }
.prd_detail .detail03 dl { margin:0 0 5px; font-weight:400; font-size:16px; line-height:1.4; border-bottom:1px solid #e0e0e0; padding-bottom:5px }
.prd_detail .detail03 dl:first-child { border-top:1px solid #e0e0e0; padding-top:5px }
.prd_detail .detail03 dl small { font-size:0.8em; display:block; font-weight:400; color:#999 }
.prd_detail .detail03 dt { float:left; background:#eee; text-align:center; padding:20px; width:150px; font-weight:700 }
.prd_detail .detail03 dd { margin-left:170px; font-weight:500; padding:20px 0 }
.prd_detail .detail03 dd span { display:inline-block; width:140px; text-align:center; position:relative }
.prd_detail .detail03 dd span i { width:20px; height:20px; border:1px solid #ddd; display:inline-block; position:absolute; left:0; top:10px }
.prd_detail .detail03 dd span.on i { background:#e43074; border-color:#e43074 }
.prd_detail .detail03 ul { margin:25px 0 0 0 }
.prd_detail .detail03 li { background:url(http://gi.esmplus.com/njoyweb/bien/slip/commonimg/dot01.png) no-repeat 0 7px; line-height:1.3; padding-left:10px; margin:0 0 7px; word-break:keep-all }

.prd_detail footer { text-align:center; background:#eee; padding:30px; margin:0 0 50px }
.prd_detail footer h2 { font-size:20px; margin:0 0 20px }
.prd_detail footer p { background:#fff; padding:30px 0; font-weight:400 }
.prd_detail .img_area { text-align:center }
.prd_detail .img_area img { max-width:100%; display:block; margin:0 auto }

@media (max-width:1024px) {
/*.prd_detail { width:100%; padding:0 20px; }	
.prd_detail header .num { width:200px; height:200px; font-size:68px }
.prd_detail header .num small { font-size:36px; padding:38px 0 4px 0 }
.prd_detail header h2 { font-size:68px }
.prd_detail header table { font-size:32px }
.prd_detail h2.title { font-size:38px }
.prd_detail .detail02 li { width:calc(100%/3); font-size:28px }
.prd_detail .detail03 ul { max-height:100%}
.prd_detail .detail03 li { font-size:28px; background-position:0 15px; }
.prd_detail footer h2 { font-size:28px; height:40px }
.prd_detail footer p { font-size:26px; height:160px; padding:20px 30px; word-break:keep-all }
.prd_detail footer p br { display:none }*/

}

@media (max-width:780px) {
.prd_list * { font-family:noto sans kr, dotum, sans-serif !important; }
/*.prd_list ul {  }
.prd_list li { height:auto; border-bottom:0 }
.prd_list li:nth-child(odd) { clear:both; border-left:0 }
.prd_list li:nth-child(even) { border-right:0 }
.prd_list li:nth-last-child(1), .prd_list li:nth-last-child(2) { border-bottom:1px solid #d3d3d3 }
.prd_list li .subj i { font-size:15px; top:38vw; height:32px !important; line-height:30px !important; font-weight:500 }
.prd_list li .subj span { font-size:19px; margin:0 }
.prd_list li .opt { margin:0 }
.prd_list li .opt p { font-size:13px; word-break:keep-all }
.prd_list li .opt p strong { display:none; margin:5px 0 0 0 }
.prd_list li .price { line-height:1; position:static; font-size:14px; text-align:right; margin:5px 0 0 0 }
.prd_list li .price strong { font-size:18px }*/
.prd_list li { width:100%; padding:0; margin:10px 0 0 0; border:1px solid #d3d3d3; border-left:0; border-right:0 }
.prd_list li .hover { display:none }
.prd_list li .img { width:40vw; margin:0 }
.prd_list li .subj { left:44vw; top:10px }
.prd_list li .subj i { font-size:13px; width:auto; padding:5px 10px }
.prd_list li .subj span { font-size:15px; margin:5px 0 0 0; display:block }
.prd_list li .opt { margin:0; font-size:13px; position:absolute; top:63px; left:44vw }
.prd_list li .opt p { line-height:1.5; font-size:13px }
.prd_list li .opt strong { width:45px }
}