@charset "utf-8";

/* 소연씨 작업 */
/* common */

ul:after{
	content:'';
	display:block;
	clear:both;
}
img{max-width:100%}
a{display:block;}
/*------------------------------------------------------------------------ HEADER */
nav{
	position: relative;
	padding:20px 0;
	min-height:60px;
	box-sizing:border-box;
}


/* 햄버거메뉴 */
.menu-trigger,
.menu-trigger span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
}

.menu-trigger {
    position: absolute;
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: .3s all linear;
    top: 50%;
    left: 15px;
	transform:translateY(-50%);
}

.menu-trigger span {
    position: absolute;
    left: 0;
    display: block;
    height: 3px;
    border-radius: 1.5px;
    transition: .3s all linear;
    background: #e1342e;
    cursor: pointer;
    width: 70%;
}

.menu-trigger span:nth-of-type(1) {
    top: 8px;
}

.menu-trigger span:nth-of-type(2) {
	top: 17px;
    width: 50%;
}

.menu-trigger span:nth-of-type(3) {
    top: 26px;
}


/* .menu-trigger.active-1 span:nth-of-type(1) {
	-webkit-transform: translateY (9px) rotate (-45deg);
	transform: translateY(9px) rotate(-45deg);
}

.menu-trigger.active-1 span:nth-of-type(2) {
	opacity: 0;
}

.menu-trigger.active-1 span:nth-of-type(3) {
	-webkit-transform: translateY(-9px) rotate(45deg);
	transform: translateY(-9px) rotate(45deg);
} */




.logo_image{
    position: absolute;
	left:51px; top:50%;
	transform:translateY(-50%);
}
/*.logo_image img{
	height:25px;
}*/
.login_logo{margin-left: 10px;}
.top-util-area{
    position: absolute;
    right: 12px;
    top: 50%;
	transform:translateY(-50%);
	overflow:hidden;
}
.top-util-area li{
    float: left;
	margin-right: 4px;
}
.top-util-area li:last-child{margin-right:0}
.top-util-area li img{
	height:28px;
}


/* gnb */
.gnb-area{
    position: relative;
    padding: 0 15px;
	border-top:1px solid #d7d7d7;
	box-sizing:border-box;
	border-bottom: 1px solid #d7d7d7;
	background:#fff;
}


/*------------------------------------------------------------------------ FOOTER */
footer{text-align:center;margin-top:20px}
.ft-1 {
    border-top: 1px solid #dadada;
    font-size: 0;
}
.ft-1 li{
    display: inline-block;
    padding: 9px 7px;
    box-sizing: border-box;
}

.ft-1 li a{
    font-size: 12px;
    color: #666;
	position:relative;
}
.ft-1 li a:after{
    content: '';
    display: inline-block;
    height: 11px;
    width: 1px;
    background: #e4e4e4;
    position: absolute;
    top: 5px;
    right: -8px;
}
.ft-1 li:last-child a:after{display:none}

.ft-2{
	background: #414345;
    font-size: 0;
    padding: 25px 10px;
}
.ft-2 li{
    display: inline-block;
    color: #a6a6a6;
    font-size: 12px;
    padding: 3px 7px;
    line-height: 1;
	letter-spacing: -.3px;
}
.ft-2 a,
.ft-2 p{
	display: inline-block;
	color: #a6a6a6;
    font-size: 12px;
}
.ft-2 .btn-pc-ver{display:block; margin:15px auto 0; width:84px; height:26px; text-align:center; line-height:23px; font-size:13px; color:#bbb; border:1px solid #888;}





/*------ snb -------*/

.snb{
    font-size: 0;
}
.snb li{
	display: inline-block;
    width: calc(100%/4);
    vertical-align: middle;
    border-bottom: 1px solid #d7d7d7;
    border-right: 1px solid #d7d7d7;
}
.snb li:nth-child(4n){border-right:0}
.snb li a{																			
	font-size: 12px;
    text-align: center;
    word-break: keep-all;
    color: #333;
    padding: 7px 0;
}
.snb li a img {
    display: block;
    margin: auto;
    height: 45px;
	margin-bottom:3px;
}



/*cs-area*/
.cs-area{
	font-size: 0;
    padding: 30px 0;
    background: #f2f2f2;
    text-align: left;
}
.cs-area>div{
    display: inline-block;
    width: 50%;
    padding:0 10px 0 15px;
    box-sizing: border-box;
    vertical-align: top;
}
.cs-title{
    font-size: 13px;
    color: #323232;
}

.cs-area p{
    font-size: 12px;
    color: #666;
    letter-spacing: -.5px;
}
.cs-1 h2{
    font-size: 24px;
    font-family: Roboto;
    color: #323232;
    font-weight: 600;
    line-height: 1;
    margin: 5px 0 7px;
}


.cs-2 img{
    margin: 7px 0;
    width: 100px;
}
.cs-2 h3{
    font-family: roboto;
    font-size: 18px;
    color: #323232;
    font-weight: 600;
    letter-spacing: -.5px;
    line-height: 1;
    margin-bottom: 3px;
}
.cs-2  p b{color:#323232}



/* 상품 */
.category-title{
    font-size: 20px;
    font-weight: bold;
    color: #333333;
    padding: 0 0 7px 6px;
    line-height: 1;
	position:relative;
}
.category-title span{
	display: inline-block;
    font-size: 13px;
    font-weight: 300;
    color: #666;
    line-height: 1.2;
}
.category-title i{
    display: inline-block;
    text-indent: -9999px;
    width: 10px;
    height: 2px;
    background: #333;
    vertical-align: -15px;
    margin: 0 2px 0 4px;
}
.category-subtitle { 
	display:block;
	margin:-2px 0 6px;
	padding-left:6px;
	font-size:13px;
	color:#666;
}
.goods-thumb-area{
    width: 100%;
    height: 0;
    vertical-align: middle;
    position: relative;
    margin: auto;
    box-sizing: border-box;
    overflow: hidden;
    padding-top: 100%;
}
.goods-thumb-area img{
	position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}
.goods-info-area{
    padding: 10px;
    max-height: 104px;
    box-sizing: border-box;
}
.goods-info-area + span { 
	display:none;
}
.goods-info-area h5{
    font-size: 13px;
    color: #666;
    line-height: 1.4;
    text-align: left;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
	height:38px
}
.price-area{
    font-family: roboto;
    letter-spacing: -.5px;
    line-height: 1.4;
    margin-top: 7px;
}
.price-area .old{
    font-size: 12px;
    color: #ff0000;
    text-decoration: line-through;
}
.price-area .new{
    font-size: 17px;
    font-weight: 600;
    color: #111;
}
.price-area .new i{
    font-size: 11px;
    display: inline-block;
    margin-left: 2px;
    vertical-align: 1px;
}


/* 상품 2줄 */
.goods-col2{
	font-size: 0;
    padding: 0 3px;
}
.goods-col2 li{
	display: inline-block;
    width: calc(100%/2);
    padding:  3px;
    box-sizing: border-box;
	vertical-align:top
}
.goods-col2 li a{
	box-sizing: border-box;
    border: 1px solid #d7d7d7;
	display: block;
}

/* 메인카테고리 상품  */
.main-category{
    padding-top: 20px;
	border-top: 10px solid #f2f2f2;
}

.best-category.goods-col2 li:nth-child(4) ~ li { 
	display:none;
}
.category-goods.goods-col2 li:nth-child(6) ~ li { 
	display:none;
}
.category-goods.lines2 li:nth-child(4) ~ li { 
	display:none;
}


/* 상품 3줄 */
.goods-col3{
	font-size: 0;
    padding: 0 3px;
}
.goods-col3 ul{
	box-sizing: border-box;
    border-bottom: 1px solid #d7d7d7;
	padding-bottom: 10px;
}
.goods-col3:last-child ul,
.category-goods.none ul{border-bottom:0;}

.goods-col3 li{
	display: inline-block;
    width: calc(100%/3);
	width:33.33%;
    padding:  3px;
    box-sizing: border-box;
}
.product_item_list{
	padding-bottom: 20px;
}
/* 메인카테고리 상품  */
.main-category{
    padding-top: 20px;
}
.best-category .product_item_list { 
	padding-bottom:0;
}
.best-category .product_item_list:last-of-type { 
	padding-bottom:20px;
}


/* 카테고리상품 */
.category-goods .category-title .plus{
    display: inline-block;
    border: 1px solid #e1342e;
    box-sizing: border-box;
    width: 25px;
    height: 25px;
    position: absolute;
    right: 5px;
    text-align: center;
	top:-2px
}
.category-goods .category-title .plus:before,
.category-goods .category-title .plus:after{
    content: '';
    width: 13px;
    background: #e1342e;
    height: 1px;
    display: inline-block;
    vertical-align: middle;
}
.category-goods .category-title .plus:after{
    transform: rotate(90deg);
    margin-top: -38px;
}







/* 메인배너 */
.main-bnr-area{
	border-top: 10px solid #f2f2f2;
}



/*좌측메뉴*/

.category-header{
	background:#f43c06;
	padding:10px 15px;
	position:relative;
}
.category-header ul li{float:left; margin-right:4px}
.category-header ul li a{
    color: #fff;
    font-size: 13px;
    background:rgba(56, 29, 22, 0.5);
    box-sizing: border-box;
    width: 80px;
    text-align: center;
    height: 30px;
    line-height: 28px;
}
/*.category-close{
	width:50px;
	height:50px;
	position:absolute;
	top:0;
	right:0;
	cursor:pointer
}*/
.category-close{
	width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    left: 100%;
    cursor: pointer;
    padding-top: 15px;
    padding-left: 19px;
    padding-right: 53px;
    padding-bottom: 625px;
}
.category-close:after,
.category-close:before{
   content: '';
    display: inline-block;
    width: 4px;
    height: 30px;
    background: #fff;
    vertical-align: middle;
    transform: rotate(45deg);
    position: absolute;
}
.category-close:before{ transform: rotate(-45deg);}



.category_menu_1dephs>ul>li {
    border-bottom: 1px solid #d7d7d7;
    box-sizing: border-box;
    position: relative;
}
.category_menu_1dephs>ul>li>a {
    font-size: 14px;
    color: #333;
    padding: 10px 15px;
	display:block;
}
.category_menu_1dephs > ul > li > a.on{
    background: #242321;
    color: #fff;
	
}

.category_btn{
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
    width: 42px;
    height: 42px;
}
.category_btn:after,
.category_btn:before{
	content: '';
    display: inline-block;
    width: 1px;
    height: 13px;
    background: #aaa;
    vertical-align: middle;
    transform: rotate(90deg);
    position: absolute;
    top: 50%;
    left: 18px;
    margin-top: -6px;
	transition:.4s
}
.category_btn:before{transform: rotate(180deg);}
.category_btn input{
    width: 100%;
    height: 100%;
    border: 0;
    background: none;
}
.category_btn.open:after,
.category_btn.open:before{
    background: #fff;
    transform: rotate(270deg);
}
.category_btn.open:before{opacity:0}

.category_menu_2dephs{width:100%; display:none;}
.category_menu_2dephs > ul > li{
    border-bottom: 1px solid #373635;
    box-sizing: border-box;
}
.category_menu_2dephs > ul > li a{
    display: block;
    background: #2b2a28;
    font-size: 13px;
    color: #fff;
    padding: 8px 15px;
	position:relative;
}

.category_menu_2dephs > ul > li a:after,
.category_menu_2dephs > ul > li a:before{
    content: '';
    display: inline-block;
    width: 1px;
    height: 10px;
    background: #fff;
    vertical-align: middle;
    transform: rotate(90deg);
    position: absolute;
    top: 50%;
    right: 23px;
    margin-top: -6px;
}
.category_menu_2dephs > ul > li a:before{ transform: rotate(180deg);}


/* .category_orange_up_btn{background:url('/skin/m_modern/images/button/button.png') no-repeat -161px -99px; width:38px; height:24px;
padding:0;border:0; cursor:pointer; overflow:visible; border:0;}
.category_orange_down_btn{background:url('/skin/m_modern/images/button/button.png') no-repeat -119px -99px; width:38px; height:24px;
padding:0;border:0; cursor:pointer; overflow:visible; border:0;}
.category_gray_up_btn{background:url('/skin/m_modern/images/button/button.png') no-repeat -161px -124px; width:38px; height:24px;
padding:0;border:0; cursor:pointer; overflow:visible; border:0;}
.category_gray_down_btn{background:url('/skin/m_modern/images/button/button.png') no-repeat -119px -124px; width:38px; height:24px;
padding:0;border:0; cursor:pointer; overflow:visible; border:0;}
 */


 /*검색바*/
.search_box{
    position: relative;
    margin: 0 15px 10px 15px;
}
 .search_box input.search{
    display: block;
    background: #ececec;
    padding: 10px 15px;
    font-size: 13px;
    font-weight: 100;
    width: 100%;
    border-radius: 5px;
    border: 0;
 }
 .search_box .top_search_btn{
	background: #e1342e  url('/skin/m_modern/images/search-icon.png') no-repeat center/45%;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    padding: 0 25px;
    border-radius: 0 5px 5px 0;
    font-size: 0;
    display: inline-block;
	border:0
 }


/*푸터 페이지*/
 .provision_text {
    width: 100%;
    height: 400px;
    padding: 20px;
    background: #fff;
    border: 1px solid #d7d7d7;
    margin-top: 20px;
    overflow-y: auto !important;
    background: #f9f9f9;
}
#scroller table{
    margin: 0 !important;
}


.footer-info-txt{
    padding: 20px 10px;
    font-size: 13px;
    line-height: 21px;
    word-break: keep-all;
}


/* main visual */
.swipe {
	overflow: hidden;
	visibility: hidden;
	position: relative;
}
.swipe-wrap {
	overflow: hidden;
	position: relative;
}
.swipe-wrap > div {
	float:left;
	width:100%;
	position: relative;
}


.mainSwipe_btn{position:relative;    margin:-29px 0 11px; text-align:center;}
.mainSwipe_btn ul{display:inline-block;}
.mainSwipe_btn ul li{
    float: left;
    width: 11px;
    height: 11px;
    background: #fff;
    border-radius: 50%;
    margin-right: 5px;
}
.mainSwipe_btn ul li:last-child{margin-right:0}
.mainSwipe_btn ul li.on{background:#e1342e}


/*이벤트 */
.event-area .sub-title{display:none}
.eventzone_title {
    margin: 0 auto;
    padding-bottom: 15px;
    width: 100%;
    text-align: center;
    line-height: 1;
    font-size: 18px;
    font-weight: bold;
    color: #333;
    border-bottom: 1px solid #ddd;
}
.eventzone_date {
	padding: 12px;
    text-align: center;
    border: 1px solid #ddd;
    font-size: 14px;
    font-weight: 500;
    background-color: #f6f6f6;
    margin: 15px 5px 0;
    box-sizing: border-box;
}
.eventzone_con{padding: 15px 5px;}



.item-list .goods-icon .sold-out {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: inline-block;
    margin: auto;
    line-height: 52px;
    text-align: center;
    color: #fff;
    background: rgba(0,0,0,0.7);
    border-radius: 50%;
}

/* 출석체크 페이지 
------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*#attendance_bg  { margin:0px 15px; box-sizing: border-box;background:#cde1d1;background: -webkit-radial-gradient(#fff, #cde1d1);padding-bottom: 20px;} */
#attendance_bg  { position:relative; margin:0px 15px; box-sizing: border-box; background:#7e2132; padding-bottom: 6px; text-align:center;} 
.attendamc_title{ margin: 0 auto; margin:30px 0 20px; width: 100%; text-align: center; line-height: 1; font-size: 22px; font-weight: bold; color: #333;}
.attendance {width:100%;max-width:740px;min-width:200px; max-height:467px;min-height:207px;height:300px; margin:0 auto; border:1px solid #d1d0d0;}
.attendance th {padding:8px 0px;background-color:#e9e9e9; border-bottom:1px solid #d1d0d0; border-right:1px solid #d1d0d0;font-weight: normal; font-family: "verdana"; font-size:12px; line-height:12px; color:#666; letter-spacing: -1px;}
.attendance td {text-align:left; vertical-align:top; margin:0; padding:3px 0px 5% 7px; background-color:#fff; border-right:1px solid #d1d0d0; border-bottom:1px solid #d1d0d0;font-size:12px;color:#b4b4b4;}
.attendance th:last-child, .attendance td:last-child {border-right:0px;}
.attendance tr:last-child {border-bottom:0px;}
.e_txt{margin:20px auto; max-width:740px; overflow:hidden; position:relative; padding-bottom:50px;}
.e_txt ul.e_tit1{display:inline-block; margin-left:0; float:left; text-align:left;}
.e_txt ul.e_tit1 li{padding-left:15px; box-sizing:border-box; font-size:14px; color:#fe9396; position:relative; word-break:keep-all;}
.e_txt ul.e_tit1 li:before{content:''; width:3px; height:3px; border-radius:50%; top:9px; left:0; margin-left:5px; background:#eda1a3; position:absolute;}
.e_txt ul.e_tit1 li:nth-child(2){margin-bottom:21px;}
.e_txt ul.e_tit2{display:inline-block; margin-left:3px; float:left; text-align:left; position:absolute; top:0; left:75px;}
.e_txt ul.e_tit2 li{padding:0; box-sizing:border-box; font-size:14px; color:#fe9396; position:relative; word-break:keep-all;}
.e_txt ul.e_tit2 li:before{content:''; width:0; height:0;}
.date_selector {text-align: center;padding:20px 0px;}
.btn_arrow {vertical-align:middle;}
.btn_today {margin-left:10px;}
.m_check_deco{position:absolute; top:270px; right:20px;}
.select_date {margin:0px 10px; font-weight:bold; font-size:20px; font-family:"verdana"; vertical-align:middle;}
.att_check {background:url('/skin/m_modern/images/event/attend_stamp.png'); background-repeat:no-repeat; background-position:center center;}

#calendar_btn{text-align:center; margin:0 auto; width:150px; height:38px; box-sizing:border-box; background:#fe9396; margin-bottom:15px; position:absolute; top:-50px; left:50%; transform:translateX(-50%)}
#calendar_btn a{font-size:15px; line-height:38px; display: block; color:#7e2132; font-weight:bold;}

/*#event_description {position:relative; text-align:center ;padding-top:40px;background: url('/skin/m_modern/images/event/attend_bg.png') repeat-x;}*/
#event_description .main_title{ font-size:26px; margin-bottom:5px;line-height:32px;color:#333; font-weight: 400; letter-spacing: -2.5px;}
#event_description .main_title strong{}
#event_description .main_text {font-weight:bold; font-size:14px;  line-height:18px; color:#666666; letter-spacing:0.5px;}
#event_description .sub_text {margin-top:10px; font-size:12px; line-height:16px; color:#666666;font-family: 'Dotum'; letter-spacing: -1px;}
#event_description .coupon_name {text-decoration:underline; font-family:"Verdana", "Dotum"; font-weight:bold; font-size:16px; word-spacing:-0.15em; line-height:30px; color:#565955; text-shadow:2px 2px 1px #fff;}
#event_description .point_box{color:#e42d41; font-weight: bold;}
.event_calendar_body {position:relative; margin:0px 6px;}


/* 트렌드쇼핑 */
.trendItem { overflow:hidden; padding:20px 3px; border-top: 10px  solid #f2f2f2; }
.trendItem .swiper-slide { padding:0; width:250px; }
.trendItem .swiper-slide a { padding:0 3px; }
.trendItem .swiper-slide a:before { content:'상품 보러가기'; position:absolute; left:50%; bottom:13px; z-index:55; display:block; margin-left:-50px; padding-left:7px; width:100px; border:1px solid #ccc; box-sizing:border-box; font-weight:300; font-size:12px; line-height:28px; color:#777; letter-spacing:-1px; transition:.3s; cursor:pointer; }
.trendItem .swiper-slide a:hover:before { border-color:#111; box-shadow:0 10px 10px rgba(0,0,0,.1); background:#111; color:#fff; }
.trendItem .swiper-slide a:after { content:''; position:absolute; bottom:25px; left:50%; z-index:55; margin-left:37px; width:4px; height:7px; background:url('/skin/f_allgmall/images/main/trend_more_arrow.png') no-repeat 0 0; transition:.3s; }
.trendItem .swiper-slide a:hover:after { background:url('/skin/f_allgmall/images/main/trend_more_arrow_hover.png') no-repeat 0 0; }
.trendItem .swiper-slide a img { width:100%; }