@charset "utf-8";
@import url("/Library/Css/user_layout.css");


/*메인*/

#mContainer {width: 100%; }
#mContainer #Container {width:100%;}

.mConBox1 {width:100%; margin: 0 auto; position:relative; top:-114px;}
.mConBox1:after {content: ""; display: block; clear: both; z-index: 1;}

/*메인 롤링 배너*/
.m_slider{position:relative; /*width:810px;*/width:100%; height:auto; }
.m_slider .frame {overflow: hidden; position: relative;}
.m_slider .frame ul {list-style: none; margin: 0; padding: 0; position: absolute;}
.m_slider ul li{width:100%; float: left; !important;}
.m_slider .frame ul li { float: left; margin: 0 1px 0 0; padding: 0; cursor: pointer; }
.m_slider .frame ul li img {width:1882px;}
.m_slider .frame ul li.active { color: #fff; background: #a03232; }
.m_slider .bx-controls {position:absolute; width:100%; height:16px; bottom:8%; left: -35%; z-index:100; }
.m_slider .bx-pager {display:table; margin:0 auto;}
.m_slider .bx-pager .bx-pager-item {float:left;}
.m_slider .bx-pager .bx-pager-item .active {}
.m_slider .bx-controls-direction {display:none;}
.m_slider .Rbtn1{position:absolute; left:-17px; top:248px; z-index:100;}
.m_slider .Rbtn2{position:absolute; right:-17px; top:248px; z-index:100;}
.m_slider .over_bg{background:url(/image/main/banner_over.png) bottom center no-repeat;width:100%; height:570px;}

.m_slider .bx-pager a {
    background: #ff5419;
    display: block;
    width: 14px;
    height: 14px;
    text-indent: -9999px;
    margin: 0 5px;
    outline: 0;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
}

.m_slider .bx-pager a.active {
    background: #9ce5b2;
	width:50px;
}

.w1390{width:1390px; margin:0 auto;}
.mConBox2{width: 1390px; overflow:hidden; position:absolute; left:13.5%; bottom:1.3%;}
.mConBox2 > div{width:710px; padding:0 20px; float:right; background-color:#e6e7e9;}
.mConBox2 ul{display: flex; justify-content:space-between; align-items:center; flex-wrap:nowrap; text-align:center;}

.info-btn{height:188px; border-bottom:1px solid #d5d4d6;}
.info-btn li{width:33%; height:100%; display:flex; flex-direction:column; justify-content:space-evenly;}
.info-btn li:nth-child(2){border-left:3px solid #000; border-right:3px solid #000;}
.info-btn li span{display:block; height:88px; line-height:88px;}
.info-btn li p{font-size:20px; padding-top:15px;}

.btn2{padding:15px 0;}
.btn2 li{border-right:1px solid #d6d4d6;width: 24%;text-align:center;line-height:24px;font-size:15px;}
.btn2 li:last-child{border-right:none;}
.btn2 li:nth-child(3){width:30%;}

.dflexA{display:flex; flex-wrap:nowrap; justify-content:space-between; align-itms:center;}

/*배너영역*/
.BannerA{margin-top:-70px;}
.BannerA ul{overflow:hidden;}
.BannerA li{background-color:#EEF1F3; width:24%; text-align:center; padding:50px 0 30px; font-family:"Noto Sans CJK KR";}
.BannerA li h2{text-align:center; font-size:33px; margin-bottom:12px; line-height:50px; color:#495198; font-weight:600;}
.BannerA li p {font-size:20px; line-height:26px;}
.BannerA li span{display:block; margin:50px auto;}
.BannerA li a{display:block; width:65%; line-height:50px; background-color:#fff; color:#000; margin:0 auto; font-size:20px; border-radius:5px;}

.BannerA li:hover{background-color:#495198;}
.BannerA li:hover h2{color:#fff;}  
.BannerA li:hover p{color:#eee;}
.BannerA li:hover a{background-color:#939CF3; color:#fff;}




.mConBox3 {width: 1200px; margin: 0 auto; margin-top:50px;}
.mConBox3 h2 {position: relative; padding-left: 28px; font-size: 16px; font-family: 'Naum Barungothic'; font-weight: bold; color: #333; background: url(/image/main/bul01.gif) no-repeat left 50%;}
.mConBox3 li{width:32%; justify-content: normal; align-items:center;}
.mConBox3 li > div{margin-left:20px;}
.mConBox3 li h5{font-size:20px;}
.mConBox3 li p{font-size:16px; margin:15px 0; color:#bbb;}


/*hot deal*/
#container h2 > p{font-size: 32px; font-weight: bold; margin-bottom:30px; color:#333; line-height:40px;}

.mConBox4 {margin-top: 50px; }

.hot-deal ul {width: 100%; text-align: center;}
.hot-deal ul li{width:30%; border:1px solid #ccc;}
.hot-deal ul li a{display:block; width:100%; height:265px; border-bottom:1px solid #ccc;}
.hot-deal ul li a img{width:auto; margin:0 auto;}
.hot-deal ul li span {display: block; line-height:30px;}
.hot-deal ul li span.Hname {font-size:22px; color: #616161; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-top:20px;}
.hot-deal ul li span.Hprice {font-size:18px; font-weight: bold; color: #010101; margin:10px 0 20px;}


/*노데이터*/
.mConBox5{margin-top:50px; overflow:hidden;}
.mConBox5 h2{display:flex; justify-content:space-between; flex-wrap:nowrap;}
.search-ma ul{height:auto;}
.search-ma li{ width:16%; text-align:center;}
.search-ma li span{display:block;}
.search-ma li .num-page{font-size:20px;}
.search-ma li .date-add{font-size:15px; margin-top:20px;}
/*.search-ma ul:after{display:block; content:""; clear:both; overflow:hidden;}*/
/*배송절차*/
.mConBox6 {margin: 0 auto; margin-top: 50px;}

.tab {position: relative; width: 100%;}
.tab .search-de {position: absolute; top: 5px; right: 0;}
.tab .search-de span {display: inline-block;}
.tab .search-de span.in-de {margin-left: 20px;}
.tab .stepTab .menu_tab ul {width: 249px; border: 1px solid #dbdbdb; border-bottom: none;}
.tab .stepTab .menu_tab ul:after {content:""; display: block; clear: both; z-index: 1;}
.tab .stepTab .menu_tab ul li {float: left; width: 124px; height:50px; line-height: 50px; border-right: 1px solid #dbdbdb; background: #eee; text-align: center; vertical-align: middle; font-size: 14px;}
.tab .stepTab .menu_tab ul li:last-child {border-right: none;}
.tab .stepTab .menu_tab ul li.active {background: #333; font-weight: bold; color: #fbfbfb;}
.tab .stepTab .menu_tab ul li.active a {color: #fbfbfb;}

.stepTab div[class^="menu_tab0"] {border: 1px solid #dbdbdb; text-align: center;}

.mConBox6 .bgA{background-image:url("/image/main/m6Bg.png"); background-size:cover; width:100%; height:115px;}
.mConBox6 .bgA ul{width:95%; margin:0 auto;}
.mConBox6 .bgA .dflexA{height:100%; align-items:center;}
.mConBox6 .bgA li p{color:#fff; margin-right:50px; font-size:16px;}

/*BEST 쇼핑몰*/
.mConBox7{margin-top:50px; background-color:#f2f2f2;}
.Bshop {height: auto; padding: 30px 0; box-sizing: border-box; position:relative;}


.m_slider2{width:95%; margin:0 auto;}
.m_slider2 #slider2-B {position:absolute; left: 0; top: 88px; z-index:100;}
.m_slider2 #slider2-N {position:absolute; right: 0px; top: 88px; z-index:100;}



@media all and (min-width:768px) and (max-width:1920px){
.Bshop ul li{float:left;  }
}
@media all and (min-width:482px) and (max-width:767px){

.popUpArea{display:none;}
}
@media all and (min-width:100px) and (max-width:481px){
.Bshop ul li{float:left;  margin:0 5%; }
.popUpArea{display:none;}
}




/* 하단정보배너 */

.mConBox8 {margin-top:50px;}
.mConBox8 .main-notice{width:38%; border-right:1px solid #dbdbdb; padding-right:4%;}
.mConBox8 .cs-info {width:24%; border-right:1px solid #dbdbdb;}
.mConBox8 .bank-info {width:24%;}

.main-notice ul {width:100%; box-sizing: border-box;}
.main-notice ul li {line-height:35px; font-size:18px; align-items:center;}
.main-notice ul li a {display: block; width: 80%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.main-notice ul li span{font-size:15px;}

.mConBox8 h3{font-size:30px; line-height:40px; font-weight:600; margin:50px 0 30px;}


#menu li
{
	padding-bottom: 10px;
	position: relative;
}

#menu ul ul a 
{
	float: left;
	height: 25px;
	padding: 0 25px;
	color: #999;
	text-transform: uppercase;
	font: bold 12px/25px Arial, Helvetica;
	text-decoration: none;
	text-shadow: 0 1px 0 #000;
}



*html #menu li a:hover /* IE6 */
{
	color: #fafafa;
}

#menu li:hover > ul
{
	display: block;
}

/* Sub-menu */

#menu ul
{
    list-style: none;
    margin: 0;
    padding: 0;    
    display: none;
    position: absolute;
    top: 50px;
    left: calc(width - 50%);
    z-index: 99999;    
    background: #fbfbfb;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);    
    background: -o-linear-gradient(#444, #111);	
    background: -ms-linear-gradient(#444, #111);	
    background: linear-gradient(#444, #111);
    -moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
    -webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
    box-shadow: 0 0 2px rgba(255,255,255,.5);	
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#menu ul ul
{
  top: 0;
  left: 150px;
}

#menu ul li
{
    float: none;
	text-align:left;
    margin: 0;
    padding: 0 3px;
    display: block; 
	border-bottom:1px solid #333;

}

#menu ul li:last-child
{   
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    	box-shadow: none;    
}

#menu ul a
{    
	font-size:13px;
	font-weight:300;
    padding: 10px;
	height: 10px;
	width: 130px;
	height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
	text-transform: none;
}

*html #menu ul a /* IE6 */
{    
	height: 10px;
}

*:first-child+html #menu ul a /* IE7 */
{    
	height: 10px;
}

#menu ul a:hover
{
    background: #0186ba;
	background: -moz-linear-gradient(#04acec,  #0186ba);	
	background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
	background: -webkit-linear-gradient(#04acec,  #0186ba);
	background: -o-linear-gradient(#04acec,  #0186ba);
	background: -ms-linear-gradient(#04acec,  #0186ba);
	background: linear-gradient(#04acec,  #0186ba);
}

#menu ul li:first-child > a
{
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

#menu ul li:first-child > a:after
{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}

#menu ul ul li:first-child a:after
{
    left: -8px;
    top: 12px;
    width: 0;
    height: 0;
    border-left: 0;	
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    border-right: 8px solid #444;
}

#menu ul li:first-child a:hover:after
{
    border-bottom-color: #04acec; 
}

#menu ul ul li:first-child a:hover:after
{
    border-right-color: #04acec; 
    border-bottom-color: transparent; 	
}


#menu ul li:last-child > a
{
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

/* Clear floated elements */
#menu:after 
{
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

* html #menu             { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */

ul#topnav {
	margin: 0; padding: 0;
	float: left;
	width: 970px;
	list-style: none;
	position: relative;
	font-size: 1.2em;
	background:url(images/topnav_s.gif) repeat-x;
}
ul#topnav li {
	float: left;
	margin: 0; padding: 0;
	border-right: 1px solid #555;
}
ul#topnav li a {
	padding: 10px 15px;
	display: block;
	color: #f0f0f0;
	text-decoration: none;
}
ul#topnav li:hover { background: #1376c9 url (images/topnav_a.gif) repeat-x; }
ul#topnav li span {
	float: left;
	padding: 15px 0;
	position: absolute;
	left: 0; top:35px;
	display: none;
	width: 970px;
	background: #1376c9;
	color: #fff;
	-moz-border-radius-bottomright: 5px;
	-khtml-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	-khtml-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span { display: block; }
ul#topnav li span a { display: inline; }
ul#topnav li span a:hover {text-decoration: underline;}

@media all and (min-width:100px) and (max-width:1000px){
#mContainer {margin-top:0;}
}

@media(max-width:1640px){

.mConBox1{width:100%;}
.mConBox2{width:95%; position:static; margin:40px auto 0; }
.w1390{width:95%;}
.mConBox3, .mConBox4, .mConBox5, .mConBox6, .mConBox8{width:95%; margin:40px auto;}
.m_slider .bxslider li a img{width:100%;}
.m_slider .bx-pager a.active{width:40px;}
.m_slider .bx-pager a{height:10px;}

.mConBox2 > div{width:100%; padding:0; float:none;}
}
@media(max-width:1600px){
.hot-deal ul li a{height:210px;}
.hot-deal ul li a img{width:100%; height:100%;}
}
@media all and (min-width:100px) and (max-width:482px){
.mConBox3, .mConBox4, .mConBox5, .mConBox6, .mConBox8{width:96%; margin:20px auto;}
.mConBox4 h2 , .mConBox5 h2 {margin-top:10px; }
.mConBox4 h2{text-align:left; margin-bottom:20px;}
.m_slider .bx-controls{bottom:5%;}
.m_slider .bx-pager a.active{width:20px;}
.m_slider .bx-pager a{width:8px; height:8px;}
}

@media(max-width:1400px){
.BannerA li{padding:30px 0;}
.BannerA li h2{font-size:24px;}
.BannerA li span{margin:25px 0;}
.BannerA li p{font-size:16px;}

.search-ma li .num-page{font-size:16px;}
.search-ma li .date-add{font-size:14px; margin-top:5px;}

.mConBox8 div img{width:100%;}
.mConBox8 .main-notice{padding-right:30px;}
.mConBox8 .cs-info{width:28%;}
}

@media(max-width:1300px){
.mConBox6 .bgA{height:auto; padding:30px 0;}
.mConBox6 .bgA > .dflexA{flex-wrap:wrap;}
.mConBox6 .bgA > .dflexA > li{width:23%; justify-content: normal; margin:10px 0;}
}
@media(max-width:1260px){
.nodataImg img{width:100%;}
}
@media(max-width:1130px){
#container h2 > p{margin-bottom:15px; font-size:24px;}
.mConBox8 h3{font-size:24px; margin:20px 0;}
.mConBox1{top:0;}
.BannerA{margin-top:50px;}
.BannerA ul.dflexA{flex-wrap:wrap;}
.BannerA li{width:48%;}
.BannerA li:first-child , .BannerA li:nth-child(2){margin-bottom:20px;}

.hot-deal ul li{width:33%;}
.hot-deal ul li span.Hname{font-size:16px; margin-top:15px;}
.hot-deal ul li span.Hprice{margin:0; margin-bottom:10px;}
.search-ma li{width:22%;}
.search-ma li:last-child{display:none;}
.nodataImg img{width:100%;}
.search-ma li .num-page{font-size:16px;}
.search-ma li .date-add{font-size:14px; margin-top:5px;}
.mConBox8 .dflexA{flex-wrap:wrap;}
.mConBox8 .main-notice{width:100%; padding-right:0; border-right:none;}
.mConBox8 .main-notice ul li{font-size:16px;}
.mConBox8 .main-notice ul li span{font-size:14px;}

.mConBox8 .cs-info{border-right:none; width:48%;}
.mConBox8 .bank-info{width:48%;}
.mConBox8 div img{width:auto;}
}
@media(max-width:950px){
.mConBox6 .bgA ul{width:90%; margin-left:5%;}
}
@media(max-width:768px){
#container h2 > p{font-size:18px; margin-bottom:10px;}
.mConBox8 h3{font-size:18px;}
.mConBox2{margin:20px auto 0;}
.BannerA{margin-top:20px;}
.info-btn{height:auto;}
.info-btn li{padding:20px 0;}
.info-btn li:nth-child(2){border:none;}
.info-btn li span{height:50px;}
.info-btn li span img{height:100%;}
.info-btn li p{font-size:16px; padding:8px 0 0;}
.mConBox2 ul{flex-wrap:wrap;}
.btn2{padding:0;}
.btn2 li{border-right:none; font-size:13px; padding:5px 0;}
.btn2 li:first-child{width:48%;}
.btn2 li:nth-child(2){width:48%;}
.btn2 li:nth-child(3) , .btn2 li:nth-child(4) , .btn2 li:nth-child(5){width:33%; background-color:#333;}
.btn2 li:nth-child(3) a , .btn2 li:nth-child(4) a , .btn2 li:nth-child(5) a{color:#fff; font-size:11px;}

.BannerA li{width:49%;}
.BannerA li h2{margin-bottom:0;}
.BannerA li p{font-size:14px;}
.BannerA li span{margin:20px 0;}
.BannerA li span img{width:80px;}
.BannerA li a{line-height:35px; width:50%; font-size:16px;}

.mConBox3, .mConBox4, .mConBox5, .mConBox6, .mConBox8{margin:20px auto;}
.mConBox6 , .mConBox7{margin-top:30px;}
.mConBox3 ul{flex-wrap:wrap;}
.mConBox3 li{width:100%;}
.mConBox3 li h5{font-size:16px;}
.mConBox3 li span{display:inline-block; width:60px; text-align:center;}

.hot-deal ul li{width:48%;}
.hot-deal ul li:nth-child(3){display:none;}
.hot-deal ul li span.Hname{font-size:14px; margin-top:10px;}
.hot-deal ul li span.Hprice{margin-bottom:10px; font-size:14px; line-height:20px;}

.search-ma li{width:31%;}
.search-ma li:nth-child(4){display:none;}
.search-ma li .num-page{font-size:14px;}
.search-ma li .date-add{font-size:12px; margin-top:0;}
.mConBox6 .bgA ul{width:auto; margin-left:5%;}
.mConBox6 .bgA > .dflexA > li{width:30%;}
.mConBox6 .bgA li p{font-size:14px;}

.Bshop ul li{float:left;  margin:0 1%; }
.mConBox8 div img{width:100%;}

}
@media(max-width:640px){
.mConBox6 .bgA li p{margin-right:30px;}
}
@media(max-width:600px){
.BannerA li{width:100%;}
.BannerA li{margin-bottom:10px;}
.BannerA li:first-child , .BannerA li:nth-child(2){margin-bottom:10px;}
.mConBox8 .cs-info{width:100%;}
.mConBox8 .bank-info{width:100%;}
.mConBox8 div img{width:auto;}

}

@media(max-width:482px){
.mConBox3 li > div{/* margin-left:20px; */float: left;width: 70%;}
.mConBox3 li > span{width:20%; float:left;}
.mConBox6 .bgA > .dflexA > li{width:48%;}
.search-ma li{width:48%;}
.search-ma li:nth-child(3){display:none;}
.Bshop ul li{float:left;  margin:0 2%; }
}




@media (max-width:1700px){
#floating3 , #floating4{display:none;}
#floating , #floating2{display:none;}
}

/*팝업*/
/*#full{width:100%; height:100%; background-color:rgba(0,0,0,0.5); position:fixed; left:0; top:0;}*/
.LayerPopArea{width:auto; height:auto;
display:flex;flex-wrap: wrap; flex-direction: column; align-items: center; justify-content: center;}
.popBody{width:100%; height:100%;}
@media (max-width:768px){
.LayerPopArea{background:rgba(0,0,0,0.7); }
}