/* ●●●●● 기본레이아웃 상단 */
.common_pages_top {overflow:hidden; background:#fff; border-bottom:1px solid #ccc;}
.common_pages_top .this_page_name {position:relative; text-align:center; }
.common_pages_top .txt {font-size:16px; line-height:45px; color:#555863; margin:0 45px;}
.common_pages_top .btn_back {position:absolute; left:0; top:0; height:45px; width:50px; text-align:center; }
.common_pages_top .btn_back .shape {width:22px; height:1px; background:#555863; position:absolute; left:10px; top:50%;}
.common_pages_top .btn_back .shape:before {content:''; background:#555863; position:absolute; left:3px; top:0; margin-top:-8px; width:1px; height:10px; transform: rotate(45deg); -webkit-transform: rotate(45deg); }
.common_pages_top .btn_back .shape:after {content:''; background:#555863; position:absolute; left:3px; top:0;  margin-top:-1px; width:1px; height:10px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg);}

.common_pages_top .btn_openmenu {position:absolute; right:0; top:0; width:50px; height:45px; box-sizing:border-box; }

/*
스킨 적용 버튼문제 공통으로 사용하기 위해 수정
.common_pages_top .btn_openmenu .shape {background:#666; margin:17px 0 0 11px; position:relative;}*/
.common_pages_top .btn_openmenu .shape {background:#666; margin:17px 0 0 5px; position:absolute;}

.common_pages_top .btn_openmenu .shape:before {content:''; width:1px; height:14px; position:absolute; left:0; top:0; background:#555863; transform: rotate(45deg); -webkit-transform: rotate(45deg); margin:0 0 0 0}
.common_pages_top .btn_openmenu .shape:after {content:''; width:1px; height:14px; position:absolute; left:0; top:0; background:#555863; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); margin:0 0 0 -10px}


/*모바일 드랍다운 메뉴작동 문제 때문에 주석처리*/
/*
.common_pages_top .open_menu {display:none; background:rgba(0,0,0,0.05); padding:10px; }
.common_pages_top .open_menu ul {overflow:hidden; background:#fff; border:1px solid rgba(0,0,0,0.1)}
.common_pages_top .open_menu li {list-style:none; width:50%; float:left; border-bottom:1px solid rgba(0,0,0,0.1); box-sizing:border-box; border-right:1px solid rgba(0,0,0,0.1)}
.common_pages_top .open_menu li:nth-last-of-type(2) {border-bottom:0}
.common_pages_top .open_menu li:nth-of-type(2n) {border-bottom:1px solid rgba(0,0,0,0.1); border-right:0}
.common_pages_top .open_menu li:last-of-type {border-bottom:0}
.common_pages_top .open_menu .menu {padding:0 15px; height:34px; line-height:35px; color:#777; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; display: -webkit-box;}
.common_pages_top .open_menu .hit {color:#f54d4d}
.common_pages_top .if_open_menu .open_menu {display:block;} 
.common_pages_top .if_open_menu .btn_openmenu {transform: rotate(180deg); -webkit-transform: rotate(180deg); }
*/




.my_stats_wide {margin:20px 0px 0 0px; overflow:hidden; border:1px solid #ddd; position:relative;}
.my_stats_wide:before {content:''; height:100%; background:#ddd; position:absolute; left:50%; top:0; z-index:55}
.my_stats_wide li {list-style:none; width:100%; float:left;  position:relative; box-sizing:border-box; padding:10px; text-align:center;}
.my_stats_wide .inner_box {font-size:14px; overflow:hidden; margin-bottom:10px}
.my_stats_wide .opt {display:block; font-size:14px; margin-bottom:5px}
.my_stats_wide .value {float:left; font-family:'lato'; font-size:20px; float:left; color:#45484c;}
.my_stats_wide .unit {float:left; font-size:14px; margin:4px 0 0 0}





.cm_mypage_action_bonus {background:#fff; border:1px solid #e4e4e4; margin-bottom:20px; overflow:hidden; position:relative;}
.cm_mypage_action_bonus .my_level {text-align:center; width:200px; position:absolute; left:30px; top:10px;}
.cm_mypage_action_bonus .my_level .score {color:#fff; background:#4d4d57; height:40px; line-height:40px;}
.cm_mypage_action_bonus .my_level .level {background:#a0a0a0; overflow:hidden; background:#ea0700; height:70px; line-height:70px;}
.cm_mypage_action_bonus .my_level .level {display:block; font-family:'lato'; font-size:30px; font-weight:600; margin-bottom:10px; color:#fff}

.cm_mypage_action_bonus .my_score { overflow:hidden; border-right:1px solid #ddd;clear:both}

.cm_mypage_action_bonus .my_score ul {}

.cm_mypage_action_bonus .my_score li {position:relative; text-align:center; border-top:1px solid #ddd; border-bottom:1px solid #ddd; float:left; width:50%;  height:108px; list-style:none}


.cm_mypage_action_bonus .my_score li:first-child:nth-last-child(1) {width:100%}


.cm_mypage_action_bonus .my_score li:before {content:''; width:1px; height:100%; background:#ddd; position:absolute; left:0; top:0;}
.cm_mypage_action_bonus .my_score li:hover {background:#fafafa;}
.cm_mypage_action_bonus .my_score .opt {color:#333; height:40px; line-height:40px; border-bottom:1px solid #ddd;}
.cm_mypage_action_bonus .my_score .value {height:70px; line-height:70px; font-size:15px; color:#333}
.cm_mypage_action_bonus .my_score .value strong {font-size:17px; font-family:'lato'; color:#ff0000;  letter-spacing:0px;}

.cm_mypage_action_bonus .change_point {background:#eee; width:100%; height:50px;}
.cm_mypage_action_bonus .change_point li {text-align:center; list-style:none;margin-top:5px;}
.cm_mypage_action_bonus .change_point .input_design:focus {border:1px solid #ff0000;}
.cm_mypage_action_bonus .change_point .button_pack * {width:100%; height:35px;font-size:15px;font-weight:bold;}

.cm_mypage_action_bonus .change_point_botttom {background:#eee; width:100%; height:50px;}
.cm_mypage_action_bonus .change_point_botttom li {text-align:center; list-style:none;margin-top:5px;}
.cm_mypage_action_bonus .change_point_botttom .input_design:focus {border:2px solid #ff0000;}
.cm_mypage_action_bonus .change_point_botttom .button_pack * {width:100%; height:35px;font-size:15px;font-weight:bold;}


.cm_mypage_action_bonus .input_design_withdraw {width:140px; background:#fff; height:31px; line-height:31px; border:1px solid #333; padding:0 10px; text-align:right; color:#333; font-size:15px; font-weight:600; margin:18px 0 3px 0}
.cm_mypage_action_bonus .input_design_withdraw:focus {border:1px solid #ff0000;}



.main_tab {overflow:hidden;margin-top:-1px;}
.main_tab .btn {width:33.33333333333333%; float:left; box-sizing:border-box; border-left:1px solid #fff; color:rgba(0,0,0,0.6); font-size:14px; letter-spacing:-0.7px;border-radius: 0;}
.main_tab .btn {text-align:center; background:#e3e5eb; height:42px; line-height:42px;}
.main_tab .btn:first-child {border:none;}
.main_tab .btn_hit {color:#fff; background:#333;}




.main_tab_head {overflow:hidden;margin-top:-1px;}
.main_tab_head .btn {width:33.33333333333333%; float:left; box-sizing:border-box; border-left:1px solid #fff; color:#326bab; font-size:14px; letter-spacing:-0.7px;border-radius: 0;}
.main_tab_head .btn {text-align:center; background:#ffffff; height:42px; line-height:42px;border:1px solid #326bab}
.main_tab_head .btn:first-child {border-right:0px;}
.main_tab_head .btn:last-child {border-left:0px;}

.main_tab_head .btn_hit {color:#fff; background:#326bab;border:0px;}



.main_tab_sub {overflow:hidden;margin-top:-1px;}
.main_tab_sub .btn {width:33.33333333333333%; float:left; box-sizing:border-box;  color:#aaa; font-size:14px; letter-spacing:-0.7px;border-radius: 0;}
.main_tab_sub .btn {text-align:center; background:#ffffff; height:60px; line-height:22px;border-bottom:1px solid #ccc;border-right:1px solid #ccc;border-top:1px solid #ccc;}
.main_tab_sub .btn:first-child {border-left:1px solid #ccc;}
.main_tab_sub .btn:last-child {}

.main_tab_sub .btn_hit {color:#666; border-bottom:5px solid #999;border-left:1px solid #999;border-right:1px solid #999;border-top:1px solid #999;font-weight:bold}




.main_tab_col3 {overflow:hidden;margin-top:-1px;}
.main_tab_col3 .btn {width:33.33333333333333%; float:left; box-sizing:border-box; border-left:1px solid #fff; color:rgba(0,0,0,0.6); font-size:14px; letter-spacing:-0.7px;border-radius: 0;}
.main_tab_col3 .btn {text-align:center; background:#e3e5eb; height:42px; line-height:42px;}
.main_tab_col3 .btn:first-child {border:none;}
.main_tab_col3 .btn_hit {color:#fff; background:#333;}




.main_tab_style1 {overflow:hidden;}
.main_tab_style1 .btn {width:25%; float:left; box-sizing:border-box; border-left:1px solid #fff; color:rgba(0,0,0,0.6); font-size:11px; letter-spacing:-0.7px;}
.main_tab_style1 .btn {text-align:center; background:#fff; height:42px; line-height:24px;}
.main_tab_style1 .btn:first-child {border:none;}

.main_tab_style1 .btn .txt_box {width:97%;margin:5px 0px;padding:0px 0px;border-radius:7px;background:#efefef;}
.main_tab_style1 .btn .btn_hit {color:#fff; background:#b60019;}









.token_tid{clear:both;height:150px;width:100%;}
.token_tid .top{width:100%;background:#7fb3ff;padding-top:20px}
.token_tid .top h2{font-size:14px;font-weight:700;color:#fff;padding-bottom:16px}
.token_tid .top h2 img{width:32px;height:auto;vertical-align:middle;margin-right:8px}
.token_tid .top strong{font-size:24px;color:#fff;font-weight:700;text-align:right;display:block;padding-right:17px}
.token_tid .top strong img{width:24px;height:auto;vertical-align:middle;margin-right:12px}
.token_tid .top ul{margin-top:18px;padding-bottom:8px;padding-left:0}
.token_tid .top ul li{float:left;width:25%}
.token_tid .top ul li a{display:block;width:100%;height:100%}
.token_tid .top ul li a .icon{display:block;text-align:center}
.token_tid .top ul li a .icon img{width:32px;height:auto}
.token_tid .top ul li a h3{font-weight:700;text-align:center;color:#fff;padding-top:4px}
.token_tid .mid{background:#fff;width:100%;padding-bottom:12px}
.token_tid .mid .area{width:95%;margin:0 auto;padding-top:8px}
.token_tid .mid .area .tit{position:relative;height:32px;width:100%;margin-bottom:12px}
.token_tid .mid .area .tit .prev{position:absolute;left:0;top:50%;margin-top:-12px}
.token_tid .mid .area .tit .prev img{width:24px;height:auto}
.token_tid .mid .area .tit h3{position:absolute;top:50%;left:50%;margin-top:-16px;margin-left:-76px;width:152px;height:32px;line-height:32px;text-align:center;color:#3a79c7;-webkit-border-radius:16px; -moz-border-radius:16px; border-radius:16px;}
.token_tid .mid .area .tit .next{position:absolute;right:0;top:50%;margin-top:-12px}
.token_tid .mid .area .tit .next img{width:24px;height:auto}
.token_tid .mid .area .txt{width:100%;}
.token_tid .mid .area .txt .box{width:100%;}
.token_tid .mid .area .txt p{word-wrap: break-word;background:#f2f2f2;padding:7px 5px;font-weight:700;font-size:19px;font-weight:normal;text-align:center}
.token_tid .mid .area .txt .btn_wrap_tid{margin-top:12px;width:100%;font-weight:bold;}
.token_tid .mid .area .txt .btn_wrap_tid a{float:left;width:48%;height:40px;line-height:40px;font-size:14px;text-align:center}
.token_tid .mid .area .txt .btn_wrap_tid a.add{border:1px solid #3a79c7;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-border-radius:7px; -moz-border-radius:7px; border-radius:7px;color:#3a79c7}
.token_tid .mid .area .txt .btn_wrap_tid a.copy{background:#3a79c7;-webkit-border-radius:7px; -moz-border-radius:7px; border-radius:7px;color:#fff;margin-left:4%}
.token_tid .mid .area .txt .btn_wrap_tid a img{width:15px;height:auto;margin-right:7px;margin-top:-5px;vertical-align:middle}
.token_tid .btm{background:#fff;margin-top:12px}
.token_tid .btm .area{width:90%;margin:0 auto}
.token_tid .btm .area ul{width:100%}
.token_tid .btm .area ul li{padding:13px 0;border-bottom:1px solid #efefef;width:100%}
.token_tid .btm .area ul li a{display:block;width:100%;height:32px;line-height:32px;}
.token_tid .btm .area ul li a > *{float:left;}
.token_tid .btm .area ul li a .icon img{width:32px;height:auto;vertical-align:middle;margin-right:20px}
.token_tid .btm .area ul li a h4{width:70%;font-weight:700;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;overflow:hidden;}
.token_tid .btm .area ul li.alarm a .icon{margin-right:20px}
.token_tid .btm .area ul li.alarm a .icon em{display:block;width:28px;height:16px;background:#f9e7ba;text-align:center;line-height:16px;color:#3a79c7;-webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px;margin-top:4px}
.token_tid .btm .area ul li.alarm a .icon img{width:16px;height:auto;display:block;margin-left:auto;margin-right:auto}
.token_tid .btm .area ul li.alarm a h4{line-height:1;padding-bottom:8px}
.token_tid .btm .area ul li.alarm a p{color:#ccc;line-height:1}
.token_tid .black{position:fixed;top:0;left:0;width:100%;height:100%;background:#000;opacity:0;filter:Alpha(opacity=0);z-index:9;display:none;}





.token_tid_main{clear:both;height:50px;width:100%;}
.token_tid_main .top{width:100%;background:#7fb3ff;padding-top:20px}
.token_tid_main .top h2{font-size:14px;font-weight:700;color:#fff;padding-bottom:16px}
.token_tid_main .top h2 img{width:32px;height:auto;vertical-align:middle;margin-right:8px}
.token_tid_main .top strong{font-size:24px;color:#fff;font-weight:700;text-align:right;display:block;padding-right:17px}
.token_tid_main .top strong img{width:24px;height:auto;vertical-align:middle;margin-right:12px}
.token_tid_main .top ul{margin-top:18px;padding-bottom:8px;padding-left:0}
.token_tid_main .top ul li{float:left;width:25%}
.token_tid_main .top ul li a{display:block;width:100%;height:100%}
.token_tid_main .top ul li a .icon{display:block;text-align:center}
.token_tid_main .top ul li a .icon img{width:32px;height:auto}
.token_tid_main .top ul li a h3{font-weight:700;text-align:center;color:#fff;padding-top:4px}
.token_tid_main .mid{background:#fff;width:100%;padding-bottom:12px}
.token_tid_main .mid .area{width:95%;margin:0 auto;padding-top:8px}
.token_tid_main .mid .area .tit{position:relative;height:32px;width:100%;margin-bottom:12px}
.token_tid_main .mid .area .tit .prev{position:absolute;left:0;top:50%;margin-top:-12px}
.token_tid_main .mid .area .tit .prev img{width:24px;height:auto}
.token_tid_main .mid .area .tit h3{position:absolute;top:50%;left:50%;margin-top:-16px;margin-left:-76px;width:152px;height:32px;line-height:32px;text-align:center;color:#3a79c7;-webkit-border-radius:16px; -moz-border-radius:16px; border-radius:16px;}
.token_tid_main .mid .area .tit .next{position:absolute;right:0;top:50%;margin-top:-12px}
.token_tid_main .mid .area .tit .next img{width:24px;height:auto}
.token_tid_main .mid .area .txt{width:100%;}
.token_tid_main .mid .area .txt .box{width:100%;}
.token_tid_main .mid .area .txt p{word-wrap: break-word;background:#f2f2f2;padding:7px 15px;font-weight:700;font-size:15px;font-weight:normal;text-align:left}
.token_tid_main .mid .area .txt .btn_wrap_tid{font-weight:bold;}
.token_tid_main .mid .area .txt .btn_wrap_tid a{float:left;height:35px;line-height:35px;font-size:14px;text-align:center;}
.token_tid_main .mid .area .txt .btn_wrap_tid a.add{border:1px solid #3a79c7;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-border-radius:7px; -moz-border-radius:7px; border-radius:7px;color:#3a79c7}
.token_tid_main .mid .area .txt .btn_wrap_tid a.copy{background:#3a79c7;-webkit-border-radius:7px; -moz-border-radius:7px; border-radius:7px;color:#fff;padding:0px 20px;margin:0px 10px;}
.token_tid_main .mid .area .txt .btn_wrap_tid a img{width:15px;height:auto;margin-top:-5px;vertical-align:middle}
.token_tid_main .btm{background:#fff;margin-top:12px}
.token_tid_main .btm .area{width:90%;margin:0 auto}
.token_tid_main .btm .area ul{width:100%}
.token_tid_main .btm .area ul li{padding:13px 0;border-bottom:1px solid #efefef;width:100%}
.token_tid_main .btm .area ul li a{display:block;width:100%;height:32px;line-height:32px;}
.token_tid_main .btm .area ul li a > *{float:left;}
.token_tid_main .btm .area ul li a .icon img{width:32px;height:auto;vertical-align:middle;margin-right:20px}
.token_tid_main .btm .area ul li a h4{width:70%;font-weight:700;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;overflow:hidden;}
.token_tid_main .btm .area ul li.alarm a .icon{margin-right:20px}
.token_tid_main .btm .area ul li.alarm a .icon em{display:block;width:28px;height:16px;background:#f9e7ba;text-align:center;line-height:16px;color:#3a79c7;-webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px;margin-top:4px}
.token_tid_main .btm .area ul li.alarm a .icon img{width:16px;height:auto;display:block;margin-left:auto;margin-right:auto}
.token_tid_main .btm .area ul li.alarm a h4{line-height:1;padding-bottom:8px}
.token_tid_main .btm .area ul li.alarm a p{color:#ccc;line-height:1}
.token_tid_main .black{position:fixed;top:0;left:0;width:100%;height:100%;background:#000;opacity:0;filter:Alpha(opacity=0);z-index:9;display:none;}












/* ●●●●●●●●●● 주문내역조회 */
.cm_order_search_unique {background:#fff; margin:15px 0; overflow:hidden; padding:0 10px}
.cm_order_search_unique .period {overflow:hidden; display:table; width:100%; box-sizing:border-box;}
.cm_order_search_unique .period ul {display:table-row; }
.cm_order_search_unique .period li {list-style:none; display:table-cell; width:1%;}
.cm_order_search_unique .period .btn {display:block; padding:0 10px; line-height:30px; background:#fff; text-align:center; border:1px solid #ddd; border-right:0}
.cm_order_search_unique .period li:last-of-type .btn {border-right:1px solid #ddd}
.cm_order_search_unique .period .hit .btn {background:#485362; border:1px solid #485362; color:#fff; border-right:0 !important}
.cm_order_search_unique .period .hit+ li .btn {border-left:0}
.cm_order_search_unique .detail {overflow:hidden; margin-top:10px; position:relative;}
.cm_order_search_unique .detail .input_wrap {margin-right:55px}
.cm_order_search_unique .detail .input_wrap li {list-style:none; width:50%; float:left; box-sizing:border-box; padding:0 7px 0 0; position:relative;}
.cm_order_search_unique .detail .input_wrap li:last-of-type:before {content:'~'; position:absolute; left:0; top:0; width:14px; text-align:center; margin-left:-7px; font-size:15px; line-height:35px;}
.cm_order_search_unique .detail .input_wrap li:last-of-type {padding:0 0 0 7px}
.cm_order_search_unique .detail .input_date {border:1px solid #ddd; height:35px; box-sizing:border-box; padding:0 0 0 26px; width:100%; background:#fff url('../images/cm_images/ic_date.png') 8px center no-repeat; background-size:13px; letter-spacing:0}
.cm_order_search_unique .detail .input_date:focus {border:1px solid #666;}
.cm_order_search_unique .detail .dash {float:left; margin:0 5px; line-height:35px; font-size:14px}
.cm_order_search_unique .detail .button_pack {width:50px; position:absolute; right:0; top:0;}





/* 리스트테이블 */

.cm_bonus_list1 .list_TB {width:100%; background:#fff;clear:both;  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.09);border-radius: 10px;border-top:1px solid #ddd;}
.cm_bonus_list1 .list_TB li {vertical-align:middle;border-bottom:1px solid #ddd;border-left:1px solid #ddd;float:left;text-align:center;padding-top:5px;padding-bottom:5px;width:100%;padding-right:3px;list-style:none;overflow:hidden;height:35px; font-size:11px;}
.cm_bonus_list1 .list_TB li:last-child { border-right:1px solid #ddd;}


.cm_bonus_list2 .list_TB {width:100%; background:#fff;clear:both;  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.09);border-radius: 10px;border-top:1px solid #ddd;}
.cm_bonus_list2 .list_TB li {vertical-align:middle;border-bottom:1px solid #ddd;border-left:1px solid #ddd;float:left;text-align:center;padding-top:5px;padding-bottom:5px;width:50%;padding-right:3px;list-style:none;overflow:hidden;height:35px; font-size:11px;}
.cm_bonus_list2 .list_TB li:last-child { border-right:1px solid #ddd;}


.cm_bonus_list3 .list_TB {width:100%; background:#fff;clear:both;  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.09);border-radius: 10px;border-top:1px solid #ddd;}
.cm_bonus_list3 .list_TB li {vertical-align:middle;border-bottom:1px solid #ddd;border-left:1px solid #ddd;float:left;text-align:center;padding-top:5px;padding-bottom:5px;width:33.33%;padding-right:3px;list-style:none;overflow:hidden;height:35px; font-size:11px;}
.cm_bonus_list3 .list_TB li:last-child { border-right:1px solid #ddd;}


.cm_bonus_list4 .list_TB {width:100%; background:#fff;clear:both;  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.09);border-radius: 10px;border-top:1px solid #ddd;}
.cm_bonus_list4 .list_TB li {vertical-align:middle;border-bottom:1px solid #ddd;border-left:1px solid #ddd;float:left;text-align:center;padding-top:5px;padding-bottom:5px;width:25%;padding-right:3px;list-style:none;overflow:hidden;height:35px; font-size:11px;}
.cm_bonus_list4 .list_TB li:last-child { border-right:1px solid #ddd;}



.cm_bonus_list5 .list_TB {width:100%; background:#fff;clear:both;  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.09);border-radius: 10px;border-top:1px solid #ddd;}
.cm_bonus_list5 .list_TB li {vertical-align:middle;border-bottom:1px solid #ddd;border-left:1px solid #ddd;float:left;text-align:center;padding-top:5px;padding-bottom:5px;width:20%;padding-right:3px;list-style:none;overflow:hidden;height:35px; font-size:11px; }
.cm_bonus_list5 .list_TB li:last-child { border-right:1px solid #ddd;}




/* ●●●●●●●●●● 마이통계치 */
.cm_mypage_sumbox_unique {overflow:hidden; text-align:center; margin-bottom:5px}
.cm_mypage_sumbox_unique dt,.cm_mypage_sumbox_unique dd {text-align:center; color:#fff; box-sizing:border-box;}
.cm_mypage_sumbox_unique b {font-weight:600; letter-spacing:0px;}
.cm_mypage_sumbox_unique dt {background:#485362; font-size:17px; padding:15px 10px; overflow:hidden;}
.cm_mypage_sumbox_unique dd {background:#a5a5a5; line-height:16px; padding:10px}





/*수당박스 가로 정렬 부분*/
*, ::after, ::before {
  box-sizing: border-box; }


.m-0 {
  margin: 0 !important; }

.mt-0, .my-0 {
  margin-top: 0 !important; }

.mr-0, .mx-0 {
  margin-right: 0 !important; }

.mb-0, .my-0 {
  margin-bottom: 0 !important; }

.ml-0, .mx-0 {
  margin-left: 0 !important; }

.m-1 {
  margin: 0.25rem !important; }

.mt-1, .my-1 {
  margin-top: 0.25rem !important; }

.mr-1, .mx-1 {
  margin-right: 0.25rem !important; }

.mb-1, .my-1 {
  margin-bottom: 0.25rem !important; }

.ml-1, .mx-1 {
  margin-left: 0.25rem !important; }

.m-2 {
  margin: 0.5rem !important; }

.mt-2, .my-2 {
  margin-top: 0.5rem !important; }

.mr-2, .mx-2 {
  margin-right: 0.5rem !important; }

.mb-2, .my-2 {
  margin-bottom: 0.5rem !important; }

.ml-2, .mx-2 {
  margin-left: 0.5rem !important; }

.m-3 {
  margin: 1rem !important; }

.mt-3, .my-3 {
  margin-top: 1rem !important; }

.mr-3, .mx-3 {
  margin-right: 1rem !important; }

.mb-3, .my-3 {
  margin-bottom: 1rem !important; }

.ml-3, .mx-3 {
  margin-left: 1rem !important; }

.m-4 {
  margin: 1.5rem !important; }

.mt-4, .my-4 {
  margin-top: 1.5rem !important; }

.mr-4, .mx-4 {
  margin-right: 1.5rem !important; }

.mb-4, .my-4 {
  margin-bottom: 1.5rem !important; }

.ml-4, .mx-4 {
  margin-left: 1.5rem !important; }

.m-5 {
  margin: 3rem !important; }

.mt-5, .my-5 {
  margin-top: 3rem !important; }

.mr-5, .mx-5 {
  margin-right: 3rem !important; }

.mb-5, .my-5 {
  margin-bottom: 3rem !important; }

.ml-5, .mx-5 {
  margin-left: 3rem !important; }



.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px; }


.row {
  margin-left: -8px;
  margin-right: -8px; }

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-xl-1,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-10,
.col-xl-11,
.col-xl-12 {
  padding-left: 8px;
  padding-right: 8px; }

.m-0 {
  margin: 0 !important; }

.m-05 {
  margin: 5px !important; }

.m-1 {
  margin: 8px !important; }

.m-2 {
  margin: 16px !important; }

.m-3 {
  margin: 24px !important; }

.m-4 {
  margin: 32px !important; }

.m-5 {
  margin: 40px !important; }

.mt-0 {
  margin-top: 0 !important; }

.mt-05 {
  margin-top: 5px !important; }

.mt-1 {
  margin-top: 8px !important; }

.mt-2 {
  margin-top: 16px !important; }

.mt-3 {
  margin-top: 24px !important; }

.mt-4 {
  margin-top: 32px !important; }

.mt-5 {
  margin-top: 40px !important; }

.mb-0 {
  margin-bottom: 0px !important; }

.mb-05 {
  margin-bottom: 5px !important; }

.mb-1 {
  margin-bottom: 8px !important; }

.mb-2 {
  margin-bottom: 16px !important; }

.mb-3 {
  margin-bottom: 24px !important; }

.mb-4 {
  margin-bottom: 32px !important; }

.mb-5 {
  margin-bottom: 40px !important; }

.ml-0 {
  margin-left: 0 !important; }

.ml-05 {
  margin-left: 5px !important; }

.ml-1 {
  margin-left: 8px !important; }

.ml-2 {
  margin-left: 16px !important; }

.ml-3 {
  margin-left: 24px !important; }

.ml-4 {
  margin-left: 32px !important; }

.ml-5 {
  margin-left: 40px !important; }

.mr-0 {
  margin-right: 0px !important; }

.mr-05 {
  margin-right: 5px !important; }

.mr-1 {
  margin-right: 8px !important; }

.mr-2 {
  margin-right: 16px !important; }

.mr-3 {
  margin-right: 24px !important; }

.mr-4 {
  margin-right: 32px !important; }

.mr-5 {
  margin-right: 40px !important; }




.stat-box {
  background: #ffffff;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.09);
  border-radius: 10px;
  padding: 20px 24px; }
  .stat-box .title {
    font-size: 13px;
    color: #958d9e;
    font-weight: 500;
    display: block;
    margin-bottom: 8px;
    line-height: 1.4em; }
  .stat-box .value {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1em;
    color: #27173E; }

.bonusitem .item {
  background: #ffffff;
  box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.09);
  border-radius: 12px;
  border: 1px solid #DCDCE9;
  padding: 20px 20px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between; }
  .bonusitem .item:last-child {
    margin-bottom: 0; }
  .bonusitem .item p {
    font-size: 14px;
    margin: 0;
    color: #958d9e;
    font-weight: 500; }
  .bonusitem .item .detail {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    line-height: 1.2em; }
    .bonusitem .item .detail .image-block {
      margin-right: 16px; }
    .bonusitem .item .detail strong {
      display: block;
      font-weight: 500;
      color: #27173E;
      margin-bottom: 3px; }
  .bonusitem .item .right {
    padding-left: 10px; }
    .bonusitem .item .right .price {

	  font-size: 26px;

      font-weight: 700;
      color: #27173E;
      letter-spacing: -0.03em; }




/* 문제있음*/
/*

.badge {
  display: inline-block;
  padding: .25em .4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25rem;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; }

@media (prefers-reduced-motion: reduce) {
  .badge {
    transition: none; } }

a.badge:focus, a.badge:hover {
  text-decoration: none; }

.badge:empty {
  display: none; }

.btn .badge {
  position: relative;
  top: -1px; }

.badge-pill {
  padding-right: .6em;
  padding-left: .6em;
  border-radius: 10rem; }

.badge-primary {
  color: #fff;
  background-color: #007bff; }

a.badge-primary:focus, a.badge-primary:hover {
  color: #fff;
  background-color: #0062cc; }

a.badge-primary.focus, a.badge-primary:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5); }

.badge-secondary {
  color: #fff;
  background-color: #6c757d; }

a.badge-secondary:focus, a.badge-secondary:hover {
  color: #fff;
  background-color: #545b62; }

a.badge-secondary.focus, a.badge-secondary:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5); }

.badge-success {
  color: #fff;
  background-color: #28a745; }

a.badge-success:focus, a.badge-success:hover {
  color: #fff;
  background-color: #1e7e34; }

a.badge-success.focus, a.badge-success:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5); }

.badge-info {
  color: #fff;
  background-color: #17a2b8; }

a.badge-info:focus, a.badge-info:hover {
  color: #fff;
  background-color: #117a8b; }

a.badge-info.focus, a.badge-info:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5); }

.badge-warning {
  color: #212529;
  background-color: #ffc107; }

a.badge-warning:focus, a.badge-warning:hover {
  color: #212529;
  background-color: #d39e00; }

a.badge-warning.focus, a.badge-warning:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5); }

.badge-danger {
  color: #fff;
  background-color: #dc3545; }

a.badge-danger:focus, a.badge-danger:hover {
  color: #fff;
  background-color: #bd2130; }

a.badge-danger.focus, a.badge-danger:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5); }

.badge-light {
  color: #212529;
  background-color: #f8f9fa; }

a.badge-light:focus, a.badge-light:hover {
  color: #212529;
  background-color: #dae0e5; }

a.badge-light.focus, a.badge-light:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5); }

.badge-dark {
  color: #fff;
  background-color: #343a40; }

a.badge-dark:focus, a.badge-dark:hover {
  color: #fff;
  background-color: #1d2124; }

a.badge-dark.focus, a.badge-dark:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5); }


  .badge {
    border: 1px solid #000; }




	
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #27173E;
  margin: 0 0 10px 0; }
  h1 small,
  h2 small,
  h3 small,
  h4 small,
  h5 small,
  h6 small {
    color: rgba(39, 23, 62, 0.6); }
  h1 .badge,
  h2 .badge,
  h3 .badge,
  h4 .badge,
  h5 .badge,
  h6 .badge {
    line-height: 1em; }





.badge {
  font-size: 12px;
  line-height: 1em;
  border-radius: 100px;
  letter-spacing: 0;
  height: 22px;
  min-width: 22px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 400; }

.badge-primary,
a.badge-primary {
  background: #6236FF !important; }

.badge-secondary,
a.badge-secondary {
  background: #8494A8 !important; }

.badge-success,
a.badge-success {
  background: #1DCC70 !important; }

.badge-danger,
a.badge-danger {
  background: #FF396F !important; }

.badge-warning,
a.badge-warning {
  background: #FFB400 !important;
  color: #FFF; }

.badge-info,
a.badge-info {
  background: #754AED !important; }

.badge-light,
a.badge-light {
  background: rgba(255, 255, 255, 0.6) !important;
  color: #27173E; }

.badge-dark,
a.badge-dark {
  background: #222 !important; }

.badge-empty {
  display: block !important;
  min-width: 8px !important;
  width: 8px !important;
  height: 8px !important;
  padding: 0 !important;
  font-size: 0px; }

.appHeader .badge {
  min-width: 16px;
  height: 16px;
  line-height: 9px !important;
  font-size: 10px;
  padding: 0 4px !important;
  position: absolute;
  right: 2px;
  top: 10px; }

.appHeader .badge-empty {
  top: 14px; }


.appBottomMenu .badge {
  min-width: 16px;
  height: 16px;
  line-height: 9px !important;
  font-size: 10px;
  padding: 0 4px !important;
  position: absolute;
  right: 50%;
  transform: translateX(120%);
  top: -3px; }

.appBottomMenu .badge-empty {
  transform: translateX(200%);
  top: -1px; }


*/



.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px; }

.col {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%; }

.col-auto {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: auto;
  max-width: 100%; }

.col-1 {
  -ms-flex: 0 0 8.333333%;
  flex: 0 0 8.333333%;
  max-width: 8.333333%; }

.col-2 {
  -ms-flex: 0 0 16.666667%;
  flex: 0 0 16.666667%;
  max-width: 16.666667%; }

.col-3 {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%; }

.col-4 {
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%; }

.col-5 {
  -ms-flex: 0 0 41.666667%;
  flex: 0 0 41.666667%;
  max-width: 41.666667%; }

.col-6 {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%; }

.col-7 {
  -ms-flex: 0 0 58.333333%;
  flex: 0 0 58.333333%;
  max-width: 58.333333%; }

.col-8 {
  -ms-flex: 0 0 66.666667%;
  flex: 0 0 66.666667%;
  max-width: 66.666667%; }

.col-9 {
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%; }

.col-10 {
  -ms-flex: 0 0 83.333333%;
  flex: 0 0 83.333333%;
  max-width: 83.333333%; }

.col-11 {
  -ms-flex: 0 0 91.666667%;
  flex: 0 0 91.666667%;
  max-width: 91.666667%; }

.col-12 {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%; }


.recomid_attain_box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.recomid_attain_box .star_rec_icon {
  display: flex;
  flex-wrap:wrap;
}
.recomid_attain_box .star_rec_icon span {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  background: url('/pages_unique03/images/icons/user_rec.png') no-repeat;
  background-size:20px; 

}
.recomid_attain_box .star_rec_icon span.active {
  background: url('/pages_unique03/images/icons/user_rec_active.png') no-repeat;
  background-size:20px; 
}