@charset "utf-8";
/*헤더 부분*/
.recom_header_wrap{ width: 100%; }

.recom_headWrap {width: 1100px; margin: 0 auto; }

/*gnb full version*/
.recom_headWrap .recom_gnbWrap{ height: 70px; position: relative;}
.recom_headWrap .recom_gnbWrap h1 { position: absolute; top: 15px; left: 0;  }
.recom_headWrap .recom_gnbWrap ul { height: 71px; position: absolute; bottom: -1px; right: 0; }
.recom_headWrap .recom_gnbWrap ul li {float: left;}
.recom_headWrap .recom_gnbWrap ul li a{ position: relative; text-align: center; padding: 0 10px; display: block; height: 70px; line-height: 70px; font-size: 16px; font-weight: bold; letter-spacing: -0.5px; }
.recom_headWrap .recom_gnbWrap ul li.charge a{ color:#B82A17;}
.recom_headWrap .recom_gnbWrap ul li.exchange a { color:#036DB1; }
.recom_headWrap .recom_gnbWrap ul li a.event_menu { padding-right: 35px; }
.recom_headWrap .recom_gnbWrap ul li a.event_menu span.event_stat { font-size: 9px; color: #000; line-height: 20px; text-align: center; background: url('/s/front/images/event_star.png') center no-repeat; display: block; width: 20px; height: 20px; position: absolute; top: 24px; right: 10px; }
.recom_headWrap .recom_gnbWrap ul li a.event_menu:hover div.event_copy { display: block; }
.recom_headWrap .recom_gnbWrap ul li a.event_menu div.event_copy { position: absolute; top: 70px; left: 50%; margin-left: -110px; width: 200px; background: #f45530; border-radius: 5px; padding: 10px; display: none; }
.recom_headWrap .recom_gnbWrap ul li a.event_menu div.event_copy span.arrow { display: block; width: 0; border-bottom: 7px solid #f45530; border-top: 7px solid transparent; border-left: 7px solid transparent; border-right: 7px solid transparent; position: absolute; top: -14px; left: 50%; margin-left: -7px; }
.recom_headWrap .recom_gnbWrap ul li a.event_menu div.event_copy p { font-size: 12px; color: #fff; text-align: center; font-weight: bold; line-height: 36px; }

.recom_headWrap .recom_gnbWrap ul li.live a span{text-align: center; display: block; width: 25px; height: 24px; line-height: 24px; margin:11px 0 0 2px; font-family: 'Tahoma', sans-serif; font-weight: bold; font-size: 13px; color: #000; background: #e6ec1a; float:right; border-radius:14px;}

.recom_headWrap .recom_gnbWrap ul li a:hover { color: #ffcc00; border-bottom:1px solid #ffcc00; }
.recom_headWrap .recom_gnbWrap ul li a.selected{ color: #ffcc00; border-bottom:1px solid #ffcc00; }
.recom_headWrap .recom_gnbWrap ul li.charge a:hover { color: #FF2D11; border-bottom:1px solid #FF2D11; }
.recom_headWrap .recom_gnbWrap ul li.charge a.selected{ color: #FF2D11; border-bottom:1px solid #FF2D11; }
.recom_headWrap .recom_gnbWrap ul li.exchange a:hover { color: #009BFF; border-bottom:1px solid #009BFF; }
.recom_headWrap .recom_gnbWrap ul li.exchange a.selected{ color: #009BFF; border-bottom:1px solid #009BFF; }

.recom_headWrap .subWrap{ width: 100%; background: #222;  height: 34px; line-height: 34px; padding: 5px 0; }
.recom_headWrap .subWrap .sub { width: 1100px; margin: 0 auto; overflow: hidden; }
.recom_headWrap .subWrap .sub img {vertical-align: middle;}
.recom_headWrap .subWrap .sub div.idWrap{float:left; overflow: hidden;}
.recom_headWrap .subWrap .sub div.idWrap span.id_info { display: inline-block; float: left; height: 34px; line-height: 34px; }
.recom_headWrap .subWrap .sub div.idWrap a.btn_modify { overflow: hidden; border-radius: 17px; background: #333; display: inline-block; float: left; padding: 2px; width: 30px; height: 30px; }
.recom_headWrap .subWrap .sub div.idWrap a.btn_modify:hover { background: #f45530;}
.recom_headWrap .subWrap .sub div.idWrap span.btn_message { margin-left: 10px; overflow: hidden; border-radius: 17px; background: #333; display: inline-block; float: left; padding: 2px 10px; height: 30px; }
.recom_headWrap .subWrap .sub div.idWrap span.btn_message:hover { background: #f45530; }
.recom_headWrap .subWrap .sub div.idWrap span.btn_message a { display: block; height: 30px; line-height: 30px; }
.recom_headWrap .subWrap .sub div.idWrap span.btn_message a img { vertical-align: top; }
.recom_headWrap .subWrap .sub div.idWrap a.btn_logout { margin-left: 10px; overflow: hidden; border-radius: 17px; background: #333; display: inline-block; float: left; padding: 2px 10px; height: 30px; line-height: 30px; color: #aaa; }
.recom_headWrap .subWrap .sub div.idWrap a.btn_logout:hover { color: #fff; background: #444; }
.recom_headWrap .subWrap .sub div.subMenuWrap{ float:right; margin-right:10px; overflow: hidden;}
.recom_headWrap .subWrap .sub div.subMenuWrap span{float: left; margin-right: 20px; color: #999; letter-spacing: -0.2px;}
.recom_headWrap .subWrap .sub div.subMenuWrap .btnPointC { background: #333 url('/s/front/images/ico_refresh.png') 5px center no-repeat; margin-left: 10px; overflow: hidden; border-radius: 17px; display: inline-block; float: left; padding: 2px 10px 2px 35px; height: 30px; line-height: 30px; }
.recom_headWrap .subWrap .sub div.subMenuWrap .btnPointC:hover { background-color: #f45530; }
.recom_headWrap .subWrap .sub div.idWrap a.txtGray_w:hover { text-decoration: underline; }


.recom_body_wrap { width: 1100px; margin: 15px auto; position: relative; overflow: hidden; }

/*팝업영역*/
.accountPopupW{width:330px; height: 178px; border: 1px solid #999; background: #283742; position: absolute; left:50%; margin-left: -165px; top:20%; z-index: 2;}
.accountPopupW h1{height: 35px; line-height: 35px; padding: 0 15px; background: #111; font-size: 12px; font-weight: normal; overflow: hidden;}
.accountPopupW h1 span.btnCloseW{float:right; font-size: 14px; cursor: pointer;}
.accountPopupW div.contentW{width:292px; height: 65px; position: relative; margin: 46px auto;}
.accountPopupW div.contentW div span.cashW{float:right; text-align: right;}
.accountPopupW div.contentW div.inputW{margin-top: 8px; overflow: hidden;}
.accountPopupW div.contentW div.inputW input{width:150px;height: 25px; border: 0; padding:0 5px; float: left;}
.accountPopupW div.contentW div.inputW a.btnPopAcc{background: url('../images/btn_recom_pop_account.png') no-repeat; display: block; width:62px; height: 25px; float:left; margin: 0 4px;}
.accountPopupW div.contentW div.inputW a.btnCancel{background: url('../images/btn_recom_pop_cancel.png') no-repeat; display: block; width:62px; height: 25px; float:left;}

/*추천인등록팝업*/
.recomPopupW{width:330px; height: 178px; border: 1px solid #999; background: #283742; position: absolute; left:50%; margin-left: -165px; top:20%; z-index: 3;}
.recomPopupW h1{height: 35px; line-height: 35px; padding: 0 15px; background: #111; font-size: 12px; font-weight: normal; overflow: hidden;}
.recomPopupW h1 span.btnCloseRecomW{float:right; font-size: 14px; cursor: pointer;}
.recomPopupW div.contentWRe{width:292px; height: 85px; position: relative; margin: 29px auto;}
.recomPopupW div.contentWRe div.inputWRe {width:273px; margin:0 auto;}
.recomPopupW div.contentWRe div.inputWRe span {width:55px; height:25px; line-height: 25px; display: inline-block; margin:0 8px 3px 0; text-align: right;}
.recomPopupW div.contentWRe div.inputWRe input{width:180px;height: 25px; border: 0; padding:0 5px;}
.recomPopupW div.contentWRe div.inputWRe input.percentInput{width:80px; margin-right: 2px;}
.recomPopupW div.contentWRe div.popUpBtnW{ width:128px; margin: 5px auto 0 auto; overflow: hidden;}
.recomPopupW div.contentWRe div.popUpBtnW a.btnPopOk{background: url('../images/btn_recom_pop_ok.png') no-repeat; display: block; width:62px; height: 25px; float:left; margin: 0 4px 0 0;}
.recomPopupW div.contentWRe div.popUpBtnW a.btnCancelRe{background: url('../images/btn_recom_pop_cancel.png') no-repeat; display: block; width:62px; height: 25px; float:left;}


.dimBlack{width:100%; height: 100%; position:absolute; background: rgba( 0, 0, 0, 0.7); z-index: 1;}
/*왼쪽 영역*/
.recomLeftW{width:180px; float:left; background: url('../images/bg_recom_leftM.jpg') repeat-x;}

/*닉네임*/
.recomLeftW div.userNick{ line-height: 20px; background:#111; overflow: hidden; padding: 10px 0 10px 5px;}
.recomLeftW div.userNick img{vertical-align: middle; float: left;}
.recomLeftW div.userNick a.recom_message { display: inline-block; padding-left: 44px; color: #777; }
/*유저정보*/
.userInfo{width: 1080px; overflow: hidden; background: #222; padding: 15px 10px; }
.userInfo li{ padding-right: 40px; display: inline-block; float: left; text-align: left; overflow: hidden;}
.userInfo li h3{ font-size: 12px; line-height: 1.5em; color: #fff; font-weight: bold; margin-top:1px;}
.userInfo li p{ line-height: 1.5em;}
.userInfo li p em { font-style: normal; margin-right: 5px; }
.userInfo li a.btnAccount{display:block; width: 50px; height: 29px; line-height: 29px; margin-top:4px; padding: 0 15px; }

.recomLeftW .btnLogout{ display: block; margin-top: 10px; }


/*오른쪽 영역*/
.recomRightW{width:100%;float:right;}
.recomRightW .tabWrap{ position: relative; width: 100%; height: 34px; z-index: 5; background: #313131; border-top: 1px solid #000; border-bottom: 3px solid #666;}
.recomRightW .searchW{ float: right; margin-bottom:9px; }
.recomRightW .searchW input{ vertical-align:middle; border:0; padding: 0; padding-left: 5px; outline:none; height: 25px; width:110px; font-size: 12px; vertical-align:middle;}
.recomRightW .searchW input.dateW{width:80px;}
.recomRightW .searchW img {vertical-align: middle;}
.recomRightW td.txtAlignLeft{text-align: left;}
.recomRightW table.recomTable td a{color:#2984ea; text-decoration: underline;}
.recomRightW table.recomTable td a.boardTit {color:#fff; font-size: 11px; text-decoration: none; }
.recomRightW table.recomTable td.readM a.boardTit { color: #999; }
.recomRightW table.recomTable td { font-size: 11px; letter-spacing:-0.5px; }
.recomRightW table.recomTable td strong { font-weight:normal; }
.recomRightW h3 { width: 1085px; line-height: 40px; background: #111; padding-left: 15px; }

/*디테일뷰*/
.detailW{background: #222;}
.detailWPd {padding: 20px 10px 10px 10px;}


/*비밀번호 변경신청 레이어*/
.recoTable div.detail_wrap { width: 883px; padding: 30px 0 30px 30px; background: #222; text-align: left; }
.recoTable div.margin_bottom { margin-bottom: 10px; }

/* 지사, 총판 회원등록 가이드 */
dl.recom_guide { width: 913px; }
dl.recom_guide dt { width:893px; height: 34px; line-height: 34px; background: #111; text-align: left; padding-left: 20px; color: #ff5fff; }
dl.recom_guide dt span { float: right; font-size: 11px; padding-right: 15px; }
dl.recom_guide dd { position: relative; width:873px; padding: 20px 20px; background: #222; line-height: 20px; letter-spacing:-0.5px; margin-bottom: 20px; color:#999; }
dl.recom_guide dd p { line-height:30px; margin:10px 0; }
dl.recom_guide dd h2 { font-size: 14px; color:#fff; line-height:30px; margin:10px 0; }
dl.recom_guide dd p img { vertical-align: middle; }
dl.recom_guide dd p.sample {position: absolute; top:10px; right: 20px; display:inline-block; line-height:30px; margin:10px 0; text-align:right; color: #f00; font-size: 18px; font-weight: bold; }

/* 쪽지 도착 알림 레이어 */
.recom_message_wrap { z-index: 100; border-radius: 5px; background: #f45530; padding: 10px; display:inline-block; position:absolute; top: 46px; left: 430px; }
.recom_message_wrap span.layer_arrow { display: block; width: 0; border-bottom: 7px solid #f45530; border-top: 7px solid transparent; border-left: 7px solid transparent; border-right: 7px solid transparent; position: absolute; top: -14px; left: 50%; margin-left: -7px; }
.recom_message_wrap span.event_eff { display: block; text-align: center; font-weight: bold; font-size: 12px; color:#fff; height: 30px; line-height: 30px; }
.recom_message_btn_wrap { text-align: center; height: 30px; }
.recom_message_btn_wrap a { display: inline-block; background: #222; color: #fff; padding: 0 15px; height:30px; line-height: 30px; }
.recom_message_btn_wrap a:hover { background: #333; }
.recom_message_btn_wrap a.highlight { background: #ffcc00; color: #000; }
.recom_message_btn_wrap a.highlight:hover { background: #FFDC52; }