.photo_wrap									    {position:relative; }  

.photo_list										    {position:relative; display: grid; grid-template-columns: repeat(4, 1fr);   } 
.photo_list .img								    {width:100%;aspect-ratio: 3.3 / 2.2;background:#f5f5f5; overflow:hidden; border-radius:1em; }
.photo_list .img img						    {width:100%; height:100%; object-fit:cover; transition: transform 0.3s ease, opacity 0.3s ease;}
.photo_list .txt								    {padding:20px 5px;   }
.photo_list .txt p							    {color:#000; font-size:1.1em;font-weight:600;margin:0 0 8px 0; line-height:1.3; overflow:hidden; text-overflow: ellipsis;-o-text-overflow: ellipsis; display:-webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical; word-wrap: break-word;} 
.photo_list .txt time						    {  font-size:0.95em; color:#999; }
.photo_list  .nolist							    { width:100%;   text-align:center; padding:60px 0; color:#777;}
 
 /* 화살표 css */
.photo_wrap .btn-prev,
.photo_wrap .btn-next                                { position: absolute; display:block; top:calc(50% - 120px);  cursor: pointer;  border-radius:50px; border:1px solid #999;  width:70px; height:70px;  opacity:0.45;  z-index: 999;  transition: var(--transition1); display: flex; justify-content:center; align-items:center; background:#fff; }
.photo_wrap .btn-prev                                { left:-100px;  }
.photo_wrap .btn-next                                {right:-100px;  }
.photo_wrap .btn-prev:hover,
.photo_wrap .btn-next:hover                     { opacity:0.75; } 
 
.photo_wrap .btn-prev span, 
.photo_wrap .btn-next span            { position: absolute; display:inline-block; width:100%;height:100%;background:url('./icon_arrow.svg') no-repeat center 50%; background-size:40% auto;}
.photo_wrap .btn-prev span            {transform: rotate(180deg); }
.photo_wrap .btn-next span            { } 
 
 .photo_wrap .btn_wrap                  { padding-top:40px;  width:100%; max-width:600px; margin:auto;  z-index:111 ; display:flex;justify-content: center; align-items:center; gap:10px; }

/* dots css */
.photo_wrap .pagination                {  text-align:center; display:flex;justify-content: center; gap:0; } /* Swiper 수정으로 임시추가 */
.photo_wrap .swiper-pagination-bullets.swiper-pagination-horizontal  { bottom: initial !important; } 
.photo_wrap .swiper-pagination                {  padding-top:20px;  }
.photo_wrap .swiper-pagination span       {  background:#ddd  ;  } 

.photo_wrap .swiper-pagination-bullet     {display:inline-block;}
 
.photo_wrap .swiper-pagination-bullet {position:relative; width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 24px)); height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 30px));  display: inline-block; border-radius: var(--swiper-pagination-bullet-border-radius, 0); background: var(--swiper-pagination-bullet-inactive-color, transparent); opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.9) ; } 
.photo_wrap .swiper-pagination-bullet::after  {position:absolute; content:''; left:50%;top:50%; width:10px;height:10px; background:#ccc;border-radius:50px; transform:translate(-50%, -50%);    }
.photo_wrap .swiper-pagination-bullet-active,
.photo_wrap .swiper-pagination-bullet:focus, 
.photo_wrap .swiper-pagination-bullet:hover              {    opacity: var(--swiper-pagination-bullet-inactive-opacity, 1) ;}
.photo_wrap .swiper-pagination-bullet-active::after    { background:#8f969b;}
.photo_wrap .swiper-pagination-bullet:focus::after,
.photo_wrap .swiper-pagination-bullet:hover::after    { background:#8f969b;}

.photo_wrap .swiper-pagination-bullet:focus       { outline:2px dotted var(--outline-color); outline-offset:var(--outline-offset);}

 /* 재생정지 css */
.photo_wrap .btn-toggle span    {position:relative;top:2px; display:inline-block; width:30px; height:30px;cursor:pointer; }
.photo_wrap .btn-toggle.play span::before    { position:absolute;  content:''; top:11px;left:10px; width:3px;height:12px; background:#aaa; }
.photo_wrap .btn-toggle.play span::after     { position:absolute;  content:''; top:11px;left:16px; width:3px;height:12px; background:#aaa; }
.photo_wrap .btn-toggle.stop span::before    { position:absolute;  content:''; top:11px;left:12px; width:0px;height:0px;border-top:6px solid transparent;border-bottom:6px solid  transparent;border-left:8px solid #aaa;}
 
 
@media screen and (max-width:1720px) {
    .photo_wrap .btn-prev               { left:-10px; }
    .photo_wrap .btn-next               { right:-10px; }
}   
@media screen and (max-width:1024px) {
    .photo_wrap .btn-prev,
    .photo_wrap .btn-next                               {  width:50px; height:50px;   } 
}