/*
Theme Name:DATONG0
Theme URI:http://datong0.com/
Author:Yophee Hsin
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }
html { font-size:100%; overflow-y:scroll; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
/*table { border-collapse:collapse; border-spacing:0; }*/
a img { border:0; }
img { width:auto\9; height:auto; max-width:100%; border:0; -ms-interpolation-mode:bicubic; vertical-align:middle; }
h1, h2, h3, h4, h5, h6 { font-weight:normal; }
ol, ul, li { list-style:none; }
a, a img, a:hover, a:active { outline:0; }
a { color:#4D7495; text-decoration:none; }
a:hover { color:#404040; text-decoration:none; }
.clear{ display:block; float:none; clear:both; width:0px; height:0px; padding:0; margin:0; border:0; font-size:0; line-height:0; }
::selection { color:#404040; }
::-moz-selection { color:#404040; }
.padding { padding:0 10px; }

body { background:#6497c2; color:#404040; font:14px/1.5 Arial,"Microsoft Yahei","Hiragino Sans GB","宋体",sans-serif; }

#header_box, #banner_box, #service_box, #team_box, #case_box, #footer_box,
#sub_header_box, #sub_service_box, #content_box, #solution_box, #sub_case_box,
#sub_team_box, #contact_box, #team_blog_box { width:100%; border-top:5px solid #F0F0F0; text-align:center; }

#header,     #banners,    #services,    #team,     #cases,    #footer,
#sub_header,     #sub_services,    #content,     #solutions,    #sub_cases,
#sub_team,     #contact,     #team_blog, #blog { width:100%; max-width:980px; margin:0 auto; }

#header_box { height:120px; background:#6497C2; border-top:5px solid #4D7495; }
#header { text-align:left; }

#sub_header_box { background:#6497c2 url(bgtop.jpg) no-repeat center top; border-top:0; }
#sub_header { padding:20px 0 40px 0; color:#FFF; }
#sub_header h1 { padding:0 0 18px 0; line-height:1.2em; font-size:32px; font-family:"宋体"; font-weight:bold; text-shadow:0px 1px 0px #4D7495; }

#logo { float:left; width:130px; height:60px; padding:29px 0 0 0; }
#logo a { display:block; width:130px; height:60px; }
#logo a img { width:100%; }

#nav { float:right; padding:45px 0 0 0; }
#nav li { float:left; padding:0 6px; }
#nav li a { display:block; color:#D2E3F1; padding:3px 10px; text-align:center; }
#nav li a:hover { color:#FFF; }
#nav li a.here { color:#404040; background:#FFF;
	-ms-border-radius:2px;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	-o-border-radius:2px;
	border-radius:2px; }
#nav li a.here:hover { color:#404040; }

#nav_btn_on, #nav_btn_off { float:right; width:30px; height:30px; padding:7px; cursor:pointer; }
#nav_btn_on img, #nav_btn_off img { width:100%; }
#nav_btn_on { display:none; }
#nav_side { display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:999; background:#4D7495; }
#nav_side_header { height:50px; padding:5px 10px; }
#nav_side_logo { float:left; width:98px; height:45px; }
#nav_side_logo a { display:block; width:98px; height:45px; }
#nav_side_logo a img { width:100%; }
#nav_side ul { padding:10px 20px 0 20px; text-align:center; }
#nav_side ul li { display:block; }
#nav_side ul li a { display:block; color:#D2E3F1; padding:8px 0; font-size:16px; }
#nav_side ul li a:hover { color:#FFF; }

#back_top { position:fixed; right:10px; bottom:40px; width:13px; height:20px; padding:10px 15px 13px 15px; z-index:666; background:#404040;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter:alpha(opacity=90);
    opacity:0.9;
	-ms-border-radius:2px;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	-o-border-radius:2px;
	border-radius:2px;
	cursor:pointer; }
#back_top i { font-size:20px; color:#FFF; }

.content_title { width:100%; }
.content_title div { width:150px; margin:0 auto; padding:35px 0 40px 0; }
.content_title div img { width:100%; }

#banner_box { background:#6497C2; border-top:0; }
#banners { padding:0 0 40px 0; }
.banner { width:100%; height:450px; position:relative; overflow:hidden; }
#banner_2, #banner_3 { display:none; }
#banner_1 { background:url(banner-1.jpg) no-repeat center center; }
#banner_2 { background:url(banner-2.jpg) no-repeat center center; }
#banner_3 { background:url(banner-3.jpg) no-repeat center center; }
.banner a { display:block; position:absolute; left:0; bottom:0; width:100%; background:url(banner_bg.png); }
.banner a img { width:50%; }

#service_box { background:#FFF url(grid.gif) repeat-x left top; }
#services { padding:0 0 30px 0; }
#services a { display:block; float:left; width:23.5%; padding:0 0 2% 2%; }
#services a#service_1, #services a#service_5, #services a#service_9 { padding:0 0 2% 0; }
.service_icon { width:100%; padding:10px 0 0 0; background:#F9F9F9; }
.service_icon span { display:block; width:39px; height:30px; margin:0 auto; }
.service_icon span i { font-size:30px; color:#4D7495; }
#services a h2 { padding:5px 0 10px 0; background:#F9F9F9; }
#services a:hover .service_icon span i { color:#404040; }

#sub_service_box { background:#FFF url(grid.gif) repeat-x left top; }
#sub_services { padding:30px 0; }
#sub_services a { display:block; float:left; width:49%; padding:0 0 2% 2%; }
#sub_services a#sub_service_1, #sub_services a#sub_service_3, #sub_services a#sub_service_5,
#sub_services a#sub_service_7, #sub_services a#sub_service_9, #sub_services a#sub_service_11 { padding:0 0 2% 0; }
#sub_services a h2 { padding:15px 0 0 0; background:#F9F9F9; font-size:16px; }
#sub_services a p { padding:8px 15px 18px 15px; background:#F9F9F9; font-size:12px; color:#404040; }
#sub_services a:hover p { color:#404040; }

#team_box { background:#FFF; }
#team { padding:0 0 30px 0; text-align:left; }
#team_girl { float:left; width:45%; }
#team_boy { float:right; width:45%; padding:0 2% 0 0; }
.team_pic { float:left; width:30%; }
.team_pic img { width:100%; }
.team_info { float:right; width:70%; }
.team_info h3 { line-height:1.8em; font-weight:bold; }
.team_info p { padding-top:6px; }

#sub_team_box { background:#FFF url(grid.gif) repeat-x left top; }
#sub_team { padding:30px 0; text-align:left; }
#sub_team_girl { float:left; width:45%; }
#sub_team_boy { float:right; width:45%; padding:0 2% 0 0; }
.sub_team_pic { float:left; width:30%; }
.sub_team_pic img { width:100%; }
.sub_team_info { float:right; width:70%; }
.sub_team_info h3 { line-height:1.8em; font-weight:bold; }
.sub_team_info p { padding-top:6px; }

#case_box { background:#FFF; }
#cases a { display:block; float:left; width:23.5%; padding:0 0 0 2%; }
#cases a#case_1, #cases a#case_5, #cases a#case_9 { padding:0; }
#cases a img { width:100%; }
#cases a p { height:50px; padding:5px 0 0 0; line-height:1.3em; }

#sub_case_box { background:#FFF url(grid.gif) repeat-x left top; }
#sub_cases { padding:30px 0 10px 0; }
#sub_cases a { display:block; float:left; width:23.5%; padding:0 0 0 2%; }
#sub_cases a#sub_case_1, #sub_cases a#sub_case_5, #sub_cases a#sub_case_9,
#sub_cases a#sub_case_13, #sub_cases a#sub_case_17, #sub_cases a#sub_case_21 { padding:0; }
#sub_cases a img { width:100%; }
#sub_cases a p { height:50px; padding:5px 0 0 0; line-height:1.3em; }

#more_cases { width:100%; padding:10px 0 50px 0; text-align:center; }
#more_cases a { display:block; width:160px; margin:0 auto; padding:3px 0; background:#4D7495; color:#FFF;
	-ms-border-radius:2px;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	-o-border-radius:2px;
	border-radius:2px; }
#more_cases a:hover { background:#404040; }

#footer_box { background:url(dark_dot.gif) repeat; border-top:0; }
#footer { max-width:800px; padding:0 0 20px 0; text-align:left; }
#footer div { float:left; width:23.5%; padding:20px 0 0 2%; }
#footer div#footer_1 { padding:20px 0 0 0; }
#footer h3 { height:38px; color:#FFF; font-size:14px; line-height:30px; }
#footer ul { padding-left:1px; font-size:12px; }
#footer li { height:20px; line-height:20px; }
#footer a { color:#ADB1B1; }
#footer a:hover { color:#FFF; }

#copyright { width:100%; padding:20px 0; border-top:1px dashed #393939; }
#copyright p { font-size:12px; line-height:18px; color:#666; }
#copyright a { color:#666; }
#copyright a:hover { color:#666; }

#solution_box { background:#FFF url(grid.gif) repeat-x left top; }
#solutions { padding:30px 0; }
#solutions a { display:block; float:left; width:49%; padding:0 0 2% 2%; }
#solutions a#solution_1, #solutions a#solution_3, #solutions a#solution_5,
#solutions a#solution_7, #solutions a#solution_9, #solutions a#solution_11 { padding:0 0 2% 0; }
#solutions a h2 { padding:15px 0 0 0; background:#F9F9F9; font-size:16px; }
#solutions a p { height:36px; padding:8px 15px 18px 15px; background:#F9F9F9; font-size:12px; color:#404040; }
#solutions a:hover p { color:#404040; }

#contact_box { background:#FFF url(grid.gif) repeat-x left top; }
#contact { padding:30px 0; }
#contact a { display:block; float:left; width:23.5%; padding:0 0 2% 2%; }
#contact a#contact_1 { padding:0 0 2% 0; }
.contact_icon { width:100%; padding:30px 0 0 0; background:#F9F9F9; }
.contact_icon span { display:block; width:39px; height:30px; margin:0 auto; }
.contact_icon span i { font-size:30px; color:#4D7495; }
#contact a h2 { font-size:16px; padding:8px 0 35px 0; background:#F9F9F9; }
#contact a:hover .contact_icon span i { color:#404040; }

#content_box { background:#FFF url(bgnoise.gif); border-top:0; }
#content { padding:40px 0 60px 0; text-align:left; }

#post { max-width:800px; margin:0 auto; }
#post h2 { font-size:20px; padding:0 0 12px 0; }
#post h2.margin_top { padding:12px 0; }
#post p { padding:0 0 12px 0; }
#post p.margin_bottom { padding:0 0 24px 0; }
#post a { text-decoration:underline; } #main a:hover { text-decoration:none; }
#post ul, #post ol { margin:0 0 12px 2em; line-height:1.6em; }
#post ul li { list-style:square; }
#post ol li { list-style:decimal; }
#post p.copy { font-size:12px; color:#666; padding:12px 0 0 0; }
#post p.copy a { color:#666; text-decoration:none; }
#post p.copy i { font-size:14px; }


#sidebar { float:left; width:220px; }
#sidebar h3 { font-size:20px; padding:0 0 12px 3px; }
#menu li { display:inline; }
#menu li a { display:block; background:#FFF; padding:5px 0px 5px 12px; margin-bottom:5px;
	-ms-border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-o-border-radius:5px;
	border-radius:5px; }
.menu_1 li a#a_1, .menu_2 li a#a_2, .menu_3 li a#a_3, .menu_4 li a#a_4,
.menu_5 li a#a_5, .menu_6 li a#a_6, .menu_7 li a#a_7, .menu_8 li a#a_8,
.menu_9 li a#a_9, .menu_10 li a#a_10, .menu_11 li a#a_11, .menu_12 li a#a_12,
.menu_13 li a#a_13, .menu_14 li a#a_14, .menu_15 li a#a_15, .menu_16 li a#a_16,
.menu_17 li a#a_17, .menu_18 li a#a_18, .menu_19 li a#a_19, .menu_20 li a#a_20,
.menu_21 li a#a_21, .menu_22 li a#a_22, .menu_23 li a#a_23, .menu_24 li a#a_24 { background:#6497C2; color:#FFF; }

#main { float:right; width:720px; }
#main h2 { font-size:20px; padding:0 0 12px 0; }
#main h2.margin_top { padding:12px 0; }
#main p { padding:0 0 12px 0; }
#main p.margin_bottom { padding:0 0 24px 0; }
#main a { text-decoration:underline; } #main a:hover { text-decoration:none; }
#main ul, #main ol { margin:0 0 12px 2em; line-height:1.6em; }
#main ul li { list-style:square; }
#main ol li { list-style:decimal; }
.main_ul { display:none; }
#main p img { margin:5px; border:5px solid #FFF;
	-ms-box-shadow:1px 1px 5px #333333;
	-moz-box-shadow:1px 1px 5px #333333;
	-webkit-box-shadow:1px 1px 5px #333333;
	-o-box-shadow:1px 1px 5px #333333;
	box-shadow:1px 1px 5px #333333; }

#case_sidebar { float:left; width:300px; }
.case_info { background:#F0F0F0; padding:25px; margin-bottom:8px;
	-ms-border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-o-border-radius:5px;
	border-radius:5px; }
.case_info li { list-style:disc; margin:0 0 0 15px; padding:0 0 0 2px; }
p.case_p { padding:0 0 12px 0; }

#case_main { float:right; width:640px; }
#case_main p img { width:100%; }
#case_main p a { display:block; width:160px; margin:30px auto 0 auto; padding:3px 0; background:#4D7495; color:#FFF; text-align:center;
	-ms-border-radius:2px;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	-o-border-radius:2px;
	border-radius:2px; }
#case_main p a:hover { background:#404040; }

#team_blog_box { background:#FFF; }
#team_blog { max-width:800px; padding:0 0 10px 0; }
#team_blog li { font-size:16px; padding:0 0 10px 0; }
#team_blog li i { font-size:12px; color:#666; font-style:italic; }
#more_blog { width:100%; padding:30px 0; text-align:center; }
#more_blog a { display:block; width:160px; margin:0 auto; padding:3px 0; background:#4D7495; color:#FFF;
	-ms-border-radius:2px;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	-o-border-radius:2px;
	border-radius:2px; }
#more_blog a:hover { background:#404040; }

#blog { max-width:800px; padding:30px 0; }
#blog li { font-size:16px; padding:0 0 10px 0; }
#blog li i { font-size:12px; color:#666; font-style:italic; }


@media (max-width:1060px) {
#banners { padding:0 0 30px 0; }
}

@media (max-width:1020px) {
#banners { padding:0; }
#sub_services, #solutions { padding:10px 0; }
#sub_cases, #contact { padding:10px 0 0 0; }
}

@media (max-width:980px) {
#content { padding:20px 0; }
#sidebar { float:none; width:100%; padding:20px 0 0 0; text-align:center; }
#sidebar h3 { display:none; }
#menu li a { padding:5px 0px; }
#main { float:none; width:100%; }
#main p img { margin:3px 0; border:0;
	-ms-box-shadow:1px 1px 2px #333333;
	-moz-box-shadow:1px 1px 2px #333333;
	-webkit-box-shadow:1px 1px 2px #333333;
	-o-box-shadow:1px 1px 2px #333333;
	box-shadow:1px 1px 2px #333333; }
#case_sidebar { float:none; width:100%; padding:20px 0 0 0; }
#case_main { float:none; width:100%; }
#case_main p a {  margin:30px auto 10px auto; }
}

@media (max-width:900px) {
#sub_services a, #solutions a { width:100%; padding:0 0 2% 0; }
#solutions a p { height:auto; }
}

@media (max-width: 780px) {
#header_box { position:fixed; top:0; height:50px; z-index:333; background:#4D7495;
	-ms-box-shadow:0 2px 2px #404040;
	-moz-box-shadow:0 2px 2px #404040;
	-webkit-box-shadow:0 2px 2px #404040;
	-o-box-shadow:0 2px 2px #404040;
	box-shadow:0 2px 2px #404040; }
#header { height:50px; }
#logo { width:98px; height:45px; padding:0; }
#logo a { width:98px; height:45px; }
#nav { display:none; }
#nav_btn_on { display:block; }
#banner_box { padding:55px 0 0 0; }
#banner_1, #banner_2, #banner_3 { height:400px; background-size:auto 100%; }
.banner a img { width:60%; }
#services a { width:49%; }
#services a#service_1, #services a#service_3, #services a#service_5, #services a#service_7, #services a#service_9, #services a#service_11 { padding:0 0 2% 0; }
#contact a { width:49%; }
#contact a#contact_1, #contact a#contact_3 { padding:0 0 2% 0; }
#cases a, #sub_cases a { width:49%; }
#cases a#case_1, #cases a#case_3, #cases a#case_5, #cases a#case_7, #cases a#case_9 { padding:0; }
#sub_cases a#sub_case_1, #sub_cases a#sub_case_3, #sub_cases a#sub_case_5, #sub_cases a#sub_case_7, #sub_cases a#sub_case_9,
#sub_cases a#sub_case_11, #sub_cases a#sub_case_13, #sub_cases a#sub_case_15, #sub_cases a#sub_case_17, #sub_cases a#sub_case_19,
#sub_cases a#sub_case_21 { padding:0; }
#sub_header_box { padding:75px 0 0 0; background-size:auto 100%; }
#main table, #post table { display:none; }
.main_ul { display:block; }
#blog { padding:15px 0 5px 0; }
}

@media (max-width: 600px) {
.team_pic, .sub_team_pic { width:40%; }
.team_info, .sub_team_info { width:60%; }
#footer div { width:49%; }
#footer div#footer_1, #footer div#footer_3 { padding:20px 0 0 0; }
.main_img { display:none; }
}
 
@media (max-width: 480px) {
#banner_1, #banner_2, #banner_3 { height:300px; }
.banner a img { width:80%; }
#sub_team { padding:20px 0; }
#team_girl, #team_boy, #sub_team_girl, #sub_team_boy { float:none; width:100%; padding:0; }
#team_boy, #sub_team_boy { padding:20px 0 0 0; }
.team_pic, .sub_team_pic { width:30%; }
.team_info, .sub_team_info { width:70%; }
}

@media (max-width: 400px) {
.banner a img { width:100%; }
#contact a { width:100%; padding:0 0 2% 0; }
}

@media (max-width: 300px) {
#banner_1, #banner_2, #banner_3 { height:280px; }
#services a { width:100%; padding:0 0 2% 0; }
#cases a, #sub_cases a { width:100%; padding:0; }
#footer div { width:100%; padding:20px 0 0 0; }
}

@media (max-height: 400px) {
#nav_side ul li { display:inline-block; }
#nav_side ul li a { padding:8px; }
}