@import url(common.css);

@charset "utf-8";

/* CSS Document */
placeholder {color:#333}
select {border:1px solid #ccc}
input[type=button] {border:none}
input[type=text], input[type=password] {border:1px solid #d6d6d6; line-height:1.5; padding-left:5px; font-size:13px; height:20px}
textarea {border:1px solid #d6d6d6}
h2 {font-weight:normal; font-family:"Noto Sans KR"}
.adm {color:#007aff}
.emp {color:#f33900 !important; font-weight:bold}
#wrap {font-family:Nanum Gothic, Malgun Gothic; min-width:1080px; padding-top:100px}

.header {position:fixed; top:0; left:0; width:100%; height:100px; overflow:hidden; background:#fff; z-index:100; transition: height 0.3s}
.header:hover { height:240px; border-bottom:1px solid #ccc; transition: height 0.3s;}
.header > ul {position:relative}
.header .logo {position: absolute; top: 18px; left: 20px; z-index:100}
.header .gnb {position: absolute; top:0; left:0; width:100%; height:40px; text-align:right; color:#777; background:url(../images/top_bg.png) no-repeat right top;}
.header .gnb a {padding:0 10px; color:#777; font-size:13px; line-height:40px}
.header .lnb {position: absolute; top:40px; width:100%; height:60px; border-bottom:1px solid #ccc}
.header .lnb ul {width: 500px; margin:0 auto; padding-top:10px; text-align:center}
.header .lnb li {display:inline-block; width:100px; height:50px}
.header .lnb li a {display:inline-block; width:inherit; height:inherit; line-height:40px; padding:0 5px; margin:0 5px; color:#111; font-size:18px; font-weight:500; font-family:"Noto Sans KR"}
.header .lnb li a:hover {color:#333; height:50px; border-bottom:2px solid #222}
.header .sub {position:absolute; top:100px; left:0; width:100%; text-align:center}
.header .sub > ul {display:inline-block; width:90px; margin:0 5px; padding-top:20px; vertical-align:top}
.header .sub > ul > li {font-size:14px; margin-bottom:10px}
.header .search {position:absolute; top:40px; right:20px; height:60px; padding-top:10px }
.header .search input { width:220px; height:39px; border:1px solid #ccc; border-radius:5px; font-size:14px; padding:0 30px 0 45px; background: url(../images/search.jpg) #fff no-repeat left 15px center; background-size: 15px;}
.header .icon {display:none}	

#container, #w-bdy {width:100%; min-height:650px; }
#container img {vertical-align:top}

.title {width:1080px; margin:0 auto; padding-top:10px; text-align:center}
.title h2 { height:80px; line-height:80px; font-size:42px; font-family:"Noto Sans KR"; color:#111}

.snb {position:relative; width:860px; height:50px; padding-top:10px; margin:0 auto; text-align:center}
.snb li {display:inline-block; min-width:100px; padding:0 20px; height:16px; line-height:15px; border-right:1px solid #999; font-family:"Noto Sans KR"; font-size:15px; font-weight:500}
.snb li:last-child {border-right:none}
.snb li.on a {border-bottom:2px solid #000; padding:0 2px 5px 2px; color:#000 }

.contents {width:1080px; margin:0 auto; padding-bottom:50px; font-size:13px}

.btnArea {text-align:center; padding-top:30px}
.btn_t01 {display:inline-block;height:23px;padding:0 15px;line-height:25px;text-align:center;color:#fff;border-radius:2px;background:#333; font-size:12px; white-space:nowrap;border: none;}
.btn_t02 {display:inline-block;height:23px;padding:0 15px;line-height:25px;text-align:center;color:#fff;border-radius:2px;background:#dc1716; font-size:12px; white-space:nowrap;}

.subVisual {height:480px; margin-bottom:50px}
.subVisual ul {height:inherit; background-repeat:no-repeat; background-size:cover; background-color:#f5f5f5}
.subVisual ul > li {width:1080px; margin:0 auto; text-align:center}
.subVisual ul > li > img {height:480px}

.product { width:auto; max-width:1490px; margin:0 auto}
.product .goods_list { padding-left:10px}
.product .goods_list .goods { position:relative; float:left; width:360px; height:450px; margin-right:10px; overflow:hidden}
.goods {padding-top:280px; margin-bottom:30px; border:1px solid #efefef; font-family:"Noto Sans KR"; background:url(../images/good_bg.png) no-repeat 0 -50px}
.goods:hover {border:1px solid #dbdbdb; cursor:pointer}
.goods .pic {position:absolute; top:20px; left:0; width:110px; text-align:center}
.goods h3 {font-size:16px; margin-bottom:5px}
.goods ul { margin-left:110px}
.goods ul label {display:inline-block; height:20px; padding:0 10px; line-height:20px; color:#fff; border-radius:10px; font-size:12px; font-weight:400; text-align:center; margin-bottom:20px; margin-right:5px}
.goods ul label.ultimate {text-transform:capitalize; background-color:#601986}
.goods ul label.primium {text-transform:capitalize; background-color:#f6af04}
.goods ul label.basic {text-transform:capitalize; background-color:#28b4db}
.goods ul label.dev {background-color:#888}
.goods ul label.new {background-color:#f60436}
.goods ul label.online {color:#207d17; border:1px solid #3fb134; background-color:#fff; line-height:17px}
.goods ul li {word-break:keep-all; color:#777; padding-right:10px}
.goods ul li > p {font-family:"Nanum Gothic"; line-height:1.5}
.goods ul li > p.price {color:#777; padding-top:5px; font-weight:700; font-size:15px; display:inline-block; margin-right:10px}

.product h2 {font-size:30px; text-align:center; margin-bottom:30px}

.goodsVeiw { height:480px; background:#f5f5f5}
.goodsVeiw > ul { position:relative; width:1080px; margin:0 auto}
.goodsVeiw .detailCut { position:absolute; top:10px; right:-20px; width:60px; }
.goodsVeiw .detailCut li {width:60px; height:60px; background-size:auto 60px; background-position:left center; background-color:#fff; margin-bottom:5px}
.goodsVeiw .detailCut .active {border:3px solid #ccc}
.goodsInfo {width:1080px; margin:0 auto; height:130px; border-bottom:1px solid #ccc; padding-top:25px}
.goodsInfo .goodsTitle {float:left; width:55%;}
.goodsInfo .goodsTitle .loc {font-size:12px; font-family:"Nanum Gothic"; margin-bottom:10px}
.goodsInfo .goodsTitle .name {font-size:30px; font-family:"Noto Sans KR"}
.goodsInfo .goodsColor {float:left; width:45%}
.goodsInfo .goodsColor h2 {font-size:12px; font-family:"Nanum Gothic"; margin-bottom:10px}
.goodsInfo .goodsColor li {float:left; width:50px; height:50px; border:1px solid #ddd; margin-right:5px; background-size:auto 50px; background-position:left center; background-color:#fff; margin-bottom:5px}
.goodsInfo .goodsColor .active {border:3px solid #ccc}
.goodsContent {width:1080px; margin:0 auto; padding-bottom:50px}


/* 매장찾기 */
.infowrap .searchGo {display:block; width:100%; text-align:center; line-height:24px; border:1px solid #ddd; background:#eee; color:#333}

.list_s01 table td.tl {padding-left:50px}

.paragraph {width:1080px; margin:0 auto; font-size:16px}
.paragraph p {margin-bottom:20px; line-height:1.6; word-break:keep-all}

.faq { border-top:1px solid #999}
.faq dl {border-bottom:1px solid #ddd; font-family:"Noto Sans KR"}
.faq dt {color:#111; font-size:18px; line-height:40px; padding-left:10px; border-bottom:1px dashed #ddd; font-weight:400; margin-bottom:10px;}
.faq dt > span {display:inline-block; width:24px; height:24px; color:#fff; text-align:center; line-height:24px; border:none; border-radius:12px; background:#f39800}
.faq dd {color:#777; font-size:15px; line-height:1.6; padding-left:30px; margin-bottom:0px; padding-bottom:30px}
.faq dd > p {margin-bottom:5px}

.sitemap {width:100%; height:200px; padding-top:20px; font-family:"Noto Sans KR"; margin-top:80px; background:#111}
.sitemap ul {width:860px; margin:0 auto; padding-left:10px}
.sitemap ul li {float:left; width:160px; text-align:left}
.sitemap .cb {height:25px}
.sitemap .sd1 {display:block; color:#fff; font-size:18px; font-weight:600; margin-bottom:5px}
.sitemap .st2 {display:block; color:#bbb; font-size:14px; font-weight:600; margin-bottom:5px}

#w-bottom {clear:both}

.footer {height:80px; border-top:1px solid #333; background:#222}
.footer ul {width:1080px; margin:0 auto; padding-top:30px}
.footer ul li {float:left; color:#999; font-size:13px}
.footer .address { margin-right:30px}
.footer .copyright {}

.searchBox {margin-bottom:30px;padding:25px 60px; border:1px solid #ddd;border-top:1px solid #999;background:#f5f5f5;}
.searchBox ul:after {content:'';display:block;clear:both;}
.searchBox > ul > li {float:left;width:49%;}
.searchBox > ul > li:last-child {width:45%;padding-left:6%;border-left:1px solid #ddd;}
.searchBox ul li h2 {font-size:14px;font-weight:bold;color:#111; margin-bottom:5px}

.list_s01 table {width:100%;border-top:1px solid #666;color:#111;table-layout:fixed;}
.list_s01 table label {padding:0;text-indent:-9999em; }
.list_s01 table th {height:39px;border-bottom:1px solid #ddd;}
.list_s01 table td {padding:9px 10px 10px;text-align:center;border-bottom:1px solid #ddd;}
.list_s01 table td .date {display:block;margin-top:5px;color:#444;}
.list_s01 table td.left {text-align:left;}
.list_s01 table td.left .txt_elips {width:460px}
.list_s01 table td.no_data {padding:80px 0;}
.list_s01 table td .global_check_box + label {top:-9px}
.list_s01 table td .btn_question {display:inline-block;overflow:hidden;width:92%;margin-top:5px;white-space:nowrap;text-overflow:ellipsis;}

.write_s01 table {width:100%;border-top:1px solid #666; color:#111;table-layout:fixed;}
.write_s01 th {height:30px; font-weight:normal; border-bottom:1px solid #ddd; background:#f5f5f5}
.write_s01 td {padding:9px 10px 10px; text-align:left; border-bottom:1px solid #ddd;}
.write_s01 td input[type=text] {width:40%}
.write_s01 td textarea {width:100%; height:200px}
.write_s01 .btnArea input { width:120px; height:30px; line-height:32px; font-size:18px}

.ess {padding-left:15px; background:url(../images/ess.gif) no-repeat 0 2px}

@media screen and (max-width: 1280px) {
	.product { width:1120px; margin:0 auto}
}

/*모바일*/
@media screen and (max-width: 640px) {
	img {width:100%}
	#wrap {font-family:Nanum Gothic, Malgun Gothic; min-width:320px; padding-top:60px}
	
	.header {position:fixed; top:0; left:0; width:100%; height:60px; overflow:visible; background:#fff; z-index:1000; transition: height 0.3s}
	.header:hover {height:60px; border-bottom:none; transition: height 0.3s;}
	.header > ul {position:static}
	.header .logo {position: absolute; top:10px; left:5px; height:40px; z-index:100}
	.header .logo img { width:auto; height:40px}
	.header .icon { display:block; position: absolute; top:10px; right:10px; width:90px; height:40px; z-index:100}
	.header .icon ul {}
	.header .icon ul > li {width:40px; height:40px; float:right}		
	.header .gnb {position:static; background:none; text-align:left }
	.header .gnb a {display:block; width:100px; height:50px; line-height:40px; padding:0 5px; margin:0 5px; color:#111; font-size:1.1em; font-weight:400; font-family:"Noto Sans KR"}
	.header .lnb {position:static; top:0px; right:0; width:80%; height:auto; border-bottom:none}
	.header .lnb ul {width: 500px; margin:0 auto; padding-top:10px; text-align:left}
	.header .lnb ul li {display:block; width:100px; height:50px}
	.header .lnb ul li a {display:inline-block; width:inherit; height:inherit; line-height:40px; padding:0 5px; margin:0 5px; color:#111; font-size:1.1em; font-weight:600; font-family:"Noto Sans KR"}
	.header .lnb ul li a:hover {color:#333; height:50px; border-bottom:2px solid #222}
	.header .sub { display:none}
	.header .sub > ul {display:inline-block; width:90px; margin:0 5px; padding-top:20px; vertical-align:top}
	.header .sub > ul > li {font-size:14px; margin-bottom:10px}
	.header .search {display:none }
	.header .searchOn {display:block; position:absolute; top:60px; right:0px; width:100%; height:60px; text-align:center; padding-top:10px; background:#fff }
	.header .search input { width:220px; height:39px; border:1px solid #ccc; border-radius:5px; font-size:14px; padding:0 30px 0 45px; background: url(../images/search.jpg) #fff no-repeat left 15px center; background-size: 15px;}
	.header .side { position:fixed; width:100%; top:0; right:0; bottom:0; background-color:rgba(0,0,0,0.7); z-index:100; display:none}
	.header .sideOn {display:block}
	.header .side > ul {position:fixed; width:80%; top:0; right:-80%; bottom:0; padding-left:10px; background:#fff}
	
	#container, #w-bdy {width:100%; min-height:650px; }
	#container img {vertical-align:top}
	
	.title {width:100%; margin:0 auto; padding-top:10px; text-align:center}
	.title h2 { height:30px; line-height:1.5em; font-size:1.5em; font-family:"Noto Sans KR"; color:#111}
	
	.snb {position:relative; width:100%; height:auto; padding-top:0px; margin-top:20px; text-align:center; border-top:1px solid #ddd}
	.snb li {display:block; float:left; width:50%; padding:0; height:30px; line-height:30px; border-right:1px solid #ddd; border-bottom:1px solid #ddd; font-family:"Noto Sans KR"; font-size:15px; font-weight:500; background:#f5f5f5}
	.snb li:nth-child(2n) {border-right:none}
	.snb li.on a {border-bottom:2px solid #000; padding:0 2px 5px 2px; color:#000 }
	
	.contents {width:100%; margin:0; font-size:1em}
	
	.btnArea {text-align:center; padding-top:30px}
	.btn_t01 {display:inline-block;height:23px;padding:0 15px;line-height:25px;text-align:center;color:#fff;border-radius:2px;background:#333; font-size:12px; white-space:nowrap;border: none;}
	.btn_t02 {display:inline-block;height:23px;padding:0 15px;line-height:25px;text-align:center;color:#fff;border-radius:2px;background:#dc1716; font-size:12px; white-space:nowrap;}
	
	.subVisual {height:180px}
	.subVisual ul {height:inherit; background-repeat:no-repeat; background-size:cover; background-color:#f5f5f5}
	.subVisual ul > li {width:100%; margin:0}
	.subVisual ul > li > img {height:180px}
	
	.product { width:auto; max-width:1490px; margin:0 auto}
	.product .goods_list { padding-left:5px}
	.product .goods_list .goods { position:relative; float:left; width:170px; height:260px; margin-right:10px; overflow:hidden; margin-bottom:20px}
	.goods {padding-top:140px; margin-bottom:0px; border:1px solid #efefef; font-family:"Noto Sans KR"; background-image:url(../images/good_bg.png); background-repeat:no-repeat; background-position:0 0; background-size:100% 160px}
	.goods .pic {position:absolute; top:0px; left:30px; width:180px; height:160px; text-align:center; overflow:hidden}
	.goods .pic img {transform: rotate(-30deg); width:30px}
	.goods h3 {font-size:1em; margin-bottom:5px}
	.goods ul {margin-left:5px; position:relative}
	.goods ul label {display:block; width:60px; height:15px; line-height:16px; color:#fff; border-radius:10px; font-size:0.8em; padding:0 3px; text-align:center; margin-bottom:10px}
	.goods ul label.ultimate {text-transform:capitalize; background-color:#601986}
	.goods ul label.primium {text-transform:capitalize; background-color:#f6af04}
	.goods ul label.basic {text-transform:capitalize; background-color:#28b4db}
	.goods ul label.new, .goods ul label.dev { position:absolute; top:-20px;}
	.goods ul li {word-break:keep-all; color:#777; padding-right:10px}
	.goods ul li > p {font-family:"Nanum Gothic"; line-height:1.4; height:40px; font-size:0.9em; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; white-space: normal;text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical;}
	.goods ul li > p.price { height:20px; line-height:16px}
	.goods ul	.online {display:inline-block; width:auto}
	
	.product h2 {font-size:1.5em; text-align:center; margin-bottom:10px}
	
	.goodsVeiw { height:250px; background:#f5f5f5; overflow:hidden}
	.goodsVeiw > ul { position:relative; width:100%; margin:0 auto}
	.goodsVeiw > ul > li >img {height:250px; width:auto}
	.goodsVeiw .detailCut { position:absolute; top:auto; bottom:10px; right:0px; width:100%; height:20px; text-align:center }
	.goodsVeiw .detailCut li {display:inline-block; width:10px; height:10px; margin:0 5px; border:none; border-radius:5px; background-color:#000; opacity:0.2; background-image:none}
	.goodsVeiw .detailCut .active {background:#f3793c; opacity:1}
	.goodsInfo {width:100%; margin:0 auto; height:130px; border-bottom:1px solid #ccc; padding-top:25px; margin-bottom:0px}
	.goodsInfo .goodsTitle {float:none; width:100%; text-align:center}
	.goodsInfo .goodsTitle .loc {font-size:0.8em; font-family:"Nanum Gothic"; margin-bottom:10px; display:none}
	.goodsInfo .goodsTitle .name {font-size:1.2em; font-family:"Noto Sans KR"}
	.goodsInfo .goodsColor {float:none; width:100%; text-align:center }
	.goodsInfo .goodsColor h2 {font-size:12px; font-family:"Nanum Gothic"; margin-bottom:10px; display:none}
	.goodsInfo .goodsColor ul > li {display:inline-block; float:none; width:60px; height:60px; border:1px solid #ddd; margin-right:5px; background-size:auto 60px; background-position:left center; background-color:#fff; margin-bottom:5px}
	.goodsInfo .goodsColor .active {border:3px solid #ccc}
	.goodsContent {width:100%; margin:0; padding:0 5px; line-height:1.5}
	.goodsContent td {font-size:0.6em !important; text-align:center}
	.goodsContent td * {font-size:inherit !important; text-align:center}
	
	
	/* 매장찾기 */
	.infowrap .searchGo {display:block; width:100%; text-align:center; line-height:24px; border:1px solid #ddd; background:#eee; color:#333}
	
	.list_s01 table td.tl {padding-left:50px}
	
	.paragraph {width:100%; margin:0; font-size:1em; padding:0 5px}
	.paragraph p {margin-bottom:20px; line-height:1.5; word-break:keep-all}
	
	.faq { border-top:none}
	.faq dl {border-bottom:1px solid #ddd; font-family:"Noto Sans KR"}
	.faq dt { position:relative; min-height:40px; color:#111; font-size:1em; line-height:25px; padding-left:30px; padding-top:3px; border-bottom:1px dashed #ddd; font-weight:400; margin-bottom:10px;}
	.faq dt > span { position:absolute; display:block; top:5px; left:5px; width:20px; height:20px; color:#fff; text-align:center; line-height:20px; border:none; border-radius:10px; background:#f39800}
	.faq dd {color:#777; font-size:14px; line-height:1.6; padding:0 30px; font-family:"Nanum Gothic"; margin-bottom:0px; padding-bottom:30px}
	.faq dd > p {margin-bottom:5px}
	
	.sitemap {width:100%; height:150px; padding-top:15px; font-family:"Noto Sans KR"; margin-top:20px; background:#111}
	.sitemap ul {width:100%; margin:0; padding-left:10px}
	.sitemap ul li {float:none; width:100%; text-align:left}
	.sitemap .cb {height:25px}
	.sitemap .sd1 {display:inline-block; margin-right:10px; color:#fff; font-size:0.9em; font-weight:400; margin-bottom:5px}
	.sitemap .st2 {display:inline; padding:0 5px; color:#bbb; font-size:0.8em; font-weight:400; margin-bottom:5px}
	
	#w-bottom {clear:both}
	
	.footer {height:80px; border-top:1px solid #333; background:#222}
	.footer ul {width:100%; margin:0 auto; padding-top:10px}
	.footer ul li {float:none; color:#999; font-size:0.8em; text-align:center}
	.footer .address { margin:0 20px 5px}
	.footer .copyright a { display:none}
	
	.searchBox {margin-bottom:30px;padding:25px 60px; border:1px solid #ddd;border-top:1px solid #999;background:#f5f5f5;}
	.searchBox ul:after {content:'';display:block;clear:both;}
	.searchBox > ul > li {float:left;width:49%;}
	.searchBox > ul > li:last-child {width:45%;padding-left:6%;border-left:1px solid #ddd;}
	.searchBox ul li h2 {font-size:14px;font-weight:bold;color:#111; margin-bottom:5px}
	
	.list_s01 table {width:100%;border-top:1px solid #666;color:#111;table-layout:fixed;}
	.list_s01 table label {padding:0;text-indent:-9999em; }
	.list_s01 table th {height:39px;border-bottom:1px solid #ddd;}
	.list_s01 table td {padding:9px 10px 10px;text-align:center;border-bottom:1px solid #ddd;}
	.list_s01 table td .date {display:block;margin-top:5px;color:#444;}
	.list_s01 table td.left {text-align:left;}
	.list_s01 table td.left .txt_elips {width:460px}
	.list_s01 table td.no_data {padding:80px 0;}
	.list_s01 table td .global_check_box + label {top:-9px}
	.list_s01 table td .btn_question {display:inline-block;overflow:hidden;width:92%;margin-top:5px;white-space:nowrap;text-overflow:ellipsis;}
	
	.write_s01 table {width:100%;border-top:1px solid #666; color:#111;table-layout:fixed;}
	.write_s01 th {height:30px; font-weight:normal; border-bottom:1px solid #ddd; background:#f5f5f5}
	.write_s01 td {padding:9px 10px 10px; text-align:left; border-bottom:1px solid #ddd;}
	.write_s01 td input[type=text] {width:80%}
	.write_s01 td textarea {width:100%; height:200px}
	.write_s01 .btnArea input { width:120px; height:30px; line-height:32px; font-size:18px}
	
	#container img.closeInfoBtn {width:auto}

}


/*관리자메뉴*/

.adm_list {border-top:1px solid #999}
.adm_list li { min-height:30px; padding-top:3px; border-bottom:1px solid #ddd; margin-bottom:3px}
.adm_list label {display:inline-block; width:100px; border-right:1px solid #eee; margin-right:10px}

.admVisual {display:block; position:absolute; left:0; top:0; line-height:30px; padding:0 10px; color:#fff; background:#007aff; z-index:100}