@charset "utf-8";
.table {display:table;width:100%;height:100%;}
.tableCell {display:table-cell;vertical-align:middle;}



/* mainVisual */
#mainVisual {position: relative;overflow:hidden;background:#f2f2f2;margin-top:112px;}
#mainVisual .mask {height:460px;}
#mainVisual .mask > a {position:absolute;top:50%;display:none;}
#mainVisual .mask > a.btnPrev {left:50%;margin-left:-800px;}
#mainVisual .mask > a.btnNext {right:50%;margin-right:-800px;}
#mainVisual .mask .slick-dots {position:absolute;left:50%;margin-left:-130px;bottom:30px;text-align:center;}
#mainVisual .mask .slick-dots li {display:inline-block;text-indent:-999999px;width:40px;height:5px;background:#e0e0e0;margin:0 5px;transition:0.3s all ease-out;cursor:pointer;}
#mainVisual .mask .slick-dots li.slick-active {background:#444;}

#mainVisual .mask .auto {height:100%;padding-left:480px;}
#mainVisual .mask li {position:relative;background-repeat:no-repeat;background-position:50% 50%;height:100%;}
#mainVisual .mask li a {display:block;height:100%;}
#mainVisual .mask li a img {display:none;}
#mainVisual .mask li.visual01 {background-imag e:url("../images/main/mainVisual01.jpg");}
#mainVisual .mask li.visual02 {background-imag e:url("../images/main/mainVisual01.jpg");}
#mainVisual .mask li.visual03 {background-imag e:url("../images/main/mainVisual01.jpg");}

#mainVisual .prd-quickMenu {position:absolute;top:0;left:50%;margin-left:-600px;;width:400px;height:100%;padding:40px;background:rgba(255,255,255,0.5);}
#mainVisual .prd-quickMenu .title {font-size:16px;color:#666;text-align:center;font-weight:700;background:#f0f0f0;line-height:43px;}
#mainVisual .prd-quickMenu ul li {float:left;width:50%;text-align:center;}
#mainVisual .prd-quickMenu ul li a {display:block;margin:1px;border:1px solid #f0f0f0;background:#fff;padding:10px;}
#mainVisual .prd-quickMenu ul li a p {font-size:15px;color:#666;margin-top:1px;}


#mainContents {position: relative;overflow: hidden;padding:60px 0;}
#mainContents .titleWrap {text-align:center;margin-bottom:35px;}
#mainContents .titleWrap .title {font-size:26px;color:#333;font-weight:700;text-align:center;}
#mainContents .titleWrap .sub {font-size:16px;color:#808080;margin-top:5px;}



#mainContents .quickMenu ul {margin:-5px;}
#mainContents .quickMenu ul li {float:left;width:25%;padding:5px;}
#mainContents .quickMenu ul li:first-child {width:50%;}
#mainContents .quickMenu ul li a {display:block;height:100%;position:relative;}
#mainContents .quickMenu ul li .inner {position:absolute;top:0;left:0;right:0;bottom:0;padding:40px;}
#mainContents .quickMenu ul li .inner dl dt {font-size:24px;color:#333;font-weight:700;}
#mainContents .quickMenu ul li .inner dl dd {padding: 5px 0 15px;font-size:16px;color:#666;}
#mainContents .quickMenu ul li .inner .btnMore {display:block;width:140px;text-align:center;background:#2356b9;font-size:15px;color:#fff;line-height:36px;margin-top:10px;}
#mainContents .quickMenu ul li .inner .btnMore img {margin-top:13px;margin-left:10px;}
#mainContents .quickMenu ul li .inner span {display:block;margin-top:13px;font-size:15px;color:#666;}
#mainContents .quickMenu ul li .inner span img {margin-top:5px;margin-left:5px;}

#mainContents .prd-list {padding:50px 0;}

.prd-list ul {margin:-10px;}
.prd-list ul li {float:left;width:25%;padding:10px;}
.prd-list ul li .inner {transition:0.3s all ease-out;}
.prd-list ul li .thumbnail {position:relative;background:#f8f8f8; width:285px; height:240px;}
.prd-list ul li .thumbnail img {width:100%; height:100%;}
.prd-list ul li .thumbnail .ribbon {position:absolute;top:0;left:0;width:50px;line-height:55px;font-size:13px;color:#fff;font-family:"Noto Sans KR";text-align:center;}
.prd-list ul li .thumbnail .ribbon.new {background:#f8791c;}
.prd-list ul li .thumbnail .ribbon.best {background:#2e5ebc;}
.prd-list ul li .thumbnail .basket {position:absolute;bottom:20px;right:20px;opacity:0;z-index:-1;transition:0.3s all ease-out;}
.prd-list ul li .txtBox {padding:30px 0;text-align:center; height:140px;}
.prd-list ul li .txtBox .prd-name {font-size:13px;color:#808080;}
.prd-list ul li .txtBox .prd-name2 {font-size:18px;color:#333333;font-weight:700;}
.prd-list ul li .txtBox .prd-price {font-size:16px;color:#b92323;font-weight:700;margin-top:10px;}
.prd-list ul li:hover .inner {
	-webkit-box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.05);
	-moz-box-shadow:    0px 0px 15px 5px rgba(0, 0, 0, 0.05);
	box-shadow:         0px 0px 15px 5px rgba(0, 0, 0, 0.05);
}
.prd-list ul li:hover .thumbnail .basket {opacity:1;z-index:1;}
.prd-list2 ul {margin:-10px;}
.prd-list2 ul li {float:left;width:25%;padding:10px;}
.prd-list2 ul li .inner {transition:0.3s all ease-out;}
.prd-list2 ul li .thumbnail {position:relative;}
.prd-list2 ul li .thumbnail img {width:100%;}
.prd-list2 ul li .thumbnail .ribbon {position:absolute;top:0;left:0;width:50px;line-height:55px;font-size:13px;color:#fff;font-family:"Noto Sans KR";text-align:center;}
.prd-list2 ul li .thumbnail .ribbon.new {background:#f8791c;}
.prd-list2 ul li .thumbnail .ribbon.best {background:#2e5ebc;}
.prd-list2 ul li .thumbnail .basket {position:absolute;bottom:20px;right:20px;opacity:0;z-index:-1;transition:0.3s all ease-out;}
.prd-list2 ul li .txtBox {padding:30px 0;text-align:center;}
.prd-list2 ul li .txtBox .prd-name {font-size:18px;color:#333333;font-weight:700;}
.prd-list2 ul li .txtBox .prd-price {font-size:16px;color:#2c3987;font-weight:700;margin-top:10px;}
.prd-list2 ul li:hover .inner {
	-webkit-box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.05);
	-moz-box-shadow:    0px 0px 15px 5px rgba(0, 0, 0, 0.05);
	box-shadow:         0px 0px 15px 5px rgba(0, 0, 0, 0.05);
}
.prd-list2 ul li:hover .thumbnail .basket {opacity:1;z-index:1;}



#mainContents .conBox01 {background:#f8f8f8;padding:60px 0;}
#mainContents .conBox01 .mask {position:relative;}
#mainContents .conBox01 .mask .arrow {position:absolute;top:50%;margin-top:-22px;}
#mainContents .conBox01 .mask .arrow.btnPrev {left:-60px;}
#mainContents .conBox01 .mask .arrow.btnNext {right:-60px;}
#mainContents .conBox01 ul {margin:-10px;overflow:hidden;}
#mainContents .conBox01 ul li {float:left;width:50%;padding:10px;position:relative;}
#mainContents .conBox01 ul li a {display:block;position:absolute;top:0;left:0;right:0;bottom:0;padding:20px;margin:10px;}
#mainContents .conBox01 ul li .inner {border:1px solid rgba(255,255,255,0.5);height:100%;text-align:center;color:#fff;}
#mainContents .conBox01 ul li .inner .sub {font-size:16px;}
#mainContents .conBox01 ul li .inner .title {font-size:26px;/* font-family:"nanumB"; */}

#mainContents .conBox02 {padding-top:60px;}




/* HOVER */
@media all and (min-width:1200px) {	
	
	#mainVisual .mask li .inner .auto a:hover {background:#333;color:#fff;border-color:#333;}
	#mainVisual .mask li.black .inner .auto a:hover {color:#fff;}
	
	
}


/* responsive */

@media all and (max-width:1200px) {
	#mainVisual {margin-top:76px;}
	#mainVisual .mask {height:auto;}
	#mainVisual .mask li a img {display:block;width:100%;}
	#mainVisual .mask li {background-image:none !important;}
	#mainVisual .mask li .inner .auto dt .en {font-size:25px;}
	#mainVisual .mask li .inner .auto dt .kr {font-size:40px;}
	#mainVisual .mask li .inner .auto dd {font-size:18px;}
	#mainVisual .mask li .inner .auto a {margin:40px 0 0 0;line-height:40px;font-size:15px;}
	#mainVisual .mask .slick-dots {margin-left:-75px;}
	#mainVisual .prd-quickMenu {position:static;margin-left:0;width:100%;}
	#mainVisual .prd-quickMenu .title {display:none;}
	#mainVisual .prd-quickMenu ul li {width:16.66%;}
	#mainContents .conWrap01 .conBoxWrap dl {bottom:0;}
	#mainContents .conWrap01 .conBoxWrap .conBox .hover {opacity:1;}

	#mainContents .titleWrap {margin-bottom: 20px;}
	#mainContents .quickMenu ul li .inner {padding:30px;}

	#mainContents .conBox01 .mask {padding:0 50px;}
	#mainContents .conBox01 .mask .arrow {margin-top:-14px;width:15px;}
	#mainContents .conBox01 .mask .arrow.btnPrev {left:10px;}
	#mainContents .conBox01 .mask .arrow.btnNext {right:10px;}

	.prd-list ul li .thumbnail {position:relative;background:#f8f8f8; width:100%; height:auto}

}
@media all and (max-width:1024px){
	#mainVisual .mask li .inner .auto p.main {font-size:25px;}
	#mainVisual .mask li .inner .auto p.sub {font-size:16px;}
	#mainVisual .mask li .inner .auto a {width:160px;line-height:40px;font-size:14px;}

	#mainContents .quickMenu ul li .inner {padding:20px;}

	.prd-list ul li .img img {height:290px;}
}
@media all and (max-width:900px){
	#mainContents .quickMenu ul li a > img {width:100%;}
	#mainContents .quickMenu ul li:first-child {width:100%;}
	#mainContents .quickMenu ul li {width:50%;}
	#mainContents .quickMenu ul li .inner {padding:50px;}

	#mainContents .titleWrap {margin-bottom: 20px;}
	
	.prd-list ul li {width:50%;}
	.prd-list2 ul li {width:50%;}
}
@media all and (max-width:800px){
	#mainVisual .mask li .inner .auto dt .kr {font-size:25px;}
	#mainVisual .mask li .inner .auto a {margin:20px 0 0 0;line-height:35px;width:140px;}

	#mainContents .conBox01 ul li .inner .sub {font-size:13px;opacity:0.8;}
	#mainContents .conBox01 ul li .inner .title {font-size:1.8rem;}
	#mainContents .conBox01 ul li .bg img {width:100%;}

	
	.prd-list ul li dt {font-size:18px;}
	.prd-list ul li dd {font-size:14px;}
	
}
@media all and (max-width:768px){
	#mainVisual .prd-quickMenu ul li {width:33.33%;}
	#mainContents .conBox01 ul li .inner .title {font-size: 1.2rem;font-weight:700;}
	.tab ul li {width:50%;}
}
@media all and (max-width:640px){
	

	#mainVisual {margin-top:60px;}
	#mainVisual img.pc {display:none;}
	#mainVisual img.m {display:block;}
	#mainVisual .tableCell {vertical-align:top;padding-top:30px;}
	#mainVisual .mask li .inner .auto p.main {font-size:20px;}
	#mainVisual .mask li .inner .auto p.sub {font-size:14px;}
	#mainVisual .mask li .inner .auto a {border-width:1px;width:120px;line-height:30px;font-size:12px;margin-top:20px;}
	#mainVisual .mask .slick-dots {bottom:0;}

	#mainContents {padding:10px 0 20px;}
	#mainContents .quickMenu ul li .inner {padding:15px;}
	#mainContents .quickMenu ul li .inner dl dt {font-size:15px;}
	#mainContents .quickMenu ul li .inner dl dd {font-size:12px;}
	#mainContents .quickMenu ul li .inner .btnMore {width:100px;font-size:12px;line-height:30px;}
	#mainContents .quickMenu ul li .inner .btnMore img {margin-top:10px;}
	#mainContents .quickMenu ul li .inner span {font-size:13px;;}
	#mainContents .quickMenu ul li .inner span img {margin-top:4px;}
	#mainContents .titleWrap .title {font-size:20px;}
	#mainContents .titleWrap .sub {font-size:13px;    letter-spacing: -0.5px;}

	#mainVisual .prd-quickMenu {padding:10px;}

	#mainContents .conBox01 {padding:40px 0 50px;}
	#mainContents .conBox01 .mask {padding:0 30px;}
	#mainContents .conBox01 .mask .arrow.btnPrev {left:0;}
	#mainContents .conBox01 .mask .arrow.btnNext {right:0;}
	#mainContents .conBox01 ul li a {padding:10px;}

	#mainContents .conBox02 {padding-top:40px;}

	#mainContents .prd-list {padding:40px 0 20px;}
	.prd-list ul {margin:-5px;}
	.prd-list ul li {padding:5px;}
	.prd-list ul li .thumbnail {position:relative;background:#f8f8f8; width:100%; height:auto;}
	.prd-list ul li .thumbnail img{width:100%;}
	.prd-list ul li .txtBox .prd-name2 {margin-top:2px;font-size:13px;}
	.prd-list ul li .txtBox .prd-price {font-size:13px;}
	.prd-list2 ul {margin:-5px;}
	.prd-list2 ul li {padding:5px 5px 10px 5px;}
	.prd-list2 ul li .txtBox {padding:15px 0;}
	.prd-list2 ul li .txtBox .prd-name {font-size:13px;}
	.prd-list2 ul li .txtBox .prd-price {margin-top:5px;font-size:13px;}

	.prd-list ul li .thumbnail .ribbon {width:40px;line-height:40px;font-size:11px;}

	.conBox02 .tab02 li {width:50%;line-height:40px;}
}
@media all and (max-width:480px){
	
}