
@charset "utf-8";
@import url("/Library/Css/user_layout.css?ver=5");

.right {float:right;}
#container {width: 1100px;margin: 0 auto;}

.mConBox1 {width: 1050px; margin: 0 auto; position:relative; overflow: hidden;}
.mConBox1 .m_slider {float: left;border-radius:15px; width:816px }
.mConBox1 .bx-wrapper {border-radius:15px;}
.mConBox1 .bx-viewport {border-radius:15px;}
.mConBox1 .bx-viewport li {  margin-right: 10px;} 
.mConBox1 .m_slider img {width:816px ;height:332px; object-fit:cover; border-radius:15px;  border: none;}
.mConBox1 .logbox { background:url(/image/main/logbg.png) bottom center no-repeat; width:215px;    border: none;  margin-bottom:11px; height:135px; padding:15px 11px;  box-sizing:border-box;} 
.mConBox1 .Rbox .login-box input[type="image"] {position: absolute;top: 15px; right: 10px;border: none;}
.mConBox1 .Rbox .login-util { margin-top:4px;  margin-bottom:4px; margin-left: 1px; border: none;}
.mConBox1 .Rbox .login-util ul li { font-size:11px; float: left; margin-right: 10px; padding-right: 12px;  font-weight: 300;color: #777777; border: none;}
.mConBox1 .Rbox .login-util ul li:last-child {margin-right: 0; padding-right: 0; background: none;  border: none;}

.mConBox1 .login-util2 {margin-top:4px; }
.mConBox1 .login-util2 li {float:left; margin-top: 3px;}
.mConBox1 .login-util2 li:last-child {float:left; margin-top: 3px; margin-left:1px;}
.mConBox1 .login-util2 a {display: block; width: 100%;height: 100%; cursor: pointer;  }
.mConBox1 .login-util2 .naverlog {  cursor: pointer;display:inline-block; height:26px; line-height:26px; width:92px; font-size:12px; padding-left:38px; background:url(/Image/Common/bg_naverlogin.jpg)no-repeat left center #00c63b; font-weight: 550;color:#fbfbfb; text-align:center;   } 
.mConBox1 .login-util2 .kakaolog {  cursor: pointer; cursor:pointer;display:inline-block;  width:92px; height:26px; line-height:26px; font-size:12px; padding-left:38px; background:url(/Image/Common/bg_kakaologin.jpg)no-repeat left center #ffe800; color:#4e3f40;    font-weight: 550; text-align:center; }

.joinn {width:193px; background:#FF706C; border-radius:3px; color:#fff; padding:5px 0;  text-align:center; box-sizing:Border-box}
.joinn a { color:#fff; font-weight:bold}
.login-box2 h2 .usern {font-size:12px; font-weight:bold;float:left; width: 100px;overflow: hidden;text-overflow: ellipsis; white-space: nowrap;text-overflow: ellipsis; overflow: hidden;
    display: inline-block;}
.login-box2 .out a {font-size:11px; font-weight:bold; }
.login-box2 .stmn {width:100%; margin:7px 0 10px 0;  background: #E7EBEF; border: 1px solid #CECECE; padding:3px 12px; box-sizing:Border-box; font-size:13px; font-weight:bold;}
.login-box2 .red {color:red;}
.login-box2 .stmn2 { width:100%; margin:8px 0; }
.login-box2 .stmn2 ul { float:left; width:100%;display:flex; flex-wrap:wrap; flex-direction:row; }
.login-box2 .stmn2 ul li {border:1px solid #ddd; width:23.9%; text-align:center;}
.login-box2 .stmn2 ul li a {font-size:13px; font-weight:bold; }
.login-box2 .stmn2 ul li:nth-child(1), .login-box2 .stmn2 ul li:nth-child(2), .login-box2 .stmn2 ul li:nth-child(3), .login-box2 .stmn2 ul li:nth-child(4) 
{background:#085687; border:1px solid #085687; padding: 1px 0;}
.login-box2 .stmn2 ul li:nth-child(1) a, .login-box2 .stmn2 ul li:nth-child(2) a, .login-box2 .stmn2 ul li:nth-child(3) a, .login-box2 .stmn2 ul li:nth-child(4) a 
{color:#fff; font-size:11px;}

/* 2021-04-09 이나경 추가 */
.logul1 {  float:left; width:100%;}
.logul1 li {border:1px solid #ddd;float:left; text-align:center;background:#085687; border:1px solid #085687;box-sizing:border-box; width:25%;}
.logul1 li a {color:#fff; font-size:11px;}

.logul2 {  float:left; width:100%;}
.logul2 li { float:left; width:25%; text-align:center; border:1px solid #ddd; box-sizing:border-box;}
.logul2 li a {font-size:11px;}


.mConBox1 .notice {background:url(/image/main/notbg.png) bottom center no-repeat; width:217px;  height:184px; padding:20px 19px;  box-sizing:border-box; } 
.mConBox1 .notice h3 {color:#060606; font-size:14px;  font-weight:bold; }
.mConBox1 .notice .service {overflow:hidden; padding-top:10px;}
.mConBox1 .notice .service li {margin-bottom:5px; white-space: nowrap;text-overflow: ellipsis; overflow:hidden; width:100%; }
.mConBox1 .notice .service li:last-child {margin-bottom:0}
.mConBox1 .notice .service .notxt { width:181px;display: inline-block; overflow:hidden; text-overflow:ellipsis;white-space:nowrap;}

.mConBox1 .notice .service li .right {float:right;}
.mConBox1 .notice .service li .txt {float:left;font-size:12px;  color:#222; white-space: nowrap;text-overflow: ellipsis;  width:120px;  overflow:hidden;  }
.mConBox1 .notice li .txt:hover , .mConBox1 .notice li a:hover {border-bottom: 0.5px solid #777; transition:all 0.5s;}
.mConBox1 .notice .service li:first-child .txt  {color:#BC0909} 
.mConBox1 .notice .service li a span {color:#555;}

/* pager */
.bx-controls {position:absolute;height: 16px;bottom:18px;left:408px; z-index:100; }
.bx-pager {display:table; margin:0 auto;}
.bx-pager .bx-pager-item {float:left;}
.bx-pager .bx-pager-item .active {}
.bx-controls-direction {display:none;}
.bx-pager a {box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1); background:#fff; 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;}
.bx-pager a.active {background:#5FC9DF;}

.mConBox2 {width: 1050px; margin: 10px auto; overflow:hidden;}
.mConBox2 ul {overflow:hidden;}
.mConBox2 ul li:first-child {float:left; width:817px; height:151px; }
.mConBox2 ul li:first-child img { width:817px; height:151px; object-fit: cover; }
.mConBox2 ul li:last-child {float:right; width:216px; height:151px; }
.mConBox2 ul li:lsst-child img { width:216px; height:151px; object-fit: cover; }

/* 추천링크 */
.mConBox3 {width: 1050px; margin: 0 auto;  overflow:hidden;}
.mConBox3 .link {float:left; background:url(/image/main/tra.png) bottom center no-repeat; width:817px;  height:265px; padding:50px	32PX 42PX 247px;  box-sizing:border-box; } 
.mConBox3 .link h3 {margin-bottom:12px; color:#040404; font-size:14px;  font-weight:bold; padding-left: 10px; }

.mConBox3 .link img{object-fit: cover; box-sizing:border-box;width:auto; height:auto;}
.mConBox3 .link ul {width: 100%;  padding-left:2px;}
.mConBox3 .link ul li { position:relative; float: left; height:93px; width:211px; position:relative; background:#fff;  height: 116px;
    overflow: hidden;}
.mConBox3 .link ul li:nth-child(4n) { margin-right: 0px;}
.mConBox3 .link ul li img {width: auto; height: 116px; box-sizing:border-box; object-fit: cover;   }
.mConBox3 .link .shop {position:relative;}
.mConBox3 #slider3-B {position:absolute; left: -15px; top:45px; z-index:100;  }
.mConBox3 #slider3-N {position:absolute; right:-17px; top:45px; z-index:100;  }


.mConBox3 .bx-viewport {padding-right:2px; max-width:1000px !important; margin:0 auto; height:150px !important;}
.mConBox3 .rie2 {text-align:center; margin-top:15px; font-weight:bold; font-size:15px;  color:#060606; width: 162px;overflow: hidden; white-space: nowrap;text-overflow: ellipsis;}
.mConBox3 .review {float:right; background:url(/image/main/lik.png) bottom center no-repeat; width:216px;  height:265px; padding:20px 17px;  box-sizing:border-box; } 
.mConBox3 .review h3 {font-size:15px; font-weight:bold; margin-bottom:10px; }
.mConBox3 .txt{ border-top: 1px solid #E1E1E1; box-sizing:border-box; width:188px; border-top:none; }
.mConBox3 .txt .rie {font-weight:bold; font-size:13px;  color:#363636; width:188px;overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin:10px 0;}
.mConBox3 .txt .view {font-size:12px; font-weight:bold;  line-height: 140%; color:#5D5D5D; margin-top:5px;width: 188px; height:47px; overflow: hidden; text-overflow: ellipsis;}

/* 2021-04-08 이나경 추가
.mConBox3 .link ul {width: 615%; position: relative; transition-duration: 0s; transform: translate3d(-992.891px, 0px, 0px);}
.mConBox3 .link ul li {float: left; list-style: none; position: relative; width: 160px; margin-right: 16px;}
 */
.mConBox3 .bestreview li {margin-bottom: 36px;}
.mConBox3 .bestreview li:last-child {margin-bottom: 0px;}
.mConBox3 .bestreview li img {width:182px; height:100px;  }
.mConBox3 .bestreview .rev .rtitle { font-size:13px; font-weight:bold;  margin-bottom:14px; overflow: hidden; width:190px; margin:0 auto; white-space: nowrap;text-overflow: ellipsis;}
.mConBox3 .bestreview .rev .rcont { font-size:12px; font-weight: 500; }

/* mConBox4 배송  */
.mConBox4 {width:1050px; margin:21px auto;}
.mConBox4 h4 {margin-bottom:13px;}
.mConBox4 .proc {background:url(/image/main/proc.png) bottom center no-repeat; padding:17px 33px 20px 32px; box-sizing:Border-box; width:1050px; position:relative; height:205px;}


/* mConBox5 추천  */
.mConBox5 {width:1050px; margin:21px auto; }
.mConBox5 h4 {margin-bottom:13px;}
.mConBox5 .shop {background:url(/image/main/bgk.png) bottom center no-repeat; padding:17px 33px 20px 32px; box-sizing:Border-box; width:1050px; position:relative; height:139px;}
/* 2021-04-08 이나경 슬라이드 뺴고 정렬 */
.mConBox5 ul {display:flex; JUSTIFY-CONTENT: space-between}
.mConBox5 .rie {font-size:14px; font-weight:bold; text-align:center; color:#656565; margin-top:17px; }
.mConBox5 .bx-wrapper {width:1037px !important;}

/* mConBox6 고객  */
.mConBox6 {width:1050px; margin:16px auto; overflow:hidden;}
.mConBox6 h4 {margin-bottom:13px;}
.mConBox6 div {float:left;}
.mConBox6 div.cs1 {width:333px; height:181px; margin-right:9px; }
.mConBox6 div.cs1 img {width:333px; height:181px; object-fit:cover;}
.mConBox6 div.cs2 {width:333px; height:182px;  margin-right:9px;}
.mConBox6 div.cs2 img {/*width:333px; height:182px;*/ object-fit:cover;}
.mConBox6 div.cs3 {width:365px; height:181px;}
.mConBox6 div.cs3 img {width:365px; height:181px; object-fit:cover;}

/* mConBox6 고객  */
.mConBox7 {width:1050px; position:relative; height:86px; line-height:86px;  object-fit:cover; margin:0 auto; margin-bottom:55px; overflow:hidden; background:url(/image/main/ex.png) bottom center no-repeat;}
.mConBox7 p {position:absolute; }
.mConBox7 p.date {font-size:19px; font-weight:bold; left:32.5%; top:2px;} 
.mConBox7 p.krw {font-size:35px; font-weight:bold; left:58%;color:#FF2000; letter-spacing: -2px; top:-2px;} 
.mConBox7 p.krw span {font-size:19px; font-weight:bold; left:110%;color:#000; position: absolute; top:1%; } 

.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 {margin-top:10px ; text-align :center; }
.tab .stepTab .menu_tab ul {width: auto;margin-bottom:23px; display: inline-block;}
.tab .stepTab .menu_tab ul:after {content:""; display: block; clear: both; z-index: 1;}
.tab .stepTab .menu_tab ul li {float: left;text-align: center; vertical-align: middle; font-size: 14px; margin-right:27px;}
.tab .stepTab .menu_tab ul li:last-child {margin-right:0;}
.tab .stepTab .menu_tab ul li a {font-size:15px; font-weight:bold; background:#D1CBCF; color:#fff; padding: 8px 30px; box-sizing: border-box; cursor:pointer;}
.tab .stepTab .menu_tab ul li:last-child {}
.tab .stepTab .menu_tab ul li.active  {font-weight: bold; }
.tab .stepTab .menu_tab ul li.active a {color:#fff;  position:relative; background:#6EAEDA; padding: 10px 30px; box-sizing: border-box; }
.stepTab div[class^="menu_tab0"] { text-align: center;}




/* Main menu */
#menu {text-align:left;}

#menu > li
{
	padding-bottom: 10px;
	position: relative;
	text-align: center;
	width: 80px;
}

#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;
}

#menu li:hover > a
{
	color: #313131;
}

*html #menu li a:hover /* IE6 */
{
	color: #313131;
}

#menu li:hover > ul
{
	display: block;
}

/* Sub-menu */

#menu ul
{
    list-style: none;
    margin: 0;
    padding: 0;    
    display: none;
    position: absolute;
    top: 75px;
    left: calc(width - 50%);
    z-index: 99999;    
    background: #5f5f5f;
    -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; 

}

#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;
	color:#fff;
}

*html #menu ul a /* IE6 */
{    
	height: 10px;
}

*:first-child+html #menu ul a /* IE7 */
{    
	height: 10px;
}

#menu ul a:hover
{
    background: #88bfe5;
	border-radius: 5px;
}

#menu ul li:first-child > a
{
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#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 #5f5f5f;
}

#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 #5f5f5f;
}

#menu ul li:first-child a:hover:after
{
    border-bottom-color: #88bfe5; 
}

#menu ul ul li:first-child a:hover:after
{
    border-right-color: #88bfe5; 
    border-bottom-color: transparent; 	
}


#menu ul li:last-child > a
{
    -moz-border-radius: 5px;
    border-radius: 5px;
}

* 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;}

/* 
Sub-menu

#menu ul
{
    list-style: none;
    margin: 0;
    padding: 0;    
    display: none;
    position: absolute;
    top: 73px;
    left: calc(width - 50%);
    z-index: 99999;    
    background:#085687;
    -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; 

}

#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;
	color:#fff;
}

*html #menu ul a IE6
{    
	height: 10px;
}

*:first-child+html #menu ul a IE7
{    
	height: 10px;
}

#menu ul a:hover
{
    background: #0091BF;
	border-radius: 5px;
	color:#fff;
}

#menu ul li:first-child > a
{
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#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 #085687;
}

#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 #085687;
}

#menu ul li:first-child a:hover:after
{
    border-bottom-color: #085687; 
}

#menu ul ul li:first-child a:hover:after
{
    border-right-color: #085687; 
    border-bottom-color: transparent; 	
}


#menu ul li:last-child > a
{
    -moz-border-radius: 5px;
    border-radius: 5px;
}


* 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;
}
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;}


 */