﻿
/***************************max-width: 1000px****************************/
@media (max-width:1220px)
{
.BanerTop .Item img
{
	height: auto !important;
}
.BanerLeft .Item img
{	height: auto !important;
}
.RowMetaTitle
{		padding: 0 2%;
		width: 90%;
}
	.RepeaterIndexItem2
	{
		margin: 0;
		margin-top: 10px;
		width: 280px ;

		height: 352px;
		float:none;
		display:inline-block;
vertical-align:top;
	}

	.RepeaterIndexItem2 h2, .RepeaterIndexItem2 .Text
	{
		padding: 0 2%;
		width: 96%;
	}
	.RepeaterIndexItem2 .MetaTitle
	{
		padding: 0 2%;
		width: 96%;
	}
	
	.HeightPic
	{	width: 100%;
	}
	.ContentMainBoxBox1 .Right2
	{
		width: 100%;
		border:0;
	}
	.ContentMainBoxBox1 .Left2
	{
		width: 100%;
		padding:0;
		display:none;
	}
	.ContentMainBoxBox2
	{
		background-color: Transparent;
	}
	.SearchBoxBox
	{
		width: 100%;
	}
	.TextBoxAutoCapmlet
	{
		width: 265px;
	}
	.TextBoxBox
	{
		width: 275px;
	}
	.SearchBox
	{
		display: inline-block;
		float: none;
		width: 275px;
	}

	.BanerLeft .Item
	{
		border: 0 !important;
	}
	.FooterText2 img
	{
		width: 100%;
	}
	.ContentMainBoxBox1 .Right
	{
		width: 100%;
	}
	.ContentMainBoxBox1 .Left
	{
		width: 100%;
	}
	.RepeaterIndexItem
	{
		width: 280px;
		height: 342px;
		margin: 0;
		margin-top: 10px;
		float:none;
		display:inline-block;
		vertical-align:top;
	}

	.RepeaterIndexItem2 .ItemImage
	{
		display:inline-block;
		float: none;
	}
	.RepeaterIndexItem h3, .RepeaterIndexItem .Text
	{
		padding: 0 2%;
		width: 96%;
	}



	.ServiceBox3
	{
		display: none;
	}
	.BanerTop .Item
	{
		border: 0 !important;
	}
	.Sharing
	{
		width: 100%;
	}
	.LangBoxItem
	{
		display: inline-block;
		float: none;
	}
	.loginBox
	{
		width: 100%;
	}
	.loginBox .ItemLeft
	{
		display: inline-block;
		float: none;
	}

	.HeaderTop
	{
		
	}
	.Logo
	{
		width: 100%;
		margin-top: 10px;
	}
	.container
	{
		width: 100%;
	}

	#LinkShow
	{
		width: 100%;
		margin-top: 125px;
	}
	#LinkShow .Title, #LinkShow .ItemSub, #LinkShow .ItemSub a
	{
		text-align: center;
	}
	#LinkShow .Item
	{
		width: 200px;
		float: none;
		display: inline-block;
	}
	#LinkShow .Item
	{
		margin-right: 0px;
	}
	#LinkShow .Item2
	{
		margin-right: 0px;
	}
	#LinkShow .Item3
	{
		position: relative;
		float: right !important;
		overflow: hidden;
		margin-left: 0px;
		padding: 0;
	}
	#LinkShow .Item4
	{
		position: relative;
		float: right !important;
		overflow: hidden;
		margin-left: 0px;
		padding: 0 5px 0 5px;
	}

	.listResponsiveB
	{
		margin: 0;
		padding: 0;
		float: right;
		text-align: center !important;
		width: 100%;
	}
	.listResponsiveB li
	{
		float: none;
		display: inline-block;
	}
	.listResponsiveB li:nth-child(3), .listResponsiveB li:nth-child(4)
	{
		float: none !important;
	}
	.FooterText
	{
		width: 90%;
		padding: 0 5%;
		text-align: center;
		margin: 0;
	}

	.NavBox
	{
		width: 100%;
	}
	.owl-next, .owl-prev
	{
		display: none !important;
	}
}
@media (min-width: 1000px)
{
	.wrapper-flush
	{
		display: none !important;
		visibility: hidden;
	}

	.navFull
	{
		display: block !important;
		visibility: visible;
	}
	.has-dropdown:after
	{
		display: none;
	}
}
@media (max-width: 1000px)
{
	/*---------------------------------menu-------------------------*/
	.navDiv
	{
		height: 0;
	}
	.navFull
	{
		display: none !important;
		visibility: hidden;
	}
	.wrapper-flush
	{
		display: block !important;
		visibility: visible;
	}
	.ArrowDown, .ArrowDown2
	{
		display: none;
	}
	.ArrowDown, ArrowDown2, .ArrowDown3
	{
		display: none;
	}
	.TextIndexText, .SlideIndexText
	{
		width: 92%;
	}



}
@media (max-width: 980px)
{
	.navDiv
	{
		width: 100%;
	}

	.BoxIndex
	{
		width: 100%;
	}
	.BoxIndexR
	{
		margin-right: 0%;
	}
	.slideTuch
	{
		display: block;
		visibility: visible;
	}
	.SlidePicture
	{
		display: none;
		visibility: hidden;
	}
	.slider-wrapper
	{
		display: none;
		visibility: hidden;
	}
	.divLeft
	{
		margin-left: 60px;
	}
	.CopyRightRight
	{
		float: none;
		text-align: center;
		margin-right: 0px;
	}
	.CopyRightLeft
	{
		float: none;
		text-align: center;
		margin-left: 0px;
	}
	.CopyRight
	{
		margin-top: 15px;
	}


	.ServiceBox4 .ItemAds, .ServiceBox4 .ItemAds .Text
	{
		max-height: 3500px;
		border: none;
	}
}

/***************************max-width: 768px****************************/


@media (max-width: 768px)
{
	.logoBox
	{
		height: 190px;
		margin-bottom: 20px;
	}
	.Logo
	{
		width: 100%;
	}

	.Tell
	{
		display: none;
	}
	.loginBox
	{
		float: right;
	}
	.contactUsFooter
	{
		margin: 0;
		text-align: center;
		position: relative;
		width: 100%;
	}
	.navFooterList
	{
		position: relative;
		right: 50%;
		margin-right: -110px;
	}
	.footerPicCenter
	{
		position: relative;
		left: 50%;
		margin-left: -120px;
	}
	.ContentMainRight, .ContentMainLeft
	{
		width: 100%;
		margin: 0;
	}




	.ProductShow2 .ItemImage
	{
		margin-right: 0px;
	}
	/*----Box----*/
	.Box .BoxCenter img
	{

		height: auto;
	}

	.TagImage
	{
		height: 16px !important;
		width: 16px !important;
	}
	.ProductShow1 .Left
	{
		width: 100%;
		height: 250px;
		float: right;
		margin: 0;
		padding: 0;
		margin-top: 10px;
		border-radius: 3px;
		position: relative;
	}
	.ProductShow1 .Left img
	{
		width: 100%;
		height: 250px !important;
		float: right;
		margin: 0;
		padding: 0;
		margin-top: 10px;
		border-radius: 3px;
	}
	.Box .BoxCenterB
	{
		margin-top: 20px;
	}
	.commentUserRight, .commentUserLeft
	{
		width: 100%;
		margin-top: 10px;
	}
	.FieldCaptcha
	{
		height: 30px !important;
		width: 75px !important;
	}
}
@media (max-width:680px)
{

	.box-front, .box-back
	{
		width: 130px;
		height: 130px;
	}
	.ServiceBox2
	{
		min-height: 100px;
		margin-top: 30px;
		border: 0 !important;
	}
	.ServiceBox2 .ItemAds, .ServiceBox2 .ItemAdsBox
	{
		width: 95% !important;
		margin-left: 5%;
		height: auto !important;
	}
	.ServiceBox2 .ItemAds .ImageBox, .ServiceBox2 .ItemAds .ItemImage
	{
		width: 90%;
		height: 150px;
		float: right;
		padding: 5%;
		padding-bottom: 0;
	}


	.IndexText
	{
		float: right;
		width: 87%;
		height: auto;
		padding: 20px;
		font-size: 12px;
		text-align: justify;
		margin: 10px 0 0 0;
	}
	.BoxCenterIndexText
	{
		float: right;
		height: auto;
		width: 100%;
		margin: 15px 0px 0 0;
		background-size: 100% 100%;
	}
}

/***************************max-width: 480px****************************/


@media (max-width:480px)
{


	.ServiceBox1
	{
		float: right;
		width: 280px;
		position: relative;
		right: 50%;
		height: auto;
		overflow: hidden;
		margin: 19px -140px 19px 0;
	}
	.ServiceBox1 .ItemAds
	{
		width: 130px;
		height: 130px;
		margin: 3px;
		float: right;
		transition: all 0.7s;
		background: url(../Administrator/Files/Design/bgServiceLeft.png) no-repeat left;
	}
	.ServiceBox1 .ItemAds .ItemImage
	{
		float: right;
		width: 130px;
		height: 130px;
	}





	.divLeft
	{
		float: right;
		width: 250px;
	}


	.colorA a
	{
		color: #555;
		font-size: 12px;
	}

	.BoxCenterColor
	{
		margin-right: 30px;
	}
	.FieldTitle
	{
		float: right;
		width: 100px;
		text-align: right;
		margin-right: 20px;
		font-size: 9pt;
	}
	.FieldButtonD
	{
		margin-right: 110px !important;
	}
	.FieldTitleB
	{
		width: 82px;
		overflow: hidden;
	}

	.RepeaterIndex2Item
	{
		width: 127px;
		height: 130px;
	}
	.RepeaterIndex2Item .ImageBox
	{
		width: 117px !important;
		height: 80px !important;
	}
	.RepeaterIndex2Item .Image
	{
		max-width: 117px !important;
		height: 80px !important;
	}
	.CatProductShow .ItemAds
	{
		float: right;
		width: 110px;
		height: 170px;
		margin-right: 7px;
		margin-left: 7px;
		text-align: center;
	}
	.CatProductShow .ItemImage
	{
		float: right;
		width: 110px !important;
		height: 110px !important;
		background: #fff;
		padding: 3px;
		box-shadow: 1px 1px 2px 1px #d5d5d5;
	}





	.ProductLeft
	{
		float: right;
		width: 100%;
	}
	.ProductShow1 .Left1
	{
		width: 280px;
		height: 345px;
	}


	/*----servicesBox----*/

	.ServiceBoxIn .ItemAds
	{
		width: 280px;
	}


	.IndexTextmain
	{
		width: 96% !important;
		padding-right: 2%;
		padding-left: 2%;
	}
	/*----FooterLink----*/
	.textLeftFooter, .textRightFooter
	{
		width: 280px;
		float: right;
	}

	/*----Box----*/
	.Box .BoxCenter .ImagePost
	{
		max-width: 270px;
		float: right;
	}
	/*----AdsHomePageGallery----*/
	.ProductShow1 .Left
	{
		width: 100%;
	}
	.ProductShow1 .Left img
	{
		width: 100%;
	}
	.HeaderDownBox a
	{
		float: right;
	}
}









/* ==================== menu responsive ================ */

.wrapper-flush
{
	width: 100%;
}
.has-dropdown .nav
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 10000;
	background-color: #000;
}


.nav-container
{
	position: fixed;
	top: 59px; /* 1 */
	left: 0;
	z-index: 999999999999999;
	overflow-y: auto;
	visibility: hidden; /* 2 */
	width: 100%;
	height: 100%;
	min-height: 100%;
	margin: 0;
	padding: 0;
	-webkit-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
	transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
	-webkit-transform: translateX(-100%);
	-ms-transform: translateX(-100%);
	transform: translateX(-100%); /* 2 */
	-webkit-overflow-scrolling: touch; /* 3 */
}

.nav-container.is-visible
{
	visibility: visible; /* 1 */
	-webkit-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0); /* 1 */
}


.nav-toggle
{
	line-height: 1;
	display: inline-block;
	padding: 1.25rem 1rem;
	border: 0;
	background: rgba(205,158,40,1);
	background: -moz-radial-gradient(center, ellipse cover, rgba(205,158,40,1) 0%, rgba(248,197,69,1) 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(205,158,40,1)), color-stop(100%, rgba(248,197,69,1)));
	background: -webkit-radial-gradient(center, ellipse cover, rgba(205,158,40,1) 0%, rgba(248,197,69,1) 100%);
	background: -o-radial-gradient(center, ellipse cover, rgba(205,158,40,1) 0%, rgba(248,197,69,1) 100%);
	background: -ms-radial-gradient(center, ellipse cover, rgba(205,158,40,1) 0%, rgba(248,197,69,1) 100%);
	background: radial-gradient(ellipse at center, rgba(205,158,40,1) 0%, rgba(248,197,69,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=   '#cd9e28' , endColorstr= '#f8c545' , GradientType=1 );
	position: fixed;
	left: 0;
	top: 0;
	z-index: 9999999999999999999999;
	cursor: pointer;
}


.nav-toggle .icon-menu
{
	position: relative;
	display: inline-block;
	width: 28px;
	height: 20px;
	vertical-align: middle;
	fill: none;
	cursor: pointer;
}


.icon-menu .line
{
	position: absolute;
	left: 0;
	display: block;
	width: 100%;
	height: 4px;
	-webkit-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1.000);
	transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1.000);
	-webkit-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
	transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
	background-color: #fff;
}


.icon-menu .line-1
{
	top: 0;
}


.is-active .icon-menu .line-1
{
	-webkit-transform: translateY(8px) translateX(0) rotate(45deg);
	-ms-transform: translateY(8px) translateX(0) rotate(45deg);
	transform: translateY(8px) translateX(0) rotate(45deg);
}


.icon-menu .line-2
{
	top: 50%;
	margin-top: -2px;
}


.is-active .icon-menu .line-2
{
	opacity: 0;
}


.icon-menu .line-3
{
	bottom: 0;
}


.is-active .icon-menu .line-3
{
	-webkit-transform: translateY(-8px) translateX(0) rotate(-45deg);
	-ms-transform: translateY(-8px) translateX(0) rotate(-45deg);
	transform: translateY(-8px) translateX(0) rotate(-45deg);
}

.menu
{
	list-style: none !important;
	margin: 0;
	padding: 0;
}


.nav-menu
{
	background-color: #dedede; /* 1 */
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none; /* 2 */
	box-shadow: 0px 0px 7px #888;
}


.nav-menu .menu-item
{
	border-top: 1px solid #bbb;
	text-align: right;
}


.nav-menu > .menu-item:last-child
{
	border-bottom: 1px solid #bbb;
}


.nav-menu > .menu-item:hover, .nav-menu > .menu-item.is-active
{
	background-color: #d0d0d0;
}

.nav-menu .menu-link
{
	display: block; /* 1 */
	text-decoration: none;
	color: #444;
	padding: 0.75rem 1rem;
	width: 60%;
}


.has-dropdown
{
	position: relative;
	cursor: pointer; /* 1 */
}


.has-dropdown > .menu-link
{
	display: inline-block;
}


.has-dropdown:after
{
	font-size: 38px;
	position: absolute;
	top: 10px;
	left: 1rem;
	bottom: 0;
	content: "+"; /* 1 */
	color: #222;
}


.has-dropdown.is-active:after
{
	content: "\2013"; /* 1 */
}



.nav-dropdown
{
	display: none; /* 1 */
}

.has-dropdown.is-active > .nav-dropdown
{
	display: block; /* 1 */
}


.nav-dropdown .nav-dropdown
{
}

.nav-dropdown .menu-item
{
}
.nav-dropdown .menu-item:hover
{
	
}
.nav-dropdown .nav-dropdown .menu-item
{
}


.content
{
	margin-top: 60px;
}

.content .wrapper
{
	padding: 1rem 0;
}
@media (min-width: 1000px)
{


	.nav, .nav-container, .nav-container.is-visible
	{
		position: static;
		top: auto;
		left: auto;
		z-index: auto;
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0);
	}

	.nav-container, .nav-container.is-visible
	{
		visibility: visible;
		height: auto;
		min-height: 0;
		overflow-y: visible;
	}

	.nav-toggle
	{
		display: none;
	}


	.nav-menu > .menu-item, .nav-menu > .menu-item.is-active
	{
		display: inline-block; /* 1 */
		background-color: transparent;
		border: 0;
	}


	.nav-menu > .menu-item:last-child
	{
		border: 0;
	}

	.nav-menu .menu-item
	{
		-webkit-transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
		transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
	}


	.has-dropdown:after
	{
		content: "" !important;
	}


	.nav-menu > .has-dropdown:after
	{
		position: absolute;
		top: 50%;
		right: 1rem;
		width: 0;
		height: 0;
		margin-top: -2px;
		margin-left: -4px;
		content: "";
		border-width: 5px 5px 0 5px;
		border-style: solid;
		border-color: #444 transparent transparent transparent;
	}


	.has-dropdown > .menu-link
	{
		padding-right: 2rem;
	}


	.nav-dropdown
	{
		display: block;
		opacity: 0;
		position: absolute;
		top: 100%;
		width: 200px;
		margin: 0;
		padding: 0.5rem 0;
		visibility: hidden;
		-webkit-transition: visibility 0s linear 0.25s, opacity 0.25s linear;
		transition: visibility 0s linear 0.25s, opacity 0.25s linear;
	}

	.has-dropdown:hover > .nav-dropdown
	{
		visibility: visible;
		opacity: 1;
		-webkit-transition-delay: 0s;
		transition-delay: 0s;
	}

	.nav-dropdown .menu-item
	{
		border: 0;
	}

	.nav-dropdown .menu-item:hover, .nav-dropdown .nav-dropdown .menu-item:hover
	{
		
	}

	.nav-dropdown .nav-dropdown, .nav-dropdown .nav-dropdown .menu-item
	{
	}

	.nav-dropdown .nav-dropdown
	{
		z-index: 9998;
		top: 0;
		left: 100%;
	}

	.content
	{
		margin-top: 0;
	}
}


