/* HEADER */
/* header {height: 60px; background: #fff; border-bottom: 1px solid #ddd; position: fixed; z-index: 100; width: 100%;} */

/* MENU */
/* .main_menu {height: 100%; width: 100%; max-width: 720px; margin: 0 auto; display: flex; gap: 60px; align-items: center; padding: 12px;}
.main_menu .logo {}
.main_menu .logo img {height: 40px;}

nav ul {display: flex; gap: 32px;}
nav ul li a {font-size: 16px; font-weight: 500;} */

.empty_contents_01 {text-align: center; font-size: 40px; font-weight: 700; padding: 60px 0; display: none;}
.empty_contents_01.on {display: block;}

/* .lang {width: 60px; height: 100%;  margin-left: auto; position: relative; display: flex; align-items: center;}
.lang_select_btn {font-size: 16px; font-weight: 700; cursor: pointer;}
.lang_select {padding: 15px; position: absolute; background: #fff; border-radius: 12px; border: 1px solid #ddd; top: 32px; right: 0; display: none;}
.lang_select.on {display: block;}
.lang_select li button {font-size: 12px; color: #777; cursor: pointer;} */

.app_store {width: calc(100% - 24px); max-width: 720px; height: 60px; position: fixed; bottom: 20px; left: 50%; transform: translate(-50%); background: #fff; z-index: 10; display: flex; gap: 24px; align-items: center; box-shadow: 3px 3px 10px rgba(0,0,0,.15); border-radius: 28px; padding: 12px 12px 12px 24px;}
.app_store strong {background: linear-gradient(90deg, #ff7392, #709ef0); color: transparent; -webkit-background-clip: text; font-size: 24px; word-break: keep-all;}
.app_store img {height: 50px;}
.app_store img:last-child {margin-left: auto;}

.container {width: 100%; max-width: 720px; margin: 0 auto; padding: 90px 16px 120px 16px;}

.content_box {display: grid; gap: 12px;}

.text_input_01 {width: 100%; height: 40px; border-radius: 12px; border: 1px solid #ddd; padding: 12px; font-weight: 500;}

.content_list {width: 100%; display: grid; gap: 16px;}
.list_col_01 {grid-template-columns: 1fr;}
.list_col_02 {grid-template-columns: 1fr 1fr;}
.list_col_03 {grid-template-columns: 1fr 1fr 1fr;}

.content_post {width: 100%;}
.content_post a {width: 100%; display: grid; gap: 8px;}

.content_thumb_box {width: inherit; overflow: hidden; position: relative; box-shadow: 3px 3px 10px rgba(0,0,0,.05); background: #eee; border-radius: 24px; height: 200px;}
.content_thumb_box img {width: inherit; height: inherit; object-fit: cover; object-position: top; display: block; transition: .3s;}
.thumb_h200 {height: 200px;}
.thumb_h180 {height: 180px;}
.thumb_h160 {height: 160px;}
.thumb_h140 {height: 140px;}
.thumb_h120 {height: 120px;}
.thumb_h_auto {height: auto;}

.content_title_box {width: 100%; position: absolute; bottom: 0; padding: 28px 12px 12px 12px; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.55)); display: grid; transition: .3s;}
.content_title_box strong {color: #fff; font-size: 20px; text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2;  -webkit-box-orient: vertical;}
.content_title_box span {display: flex; justify-content: right; gap: 8px; align-items: center;}
.content_title_box span p {color: #fff; font-size: 12px; text-align: right;}
.content_title_box span img {width: 16px;}

.content_thumb_box:hover .content_title_box {padding: 100px 12px 12px; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.7));}

.content_thumb_box:hover img {transform: scale(1.05);}

.content_tag {display: flex; gap: 4px; flex-wrap: wrap;}
.tag_type_01 {padding: 3px 4px; border: 1px solid #ddd; border-radius: 8px; color: #999; text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 1;  -webkit-box-orient: vertical;}

.content_text {text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.content_text p {font-size: 12px; font-weight: 500; white-space: break-spaces;}

.content_reaction {display: flex; gap: 20px;}
.post_like {display: flex; gap: 4px;}
.post_like p {color: #999;}
.post_comment {display: flex; gap: 4px;}
.post_comment p {color: #999;}

.post_detail_banner_01 {width: 100%; border-radius: 20px; overflow: hidden;}
.post_detail_banner_01 img {width: 100%; display: block;}

.post_detail_title {font-size: 30px;}
.post_detail_recent_01 {background: #eee; padding: 4px 8px; border-radius: 8px; display: flex; width: 100%; max-width: 100px; text-align: center; margin-left: auto; gap: 4px;}
.post_detail_recent_01 p {color: #999;}
.post_detail_recent_01 img {width: 16px;}
.post_detail_text p {font-size: 16px;}
.post_detail_img {display: grid; gap: 12px;}
.post_detail_img img {width: 100%; border-radius: 20px;}

.tab_list_01 {display: flex; gap: 16px; flex-wrap: wrap;}
.tab_list_01 li button {font-size: 16px; font-weight: 700; color: #999; border-bottom: 3px solid #fff; cursor: pointer; transition: .3s;}
.tab_list_01 li::after {content: ""; display: block; height: 2px; width: 0; background: linear-gradient(90deg, #ff7392, #709ef0); transition: .2s; margin: 0 auto;}
.tab_list_01 li.on button {background: linear-gradient(90deg, #ff7392, #709ef0); color: transparent; -webkit-background-clip: text;}
.tab_list_01 li.on::after {width: 100%;}

.tab_box_01 .content_list {display: none;}
.tab_box_01 .content_list.on {display: grid;}

.post_detail_comment {display: grid;}
.post_detail_comment li {display: grid; padding: 8px; grid-template-columns: 40px auto; gap: 12px;}
.post_detail_comment li:nth-child(odd) {background: #eee; border-radius: 24px;}
.post_detail_comment li:nth-child(even) {background: #fff; border-radius: 24px;}

.comment_profile_img {width: 40px; height: 40px; border-radius: 20px; overflow: hidden; display: flex; justify-content: center;}
.comment_profile_img img {object-fit: cover;}

.comment_profile_nick {font-weight: 700; font-size: 14px;}
.comment_text {font-size: 12px; font-weight: 600; color: #777;}

.detail_profile {display: grid; gap: 12px; grid-template-columns: 40px auto; margin-left: auto; align-items: center;}
.detail_profile_img {width: 40px; height: 40px; display: flex; overflow: hidden; border-radius: 20px;}
.detail_profile_img img {object-fit: cover;}
.detail_profile_nick {font-size: 16px; font-weight: 700;}

.funding_info {width: 100%; box-shadow: 3px 3px 10px rgba(0,0,0,.10); padding: 12px; border-radius: 12px; display: flex; align-items:end; margin-bottom: 24px;}
.funding_achievement {font-size: 14px; color: #C177E4; font-weight: 700; }
.funding_achievement span {font-size: 24px; color: #C177E4; font-weight: 700;}
.funding_achievement strong {font-size: 14px; color: #C177E4; font-weight: 700; }
.funding_energy {margin-left: auto; font-size: 14px; color: #777; font-weight: 700;}
.funding_energy span {font-size: 24px; color: #333; font-weight: 700;}

/* .m_menu_btn {width: 20px; height: 20px; position: relative; margin-left: auto; display: none; margin-bottom: 12px;}
.m_menu_btn div {width: 100%; height: 2px; background: #333; position: absolute; border-radius: 4px;}
.m_menu_btn div:first-child {top: 0;}
.m_menu_btn div:nth-child(2) {top: 50%; transform: translateY(-50%);}
.m_menu_btn div:last-child {bottom: 0;}

.m_menu_btn.m_menu_btn_close div:first-child {top: 50%; transform: translateY(-50%) rotate(45deg);}
.m_menu_btn.m_menu_btn_close div:last-child {top: 50%; transform: translateY(-50%) rotate(-45deg);}

.m_menu {width: 50%; position: fixed; top: 0; z-index: 100; background: #fff; height: 100vh; padding: 12px; right: 0; box-shadow: 0px 5px 10px rgba(0,0,0,.1); display: none; right: -100%; transition: .3s;} */

@media(max-width: 720px) {

    .main_menu nav {display: none;}
    .lang {display: none;}
    
    .list_col_02 {grid-template-columns: 1fr;}
    .list_col_03 {grid-template-columns: 1fr 1fr;}

    .m_menu_btn {display: block;}

    .m_menu {display: block;}
    .m_menu.on {right: 0;}
    .m_menu .lang {display: block; height: auto; margin: 0 0 12px 0; width: 100%;}
    .m_menu .lang .lang_select_btn {border: 1px solid #ddd; width: 100%; text-align: center; border-radius: 12px; padding: 4px;}
    .m_menu .lang_select {width: 100%; top: 36px;}
    .m_menu .lang_select li {text-align: center;}

    .m_menu .m_menu_main {display: grid;}
    .m_menu .m_menu_main li {height: 40px; border-bottom: 1px solid #ddd;}
    .m_menu .m_menu_main li:first-child {border-top: 1px solid #ddd ;}
    .m_menu .m_menu_main li a {font-size: 16px; font-weight: 700; color: #333; display: flex; height: 100%; align-items: center;}

    .content_title_box strong {font-size: 20px;}
    
    .app_store strong {font-size: 16px; text-align: left;}

    .content_thumb_box {height: auto; max-height: 240px;}

    .post_detail_title {font-size: 24px;}

    .app_store img {height: 40px;}
}