@charset "utf-8";

.att input, .att button, .att textarea	{outline: none; margin: 0}
.att textarea	{resize: vertical;}
.att button, .att input[type=button]	{cursor: pointer; padding: 0; margin: 0;-webkit-font-smoothing: subpixel-antialiased !important;}
.att button	{background: none; border: none;}
.att h1, .att h2:not(.w_headline), .att h3, .att h4, .att h5	{padding: 0; margin: 0; font-weight: normal;}
.att p	{padding: 0; margin: 0;}
.att a	{text-decoration: none;}
.att ol, .pp_bd ul	{list-style: none; padding: 0; margin: 0;}

.txt_wide	{letter-spacing: 0.15em;}
.att .ppbt	{display: inline-block; height: 32px; box-sizing: border-box; border-radius: 2px; text-align: center; letter-spacing: 0; vertical-align: middle; white-space: nowrap;}
.att .bt_mono	{transition-property: background-color, border; transition-duration: 0.2s; transition-timing-function: ease-in; letter-spacing: 0;}
.att .bt_color	{transition-property: background-color, border; transition-duration: 0.2s; transition-timing-function: ease-in; letter-spacing: 0;}
.att .ppbt i,
.att .ppbt svg	{line-height: 100%;}
.att .ppbt i+span,
.att .ppbt svg+span	{margin-left: 5px;}
.att .ppbt_right .ppbt	{margin-left: 3px;}
.att .ppbt_left .ppbt	{margin-right: 3px;}
.att .ppbt_center .ppbt	{margin: 0 1.5px;}
.att .hide	{display: block; visibility: hidden; padding: 0; margin: 0; height: 0; width: 0; overflow: hidden;}

a.bt_mono,
button.bt_mono	{border: 1px solid #e5e5e5; background-color: #FFF;}
a.bt_color,
button.bt_color	{border: 1px solid #e5e5e5; background-color: #f7f7f7;}

.ppip	{display: inline-block; height: 32px; line-height: 32px; padding: 0 10px; box-sizing: border-box; border-radius: 2px; transition-property: background-color, border; transition-duration: 0.2s; transition-timing-function: ease-in; vertical-align: middle; border: 1px solid #e5e5e5; background-color: #FFF;}
.ppip:focus	{background-color: #FFFFE9 !important; border: 1px solid #E8E8D3;}

.att .pnt_col	{color: #E25E5E;}
.att .pp_link	{color: #4BB089}
.att .pp_link2	{color: #4BB089; text-decoration: underline;}

.att	{position: relative;}

.att_header	{position: relative;}
.att_header h2	{position: relative; display: inline-block; z-index: 2;}
.att_header .att_desc	{color: #AAA;}
.att_header>ul	{position: absolute; right: 0; top: 0;}
.att_header>ul>li	{display: inline-block; position: relative; margin-left: 15px;}
.att_header>ul>li i,
.att_header>ul>li svg	{color: #CCC; vertical-align: middle; transition-property: color; transition-duration: 0.3s;}
.att_header>ul>li a	{color: #AAA; transition-property: color; transition-duration: 0.3s;}
.att_header>ul>li a.active	{color: #333;}
.att_header>ul>li a.active i,
.att_header>ul>li a.active svg	{color: #666;}

.att_navi	{position: relative; padding-bottom: 15px; padding-top: 25px;}
.att_navi .att_date .date_text	{color: #AAA;}
.clock_check	{display: inline-block; padding: 0 8px; border-radius: 2px; color: #FFF; vertical-align: middle; margin-right: 5px; margin-bottom: 9px;}
.clock_today	{background-color: #4BB089;}
a.clock_bt	{background-color: #E25E5E; color: #FFF !important;}

.myatt_info	{display: none; padding: 15px 25px; border: 10px solid #EEE; background-color: #FFF;}

.att_sat	{}
.att_sat .bt_att_info	{color: #AAA; }
.att_sat .sat_title	{display: inline-block; padding: 12.5px; border-right: 1px dotted #DDD; white-space: nowrap;}
.att_sat .sat_content	{padding: 13px;}
.att_sat .att_info_rank	{display: inline-block; border-radius: 2px; padding: 2px 3px;}

.cal_table	{width: 100%; border-collapse: collapse; background-color: #FFF;}
.cal_caption	{position: relative; padding: 15px 0;}
.cal_caption .year	{color: #AAA;}
.cal_caption .month	{display: inline-block; padding-top: 7px;}
.cal_nav	{position: absolute; left: 50%; top: 37px; text-align: left;}
.cal_nav,
.cal_nav a	{color: #CCC;}
.cal_nav a:hover	{color: #333;}
.cal_nav .att_next	{float: right;}
.cal_table thead tr	{background-color: #f7f7f7;}
.cal_table th,
.cal_table td	{border: 1px solid #e5e5e5;}
.cal_table th	{padding: 8px 0; text-transform: uppercase; color: #888;}
.cal_table .sunday	{color: #E25E5E;}
.cal_table .saturday	{color: #3F639F;}
.cal_table td	{width: 14%;}
.cal_table .day_unit	{position: relative; width: 100%;}
.cal_table .day_unit.active	{background-color: #FFFFE9;}
.cal_table .day_unit>div	{position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.cal_table .day_link	{position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 3;}
.cal_table .day_text	{padding: 5px; text-align: right;}
.cal_table .dm_wrap	{position: absolute; text-align: center; overflow: hidden;}
.cal_table .dm	{width: 100%; height: 100%;}
.cal_table .dm.day_ask	{ color: #333;}
.cal_table .dm i,
.cal_table .dm svg	{vertical-align: middle; padding-bottom: 2px;}
.cal_table .dm_count	{position: absolute; padding: 5px 0; text-align: center; background-color: rgba(0,0,0,0.4); color: #FFF; white-space: nowrap; z-index: 2;}

.cal_info	{padding-top: 10px; text-align: right; color: #AAA;}

.no_att	{text-align: center;}
.att_info	{padding: 10px; background-color: #F4FCFA; border: 1px solid #E4F4F1; text-align: right; letter-spacing: 0.05em;}
.att_info>ul>li	{display: inline-block; position: relative; margin-left: 20px;}
.att_info>ul>li:last-child::after	{content: ''; position: absolute; left: -12px; top: 2px; width: 1px; height: 10px; background-color: #CCC;}
.att_list>ul	{background-color: #FFF; border: 1px solid #e5e5e5; border-top: none; color: #AAA;}
.att_list>ul>li	{position: relative; min-height: 30px; line-height: 30px; padding: 8px 10px; border-bottom: 1px solid #e5e5e5; overflow: hidden;}
.att_list>ul>li:last-child	{border-bottom: none;}
.att_list_info	{display: inline-block;}
.att_list_info>li	{display: inline-block;}
.att_body p	{display: inline-block; vertical-align: middle; color: #666;}
.att_pf	{display: inline-block; width: 30px; height: 30px; border-radius: 15px; overflow: hidden; vertical-align: middle; margin-right: 5px; background: #f7f7f7 url(../images/profile.png) no-repeat center center; background-size: cover; overflow: hidden;}
.att_pf img	{width: 30px; height: auto;}
.att_list_date	{display: inline-block; vertical-align: middle; padding-top: 2px; margin-left: 3px; color: #AAA;}

.att_list .my_att	{background-color: #FFFFE9;}

.att_rank	{margin-right: 5px;}
.att_rank_count	{display: inline-block; padding: 2px 4px; margin-right: 5px; line-height: 100%; border-radius: 2px; background-color: #DDD; color: #FFF;}
.att_rank_count1	{background-color: #D4AF37; color: #FFF;}
.att_rank_count2	{background-color: #A9A9A9; color: #FFF;}
.att_rank_count3	{background-color: #B08D55; color: #FFF;}
.att_nickname,
.att_point	{color: #333;}
.att_list_info	{margin-left: 5px;}
.att_list_info>li	{position: relative; margin-right: 15px;}
.att_list_info>li::after	{content: ''; position: absolute; right: -9px; top: 11px; width: 1px; height: 8px; background-color: #DDD;}
.att_list_info>li:last-child::after	{content: none;}
.att_perfect a	{color: #AAA; text-decoration: underline;}
.att_perfect a:hover	{text-decoration: none;}

.att_msg	{margin: 25px 0; padding: 10px; border: 1px dashed #DDD; background-color: #FFF; text-align: center;}

.att_write	{margin: 25px 0;}
.att_write .ppip	{width: 400px; max-width: calc(100% - 85px);}
.att_write .bt_color	{width: 80px; margin-left: 5px;}

.att .paging	{position: relative; margin-top: 25px; height: 48px; padding: 0 36px; box-sizing: border-box; background-color: #FFF; border-radius: 5px; text-align: center; border: 1px solid #e5e5e5;}
.att .paging .paging_wrap	{padding-top: 15px;}
.att .paging .bt_last	{margin-left: 5px;}
.att .paging .bt_first	{margin-right: 5px;}
.att .paging .bt_prev	{display: inline-block; position: absolute; top: 0; left: 0; max-width: 16px; height: 46px; line-height: 46px; padding: 0 10px; text-align: center; cursor: default; color: #AAA; border-right: 1px solid #e5e5e5;}
.att .paging .bt_next	{left: auto; right: 0; border-left: 1px solid #e5e5e5; border-right: none !important; color: #AAA;}
.att .paging .bt_prev.active	{transition-property: color; transition-duration: 0.2s; transition-timing-function: ease-in; cursor: pointer; color: #333;}
.att .paging .bt_prev.active:hover	{color: #E25E5E;}
.paging .page_num	{display: inline-block; margin: 0 3px; padding: 3px 6px 2px; line-height: 100%;}
.paging .page_num.on	{border-radius: 2px; background-color: #FFF4F4; border: 1px solid #F5E1E1;}

/* gift */
.pp_table	{width: 100%; border-collapse: collapse; border: 1px solid #e5e5e5; border-bottom: none; background-color: #FFF;}
.pp_table tr	{border-bottom: 1px solid #e5e5e5;}
.pp_table th	{background-color: #f7f7f7; white-space: nowrap;}

/* message */
.ppbd_message	{margin: 0 auto; padding: 25px 0; border: 1px solid #e5e5e5; background-color: #FFF; text-align: center;}
.ppbd_message h3	{margin-bottom: 25px;}
.ppbd_message .ppip	{margin-bottom: 25px;}

.modify_table	{margin: 0 auto 20px;}
.modify_table td,
.modify_table th	{padding: 10px; text-align: left;}
.modify_table th	{text-align: right;}
.modify_table .ppip	{margin: 0;}