@charset "utf-8";

/*====================================
	wideslider.css
====================================*/
@media screen and (max-width: 979px){
    .pauseplaybtn {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: auto;
        z-index: 20;
    }
    .pauseplaybtn a {
        bottom: 10px;
        right: 10px;
    }
    .pauseplaybtn a img {
        width: 32px;
        height: 32px;
    }
}

/*====================================
	drawer.css
====================================*/
/*!------------------------------------*\
    Base
\*!------------------------------------*/
@media screen and (max-width: 767px){
  .drawer-nav{
    position: fixed;
  }
}
/*!------------------------------------*\
    Hamburger
\*!------------------------------------*/
@media screen and (max-width: 767px){
  
  .drawer-hamburger {
    position: fixed;
    z-index: 104;
    top: 0;
    display: block;
    box-sizing: content-box;
    width: 2rem;
    padding: 0;
    padding-top: 18px;
    padding-right: .75rem;
    padding-bottom: 30px;
    padding-left: .75rem;
    -webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
    transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    border: 0;
    outline: 0;
    background-color: #0063AE;
  }
}

/*====================================
	component.css
====================================*/
/*====================================
	common
====================================*/
/* -----------------------------------
Genaral
------------------------------------*/
/* body
----------------------------------- */
@media screen and (max-width: 767px){
	img{
		max-width: 100%;
		height: auto;
	}
}
/* -----------------------------------
Media Query
------------------------------------*/

/* max-widht:979px
----------------------------------- */
@media screen and (max-width: 979px){
	.header .sm-display{
		display: none
	}
	.header .container .wrap{
		margin-top: 60px;
		width: 360px;
	}
	.header .container .wrap .func{
		margin-right: 20px;
	}
	.header .container .wrap .func .voice{
		display: none;
	}
	.content .container{
		background: #FFFEED;
	}
	.content .main{
		width: 100%;
	}
	.content .main .wrap{
		width: 100%;
		max-width: 100%;
		margin-left: 0;
	}
	.content .aside{
		width: 100%;
	}
	.gnav .container{
		padding: 12px;
	}
	.gnav .container ul li{
		width: 32%;
		margin-right: 2%;
		margin-bottom: 4px;
		background: #FFF;
	}
	.gnav .container ul li:nth-child(3n){
		margin-right: 0;
	}
	.gnav .container ul li:last-child:before{
		display: none;
	}
	.gnav .container ul li a{
		padding: 14px 14px;
		background: url(/shared/templates/police/img/bg_inner_li.png) no-repeat right 14px center;
		color: #0063AE;
		border: 1px solid #0063AE;
	}
	.gnav .container ul li a:hover{
		background: #0063ae url(/shared/templates/police/img/bg_a_on.png) no-repeat right 14px center;
		color: #FFF;
		border: 1px solid #fff;
	}
	.gnav .container ul li:after{
		display: none;
	}
	.aside{
		margin-bottom: 30px;
		padding: 15px;
		background: #FFF;
		border: 2px solid #e5e5e5;
		border-radius: 8px;
	}
	.aside .information ul li,
	.aside .category ul li{
		float: left;
		width: 32%;
		margin-right: 2%;
		border: 1px solid #3787C5;
	}
	.aside .information ul li:nth-child(3n),
	.aside .category ul li:nth-child(3n){
		margin-right: 0;
	}
	.aside .information ul li a,
	.aside .category ul li a{
		padding: 12px;
		background-position:  right 14px center;
	}
	.aside .information ul li a:hover,
	.aside .category ul li a:hover{
		color: #FFF;
		background: #3787C5 url(/shared/templates/police/img/bg_aside_a_on.png) no-repeat right 14px center;
	}
}

/* max-widht:767px
----------------------------------- */
@media screen and (max-width: 767px){
	.header .container .wrap{
		width: 200px;
		margin-top: 60px;
		margin-right: 60px;
	}
	.header .container .wrap .func{
		margin-right: 0;
	}
	.gnav .container ul li{
		width: 100%;
	}
	.content .container .main h1{
		font-size: 150%;
	}
	.main .wrap .box .inner{
		margin: 15px;
	}
	.aside .information ul li,
	.aside .category ul li{
		width: 100%;
	}
}

/* max-widht:666px
----------------------------------- */
@media screen and (max-width: 666px){
	.header .container h1 {
		width: 250px;
		background-size:  100%;
	}
	.header .conteiner h1 a{
		width: 250px;
	}.header .container .logo {
		width: 250px;
		background-size:  100%;
	}
	.header .conteiner .logo a{
		width: 250px;
	}
	.header .container .wrap{
		margin-top: 50px;
	}
}

@media screen and (max-width: 530px){
	.header .container h1{
		width: 200px;
		margin-top: 0;
		background-position: left center;
		background-size:  100%;
	}
	.header .container h1 a{
		width: 200px;
		background-position: left center;
		background-size:  100%;
	}
	.header .container .logo{
		width: 200px;
		margin-top: 0;
		background-position: left center;
		background-size:  100%;
	}
	.header .container .logo a{
		width: 200px;
		background-position: left center;
		background-size:  100%;
	}
}
/* max-widht:414px
----------------------------------- */
@media screen and (max-width: 479px){
	.header .container h1{
		width: 200px;
		margin-top: 0;
		background-position: left center;
		background-size:  100%;
	}
	.header .container h1 a{
		width: 200px;
		background-position: left center;
		background-size:  100%;
	}
	.header .container .logo{
		width: 200px;
		margin-top: 0;
		background-position: left center;
		background-size:  100%;
	}
	.header .container .logo a{
		width: 200px;
		background-position: left center;
		background-size:  100%;
	}
	.header .container .wrap{
		width: 100%;
		margin-top: 0;
		margin-right: 0;
		font-size: 12px;
	}
	.header .container .wrap .func{
		float: left;
	}
	.header .container .wrap .func .translation{
		margin: 0;
	}
	.header .container .wrap .change{
		margin-top: 2px;
		float: right;
	}
}

/*====================================
	top.css
====================================*/
/* ---------------------------------------------------------
top-peage
----------------------------------------------------------*/
/* relation
--------------------------------------------------------- */
@media screen and (max-width: 979px){
	.safe-living .bnr-main ul li{
		width: 32%;
		margin-right: 2%;
		margin-bottom: 8px;
	}
	.safe-living .bnr-sub ul li{
		width: 32%;
		margin-right: 2%;
	}
	.relation ul li{
		width: 23.5%;
		margin-right: 2%;
	}
	.aside .banner ul li{
		margin-right: 10px;
		display: inline-block;
		float: left;
	}
	.aside #side-slide{
		width:190px;
		margin: auto;
		overflow:hidden;
		margin-top: 0;
	}
}
@media screen and (max-width: 767px){
	.topics .tab .tabnav li{
		width: 33.33333%;
	}
	.topics .tab .tabnav li:last-child:before{
		display: none;
	}
	.topics .tab .tabnav li a{
		padding: 20px 0;
		text-align: center;
	}
	.topics dl dt{
		position: static;
	}
	.topics dl dd{
		padding-left: 0;
	}

	/* ----- bnr-main ----- */
	.safe-living .bnr-main ul li{
		height: 92px;
	}
	.safe-living .bnr-main ul li a{
		padding-left: 0px;
		padding-top: 56px;
		text-align: center;
		vertical-align: middle;
		background:  no-repeat top 14px center;
		transition: 0.4s;
	}
	.relation ul li{
		width: 49%;
		margin-right: 2%;
		margin-bottom: 10px;
	}
	.relation ul li:nth-child(even){
		margin-right: 0;
	}
	.aside .banner ul li{
		float: left;
		width: 49%;
		margin-bottom: 10px;
		margin-right: 2%;
	}
	.aside .banner ul li:nth-child(even){
		margin-right: 0;
	}
	.aside .banner ul li a{
		background-image: none;
	}
}