@charset "utf-8";
/* CSS Document */

/*******************************
 * Sitename : 미세먼지종합포탈
 * Filename : jquery.bxslider.css
 * update : 2024.02.21.
********************************/

.bx-wrapper { position: relative; padding: 0; /**zoom: 1;*/}
.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto { position: absolute;}

/* LOADER */
.bx-wrapper .bx-loading { min-height: 50px; background: url(../images/main2017/bx_loader.gif) center center no-repeat #fff; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 2000; }
.bx-wrapper .bx-pager .bx-pager-item, .bx-wrapper .bx-controls-auto .bx-controls-auto-item { display: inline-block; /* *zoom: 1; *display: inline;*/ }
.bx-wrapper .bx-pager.bx-default-pager a { background: url(../images/main2017/mv_ctrl-off.png) no-repeat; text-indent: -9999px; display: block; width: 12px; height: 12px; margin: 0 5px; }
.bx-wrapper .bx-pager.bx-default-pager a.active { background: url(../images/main2017/mv_ctrl-ov.png) no-repeat; }

/*  */
.bx-controls{ width:418px; position:relative;}
.bx-controls:after{ display: block; clear: both; content: ''; }
.main_visual_rolling_wrap .bx-controls{ } /* 240222 */

.bx-controls-direction{}
.banner_area .bx-controls-direction{ width:80px; height:16px; position:absolute; right:16px; bottom:-36px;}

/*이전*/
.bx-wrapper .bx-prev { background: url(../images/main/v_controls.png) 0px 0px no-repeat;}

/*다음*/
.bx-wrapper .bx-next { right: 0px; background: url(../images/main/v_controls.png) -19px 0px no-repeat;}
.bx-wrapper .bx-controls-direction a { position: absolute; outline: 1px; width: 14px; height: 14px; text-indent: -9999px; z-index: 9999; }
.bx-wrapper .bx-controls-direction a.disabled { display: none; }


/* 자동 (START / STOP) */
.bx-wrapper .bx-controls-auto { text-align: center;}
.bx-wrapper .bx-controls-auto .bx-start { display: block; text-indent: -9999px; width: 14px; height: 14px; outline: 1px; background: url(../images/main/v_controls.png) -57px 0px no-repeat; margin: 0 3px;}
.bx-wrapper .bx-controls-auto .bx-start:hover, .bx-wrapper .bx-controls-auto .bx-start.active { background-position: -38px 0; }

.bx-wrapper .bx-controls-auto .bx-stop { display: block; text-indent: -9999px; width: 14px; height: 14px; outline: 1px; background: url(../images/main/v_controls.png) -76px 0px no-repeat; margin: 0 3px; }


/* Banner Count */
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager { position: absolute; left: 0;  top: 12px; font-size:16px; text-align: center; /*background: #f00;*/ width: 60px;}

/*시작 멈춤*/
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto { text-align: left; position: absolute; right: 36px; top: 20px; text-align: center; /*background: #ff0;*/ height: 16px;}

/* Main Vusial BG */
.banner_area .bx-viewport{ width:100%; overflow:hidden; border-radius:0 10px 0 0;}
.banner_area .bx-viewport img{ width:100%; height:auto;}

/* 240201 웹접근성 추가 */
.banner_area .bx-viewport a{  display: inline-block;}
.banner_area .bx-viewport a:focus{ outline: 2px solid black; border: 2px solid black;}

.bx-controls a:focus{ outline: 2px solid black !important;}

.main_visual_rolling_wrap .bx-controls{ width: auto; display: inline-block; position: absolute; bottom: 0; z-index: 99;}
.main_visual_rolling_wrap .bx-controls-auto{ right: auto !important; top: auto !important; display: inline-block; position: relative !important; height: auto !important;}
.main_visual_rolling_wrap .bx-controls-direction{ display: none;}
.main_visual_rolling_wrap .bx-default-pager{ display: none;}

.main_visual_rolling_wrap .bx-controls-auto-item a{ display: inline; width: 10px !important; height: 11px !important;}
.main_visual_rolling_wrap .bx-controls-auto-item .bx-start,
.main_visual_rolling_wrap .bx-controls-auto-item .bx-start:hover{ background: url(https://cdn.jsdelivr.net/bxslider/4.2.12/images/controls.png) left -86px top -11px no-repeat; }
.main_visual_rolling_wrap .bx-controls-auto-item .bx-start.active{ background: url(https://cdn.jsdelivr.net/bxslider/4.2.12/images/controls.png) left -86px top 0px no-repeat;}
.main_visual_rolling_wrap .bx-controls-auto-item .bx-stop{ background: url(https://cdn.jsdelivr.net/bxslider/4.2.12/images/controls.png) left -86px top -44px no-repeat;}
.main_visual_rolling_wrap .bx-controls-auto-item .bx-stop.active{ background: url(https://cdn.jsdelivr.net/bxslider/4.2.12/images/controls.png) left -86px top -33px no-repeat;}

@media (max-width: 640px){
	.bx-controls{ width:100%;}
	.banner_area .bx-controls-direction { right: 20px;}
	.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto { right:40px}
	.main_visual_rolling_wrap .bx-controls{ display: none;}
}