.project_wrap { width:100%; max-width:768px; min-width:320px; margin:0 auto; padding:0 10px; position:relative; }

/* header */
header { width:100%; padding:10px 10px 0 10px; position:fixed; top:0; left:0; background:#fff; z-index:5; }
header > ul { display:flex; }
header > ul li { height:65px; }
header > ul li.app_name { width:calc(100% - 75px); font-size:20px; color:#fff; border-radius:15px; box-shadow:0 2px 5px rgba(0,0,0,0.1); display:flex; align-items:center; justify-content:center; background:#FF003B; }
header > ul li .notify_btn { width:65px; height:100%; margin-left:10px; border:0; border-radius:20px; box-shadow:0 2px 5px rgba(0,0,0,0.1); background:#FFF500; }
header > ul li.new .notify_btn { position:relative; }
header > ul li.new .notify_btn::after { content:''; display:block; width:5px; height:5px; border-radius:50%; background:#FF003B; position:absolute; top:17px; right:17px; }
header .notify_box { height:65px; margin-top:10px; padding:10px 10px 10px 0; border-radius:15px; box-shadow:0 2px 5px rgba(0,0,0,0.1); display:none; align-items:center; background:#fff; }
header .notify_box .img_box { width:60px; display:flex; align-items:center; justify-content:center; }
header .notify_box ul { width:calc(100% - 60px); }
header .notify_box ul li p.notify_title { display:inline-block; font-weight:700; position:relative; }
header .notify_box ul li p.notify_title::after { content:''; display:block; width:5px; height:5px; border-radius:50%; background:#FF003B; position:absolute; top:2px; right:-8px; }
header .notify_box ul li p.notify_content { overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
header .notify_box.open { display:flex; }