sliderProの矢印の位置を画面幅が違うものでも両端に設置したい

１つのページにsliderProを複数設置したいのですが、
表示幅が違うため（１つ横幅フル）、矢印の位置を変えようとしているのですがcssで
変更できると思ったのですがうまくいきません。

１種で％で両端でバランスの良いところに着地できればベストなのですが、上手くいかず、
２種表示させようとしましたが片方表示されませんでした。

どう記述すればよいでしょうか？
ちなみに、この記述ですと、topImage99の矢印は消えます。

html
1<div class="topImage99">
2          <div class="sp-slides">
3<!--スライド-->
4             <div class="sp-slide">
5              <a href="#"><img class="sp-image" src="/common/img/bnr_01.jpg" /></a>
6            </div>
7            <div class="sp-slide">
8              <a href="#"><img class="sp-image" src="/common/img/bnr_02.jpg" /></a>
9            </div>
10            <div class="sp-slide">
11              <a href="#"><img class="sp-image" src="/common/img/bnr_03.jpg" /></a>
12            </div>
13            <div class="sp-slide">
14              <a href="#"><img class="sp-image" src="/common/img/bnr_04.jpg" /></a>
15            </div>
16                <div class="sp-slide">
17              <a href="#"><img class="sp-image" src="/common/img/bnr_05.jpg" /></a>
18            </div>
19                <div class="sp-slide">
20              <a href="#"><img class="sp-image" src="/common/img/bnr_06.jpg" /></a>
21            </div>
22          </div><!--/ sp-slides-->
23        </div><!--slider-->   
24
25
26
27
28
29
30<section class="test">
31        <div class="salon">
32          <div class="sp-slides">
33<!--スライド-->
34             <div class="sp-slide">
35              <a href="#"><img class="sp-image" src="/common/slider/images/sl_01.png" /></a>
36            </div>
37            <div class="sp-slide">
38              <a href="#"><img class="sp-image" src="/common/slider/images/sl_02.png" /></a>
39            </div>
40            <div class="sp-slide">
41              <a href="#"><img class="sp-image" src="/common/slider/images/sl_03.png" /></a>
42            </div>
43            <div class="sp-slide">
44              <a href="#"><img class="sp-image" src="/common/slider/images/sl_04.png" /></a>
45            </div>
46                <div class="sp-slide">
47              <a href="#"><img class="sp-image" src="/common/slider/images/sl_05.png" /></a>
48            </div>
49                <div class="sp-slide">
50              <a href="#"><img class="sp-image" src="/common/slider/images/sl_06.png" /></a>
51            </div>
52    <div class="sp-slide">
53              <a href="#"><img class="sp-image" src="/common/slider/images/sl_07.png" /></a>
54            </div>
55          </div><!--/ sp-slides-->
56        </div><!--slider-->
57   
58</section>

css
1/**toparrow**/
2
3
4.sp-arrow {
5	position: absolute;
6	display: block;
7	width: 20px;
8	height: 30px;
9	cursor: pointer;
10}
11.sp-horizontal .sp-previous-arrow{
12	left:50%;
13	margin-left:-360px;
14    width:60px;
15    height:60px;
16   background:url("/common/slider/images/ico_tenpo_left.png")no-repeat;
17}
18.sp-vertical .sp-arrow{}
19/*.sp-vertical .sp-arrow {
20	-webkit-transform: rotate(90deg);
21	-ms-transform: rotate(90deg);
22	transform: rotate(90deg);
23}*/
24
25/*.sp-horizontal .sp-previous-arrow {
26	left: 20px;
27	right: auto;
28}*/
29
30.sp-horizontal.sp-rtl .sp-previous-arrow {
31	right: 20px;
32	left: auto;
33	 width:60px;
34    height:60px;
35	    background:url("/common/slider/images/ico_tenpo_right.png")no-repeat;
36
37}
38
39.sp-horizontal .sp-next-arrow {
40	right: 20px;
41	left: auto;
42	width:60px;
43    height:60px;
44	    background:url("/common/slider/images/ico_tenpo_right.png")no-repeat;
45}
46
47.sp-horizontal.sp-rtl .sp-next-arrow {
48    left: 20px;
49	right: auto;
50	width:60px;
51    height:60px;
52	    background:url("/common/slider/images/ico_tenpo_right.png")no-repeat;
53
54}
55
56
57.topImage99 .sp-horizontal .sp-previous-arrow{
58    left:50%;
59	margin-left:-600px;
60    width:60px;
61    height:60px;
62   background:url("/common/slider/images/ico_tenpo_left.png")no-repeat;
63}
64.topImage99 .sp-vertical .sp-arrow{}
65/*.sp-vertical .sp-arrow {
66	-webkit-transform: rotate(90deg);
67	-ms-transform: rotate(90deg);
68	transform: rotate(90deg);
69}*/
70
71/*.sp-horizontal .sp-previous-arrow {
72	left: 20px;
73	right: auto;
74}*/
75
76.topImage99 .sp-horizontal.sp-rtl .sp-previous-arrow {
77	right: 20px;
78	left: auto;
79	 width:60px;
80    height:60px;
81	    background:url("/common/slider/images/ico_tenpo_right.png")no-repeat;
82}
83
84.topImage99 .sp-horizontal .sp-next-arrow {
85	right: 20px;
86	left: auto;
87	width:60px;
88    height:60px;
89	    background:url("/common/slider/images/ico_tenpo_right.png")no-repeat;
90}
91
92.topImage99 .sp-horizontal.sp-rtl .sp-next-arrow {
93    left: 20px;
94	right: auto;
95	width:60px;
96    height:60px;
97	    background:url("/common/slider/images/ico_tenpo_right.png")no-repeat;
98}

js
1
2// JavaScript Document
3    $( document ).ready(function( $ ) {
4        $( '.salon' ).sliderPro({
5            width: 485,
6            autoHeight:true,
7            arrows: true,
8            buttons: true,   
9            slideDistance:10,//スライドの隙間
10            waitForLayers: true,	
11            autoplay: true,
12            autoScaleLayers: false,
13            keyboard:false,
14			fadeArrows: false,
15            visibleSize: '100%',//前後のスライドを表示
16            gotoSlide: function( event ) {
17            }
18        });
19    });
20
21 
22 $( document ).ready(function( $ ) {
23        $( '.topImage99' ).sliderPro({
24            width: 320,
25            height:261,
26            arrows: true,
27            buttons: true,  
28            slideDistance:10,//スライドの隙間
29            waitForLayers: true,	
30            autoplay: true,
31            autoScaleLayers: false,
32            keyboard:true,
33            visibleSize: '100%',//前後のスライドを表示
34            gotoSlide: function( event ) {
35            }
36        });
37    });
38