@charset "utf-8";

/* CSS Document */
#nav-wrap {
	margin-top: 0px;
}
/* menu icon */
#menu-icon {
	display: none; /* hide menu icon initially */
}
#example-one, 
#example-one li { display:block;}
#example-one li {
	list-style: none;
	float: left;
}

/* nav link */
#example-one a {
	display: block;
}
#example-one a:hover {
}

/* nav dropdown */
#example-one ul {
	background: #fff;
	padding: 2px;
	position: absolute;
	border: solid 1px #ccc;
	display: none; /* hide dropdown */
	width: 200px;
}
#example-one ul li {
	float: none;
	margin: 0;
	padding: 0;
}
#example-one li:hover > ul {
	display: block; /* show dropdown on hover */
}

/************************************************************************************
MOBILE
*************************************************************************************/

@media screen and (max-width: 1080px) {
#nav-wrap ul li a {
  font-size: 16px;
}
#nav-wrap span{ padding:0 !important ; background:none !important}
}
@media screen and (max-width: 639px) {
	/* nav-wrap */
	#example-one-wrap {
		position: relative;
	}
    #example-one li { margin-right:0px;}
	/* menu icon */
	#menu-icon {
		color: #333;
		width: 20px;
		height: 20px;
		background: #268dd9 url(../images/menu-icon_white.png) no-repeat  center center;
		padding: 8px 8px;
		cursor: pointer;
		border-radius: 6px;
		margin-top:9px; float:right; margin-right:10px;
		display: block; /* show menu icon */
		-webkit-box-sizing: content-box
	}
	.blue #menu-icon {background: #268dd9 url(../images/menu-icon_white.png) no-repeat  center center; border: solid 1px #268dd9;}
	.blue #menu-icon:hover , .blue #menu-icon.active{ background: #1452a7 url(../images/menu-icon_white.png) no-repeat  center center; border: solid 1px #1452a7;}
	.green #menu-icon {background: #0d9880 url(../images/menu-icon_white.png) no-repeat  center center; border: solid 1px #0d9880}
	.green #menu-icon:hover , .green #menu-icon.active{ background: #02715e url(../images/menu-icon_white.png) no-repeat  center center; border: solid 1px #02715e;}
	.black #menu-icon {background: #666 url(../images/menu-icon_white.png) no-repeat  center center; border: solid 1px #666}
	.black #menu-icon:hover , .black #menu-icon.active{ background: #333 url(../images/menu-icon_white.png) no-repeat  center center; border: solid 1px #333;}

	.orange #menu-icon {background: #ff7200 url(../images/menu-icon_white.png) no-repeat  center center; border: solid 1px #ff7200}
	.orange #menu-icon:hover , .orange #menu-icon.active{ background: #ff4800 url(../images/menu-icon_white.png) no-repeat  center center; border: solid 1px #ff4800;}
	.pink #menu-icon {background: #ff557f url(../images/menu-icon_white.png) no-repeat  center center; border: solid 1px #ff557f}
	.pink #menu-icon:hover , .pink #menu-icon.active{ background: #ff1a50 url(../images/menu-icon_white.png) no-repeat  center center; border: solid 1px #ff1a50;}

	/* main nav */
	#example-one {		
		position: absolute;
		top: 55px;
		width: 200px;
		z-index: 10000;
		padding: 0px;
		background: #fff;
		border: solid 0px #ccc;
		display: none; /* visibility will be toggled with jquery */
	}
	#example-one li {
		clear: both;
		float:none;		
		border-bottom:1px solid #ccc;
	}
	#example-one a, 
	#example-one ul li a {

		background: none;
		display: block; font-size:15px; padding: 11px 10px;
		color: #333;
	}
	#example-one a:hover, 
	#example-one ul a:hover {
		background: #f5007f;

	}
	
	/* dropdown */
	#example-one ul {
		width: auto;
		position: static;
		display: block;
		border: none;
		background: inherit;
	}
	#example-one ul li {
		margin: 3px 0 3px 15px;
	}

}

@media screen and (min-width: 639px) {

	/* ensure #example-one is visible on desktop version */
	#example-one {
		display: block !important;
	}

}

@media screen and (max-width: 639px) {
article, article table{ width:100%}



#wrap{ width:100%; min-height: 100%; height: auto%; background:#FFF; min-width:320px; box-sizing:border-box;}
.ctd{min-width:320px; max-width: 100%; padding:0 10px; width:auto;}
.logo_mobile{ display: block; float:left; margin-left:10px; margin-top:4px; z-index:9999}
.logo_mobile img{ height:48px;}
.logo_mobile a{ display:block; z-index:9999}

.blue .top h1{  top:30%; font-size:100px; margin-top:0px; }
.blue .top h2{  top:50%; font-size:80px; margin-top:0px;}
.blue .top .slogon_webdesign{ top:30%; font-size:100px; margin-top:0px; }
.blue .top .desc_webdesign{top:50%; font-size:80px; margin-top:0px;}
.web_design_rightcontent h1{ font-size:30px;}
.main_webdesign h3{font-size:30px; color:#2f8ace; padding-top:30px; padding-bottom:5px;}
.main_webdesign ul{ padding:30px 0px;}
.main_webdesign ul li{ float: left; width:46%; margin-bottom:15px;  margin-left:3%; border-radius:0px;  box-shadow:0px 0px 1px #ccc; }
.main_webdesign ul li + li{ margin-left:3%; }
.main_webdesign ul li + li + li{ margin-left:3%; }
.main_webdesign ul li + li + li + li{ margin-left:3%; }
.main_webdesign ul .desc{ text-align: center; padding:10px 10px 20px 10px; font-size:13px; line-height:18px;}
.main_webdesign ul .webdesign_title{ padding:15px 0px 0px 0px; font-size:15px;}
.main_webdesign ul .webdesign_title_en{ padding:0px 0px 15px 0px; font-size:13px;}
.main_project_ref .ctd{ padding:40px 0px 40px 0px; position:relative;}
#profile_new h4{ padding:40px 0}
.main_latest_area{ background:#e2f2fa; min-height:150px; }
.main_latest_area .ctd{ padding:10px 0px 30px 0px; position:relative;}
.main_latest_area .shotcut_icon{ }
.main_latest_area .shotcut_icon ul{ list-style:none; padding:10px 0px; list-style:none; margin-left:1%;}
.main_latest_area .shotcut_icon ul li{ ; width:31%; text-align: center; font-size:15px; padding:1%; float:left;}
.main_latest_area .shotcut_icon ul li .title{ font-size:17px; color:#005ca2; padding:10px 0px 10px 0; display:block;}
.main_latest_area .shotcut_icon ul li img{ height:60px;  }

.main_latest_area .shotcut_icon ul li .go_link{ width:80%; font-size:13px; padding-top:15px;}
.main_latest_area .shotcut_icon ul li .go_link a{ color:#FFF; line-height:30px; display:block; background:url(../images/btn_go.png) repeat-x; border-radius:6px; white-space: nowrap;}
.main_latest_area .shotcut_icon ul li .go_link a:hover{ color:#FFF; line-height:29px; display:block; background:url(../images/btn_go_over.png) repeat-x; margin-top:1px;}
.main_webdesign ul li:nth-child(3n){ clear:both;}

.main_latest_area .shotcut_icon ul li p{ display:none; }
.main_project_ref .plane_station{ position:absolute; left:30px; top:-15px;}
.main_project_ref .plane{ position:absolute; left:40%; top:-12px;}
.main_latest_area .wheel{ display:none; }
.main_latest_area .Helicopters{ display:none; }

.erp_bg{min-height: 150px; padding:50px 0; margin-top:25px;}
.erp_bg .package{ padding:10px 15px; background: rgba(0,0,0,.7); border:1px solid rgba(100%,100%,100%,.5); width:85%; margin:0px auto; }

.main_project_ref .silder_ref ul{ list-style:none; width:100%; padding:30px 0px 0px 0px; margin-left:-1.5%;}
.main_project_ref .silder_ref ul li{ float:left; width:47%; margin-left:3%; margin-bottom:10px; }
.main_project_ref .silder_ref ul li div{ }
.main_project_ref .silder_ref ul li div:hover{ box-shadow:0px 0px 0px #268dd9;}

.cd-top {
  bottom: 0px;
  right: 1%;
}


.web_style_des_b{ margin:0; }
#nav-wrap{ z-index:999; position: relative; height:55px; width:100%; text-align: right;}
#nav-wrap ul{ list-style:none; background:#fff; height: auto; width:100%; max-width: none; border-radius:0px; box-shadow:0px 0px 0px #888; border-top: 1px solid #ccc;}
#nav-wrap ul li{ float: none;text-align: center; }
#nav-wrap li { width:23%; display:none}
#nav-wrap li + li { width:100%; background:url(../images/menu_sp.png) left center no-repeat; display: block}
#nav-wrap li + li + li{ width:100% !important; display: block }
#nav-wrap li + li + li + li + li + li{ width:100%; display: block}
#nav-wrap li + li + li + li + li + li + li{ width:100%; display: block}
#nav-wrap .aboutus a,#nav-wrap .webdesign a,#nav-wrap .portfolio a,#nav-wrap .online_quote a,#nav-wrap .contactus a,#nav-wrap .knowledge a{ padding:15px 0px;}
.blue{ border-top:5px solid #268dd9; border-left:0px; border-right:0px; border-bottom:0px;}
.green { border-top:5px solid #298321; border-left:0px; border-right:0px; border-bottom:0px;}
.black { border-top:5x solid #666; border-left:0px; border-right:0px; border-bottom:0px;}
.orange { border-top:5px solid #ff7200;border-left:0px; border-right:0px; border-bottom:0px; }
.pink {border-top:5px solid #ff557f; border-left:0px; border-right:0px; border-bottom:0px;}
.footer{ text-align: left; padding:23px 0px 20px 10px; color:#333; background: none; font-size:12px; line-height:12px;}

.blue .footer,.green .footer,.black .footer,.orange .footer,.pink .footer{ background:#eee;}
.breadcrumb{ display:inline; padding:0;}
.inner_banner{ height:auto;}
.business_plan ul li{ display:inline-block}
.business_plan  ul li .business_photo { width:100%;}
.business_plan  ul li .business_des { width:96%; padding:20px 2%;}

.pruple .artical ul {
  display: grid;
  padding: 15px;
  margin: 0;
  grid-template-columns: repeat(1, 1fr);
  gap: 10px;
  list-style: none;
}

.blue .inner_banner .ctd {height:170px; background-size: auto 100%; background-position: center bottom;}
.green .inner_banner .ctd ,.green .inner_banner2 .ctd  , .green .inner_banner3 .ctd , .green .inner_banner4 .ctd  { height:170px; background-size:auto 100% ; background-position: center bottom;}
.black .inner_banner .ctd,.orange .inner_banner .ctd ,.pink .inner_banner .ctd, .pruple .inner_banner .ctd {  height:170px; background-size:auto 100% ; background-position: center bottom;}
.inner_banner p{ display:none}
.green .inner_banner p ,.green .inner_banner2 p , .green .inner_banner3 p , .green .inner_banner4 p  { display: none;}

.webdesign_title{ padding:5px 0px;}
.webdesign_title h1{ font-size:33px;}
.intro img{ }
.intro p{ padding:10px; font-size:15px;}

.left_photo{ width:100%; margin:0;}
.right_faq{ width:100%; margin:10px 0}
.skills h4{ font-size:16px; line-height:19px;}
.flow ul{ padding:0px 0px; }
.flow ul li{ float: none; width:100%; padding:15px 0 15px 0;}
.flow ul .photo{ border:4px solid #fff; width:80%; box-shadow:0px 0px 3px #ccc;}
.flow ul .photo img{ width:100%;}
.flow ul .icon{ }
.flow ul .icon img{ padding:19px  0 0}
.flow ul .description{ padding:5px 0px; width:80%; margin-top:15px; text-align: left; font-size:15px;}
.flow ul .step{ color:#999}

.service_webdesign{ padding:0px 0}
.left_menu{ float: none; width:100%; background: #fafafa; }
.left_menu ul{ list-style:none; padding:0px 0px; border-top:1px solid #ccc;    }
.left_menu ul li{ padding:0px; padding-right:0px; float:left; width:50%; }
.left_menu ul li a{ padding:20px 15px 20px 60px; display:block; font-size:14px;  border-bottom: 0px solid #ccc; border-left:1px solid #ccc; }
.left_menu ul li {  }

.left_menu ul li a{ border-bottom:1px solid #ccc; }

.left_menu ul li a:hover, .left_menu ul li a.current{ color: #fff; }
.left_menu ul li:hover, .left_menu ul li.current{ background: none #3cb7a2; color:#fff }

.web_design_rightcontent{ float: none; width: auto; padding:10px; min-height:500px; padding-bottom:20px;}
.web_design_rightcontent img{ max-width:100%}
.webdesign_title{ padding:0px 15px;}
.main_webdesign h3 img, .main_project_ref h4 img{ display:none}
.reference{ padding:20px 0px 50px 0;}
.reference ul{ list-style:none}
.reference ul li{ float: left; width:48%; margin:1%; position:relative;}

.office_area{ background: url(../images/bg-contactus.jpg) center; color:#fff; font-size:17px; }
.office_area .contact_info{ padding:5px 0px; float:none; width:100%; background:url(../images/bg_contact_half.png);}
.maparea iframe{ width:100%; height:320px;} 

.jssorb05{ display:none}
.successful_data{ margin:0}
.successful_data ul{ padding:30px 0;}
.successful_data h5{ padding:40px 0 20px 0}
.successful_data ul li{ margin:5px 3.5%;  width: calc(43% - 26px); text-align: center; font-size:17px; float:left; border:3px solid #ff9b00; color:#666; border-radius:12px; padding:10px 10px 15px 10px;}


#right_img{ float:right ; width:50%; margin:0 0 15px 15px; }
article .imgcenter{ width:100%; padding:20px 0; margin:0 auto; text-align:center;}

#related_title{ font-size:26px; line-height:28px;  margin-bottom:15px; }
.related_artical{ float:right; width:100%; padding:15px 0 }

.web_cs h4{ padding:20px 0;}
.web_design_rightcontent .package_area{ float:left; width:100%; }
.web_design_rightcontent .package_area_right{ float: right; width:100%; }
.web_cs span img { height:80px;}
.web-style ul li{ width:100%; text-align:center}
.web-style ul li img{ width:90%; }
.cms_basic_function ul li{ width:calc(50% - 1px)}
.cms_basic_function ul li{ font-size:14px;}
.web_style_des{ font-size:17px ; line-height:23px;}
.cms_expert_function ul li { width:100%; font-size:14px;}
.cms_expert_function ul li span{ padding:0}
.cms_expert_function ul li span img{ width:50px; padding:0 10px;}
.cms_expert_function ul li:nth-child(2){ margin:0 0 15px  }
.cms_expert_function ul li:nth-child(3){ margin:0 0 15px   }
.cms_expert_function ul li:nth-child(4){ margin:0 0 15px  }
.cms_expert_function ul li:nth-child(5){ margin:0 0 15px }
.cms_expert_function ul li:nth-child(6){ margin:0 0 15px }
.web_cs_content .cs1{ margin-bottom:50px;}
.web_cs_content .cs1 , .web_cs_content .cs2 { width:calc(90% - 46px); }
#online_cs a, #wtapp_cs a{ font-size:15px; padding:10px 15px;}


.ctd_bottom{ padding:20px 0;}
.ctd_footer_contact{ float:left; width:95%; box-shadow:0 0 3px rgba(0,0,0,.2); border-right:0px dotted #ddd; padding:2.5%;}
#faq{ padding:1%}


.site-map{ float:right; width:100%; margin:30px 0 0 0;}
.site-map ul li{ margin:5px 0; float:left; width:100%; margin:0 0%; }
.site-map ul li a{ color:#015aa9; border-bottom:1px solid #015aa9; line-height:33px;  font-size:19px; font-weight:400; display:block }

.site-map ul li ul{ list-style: outside; margin:5px 0 5px 35px; padding:0;}
.site-map ul li ul li{ margin: 0; padding:2px 0; float:left; width:100%;}
.site-map ul li ul li a{  line-height:19px;  font-size:15px; font-weight:100; color:#333 }

.ctd_bottom .logo{ margin:0 0 5px 0}
.trynow{ padding:20px 0;}


}