@charset "utf-8";

#fixed_nav{position: fixed; left: 50%; top: 50%; transform: translate(1200%, -50%);}
#fixed_nav button{display: block; font-size: 1.6rem; color: #898989;}
#fixed_nav button + button{margin-top: 16px;}
#fixed_nav button.on{color: #fff;}

#member_list_main{min-height: 100vh; padding: 50px 0 250px 0; background: #0e0e0e;}
#member_list_main *{}
#member_list_main .container{}

#main_page_head{margin-bottom: 150px;}
#main_page_head h2{font-size: 5.5rem; color: #fff}
#main_page_head .text{height: 60px; margin-top: 16px; font-size: 2.5rem; line-height: 30px; color: #a9a9a9;}

#page_section{}
#page_section > article:not(:first-of-type){display: none;}

#member_list_wrap{}
#member_list_wrap > li{display: flex; gap: 16px; position: relative; cursor: pointer;}
#member_list_wrap > li:nth-of-type(odd){}
#member_list_wrap > li:nth-of-type(odd) .my_contnet_box{margin-left: -35px;}
#member_list_wrap > li:nth-of-type(even){}
#member_list_wrap > li:nth-of-type(even) > .my_img{order: 2}
#member_list_wrap > li:nth-of-type(even) .my_contnet_box{margin-right: -35px; text-align: right;}
#member_list_wrap > li:nth-of-type(odd) .my_contnet_box,
#member_list_wrap > li:nth-of-type(even) .my_contnet_box{transition: 0.5s;}
#member_list_wrap > li:nth-of-type(odd) .view_icon{left: calc(250px + 16px);}
#member_list_wrap > li:nth-of-type(even) .view_icon{right: calc(250px + 16px);}
#member_list_wrap > li + li{margin-top: 100px;}
#member_list_wrap .my_img{position: relative; width: 250px; height: 250px; overflow: hidden; border-radius: 5px;}
#member_list_wrap .my_img > li{position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden}
#member_list_wrap .my_img > li:not(:first-of-type){display: none;}
#member_list_wrap .my_img img{width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); opacity: 60%; transition: 0.5s;}
#member_list_wrap .my_contnet_box{flex: 1; position: relative; z-index: 1;}
#member_list_wrap .my_contnet_box .my_name{font-size: 4.5rem; color: #d95c1c;}
#member_list_wrap .my_contnet_box .resolution{margin-top: 20px; letter-spacing: -1px; font-size: 1.9rem; color: #555;}
#member_list_wrap .view_icon{position: absolute; bottom: 0; padding: 10px; border: 1px solid #888; font-size: 1.4rem; color: #888;}

#member_list_wrap > li:nth-of-type(odd):hover .my_contnet_box{margin-left: 0}
#member_list_wrap > li:nth-of-type(even):hover .my_contnet_box{margin-right: 0}
#member_list_wrap > li:hover .my_contnet_box .resolution{color: #fff;}
#member_list_wrap > li:hover .my_img img{filter: grayscale(0); opacity: 100%;}
#member_list_wrap > li:hover .view_icon{border-color: #fff; color: #fff}

#guest_book_article{}
#guest_book_article .inner_container{display: flex; justify-content: space-between; gap: 0 32px;}
#guest_book_article .input_form{width: 420px;}
#guest_book_article .input_form > * + *{margin-top: 5px}
#guest_book_article .input_form .my_wri{display: flex; justify-content: space-between; gap: 0 5px}
#guest_book_article .input_form .my_wri > *{flex: 1}
#guest_book_article .input_form textarea{width: 100%; height: 150px;}
#guest_book_article .input_form .df_btn{width: 80px; color: #fff;; background: #555687;}
#guest_book_article .guest_book_list_box{flex: 1; color: #fff;}
#guest_book_article .guest_book_list_box #guest_book_list_more{width: 100%; height: auto; margin-top: 16px; line-height: 15px; font-size: 1.2rem; text-align: center; color: #9b9b9b;}
#guest_book_article .guest_book_list_head{display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; padding: 10px; border-radius: 5px; font-size: 1.2rem; background: #1e1e1e;}
#guest_book_article .guest_book_list_head .total_count{}
#guest_book_article .guest_book_list_head .btn_box{}
#guest_book_article .guest_book_list_head .btn_box button{color: #838383}
#guest_book_article .guest_book_list_head .btn_box button + button{margin-left: 5px}
#guest_book_article .guest_book_list_head .btn_box button.on{color: #fff}
#guest_book_article .list_wrap{}
#guest_book_article .list_wrap > li{}
#guest_book_article .list_wrap > li.no_data{font-size: 1.4rem;}
#guest_book_article .list_wrap > li + li{margin-top: 20px; padding-top: 20px; border-top: 1px solid #242424;}
#guest_book_article .list_wrap .list_head{display: flex; justify-content: space-between; align-items: center;}
#guest_book_article .list_wrap .list_head .wri_data{}
#guest_book_article .list_wrap .list_head .wri_data .name{font-size: 1.8rem;}
#guest_book_article .list_wrap .list_head .wri_data .datetime{margin-left: 5px; font-size: 1.2rem; color: #8d8d8d;}
#guest_book_article .list_wrap .list_head .btn_box{}
#guest_book_article .list_wrap .list_head .btn_box button{font-size: 1.2rem; color: #fff}
#guest_book_article .list_wrap .list_head .btn_box button + button{margin-left: 4px;}
#guest_book_article .list_wrap .content{margin-top: 20px; font-size: 1.4rem;}
#guest_book_article .list_wrap .edit_textarea_box{margin-top: 20px;}
#guest_book_article .list_wrap .edit_textarea_box textarea{width: 100%; height:100px;}
#guest_book_article .list_wrap .edit_textarea_box .btn_box{margin-top: 5px;}
#guest_book_article .list_wrap .edit_textarea_box .btn_box .ed_util_btn{width: 50px;}
#guest_book_article .list_wrap .edit_textarea_box .btn_box .ed_util_btn[btn_util="cencle"]{background: #4d4d4d; color: #fff;}
#guest_book_article .list_wrap .edit_textarea_box .btn_box .ed_util_btn[btn_util="edit"]{background: #555687; color: #fff;}

#guest_book_article .guest_book_list_box .df_btn:hover{color: #fff}

.my_popup_layer{position: fixed; left: 0; top: 0; z-index: 10; width: 100%; height: 100%;  background-color: rgb(0 0 0 / 70%);}
.my_popup_layer .inner_wrap{height: 100%; background-color: #fff;}
.my_popup_layer .inner_wrap .close_btn{float: right; padding: 6px 16px; margin-bottom: 10px; border: 1px solid #bbb; border-radius: 3px; font-size: 1.4rem; color: #333}
.my_popup_layer .inner_wrap iframe{clear: both; height: calc(100% - (30px + 10px))}
.my_popup_layer .inner_wrap .close_btn:hover{background: #606060; border-color: #606060; color: #fff}

.my_ds_check{margin-bottom: 30px; text-align: center}
.my_ds_check h2{}
.my_ds_check .list{margin-top: 10px; padding-top: 10px; border-top: 1px solid #ededed; font-size: 1.2rem}

#footer_wrap{padding: 16px; background: #161616; color: #fff}
#footer_wrap .copyright{text-align: center; color: #838383;}