@charset "utf-8";

@media screen and (max-width: 1919px) {
    .container .container_wrap .container_list,
    .container .container_wrap .container_notice, 
    .container .container_wrap .container_accident,
    .container .container_wrap .container_information {width: 100%;}

    /* ----- list ----- */
    .container_list .list_inner {display: inline-block; width: 100%;}
    .list_inner .more_view {right: 0;}
    .list_inner .owl-carousel {width: 100%;}
    .list_inner .owl-carousel .owl-nav {right: 32px;}

    /* ----- notice ----- */
    /* .notice_inner .owl-carousel {display: inline-block; width: 100%;} */
    /* .notice_inner .owl-carousel .owl-nav {right: 40px;} */
    .board-area { width: 100%; }

    /* ----- accident ----- */
    .container .container_wrap .container_accident {height: 750px;}
    .accident_inner .accident_news li {width: calc((100% - 75px) / 3);}

    /* ----- information ----- */
    .container .container_wrap .container_information {height: 526px;}
    .information_inner .menu_list li {width: calc(100% / 3);}   
    
}

@media screen and (max-width: 1400px) {

    /* ----- list ----- */
    .list_inner .title .list_nav li a {font-size: 1rem;}

    /* ----- notice ----- */
    .notice_inner .owl-carousel {display: inline-block; width: 100%;}
    .notice_inner .owl-carousel .owl-nav {right: 40px;}

    /* ----- accident ----- */
    .container .container_wrap .container_accident {height: 580px;}
    .accident_inner .accident_news li {width: calc((100% - 70px) / 3);}

    /* ----- information ----- */
    .container .container_wrap .container_information {height: 526px;}
    .information_inner .menu_list li {width: calc(100% / 3);}
}

@media screen and (max-width: 1250px) {
    /* ----- list ----- */
    .list_inner .owl-carousel .owl-item .item_inner a {padding: 20px 15px;}
}

@media screen and (max-width: 1200px) {
    #visual {background-position: center 0;height: 300px;}
    .main .visual_wrap {width: 100%;height: auto;display: inline-block;margin: 0;top: 0;padding-top: 190px;}
    .main .visual_wrap .visual_title {position: relative;left: auto;top: -149px;padding-left: 60px;}
    #container {width: 100% !important;}
    .container .container_wrap {transform: none; padding: 0 24px;}
    .container .container_wrap .container_banner {margin-bottom: 45px;}

    /* ----- list ----- */    
    .list_inner .owl-carousel .owl-item .item_inner a {padding: 20px;}
    .list_inner .title .list_nav li a {font-size: 1.125rem;}
    .list_inner .owl-carousel .owl-item .item_inner a div .text {width: 100%;}

    /* ----- accident ----- */
    .container .container_wrap .container_accident {height: 650px;}

    /* ----- graph ----- */
    .graph_inner .title .more_view {display: none;}
    .container .container_wrap .container_graph {height: auto;}
    .graph_inner .graph_box {border: none;height: auto;}
    .graph_inner .graph_kind {width: 100%;height: 67px;margin: 0;border: none; float: none;}
    .graph_inner .graph_kind li {width: calc(100% / 5);float: left;border-width: 1px 1px 1px 0;border-style: solid;border-color: #dcdcdc; text-align: center; }
    .graph_inner .graph_kind li:nth-child(1) {border-width: 1px}
    .graph_inner .graph_kind li a:before { content: none; }
    .graph_inner .graph_kind li > a { display: flex; align-items: center; justify-content: center; }
    .graph_inner .graph_kind li a h1 { position: relative; top: unset; left: unset; height: auto; transform: unset; } 
        
    .graph_inner .scrollBox .graph {display: inline-block;width: 100%;height: 329px;border: 1px solid #dcdcdc;box-sizing: border-box;margin-top: 24px;}
    .scrollBox { position: relative; display: block; width: 100%; padding-bottom: 60px; }
    .scrollBox::after { content: ""; position: absolute; width: 30px; height: 30px; background-image: url("/web/resources/images/icons-slide-60.png"); background-repeat: no-repeat; background-position: center; bottom: 0; left: 50%; transform: translate(-50%, -50%); background-size: 30px; }
    .mainChart { width: 100%;overflow-x: scroll;white-space: nowrap; }
    .mainChart > .c3 { min-height: 400px; min-width: 1000px; }
    
    

    /* ----- banner ----- */
/*     .banner_inner .owl-carousel .owl-nav {top: -27px;left: auto;right: 0;width: 84px;height: 42px;}
    .banner_inner .owl-carousel .owl-nav button {width: 42px !important; height: 42px !important; border-width: 1px 1px 1px 0 !important; border-style: solid !important; border-color: #dcdcdc !important;}    
    .banner_inner .owl-carousel .owl-nav .owl-prev {left: 0 !important; border-width: 1px !important;}
    .banner_inner .owl-carousel .owl-nav .owl-prev span {background: url(/web/resources/images/svg/btn_left.svg) center center no-repeat !important;}
    .banner_inner .owl-carousel .owl-nav .owl-next {right: 0 !important;}
    .banner_inner .owl-carousel .owl-nav .owl-next span {background: url(/web/resources/images/svg/btn_right.svg) center center no-repeat !important;}
 */    
    .graph_inner .graph_kind li.on:after { content: none; }    
}

@media screen and (max-width: 1044px) {
    /* ----- list ----- */
    .list_inner .owl-carousel .owl-item .item_inner a {padding: 20px 15px;}
}

@media screen and (max-width: 1000px) {
/*     .main {background-position: center 0 !important;} */
    .main .visual_wrap {padding-top: 130px;}
    .main .visual_wrap .visual_title {width: 100%;box-sizing: border-box;top: -89px;}

    /* ----- graph ----- */
    .graph_inner .graph_kind li a:before {left: 22%;}
}

@media screen and (max-width: 900px) {
    /* ----- accident ----- */
    .container .container_wrap .container_accident {height: 550px;}

    /* ----- graph ----- */
    .graph_inner .graph_kind {height: calc(67px * 5);}
    .graph_inner .graph_kind li {width: 100%; border-width: 0 1px 1px 1px;}
    .graph_inner .graph_kind li a:before {left: 40%;}
    /* .graph_inner .graph_kind li a span {width: 100%; text-align: center; position: relative; top: auto; left: auto; transform: none; line-height: 67px;} */
}

@media screen and (max-width: 759px) {
    /* ----- list ----- */
    .list_inner .title .list_nav li {padding-right: 22px; margin-right: 23px;}
    .list_inner .title .list_nav li:last-child {padding-right: 0;}
    
    /* ----- notice ----- */
    .board-area { height: 600px; float: none; }
    .board-area > .board-tab > .tab-list > li.on > .list-area { flex-direction: column;} 
    .board-area > .board-tab > .tab-list > li.on > .list-area > li { width: 100%; margin-bottom: 5px	; }
    .board-area > .board-tab > .tab-list > li > a.tab-title { width: 80px; }

	.board-area > .board-tab > .tab-list > li:nth-child(2) > a { left: 90px; }
	.board-area > .board-tab > .tab-list > li:nth-child(3) > a { left: 180px; }
	.board-area > .board-tab > .tab-list > li:nth-child(4) > a { left: 270px; }
    
    .container .container_wrap .container_notice { float: none; }
}

@media screen and (max-width: 750px) {
    
    /* ----- graph ----- */
    .graph_inner .graph_kind li a:before {left: 38%;}
}

@media screen and (max-width: 700px) {
    .main {/* background-position: -790px 0 !important; */}
    .main .visual_wrap {padding-top: 130px;}
    .main .visual_wrap .visual_title {width: 100%;padding-left: 20px;font-size: 2rem;}
    
    /* ----- accident ----- */
    .container .container_wrap .container_accident {height: 850px;}
    .accident_inner .accident_news li {width: calc((100% - 16px) / 2);height: calc((100% - 64px) / 3);margin-right: 16px !important;margin-bottom: 32px;}
    .accident_inner .accident_news li:nth-child(2n) {margin-right: 0 !important;}

    /* ----- information ----- */
}

@media screen and (max-width: 630px) {
    /* ----- graph ----- */
    .graph_inner .graph_kind li a:before {left: 35%;}
}

@media screen and (max-width: 597px) {
    /* ----- list ----- */
    .list_inner .owl-carousel .owl-nav,
    .list_inner .more_view {display: none !important;}
    .list_inner .title .list_nav {width: 100%;}
}

@media screen and (max-width: 510px) {
    /* ----- graph ----- */
    .graph_inner .graph_kind li a:before {left: 32%;}
}

@media screen and (max-width: 450px) {
    html {font-size: 4vw !important;}
    .main .visual_wrap {padding-top: 130px;}
    .main .visual_wrap .visual_title {width: 100%;padding-left: 20px;font-size: 1.5rem;}
    .main .visual_wrap .visual_title strong {font-size: 2.5rem}

    /* ----- list ----- */
    .list_inner .title .list_nav li {padding-right: 4vw; margin-right: 4vw;}
    .list_inner .title .list_nav li a {font-size: 1rem;}

    /* ----- info ----- */
    .information_inner .menu_list li a .info {height: 85px;}
    .information_inner .menu_list li a .info .info_icon {width: 10vw;height: 10vw;background-size: contain !important;}
    .information_inner .menu_list li a .info span {font-size: 0.875rem;}

    /* ----- graph ----- */
    .graph_inner .graph_kind li a:before {left: 28%;}
    
    /* ----- notice ----- */
    .board-area > .board-tab > .tab-list > li > a.tab-title > h1 { font-size: 0.825rem; }    
    .board-area > .board-tab > .tab-list > li > a.tab-title { width: 70px; }
    .board-area > .board-tab > .tab-list > li > a.tab-title > h2{
    	font-size:1.0rem;
    }
   	.board-area > .board-tab > .tab-list > li:nth-child(2) > a { left: 80px; }
	.board-area > .board-tab > .tab-list > li:nth-child(3) > a { left: 160px; }
	.board-area > .board-tab > .tab-list > li:nth-child(4) > a { left: 240px; }
    
}