.frame{
width: 96%;
margin: 0px auto;
margin-bottom: 20px;
text-align: center;
}
.custom-btn{
width: auto;
height: auto;
color: #fff;
border-radius: 5px;
padding: 7px 15px;
margin: 10px 10px 0px;
font-weight: 500;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
7px 7px 20px 0px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1);
outline: none;
}
.custom-btn a{
color: #344A67;
}
/* 16 */
.btn-16{
border: none;
color: #000;
}
.btn-16:after{
position: absolute;
content: "";
width: 0;
height: 100%;
top: 0;
left: 0;
direction: rtl;
z-index: -1;
box-shadow:
-7px -7px 20px 0px #fff9,
-4px -4px 5px 0px #fff9,
7px 7px 20px 0px #0002,
4px 4px 5px 0px #0001;
transition: all 0.3s ease;
}
.btn-16:hover{
color: #000;
}
.btn-16:hover:after{
left: auto;
right: 0;
width: 100%;
}
.btn-16:active{
top: 2px;
}
.view-image-parent{
position: relative;
width: 100%;
height: 100vh; /* 부모 요소 크기 설정 */
}
.bbs-view-image{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius:7px;
}

.search_form{
position:relative;
top:-7px;
width:240px;
margin: 0 auto;
text-align: center;
padding: 0;
white-space : nowrap;
}
.search_text{
position:relative;
right:-5px;
top:0px;
width:200px;
border:2px solid #724ae8;
border-right:none;
padding:5px;
height:30px;
border-radius:5px 0 0 5px;
outline:none;
color:#344A67;
text-align:center;
background:rgba(255,255,255,0.4);
}
.mysearchButton{
position:relative;
top:0px;
left:-2px;
width:40px;
height:30px;
border:1px solid #724ae8;
background:#724ae8;
text-align:center;
color:#fff;
border-radius:0 5px 5px 0;
cursor:pointer;
font-size:1rem;
}
.mysearchButton:hover{
background-color: #007bff;
}
/* 더보기 버튼 스타일 */
.hidden-file{
display: none;
}
#show-more{
display: block;
width: 130px;
padding: 7px 15px;
margin: 10px 0;
background-color: #724ae8;
color: white;
border: none;
border-radius: 5px;
font-size: 14px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease-in-out;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
white-space: nowrap;
}
#show-more:hover{
transform: scale(1.05);
background-color: #007bff;
}
/* 선택재생 */
.plusaudio-container{
margin-bottom: 20px;
text-align: center;
}
.plusaudio{
clear:both;
background:#724ae8;
color: white;
font-size: 0.85rem;
font-weight: bold;
padding: 7px 20px;
margin: 10px;
border: none;
border-radius: 15px;
cursor: pointer;
transition: all 0.3s ease-in-out;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.plusaudio:hover{
transform: scale(1.05);
background: #3a8afd;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}
.plusaudio:active{
transform: scale(0.95);
}
/* 음악다운로드*/
.bubbly-button{
position: relative;
font-size: .9rem;
font-weight:700;
padding: 7px 20px;
margin: 0 2px;
max-width:90%;
text-align:center;
-webkit-appearance: none;
appearance: none;
background-color: #ff0081;
color: #fff;
border-radius: 4px;
border: none;
cursor: pointer;
transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
box-shadow: 0 2px 25px rgba(255, 0, 130, 0.5);
}
.bubbly-button:focus{
outline: 0;
}
.bubbly-button:hover{
transform: scale(1.03);
background-color:#FF3E9E;
}
.bubbly-button:active{
transform: scale(0.98);
background-color: #e60074;
box-shadow: 0 2px 25px rgba(255, 0, 130, 0.2);
}
.bubbly-button i{
font-size: 150%;
position: relative;
top:2px;
}
/* 음악다운로드50*/
.bubbly-button50{
position: relative;
font-size: .9rem;
font-weight:700;
padding: 7px 20px;
margin: 0 2px;
max-width:90%;
text-align:center;
-webkit-appearance: none;
appearance: none;
background-color: #ff0081;
color: #fff;
border-radius: 25px;
border: none;
cursor: pointer;
transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
box-shadow: 0 2px 25px rgba(255, 0, 130, 0.5);
}
.bubbly-button50:focus{
outline: 0;
}
.bubbly-button50:hover{
transform: scale(1.03);
background-color:#FF3E9E;
}
.bubbly-button50:active{
transform: scale(0.98);
background-color: #e60074;
box-shadow: 0 2px 25px rgba(255, 0, 130, 0.2);
}
.bubbly-button50 i{
font-size: 150%;
position: relative;
top:2px;
}