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

@media (max-width: 1280px){
	#content-wrap{
		padding-top: 15px;
	}

}

@media (max-width: 1250px){
	/* .main-nav a{
		max-width: 250px;
	} */
	.main-nav{
		max-width: 1050px;
	}
	#main-wrap .main-nav a{
		padding-left: 5px;
		padding-right: 5px;
		font-size: 1em;
		min-width: 75px;
		margin: 0 7px;
	}
}

@media (max-width: 980px){
	header{
		border-bottom: 1px solid #fff;
	}
	header #header-top-left a img{
		width: 56px;
	}
	header .main-nav{
		display: none;
	}
	header #header-top-right > div.lang-nav, header #header-top-right > a{
		display: none;
	}
	#header-top-right #menu-btn{
		display: block;
	}
	header #header-top,
	header.scrolled #header-top,
	#content,
	footer,
	#breadcrum div{
		padding-left: 20px;
		padding-right: 20px;
	}
	header.scrolled + #middle-wrap{
		margin-top: 71px!important;
	}
	#middle-wrap{
		margin-top: 90px !important;
	}
	#content-wrap{
		padding-top: 0!important;
	}
	#mobile-wrap .main-nav,
	#mobile-wrap .main-nav a > span{
		justify-content: flex-start;
		text-align: left;
	}
	#mobile-wrap .main-nav li{
		display: block;
		width: 100%;
		position: relative;
		-webkit-transition: all .3s;
		transition: all .3s;
	}
	#mobile-wrap .main-nav li a{
		display: block;
		position: relative;
		padding: 10px 0;
	}
	#mobile-wrap .main-nav .subnav > ul > li a{
		font-size: 1.125em;
	}
	#mobile-wrap .main-nav > li > a .arrow{
		position: absolute;
		top: 0;
		right: 0;
		width: 40px;
		display: block;
		height: 100%;
		text-indent: -9999px;
		font-size: 0;
		line-height: 0;
	}
	#mobile-wrap .main-nav > li > a .arrow:after{
		content: '';
		position: absolute;
		top: 30%;
		left: 0;
		width: 26px;
		display: block;
		height: 26px;
		text-indent: -9999px;
		font-size: 0;
		line-height: 0;
		z-index: 1;
		background-color: #ffffff;
		border-radius: 50%;
	}
	#mobile-wrap .main-nav > li > a .arrow:before{
		top: 40%;
		left: 20%;
		z-index: 2;
	}
	#mobile-wrap .main-nav > li.active > a .arrow:before{
		top: 45%;
	}
	#mobile-wrap .main-nav > li.active,
	#mobile-wrap .main-nav > li.selected{
		background-color: #21619A;
	}
	#mobile-wrap .main-nav > li.active > a,
	#mobile-wrap .main-nav > li.selected > a{
		color: #ffffff;
	}
	#mobile-wrap .main-nav li a,
	#mobile-wrap .main-nav li a span{
		bottom: 0 !important;
	}
	#mobile-wrap .main-nav > li .subnav{
		position: relative;
		top: auto;
		left: auto;
		background-color: #b3e2f4;
	}
	#mobile-wrap .main-nav > li .subnav ul{
		padding: 0;
		display: block;
	}
	#mobile-wrap .main-nav > li .subnav ul li{
		border-left: 0;
		padding: 0;
		margin-bottom: 1px;
	}
	#mobile-wrap .main-nav > li .subnav ul li a{
		padding: 10px 20px;
		text-align: left;
	}
	#mobile-wrap .main-nav > li .subnav ul li > a:hover,
	#mobile-wrap .main-nav > li .subnav ul li > a:focus,
	#mobile-wrap .main-nav > li .subnav ul li.selected > a{
		background-color: #90d3ed;
	}
	#mobile-wrap .main-nav > li .subnav ul li .arrow{
		display: none;
	}
	#mobile-wrap .main-nav > li .subnav ul ul{
		background-color: transparent;
	}
	#mobile-wrap .main-nav > li .subnav ul ul a{
		padding: 10px 20px 10px 35px;
	}
	#mobile-wrap .main-nav > li .subnav ul ul a:hover,
	#mobile-wrap .main-nav > li .subnav ul ul a:focus,
	#mobile-wrap .main-nav > li .subnav ul ul li.selected a{
		background-color: #cdffff;
	}
	#mobile-wrap .main-nav > li .subnav ul ul a:before{
		border-top: 5px solid transparent;
		border-bottom: 5px solid transparent;
		border-left: 5px solid #78a1b3;
		top: .9em;
		left: 25px;
	}
	#mobile-wrap .main-nav > li .subnav ul ul li{
		border-bottom: 0;
	}
}


@media (max-width: 767px){
	body{
		font-size: 14px;
	}
	header #header-top, header.scrolled #header-top, #content, footer, #breadcrum div{
		padding: 10px;
	}
	header #header-top-left a{
		font-size: 0.857em;
	}
	header #header-top-left a img {
		width: 40px !important;
	}
	header #header-top-left a span{
		font-size: 1.233em;
	}
	/* header #header-top-left a span strong{
		font-size: 1.333em;
	} */
	#header-top-right #menu-btn{
		width: 40px;
	}
	#header-top-right #menu-btn span{
		width: 20px;
	}
	#header-top-right #menu-btn span:before,
	#header-top-right #menu-btn span:after,
	#mobile-wrap #mobile-nav #menu-close-btn:before, #mobile-wrap #mobile-nav #menu-close-btn:after{
		width: 20px;
	}
	#header-top-right #menu-btn span:before{
		top: -8px;
	}
	#header-top-right #menu-btn span:after{
		bottom: -8px;
	}
	#mobile-wrap #mobile-nav .lang-nav > div{
		height: 60px;
		padding: 10px;
	}
	#mobile-wrap #mobile-nav .lang-nav > div a{
		margin-right: 5px;
		flex: 0 1 35px;
		width: 35px;
		height: 35px;
		line-height: 35px;
	}
	#mobile-wrap #mobile-nav #menu-close-btn{
		width: 40px;
		height: 60px;
	}
	#mobile-wrap .main-nav{
		padding: 10px 0 30px;
	}
	
	.main-nav a,
	#mobile-wrap .main-nav a > span > span{
		padding: 10px;
		bottom: auto !important;
	}
	#mobile-wrap .main-nav a > span > span{
		padding: 5px 20px;
	}
	#middle-wrap{
		margin-top: 60px !important;
	}
	header #header-top-left{
		max-width: calc(100% - 40px);
	}
	header #header-top-left a span{
		max-width: calc(100% - 50px);
	}
	#content p.icon:before{
		top: -3px;
	}
	#content .flexbox.col-2{
		flex-wrap: wrap;
	}
	#content .flexbox.col-2 > div{
		flex: 0 1 100%;
		padding: 0!important;
		margin-bottom: 15px;
	}
	#top-btn{
		width: 40px;
		height: 40px;
	}
	#top-btn:before{
		width: 12px;
		height: 12px;
	}
}

@media (max-width: 600px){
	footer{
		flex-wrap: wrap;
	}
	footer > div{
		flex: 0 1 100% !important;
	}
	footer #footer-right{
		margin-top: 10px;
	}
	footer #footer-right a{
		margin-left: 0;
		margin-right: 20px;
	}
}

@media (max-width: 450px){
	footer #footer-right a:first-child{
		margin-bottom: 10px;
	}
}