@charset "utf-8";
@import url('//fonts.googleapis.com/earlyaccess/notosanskr.css');
@import url('//fonts.googleapis.com/css?family=Lato:400');

.att, .att table, .att button, .att input	{font-family: 'Noto Sans CJK KR', 'Noto Sans KR', 'apple sd gothic neo'; font-size: 13px; line-height: 100%;}

.txt_en	{font-family: 'Lato', 'Noto Sans CJK KR', 'Noto Sans KR', 'apple sd gothic neo'; line-height: 100%;}
.att .ppbt	{padding: 0 12px; line-height: 28px;}
.att .ppbt,
.att .ppip,
.att .ppbt svg	{font-size: 12px;}
.att .pp_link2:hover	{text-decoration: none;}

.bt_mono:hover	{border: 1px solid #CCC;}
.bt_color:hover	{border: 1px solid #CCC; background-color: #EEE;}

.att_header	{margin-bottom: 25px;}
.att_header h2	{font-size: 18px;}
.att_header .att_desc	{margin-top: 10px; line-height: 150%; font-size: 14px;}
.att_header>ul	{font-size: 16px;}
.att_header>ul>li i,
.att_header>ul>li svg	{padding-bottom: 3px; font-size: 18px;}
.att_header>ul>li a:hover	{color: #333;}
.att_header>ul>li a:hover i,
.att_header>ul>li a:hover svg	{color: #666;}
.att_header .gift_alert	{position: absolute; right: calc(100% + 10px); top: -5px; padding: 5px 10px; border: 1px solid #E8E8D3; background-color: #FFFFE9; white-space: nowrap; font-size: 12px;}
.att_header .gift_alert::before	{content: ''; position: absolute; left: 100%; top: 6px; width: 0; height: 0; border: 6px solid transparent; border-left: 6px solid #E0E0CC;}
.att_header .gift_alert::after	{content: ''; position: absolute; left: 100%; top: 7px; width: 0; height: 0; border: 5px solid transparent; border-left: 5px solid #FFFFE9;}
.att_header .gift_alert i,
.att_header .gift_alert svg	{margin-right: 2px; font-size: 12px;}

.att_navi .att_date	{font-size: 24px;}
.att_navi .att_date .date_text	{font-size: 13px;}
.att_navi .clock_check	{height: 24px; line-height: 24px;}
.att_manage	{position: absolute; right: 0; top: 25px;}

.myatt_info	{padding: 15px 25px; line-height: 180%;}

.att_sat	{position: absolute; left: 0; top: 0; z-index: 1; font-size: 13px;}
.att_sat .bt_att_info	{margin: -2px 0 0 55px; font-size: 18px;}
.att_sat ul	{display: none; margin-top: 10px; background-color: #FFF; border-radius: 10px; box-shadow: 0 0 15px rgba(0,0,0,0.15); z-index: 1;}
.att_sat:hover ul	{display: block;}
.att_sat li	{display: inline-block; width: 50%; border-bottom: 1px solid #e5e5e5; box-sizing: border-box;}
.att_sat li:nth-child(odd)	{border-right: 1px solid #e5e5e5;}
.att_sat li:nth-child(7),
.att_sat li:nth-child(8)	{border-bottom: none;}
.att_sat .att_info_rank	{font-size: 12px;}

.cal_caption	{border: 1px solid #e5e5e5; border-bottom: none; background-color: #FFF;}
.cal_caption .month	{font-size: 30px;}
.cal_nav	{width: 80px; margin-left: -40px; font-size: 12px;}
.cal_table th	{font-size: 10px;}
.cal_table .day_unit	{height: 80px;}
.cal_table .day_text	{font-size: 10px;}
.cal_table .dm_wrap	{left: 50%; top: 50%; margin: -17px 0 0 -20px; width: 40px; height: 40px; border-radius: 25px; font-size: 11px;}
.cal_table .dm	{line-height: 40px; background-color: #EEE; color: #888;}
.cal_table .active .dm	{background-color: #E8E8D3;}
.cal_table .yet .dm	{background-color: #f7f7f7;}
.cal_table .dm.day_checked	{background-color: #4BB089; color: #FFF;}
.cal_table .dm.day_ask	{line-height: 120%; padding-top: 7px;}
.cal_table .dm i,
.cal_table .dm svg	{font-size: 14px;}
.cal_table .dm .fa-times	{color: #AAA;}
.cal_table .dm_count	{left: -1px; bottom: -1px; width: calc(100% + 1px); font-size: 11px;}

.cal_info	{font-size: 12px;}

.att_msg	{line-height: 160%;}

.att_list	{font-size: 12px;}
.att_body	{position: absolute; right: 10px; top: 50%; margin-top: -15px; white-space: nowrap; height: 30px; line-height: 26px; padding: 0 15px; border-radius: 15px 15px 15px 5px; box-sizing: border-box; background-color: #EEE;}
.att_list .att_body	{background-color: rgba(0,0,0,0.05);}

.att .paging	{font-size: 12px;}
.paging .page_num	{font-size: 11px;}

/* gift */
.pp_table th	{padding: 15px 10px; font-size: 11px;}
.pp_table td	{width: 100px; padding: 8px 10px; text-align: center; white-space: nowrap; line-height: 140%;}
.pp_table td.title	{width: auto; white-space: normal; word-break: break-all;}

/* message */
.ppbd_message	{width: 350px; margin-top: 50px;}
.ppbd_message h3	{font-size: 16px;}

@media screen and (max-width: 720px){
	.att_body	{position: static; margin-top: 10px; border-radius: 15px;}
	.pp_table td	{width: 1%;}
}
@media screen and (max-width: 560px){
	.att_navi	{text-align: center;}
	.att_manage	{position: static; margin: 5px 0 10px;}
	.att_sat	{font-size: 12px;}
	.att_sat .sat_title	{padding: 10px;}
	.att_sat .sat_content	{padding: 10px;}
}