/* Demo CSS - You do not need this css in your own slider */ 
/*
body{ 
    font-family: "Open Sans", helvetica, arial; 
} 
*/
pre{ 
    font-family: "Source Code Pro", monospace; 
    display: block; 
    font-size: 13px; 
    line-height: 20px; 
    word-break: break-all; 
    word-wrap: break-word; 
    white-space: pre; 
    white-space: pre-wrap; 
    background-color: whiteSmoke; 
    border: 1px solid #CCC; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
     
} 
/* 
h2{ 
    font-size: 48px; 
} 

pre + h2{ 
    margin-top: 0px; 
} 
*/

#container{
    width:100%;   /* 여기 수정 처음에는 895  */
    height:250px;
/*	margin-bottom: 60px;*/
} 

#banner-fade, 
#banner-slide{ 
    margin-bottom: 0px; 
} 
#banner-fade img, 
#banner-slide img {
	width: 100%;
	height: 100%;
}

ul.bjqs-controls.v-centered li a{ 
    display:block; 
    padding:0px;
	width:40px;
	height:37px;
	opacity:0.3;
} 

ul.bjqs-controls.v-centered li a:hover{ 
    display:block;
    padding:0px;
    color:#FFF;
	opacity:0.8;
} 

/* 소이미지 위치 */
ol.bjqs-markers {
	left:41.5%;
}

/* 소이미지 크기 */
ol.bjqs-markers li { 
	width:9px;
	height:9px; 
    background:url(/img/main/arr_off.png) no-repeat;
    text-decoration:none; 
    font-size:10px;     /* 1234  숫자 폰트 크기 */
    font-weight:bold;
    position: relative;
	display:inline-block;
    margin:0px 5px 0 0;   /* 1234 숫자 사이의 간격 */
}
/*
ol.bjqs-markers li.bjqs-markers-btn1 {
	width:11px;
	height:11px; 
	padding:0px;
	background:url(/img/main/arr_on.png) no-repeat;
	background-position:0px 0px;
	opacity:1.0;	
}
ol.bjqs-markers li.bjqs-markers-btn1 a {
	width:11px;
	height:11px; 
	padding:0;
	background:url(/img/main/arr_off.png) no-repeat;
	background-position:0px 0px;
	opacity:1.0;	
}

ol.bjqs-markers li.bjqs-markers-btn2 {
	width:11px;
	height:11px; 
	padding:0;
	background:url(/img/main/arr_on.png) no-repeat;
	background-position:0px 0px;
	opacity:1.0;	
}
ol.bjqs-markers li.bjqs-markers-btn2 a {
	width:11px;
	height:11px; 
	padding:0;
	background:url(/img/main/arr_off.png) no-repeat;
	background-position:0px 0px;
	opacity:1.0;	
}

ol.bjqs-markers li.bjqs-markers-btn3 {
	width:11px;
	height:11px; 
	padding:0;
	margin:0px;
	background:url(/img/main/arr_on.png) no-repeat;
	background-position:0px 0px;
	opacity:1.0;	
}
ol.bjqs-markers li.bjqs-markers-btn3 a {
	width:11px;
	height:11px; 
	padding:0;
	margin:0px;
	background:url(/img/main/arr_off.png) no-repeat;
	background-position:0px 0px;
	opacity:1.0;	
}

ol.bjqs-markers li.bjqs-markers-btn4 {
	width:11px;
	height:11px; 
	padding:0;
	margin:0px;
	background:url(/img/main/arr_on.png) no-repeat;
	background-position:0px 0px;
	opacity:1.0;	
}
ol.bjqs-markers li.bjqs-markers-btn4 a {
	width:11px;
	height:11px; 
	padding:0;
	margin:0px;
	background:url(/img/main/arr_off.png) no-repeat;
	background-position:0px 0px;
	opacity:1.0;	
}
*/
ol.bjqs-markers li.active-marker a, 
ol.bjqs-markers li a:hover{ 
	width:9px;
	height:9px;
	opacity:1.0;	
	background:url(/img/main/arr_on.png) no-repeat;
	background-color:transparent;
} 

ol.bjqs-markers li.active-marker {
	opacity:1;
}

p.bjqs-caption{ 
    background: rgba(255,255,255,0.5); 
} 
@media screen and (min-device-width:480px) {
#container {
    height:290px;
}
}
@media screen and (min-device-width:540px) {
#container {
    height:320px;
}
}
@media screen and (min-device-width:640px) {
#container {
    height:390px;
}
}
@media screen and (min-device-width:740px) {
#container {
    height:440px;
}
}
@media screen and (min-device-width:768px) {
#container {
    height:450px;
}
}
@media screen and (min-device-width:820px) {
#container {
    height:500px;
}
}
@media screen and (min-device-width:900px) {
#container {
    height:540px;
}
}
@media screen and (min-device-width:1024px) {
#container {
    height:600px;
}
}
@media screen and (min-device-width:1080px) {
#container {
    height:700px;
}
}
@media screen and (min-device-width:1200px) {
#container {
    height:760px;
}
}

@media screen and (max-device-width:399px) {
#container {
    height:230px;
}
}
@media screen and (max-device-width:370px) {
#container {
    height:220px;
}
}
@media screen and (max-device-width:359px) {
#container {
    height:190px;
}
}
@media screen and (max-device-width:319px) {
#container {
    height:165px;
}
}

