[디자인관리 > 고급 디자인 관리 > 그룹디자인 관리]

{GROUP_slide_w}

main_slide 를 수정합니다.

 

 

<style>
@font-face {
    font-family: 'icomoon_slider';
    src: url('/img_up/shop_pds/aramfarm/design/icomoon_slider/icomoon.eot');
    src: url('/img_up/shop_pds/aramfarm/design/icomoon_slider/icomoon.eot?#iefix') format('embedded-opentype'),
        url('/img_up/shop_pds/aramfarm/design/icomoon_slider/icomoon.woff') format('woff'),
        url('/img_up/shop_pds/aramfarm/design/icomoon_slider/icomoon.ttf') format('truetype'),
        url('/img_up/shop_pds/aramfarm/design/icomoon_slider/icomoon.svg#icomoon_slider') format('svg');
    font-weight: normal;
    font-style: normal;
}

.pm-slide_wide_{$this_group_code} {{$slideWidth} margin:0 auto;}
.pm-slide_wide_{$this_group_code} a {border:none; text-decoration:none;}
.pm-slide_wide_{$this_group_code} a img {border:none;}
.pm-slide_wide_{$this_group_code} .owl-item {{$zIndex}}
.pm-slide_wide_{$this_group_code} .item {position:relative;}
.pm-slide_wide_{$this_group_code} .item .caption {
    position:absolute; left:0; right:0; top:80%; bottom:0; background:{$bgColor1}; background:{$bgColor2};
}
.pm-slide_wide_{$this_group_code} .item .caption span {
    display:block; position:absolute; top:50%; left:0; right:0; height:20px; line-height:20px; margin-top:-10px; padding:0 10px;
    box-sizing:border-box; font-size:14px; color:{$textColor}; text-align:center;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.pm-slide_wide_{$this_group_code} .owl-controls {-webkit-tap-highlight-color:transparent;}
.pm-slide_wide_{$this_group_code} .owl-controls .owl-nav [class*='owl-'] {
    position:absolute; top:50%; z-index:2; width:40px; height:40px; line-height:40px; margin-top:-20px;
    font-size:0; cursor:pointer; opacity:0.7;
}
.pm-slide_wide_{$this_group_code} .owl-controls .owl-nav [class*='owl-']:before{font-family:'icomoon_slider'; font-size:40px; font-weight:bold; color:{$navColor};}
.pm-slide_wide_{$this_group_code} .owl-controls .owl-nav [class*='owl-']:hover {opacity:1;}
.pm-slide_wide_{$this_group_code} .owl-controls .owl-nav .owl-prev {left:5px;}
.pm-slide_wide_{$this_group_code} .owl-controls .owl-nav .owl-next {right:5px;}
.pm-slide_wide_{$this_group_code} .owl-controls .owl-nav .owl-prev:before {content:'\e600';}
.pm-slide_wide_{$this_group_code} .owl-controls .owl-nav .owl-next:before {content:'\e601';}
.pm-slide_wide_{$this_group_code} .owl-controls .owl-nav .disabled {opacity:0.5; cursor:default;}

.pm-slide_wide_{$this_group_code} .owl-dots {position:absolute; left:0; width:100%; height:30px; padding:10px; font-size:0; box-sizing:border-box; {$dotPosition}}
.pm-slide_wide_{$this_group_code} .owl-dots .owl-dot {display:inline-block; zoom:1; *display:inline;}
.pm-slide_wide_{$this_group_code} .owl-dots .owl-dot span {
    display:block;width:10px; height:10px; margin:0 4px;
    background:{$dotColor}; border-radius:30px;
    -webkit-backface-visibility:visible;
    -webkit-transition:opacity 200ms ease;
    -moz-transition:opacity 200ms ease;
    -ms-transition:opacity 200ms ease;
    -o-transition:opacity 200ms ease;
    transition:opacity 200ms ease;
}
.pm-slide_wide_{$this_group_code} .owl-dots .owl-dot.active span,
.pm-slide_wide_{$this_group_code} .owl-dots .owl-dot:hover span {background:{$dotOver};}
</style>

@ 크기

width:10px;

height:10px;

- 원하는 크기로 수정합니다.

 

@ 사각형

border-radius:30px;

- 해당값을 0 으로 하거나 삭제를 하시면 사각형이 됩니다.