@charset "utf-8";

.f_banner01{border-top: 1px solid #E5E5E5;   padding: 16px 0; }
.f_banner01 .wrap_full{position:relative;}

.f_controller{display:inline-flex; flex-direction: row; align-items:center; justify-content:space-between;width: 100%; max-width: 120px; position:absolute; top:50%; left:0; transform:translateY(-50%);z-index: 5;}
.f_controller button{background-color:transparent; border:0; width: 21px; height:21px;cursor: pointer;}
.f_controller .f_arr{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11.348' height='20.695'%3E%3Cpath fill='none' stroke='%23292929' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9.933 1.414.999 10.352l1.488 1.488 7.445 7.441'/%3E%3C/svg%3E");background-repeat:no-repeat; }
.f_controller .f_arr.arr_next{transform:rotate(180deg);}
.f_controller .f_play{background-color:#EAEAEA; border-radius:50%;width: 24px; height: 24px;position:relative;}
.f_controller .f_play:after{content:''; display:block; width: 9px; height: 12px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); background-repeat:no-repeat; background-size: contain; background-position:center center;}
.f_controller .f_play.pause:after{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9.293' height='12.5'%3E%3Cg fill='none' stroke='%230c0c0c' stroke-linecap='round' stroke-width='2'%3E%3Cpath d='M1.25 1.25v10M8.043 1.25v10'/%3E%3C/g%3E%3C/svg%3E"); }
.f_controller .f_play.play:after{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='12' viewBox='0 0 9 14' %3E%3Cpath fill='%23333' d='M7.985 6.211a1 1 0 0 1 0 1.579l-6.371 4.955A1 1 0 0 1 0 11.955v-9.91a1 1 0 0 1 1.614-.789Z'/%3E%3C/svg%3E"); left:calc(50% + 1px)}

.f_list{padding-left: 200px;}
.f_list a{height: 40px; padding:0 10px; margin:3px 0;}
.f_list a.img_box > img{object-fit: contain;;}

@media(max-width:1600px){
    .f_controller{left: 15px;}
}

@media(max-width:1200px){
    .f_list{padding-left: 160px;}
}

@media(max-width:991px){
    .f_controller{max-width: 90px;}
    .f_list{padding-left: 120px;}
}

@media(max-width:575px){
    .f_controller{max-width: unset; width: calc(100% - 15px)}
    .f_controller .f_arr{position:absolute; top:50%;transform: translateY(-50%); left:0; }
    .f_controller .f_arr.arr_next{left: unset; right:15px; transform: translateY(-50%) rotate(180deg)}
    .f_controller .f_play{display:none;}
    .f_list{padding:0 10px; }
}