﻿body {
	margin: 0px;
	padding: 0px;
	font-family: Microsoft JhengHei, Arial, Helvetica, sans-serif,"微軟正黑體";
	font-size:13px;
	font-weight:bold;
	/* background:url(../img/bg.jpg) #1a1a1a repeat-x 0 0 ; */
	/* This pattern is downloaded from www.subtlepatterns.com */
 
 

	

	
}


/*index
============================================================== */
.main{
	width:100%;
	overflow:hidden;
	margin:0 auto;
	position:relative;
	height:780px;
	min-width:1200px;
	  background-color: #0068b7;
	  background:url(../img/bg_back.jpg) #1a1a1a;
}
.jspContainer{height:240px !important;}
.main .w1000 { height:970px; overflow:visible; background:url(../img/bg.jpg) #1a1a1a;}
.blue_font{color:#0068b7;}
.scroll-pane p{font-size:15px; line-height: 22px; font-family: Microsoft JhengHei, Arial, Helvetica, sans-serif,"微軟正黑體";}

/*top*/
.top { width:1100px; position:absolute; top:0; left:0; z-index:2;}
.top .theme { float:right; margin-top:7px;}
.top .nav { float:left; padding-top:10px; padding-left:70px;}
.top .nav.nav_right { float:left; padding-left: 563px;}
.top .nav a { float:right; }

.product img{position:absolute;}
.tit img {}

/*slideshow*/
#slideshow { width:1000px; margin:0 auto; height:795px;overflow:hidden; position:relative; z-index:1;}
#allPic {position: absolute; left:0; top:-20px;}
#allPic .pd1,#allPic .pd2,#allPic .pd3,#allPic .pd4,#allPic .pd5 {width: 1000px; height: 677px; float:left; position:relative;}

#allPic .icon { position:absolute; top:70px; left:65px; z-index:1;}
#allPic .product { position:absolute; top:70px; left:40px; z-index:1;}
#allPic .pd4 .product { top:70px; left:30px; }
#allPic .tit_top_wd { position:absolute; top:90px; left:445px; z-index:1; font-size:30px; font-family: Microsoft JhengHei, Arial, Helvetica, sans-serif,"微軟正黑體";}
#allPic .tit { position:absolute; top:87px; left:445px; z-index:1;}
#allPic .tit_three_wd { position:absolute; top:191px; left:445px; z-index:1; font-size:34px; font-weight:400; font-family: Microsoft JhengHei, Arial, Helvetica, sans-serif,"微軟正黑體";}

#allPic .btns { position:absolute; top:248px; left:445px; z-index:2; width:424px; overflow:hidden;}

#allPic .btns.shear_btn{top:630px !important;}

#allPic .btns a { 
background-color:#2d2d2d; 
display:block; 
float:left; 
color:#fff; 
text-decoration:none; 
font-size:12px;
transition:0.4s; 
-moz-transition:0.4s;
-webkit-transition:0.4s; 
-o-transition:0.4s;
background-repeat: no-repeat;
background-position: 87px 42px;
}


.btn_shear01{float:left; margin:0px; padding:0px;
transition:0.4s; 
-moz-transition:0.4s;
-webkit-transition:0.4s; 
-o-transition:0.4s;}
.btn_shear01:hover{opacity:0.5;}
#allPic .btns a.shear_btn1{padding:0px; 
							display:block; 
							float:left; 
							color:#fff; 
							text-decoration:none; 
							font-size:12px;
							transition:0.4s; 
							-moz-transition:0.4s;
							-webkit-transition:0.4s; 
							-o-transition:0.4s;
							background-image:url(../img/btns_arw.png);
							background-repeat: no-repeat;
							background-position: 87px 42px;}
.btn_shear01 img{height:50px;}
#allPic .shear_btn{  position: absolute;
  top: 525px;
  left: 485px;
  width: 480px;
  height: 330px;}
  
.dital_wd{ color:#999; font-size:13px;}
.dital_wd_title{color:#666;}
#allPic .btns a.shear_btn1:hover{opacity:0.5;}

#allPic .btns a.btns1 { line-height:16px; padding:15px 10px 15px 40px; height:16px; width:65px; background-color:#0068b7;
						font-family: Microsoft JhengHei, Arial, Helvetica, sans-serif,"微軟正黑體";
						-moz-border-radius:50px 0 0 50px;
						-webkit-border-radius:50px 0 0 50px;
						border-radius:50px 0 0 50px;}
#allPic .btns a.btns2 { line-height:16px; padding:15px 10px 15px 26px; height:16px; width:65px;}
#allPic .btns a.btns5 { line-height:16px; padding:15px 20px; height:16px; width:65px;
						-moz-border-radius: 0 0px 50px 0;
						-webkit-border-radius:0 50px 50px 0;
						border-radius:0 50px 50px 0;}
#allPic .btns a.btns3 { line-height:15px; padding:7px 22px; width:61px; height:46px;}
#allPic .pd1 .btns a.btns2 { padding:15px 21px 15px 26px; width:53px;}
#allPic .btns a:hover { background-color:#2c6fb7;background-position: 90px 45px;background-image:url(../img/btns_arw2.png);}
#allPic .pd1 .btns a.btns1:hover { background-color:#999;}
#allPic .btns a.btns4 { line-height:17px; padding:12px 14px; height:36px; width:77px; background-color:#ff1f64; font-size:13px; background-image:none; text-align:center;}
#allPic .btns a.btns4:hover { background-color:#00c4cb;}
#allPic .pd2 .btns a.btns4,#allPic .pd3 .btns a.btns4 { padding:12px 0px; width:104px;}
#allPic .pd4 .btns a.btns3 { padding:7px 15px; width:75px;}

#allPic .info {background-color:#2c6fb7; width:423px; height:65px; top:241px; left:445px; position:absolute; z-index:2;}
#allPic .info a {background-image:url(../img/btns_arw3.png);
background-repeat: no-repeat;
background-position: 405px 47px;
display:block;
width:100%;
height:100%;
transition:0.4s; 
-moz-transition:0.4s;
-webkit-transition:0.4s; 
-o-transition:0.4s;
position:relative;}
#allPic .info a .info_T { position:absolute; top:0; left:0; z-index:2;}
#allPic .info a .info_bg { position:absolute; top:0; left:50px; z-index:1;-moz-transition:0.2s;
-webkit-transition:0.2s; 
-o-transition:0.2s;} 
#allPic .info a:hover { background-color:#2d2d2d;background-image:url(../img/btns_arw.png);
background-repeat: no-repeat;
background-position: 408px 50px;}
#allPic .info a:hover .info_bg { opacity:0; FILTER: alpha(opacity=0);}
#allPic .intro { position:absolute;top:325px;left:445px;width: 480px;height: 330px;}
.scroll-pane
{
	width: 423px;
	height: 172px;
	overflow: auto;
	z-index:2;
	margin-left:0;
}
.horizontal-only
{
	height: auto;
	max-height: 160px;
}


/*menu*/
#menu { width:100%; height:115px; position:absolute; z-index:2; bottom:0; top:583px; left:152px;}
#menu a { display:block; text-indent:-5000px; width:250px; height:155px; float:left;}
#menu a.m1 { background:url(../img/m1.png) no-repeat 0 0; background-size:170px 170px;
transition:0.4s; 
-moz-transition:0.4s;
-webkit-transition:0.4s; 
-o-transition:0.4s;}
#menu a.m2 { background:url(../img/m2.png) no-repeat 0 0;background-size:170px 170px;
transition:0.4s; 
-moz-transition:0.4s;
-webkit-transition:0.4s; 
-o-transition:0.4s;}
#menu a.m3 { background:url(../img/m3.png) no-repeat 0 0;background-size:170px 170px;
transition:0.4s; 
-moz-transition:0.4s;
-webkit-transition:0.4s; 
-o-transition:0.4s;}
#menu a.m4 { background:url(../img/m4.png) no-repeat 0 0;background-size:170px 170px;
transition:0.4s; 
-moz-transition:0.4s;
-webkit-transition:0.4s; 
-o-transition:0.4s;}
#menu a.m5 { background:url(../img/menu5.html) no-repeat 0 0;}

#menu a.m1:hover {opacity:0.7}
#menu a.m2:hover {opacity:0.7}
#menu a.m3:hover {opacity:0.7}
#menu a.m4:hover {opacity:0.7}


/*nav
============================================================== */
.nav { max-width:395px; float:right;}
.page .nav { max-width:500px;}
.nav a { font-size:16px; color:#000000; line-height:26px; text-decoration:none; padding:12px 16px 0; float:left; text-align:center; width:75px; background:url(../img/nav_line.png) no-repeat top left; font-family: Microsoft JhengHei, Arial, Helvetica, sans-serif,"微軟正黑體";}
.nav a.techbang { width:130px;  padding:0 20px 0;}
.nav a:hover { color:#2c6fb7;}
.nav a.n_beauty { width:127px;}
.nav a.n_beauty:hover { color:#00c4cb;}


/*page
============================================================== */
.page{
    width:100%; 
	position:relative;
	min-width:1000px;
	z-index:1;
}
.w1000{width:1200px;margin:0 auto;position:relative; overflow:hidden;}
.w730{width:730px;margin:0 auto;position:relative; overflow:hidden;}
.goTop { background:url(../img/goTop.png) no-repeat 0 0; width:75px; height:65px; display:block; text-indent:-5000px; position:fixed; bottom:0; right:35px; display:none;}
.goTop:hover { background-position: 0 -65px;}


/*header*/
.header { height:185px; width:1000px; margin:0 auto; position:relative;}
.header .p_theme { position:absolute; top:30px; left:90px; z-index:2; width:455px; height:115px; display:block;}
.header .p_tit { position:absolute; top:110px; left:510px; z-index:1;}

/*kvbtn*/
.kvbtn { width:100%; height:76px;}
.kvbtn { background:url(../img/kvbtn_bg.jpg) repeat-x 0 0;}
.kvbtn .w1000 { border-left:1px solid #fff;}
.kvbtn ul { width:100%; height:76px;}
.kvbtn ul li { float:left; width:249px; border-right:1px solid #fff;}
.kvbtn ul li a { float:left; display:block; width:249px; height:76px;}
.kvbtn ul li.kvbtn1 a { background:url(../img/kvbtn1.png) no-repeat 0 0;}
.kvbtn ul li.kvbtn2 a { background:url(../img/kvbtn2.png) no-repeat 0 0;}
.kvbtn ul li.kvbtn3 a { background:url(../img/kvbtn3.png) no-repeat 0 0;}
.kvbtn ul li.kvbtn4 a { background:url(../img/kvbtn4.png) no-repeat 0 0;}
.kvbtn ul li a:hover { background-position: 0 -76px;}
.kvbtn ul li a.selected{ background-position: 0 -152px; }

/*kv*/
.kv { width:100%; height:215px;}
.p1 .kv { background-color:#3a3939; background:url(../img/kv1_bg.jpg) no-repeat top center;}
.p2 .kv { background-color:#3a3939; background:url(../img/kv2_bg.jpg) repeat-x top center;}
.p3 .kv { background-color:#3a3939; background:url(../img/kv3_bg.jpg) no-repeat top center;}
.p4 .kv { background-color:#ee6411;}

/*article*/
.article { width:100%; overflow:hidden; background-color:#2c6fb7; padding-bottom:50px;}
.a_top { height:160px; overflow:hidden;}
.a_top .p_a_icon { float:left;}
.a_top h2 { float:right; font-size:25px; color:#ffffff; line-height:38px; font-family:"微软雅黑","華康中黑體","微軟正黑體"; width:590px; margin-top:50px; font-weight:bold;}
.p2 .a_top h2,.p3 .a_top h2 { line-height:160px; margin-top:0;}

.a_share { background:url(../img/a_share_bg.jpg) no-repeat 0 0; width:730px; height:110px; z-index:99;}
.a_share a { width:225px; height:40px; display:block; text-indent:-5000px;margin-top:25px; margin-left:460px; float:left;}
.p1 .a_share a { background:url(../img/a_share1.jpg) no-repeat 0 0;}
.p2 .a_share a { background:url(../img/a_share2.jpg) no-repeat 0 0;}
.p3 .a_share a { background:url(../img/a_share3.jpg) no-repeat 0 0;}
.p4 .a_share a { background:url(../img/a_share4.jpg) no-repeat 0 0;}
.a_share a:hover { background-position: 0 -40px; }

.a_con { margin-top:30px;}
.a_con i { font-size:17px; font-style:normal; line-height:35px;}
.a_con img { border: 3px solid #ffffff; display: block;}
.a_con p {margin: 0 auto 20px; color:#fff; line-height:25px;}
.a_con .p640 span,.a_con .p415 span,.a_con .p330 span,.a_con .p475 span,.a_con .p190 span { width:616px; background-color:#4c92de;line-height:18px;padding:5px 15px; display:block; }
.a_con .p640 { width:646px;}
.a_con .p415 { width:421px;}
.a_con .p415 span { width:391px;}
.a_con .p330 { width:336px;}
.a_con .p330 span { width:306px;}
.a_con .p475 { width:481px;}
.a_con .p190 { width:196px;}
.a_con .p320 { width:326px;}
.a_con .p662 { width:668px;}
.a_con .p480 { width:486px;}
.a_con .p472 { width:478px;}
.a_con p a { color:#fff; text-decoration:underline;}
.a_con p a:hover { text-decoration:none;}
.a_con .source,.a_con .source a {font-size:12px; color:#8ab7e7;}
.a_con .part { background-color:#1d5b9e; font-size:15px; line-height:35px; padding-left:10px;}
.a_con .bb { color:#a0ceff; font-weight:bold; font-size:15px;}
.a_con .b1 { margin-left:10px; color:#cbe4ff;}

/*footer*/
.footer { background-color:#1b1b1b; text-align:center; height:70px; width:100%; overflow:hidden;}
.footer2 { background-color:transparent;}
.footer a { margin:0 15px;}

/*popup*/
.popup,.dell_map,.oppo_map,.samsung_map,.rule,.beauty { z-index:2; width:100%; height:100%; position:fixed; top:0; left:0; display:none;}
.blackbg,.blackbg2 { position:fixed; top:0; left:0; z-index:1; background-color:#fff;filter:alpha(opacity=80); opacity:0.8; width:100%; height:100%; z-index:1;}
.blackbg2 { background-color:#2c6fb7;filter:alpha(opacity=70); opacity:0.7;}
.btnx { position:absolute; top:0px; right:-30px; width:35px; height:30px; text-indent:-5000px; background:url(../img/btnx.png) no-repeat 0 0;}
.btnx:hover { background-position: 0 -30px;}
.dell_map .btnx,.oppo_map .btnx,.samsung_map .btnx,.rule .btnx,.beauty .btnx { background:url(../img/btnx2.png) no-repeat 0 0;}

.form { z-index:2; width:370px; height:300px; position:absolute; left:50%; top:50%; margin-left:-210px; margin-top:-1000px; background:url(../img/form_bg.png) no-repeat 0 0; padding-top:90px; padding-left:50px; line-height:35px; color:#fff;}
.form div { width:280px; height:35px; margin:10px 0;}
.form div label { font-size:15px; width:47px; text-align:right; display:block; float:left; margin-right:10px;}
.form div input { width:210px; height:29px; background-color:#fff; border:3px solid #80bdff; float:left; padding:0 3px ; line-height:33px;}
.form div.agree { font-size:12px;}
.form div.agree input[type="checkbox"] { width:auto; height:auto; margin-left:35px; margin-right:5px; padding:0;}
.form div.agree p { width:220px; float:left; line-height:20px;}
.form a.btn_sure { background:url(../img/btn_sure.jpg) no-repeat 0 0; width:145px; height:45px; display:block; text-indent:-5000px; margin-left:90px; margin-top:20px;}
.form a.btn_sure:hover { background-position: 0 -45px;}

.dm_con,.om_con { z-index:2; width:535px; height:600px; position:absolute; left:50%; top:50%; margin-left:-267px; margin-top:-1500px;}
.sm_con { z-index:2; width:640px; height:390px; position:absolute; left:50%; top:50%; margin-left:-320px; margin-top:-1500px; background:url(../img/sm_con.png) no-repeat 0 0;}
.rule_con { z-index:2; width:855px; height:580px; position:absolute; left:50%; top:50%; margin-left:-427px; margin-top:-1500px;}
.pop_rule { background:url(../img/rule_con.png) no-repeat 0 0; width:855px; height:580px;}
.pop_rule a { position:absolute; text-indent:-5000px; display:block; width:190px; height:60px;}
.pop_rule a.r_btn1 { top:465px; left:28px; background:url(../img/r_btn1.jpg) no-repeat 0 0;}
.pop_rule a.r_btn2 { top:465px; left:225px; background:url(../img/r_btn2.jpg) no-repeat 0 0;}
.pop_rule a.r_btn3 { top:465px; left:425px; background:url(../img/r_btn3.jpg) no-repeat 0 0;}
.pop_rule a.r_btn4 { top:465px; left:622px; background:url(../img/r_btn4.jpg) no-repeat 0 0;}
.pop_rule a:hover { background-position: 0 -60px;}


.beauty_con{ z-index:2; width:640px; height:390px; position:absolute; left:50%; top:50%; margin-left:-320px; margin-top:-1500px; background:url(../img/beauty_con.png) no-repeat 0 0;}
.beauty_con .bt_1,.beauty_con .bt_2,.beauty_con .bt_3 { display:block; margin-top:115px; margin-left:10px; float:left;}
.beauty_con .bt_1 { background:url(../img/bt_1.png) no-repeat 0 0; width:185px; height:225px; margin-left:30px;}
.beauty_con .bt_2 { background:url(../img/bt_2.png) no-repeat 0 0; width:185px; height:225px;}
.beauty_con .bt_3 { background:url(../img/bt_3.png) no-repeat 0 0; width:185px; height:225px;}
.beauty_con .bt_1:hover,.beauty_con .bt_2:hover,.beauty_con .bt_3:hover { background-position:0 -225px;}






