@charset "utf-8";

/** 
華仕尊城設計顧問有限公司
www.w-vi.com
**/

html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
pre,code,kbd,samp{font-family:inherit;}
q:before,q:after{content:none;}
textarea{overflow:auto;resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
del,ins,u,s,a,a:hover{text-decoration:none;}
body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,\5b8b\4f53;color:#333;outline:0;}
body{background:#fff;}
a,a:hover{color:#333;}
img{display:block;}
.msyh{font-family:'微软雅黑'}

html, body{overflow-x:hidden;}
.clearfix{clear:both;}

::selection {background:#cd590e; color:#fff;}
::-moz-selection {background:#cd590e; color:#fff;}
::-webkit-selection {background:#cd590e; color:#fff;}

.transition{-webkit-transition: all .2s ease-in-out;}

.w_auto{margin:0 auto;width:900px;position:relative; display:block;}

.head {height:135px; display:block; background:#fff;}
.head .logo{width:238px; margin:34px 0 0 0; height:63px; display:inline; float:left; background:url(775799.png) no-repeat -7px -4px;}
.head .sns{width:217px;  margin:34px 0 0 0; height:27px; display:inline; float:right; }

.bann1 {height:592px; overflow:hidden; position:relative; display:block;}

.arrow span {position:absolute; text-indent:-9999px; width:86px; line-height:144px; height:154px; display:block; cursor:pointer; top:200px; color:#fff; font-size:19px; background:url(775799.png) no-repeat;-webkit-animation:bounce .8s .9s ease infinite;-moz-animation:bounce .8s .9s ease infinite;}
.arrow span.left{background-position:-1575px -42px; left:0;}
.arrow span.right{background-position:-1665px -42px; right:0; text-align:right;}


.bann1 {height:592px; position:relative; display:block; overflow:hidden;}
.bann1 ul {height:592px; position:absolute; top:0; left:0; width:100%;display:block;}
.bann1 ul li {position:absolute; width:100%; height:592px; display:none;}
.bannbg2 {background:url(775817.gif) no-repeat center top; height:589px;}
.bann2 {height:443px; display:block; background:url(775819.gif) no-repeat center top;}
.bann2 .num{text-align:center; display:none; position:absolute; width:100%; height:11px; top:30px; left:0;}
.bann2 .num span{width:11px; text-indent:-9999px;  cursor:pointer; height:11px; margin: 0 13px; display:inline-block; background:url(775799.png) no-repeat -7px -315px;}
.bann2 .num span:hover, .bann2 .num span.on{background:url(775799.png) no-repeat -47px -315px;}
.bann2 .text1{width:404px;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0;opacity: 0;height:270px; display:block; top:70px; left:-300px; position:absolute; background:url(775799.png) no-repeat -7px -348px;}
.bann2 .text2{width:352px;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0;opacity: 0;height:150px; display:block; top:80px; left:800px; position:absolute; background:url(775799.png) no-repeat -463px -407px;}
.bann2 .video{width:445px; cursor:pointer; height:311px; display:block; top:340px; left:470px; position:absolute; background:url(775799.png) no-repeat -881px -326px;}
.bannbg3 {background:url(775821.gif) no-repeat center top; height:883px;}
.bannbg3 .e1{width:1337px; height:524px; display:block; position:absolute; background:url(775827.png) no-repeat; top:60px; left:-238px}
.bannbg3 .e2{width:780px; height:167px; display:block; position:absolute; background:url(775799.png) no-repeat -35px -1189px; left:0; top:700px; }


.anie1{
-webkit-animation:bouncein 1s .2s ease both;
-moz-animation:bouncein 1s .2s ease both;}


.subpage1 {padding-top:270px;}
.subpage1 dd{margin-bottom:110px;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0;opacity: 0;}
.subpage1 dd.c1{height:280px; display:block; background:url(775823.gif) no-repeat center top;}
.subpage1 dd.c2{height:280px; display:block; background:url(775824.gif) no-repeat center top;}
.subpage1 dd.c3{height:280px; display:block; background:url(775825.gif) no-repeat center top;}
.subpage1 dd.c4{height:280px; display:block; background:url(775826.gif) no-repeat center top;}

.subpage1 dd.c1 .img{width:411px; height:423px; display:block; position:absolute; background:url(775800.png) no-repeat 0 0; top:-130px; left:0;}
.subpage1 dd.c1 .text{width:394px; height:257px; display:block; position:absolute; background:url(775800.png) no-repeat -1px -492px; top:-50px; right:50px}

.subpage1 dd.c2 .img{width:406px; height:418px; display:block; position:absolute; background:url(775800.png) no-repeat -455px -6px; right:20px; top:-130px;}
.subpage1 dd.c2 .text{width:426px; height:254px; display:block; position:absolute; background:url(775800.png) no-repeat -467px -494px; top:-60px; left:0;}

.subpage1 dd.c3 .img{width:411px; height:423px; display:block; position:absolute; background:url(775800.png) no-repeat -911px -5px; top:-130px; left:-20px}
.subpage1 dd.c3 .text{width:424px; height:275px; display:block; position:absolute; background:url(775800.png) no-repeat -949px -490px; top:-55px; right:50px}

.subpage1 dd.c4{margin-bottom:60px;}
.subpage1 dd.c4 .img{width:405px; height:418px; display:block; position:absolute; background:url(775800.png) no-repeat -1400px -26px; right:30px; top:-135px;}
.subpage1 dd.c4 .text{width:395px; height:234px; display:block; position:absolute; background:url(775800.png) no-repeat -1445px -489px; top:-60px; left:15px;}
.subpage1 dd.c4 .gotop{width:114px; height:113px; display:block; position:absolute; background:url(775799.png) no-repeat -1400px -333px; left:15px; top:190px; cursor:pointer;}
.subpage1 dd.c4 .gotop:hover{filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity: 0.8;opacity: 0.8;}


.subpage1 dd .animg{
-webkit-animation:swing 1s .2s ease both;
-moz-animation:swing 1s .2s ease both;}
@-webkit-keyframes swing{
20%,40%,60%,80%,100%{-webkit-transform-origin:top center}
20%{-webkit-transform:rotate(15deg)}
40%{-webkit-transform:rotate(-10deg)}
60%{-webkit-transform:rotate(5deg)}
80%{-webkit-transform:rotate(-5deg)}
100%{-webkit-transform:rotate(0deg)}
}
@-moz-keyframes swing{
20%,40%,60%,80%,100%{-moz-transform-origin:top center}
20%{-moz-transform:rotate(15deg)}
40%{-moz-transform:rotate(-10deg)}
60%{-moz-transform:rotate(5deg)}
80%{-moz-transform:rotate(-5deg)}
100%{-moz-transform:rotate(0deg)}
}

.subpage1 dd .antext{
-webkit-animation:bouncein 1s .2s ease both;
-moz-animation:bouncein 1s .2s ease both;}
@-webkit-keyframes bouncein{
0%{opacity:0;
-webkit-transform:scale(.3)}
50%{opacity:1;
-webkit-transform:scale(1.05)}
70%{-webkit-transform:scale(.9)}
100%{-webkit-transform:scale(1)}
}
@-moz-keyframes bouncein{
0%{opacity:0;
-moz-transform:scale(.3)}
50%{opacity:1;
-moz-transform:scale(1.05)}
70%{-moz-transform:scale(.9)}
100%{-moz-transform:scale(1)}
}

.imgblock {height:590px; display:block; background:url(775845.jpg) no-repeat center top #00aae8;}
.imglist {width:1065px; display:block; height:223px;clear:both; margin:0 auto;}
.imglist .imgs{float:left; display:inline;}
.imglist .imgs:hover img, .imglist .imgshover img{filter:alpha(opacity=90);-moz-opacity:0.9;-khtml-opacity: 0.9;opacity: 0.9;-webkit-animation:flip 1s .2s ease both;-moz-animation:flip 1s .2s ease both;}

@-webkit-keyframes flip{
0%{-webkit-transform:perspective(400px) rotatey(0);
-webkit-animation-timing-function:ease-out}
40%{-webkit-transform:perspective(400px) translatez(150px) rotatey(170deg);
-webkit-animation-timing-function:ease-out}
50%{-webkit-transform:perspective(400px) translatez(150px) rotatey(190deg) scale(1);
-webkit-animation-timing-function:ease-in}
80%{-webkit-transform:perspective(400px) rotatey(360deg) scale(.95);
-webkit-animation-timing-function:ease-in}
100%{-webkit-transform:perspective(400px) scale(1);
-webkit-animation-timing-function:ease-in}
}
@-moz-keyframes flip{
0%{-moz-transform:perspective(400px) rotatey(0);
-moz-animation-timing-function:ease-out}
40%{-moz-transform:perspective(400px) translatez(150px) rotatey(170deg);
-moz-animation-timing-function:ease-out}
50%{-moz-transform:perspective(400px) translatez(150px) rotatey(190deg) scale(1);
-moz-animation-timing-function:ease-in}
80%{-moz-transform:perspective(400px) rotatey(360deg) scale(.95);
-moz-animation-timing-function:ease-in}
100%{-moz-transform:perspective(400px) scale(1);
-moz-animation-timing-function:ease-in}
}

.videobor .title{width:592px; height:177px; display:block; margin:0 auto; background:url(775799.png) no-repeat -34px -1413px; margin-top:23px;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0;opacity: 0;}
.videobor .video{width:629px; height:440px; display:block; margin:0 auto; background:url(775799.png) no-repeat -660px -1413px; margin-top:50px;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0;opacity: 0; cursor:pointer}

.zpl{height:634px; display:block; background:url(775822.jpg) no-repeat center top; margin-top:35px;}
.foot {background:#8dc21f; height:85px; display:block; clear:both; margin-top:58px; position:relative;}
.foot .gotop{width:114px; height:113px; display:block; position:absolute; background:url(775799.png) no-repeat -1400px -333px; left:50%; margin-left:-57px; top:-55px; cursor:pointer;}
.foot .gotop:hover{filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity: 0.8;opacity: 0.8;}


.imgblock2 {height:945px; display:block; overflow:hidden;}

.subpages{width:16.66667%; float:left; display:inline;}

.allsubpages {position:relative; width:100%; display:block; overflow:hidden;/* height:2850px;*/ height:2660px;}
.slidepages {width:600%;position:absolute; top:0; left:0;}



@-webkit-keyframes bounce{
0%,20%,50%,80%,100%{-webkit-transform:translatey(0)}
40%{-webkit-transform:translatey(-30px)}
60%{-webkit-transform:translatey(-15px)}
}
@-moz-keyframes bounce{
0%,20%,50%,80%,100%{-moz-transform:translatey(0)}
40%{-moz-transform:translatey(-30px)}
60%{-moz-transform:translatey(-15px)}
}
.bannN1{height:577px; overflow:hidden; display: block; background:url(775856.jpg) no-repeat center center; position:relative; border-bottom:6px solid #00aae8}
.bannn1{height:577px; overflow:hidden; display: block; background:url(775856.jpg) no-repeat center center; position:relative; border-bottom:6px solid #00aae8}
.block2{width:100%; left:0; top:0; display:block; text-align:center; overflow:hidden;}
.block2 img{width:16.655555%; display:inline-block; margin:0; padding:0; vertical-align:middle;}
/*.block2 img:hover{filter:alpha(opacity=90);-moz-opacity:0.9;-khtml-opacity: 0.9;opacity: 0.9;}
*/
.block4{height:720px; display:block; position:relative; background:#00aae8;}
.block3{height:922px; display:block; background:url(775863.jpg) no-repeat top center;}
.block4 .r1{background:url(775854.png) no-repeat; width:555px; height:555px; display:block; position:absolute; top:80px; left:-120px;}
.block4 .r2{background:url(775855.png) no-repeat; width:424px; height:461px; display:block; position:absolute; top:120px; right:-20px;}

.block4 .gotop{width:100%; height:99px; display:block; position:absolute; background:url(775872.png) no-repeat 0 0; left:50%; margin-left:-50px; top:670px; cursor:pointer;}
.block4 .gotop:hover{filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity: 0.8;opacity: 0.8;}

.imgblock4hover{
-webkit-animation:flipinx 1s .2s ease both;
-moz-animation:flipinx 1s .2s ease both;}
@-webkit-keyframes flipinx{
0%{-webkit-transform:perspective(400px) rotatex(90deg);
opacity:0}
40%{-webkit-transform:perspective(400px) rotatex(-10deg)}
70%{-webkit-transform:perspective(400px) rotatex(10deg)}
100%{-webkit-transform:perspective(400px) rotatex(0deg);
opacity:1}
}
@-moz-keyframes flipinx{
0%{-moz-transform:perspective(400px) rotatex(90deg);
opacity:0}
40%{-moz-transform:perspective(400px) rotatex(-10deg)}
70%{-moz-transform:perspective(400px) rotatex(10deg)}
100%{-moz-transform:perspective(400px) rotatex(0deg);
opacity:1}
}

.fadein{
-webkit-animation:fadein 1s .2s ease both;
-moz-animation:fadein 1s .2s ease both;}
{
0%{opacity:0}
100%{opacity:1}
}
{
0%{opacity:0}
100%{opacity:1}
}

.gz01{height:582px; position:relative; display:block; background:url(775828.jpg) no-repeat center;}
.gz02{height:499px; display:block; background:url(775829.jpg) no-repeat center;}
.gz02 .info{ width:460px; padding:130px 0 0 430px; display:block; color:#f4f2f3; font-size:20px; line-height:28px; }
.gz03{height:1032px; display:block; background:url(775830.jpg) no-repeat center;}
.gz04{height:1032px; display:block; background:url(775831.jpg) no-repeat center;}
.gz05{height:1032px; display:block; background:url(775832.jpg) no-repeat center;}
.gz06{height:525px; display:block; position:relative; background:url(775833.jpg) no-repeat center;}

.gz06 .gotop{width:100px; height:99px; display:block; position:absolute; background:url(775872.png) no-repeat 0 0; left:50%; margin-left:-50px; top:480px; cursor:pointer;}
.gz06 .gotop:hover{filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity: 0.8;opacity: 0.8;}

.tugz {width:795px; display:block; margin:0 auto;}
.tugz img{display:inline-block; margin-top:38px;}
.tugz img.i01{margin-top:220px;}
.tugz img.i03{float:right;}
.tugz p{font-size:25px; color:#f4f2f3; line-height:36px; padding-top:12px;}

.yj01 {height:584px; position:relative; display:block; background:url(775874.jpg) no-repeat center;}
.yj02 {height:516px; display:block; background:url(775875.jpg) no-repeat center;}
.yj03 {height:851px; display:block; background:url(775876.jpg) no-repeat center;}
.yj04 {height:1000px; display:block; background:url(775877.jpg) no-repeat center; position:relative;}

.yj02 .info{ width:460px; padding:135px 0 0 415px; display:block; color:#f4f2f3; font-size:20px; line-height:28px; }
.yj03 img{float:left; margin-top:40px; display:inline-block; margin-left:10px;}
.yj03 .infos{float:right; width:460px; display:inline-block; padding:60px 0 0 40px;}
.yj03 .infos h2{font-size:54px; color:#0f5294; font-weight:100; line-height:60px;}
.yj03 .infos p{font-size:26px; color:#0f5294; line-height:38px; padding-top:35px;}

.yj03 .bt1 {color:#fff; padding-top:130px;}
.yj03 .bt1 h2{font-size:56px; font-weight:100; line-height:60px;}
.yj03 .bt1 h3{font-size:26px; font-weight:100; line-height:36px; padding-top:20px;}
.yj03 .bt1 p{width:380px;font-size:18px; color:#0f5294; line-height:28px; padding-top:45px; color:#fff;}
.yj04 .gotop{width:100px; height:99px; display:block; position:absolute; background:url(775872.png) no-repeat 0 0; left:50%; margin-left:-50px; top:900px; cursor:pointer;}
.yj04 .gotop:hover{filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity: 0.8;opacity: 0.8;}
.yj04 h3{font-size:54px; font-weight:100}
.yj04 p{font-size:19px; line-height:40px; margin-bottom:10px;}
.yj04{color:#fff;}
.yj04 .bt01{width:384px; margin-top:68px; display:inline-block; float:left;}
.yj04 .bt01 img{margin-bottom:60px;}
.yj04 .bt02{width:400px; margin-top:68px; display:inline-block; float:right; margin-right:48px;}
.yj04 .bt02 p {padding:65px 0 55px 0; line-height:30px;}

.btmtext{font-size:52px; line-height:60px; padding-top:20px;}

.nn01{height:588px; display:block; background:url(826147.jpg) no-repeat center center; position:relative;}
.nn02{height:499px; display:block; background:url(826148.jpg) no-repeat center center;}
.nn03{height:857px; display:block; background:url(826149.jpg) no-repeat center center;}
.nn04{height:640px; display:block; background:url(826150.jpg) no-repeat center center;}
.nn05{height:846px; display:block; background:url(826151.jpg) no-repeat center bottom;}
.nn06{height:769px; display:block; background:url(826152.jpg) no-repeat center center;}
.nn07{background:#8fc320; display:block; height:430px;}

.nn02 p {font-size:20px; line-height:28px; color:#fff; width:458px; padding:135px 0 0 445px;}
.nn03 p.p1 {font-size:24px; line-height:36px; color:#fff; width:400px; padding:185px 0 0 0px;}
.nn03 p.p2 {font-size:24px; line-height:36px; color:#fff; width:450px; padding:135px 0 0 490px;}
.nn04 p {font-size:20px; line-height:28px; color:#fff; width:350px; padding:340px 0 0 20px;}
.nn05 p {font-size:24px; line-height:36px; color:#004274; width:700px; display:block; margin:0 auto; padding-top:730px;}
.nn06 p.p1 {font-size:24px; line-height:36px; color:#fff; width:400px; padding:205px 0 0 480px;}
.nn06 p.p2 {font-size:24px; line-height:36px; color:#fff; width:440px; padding:100px 0 0 0;}
.nn07 {text-align:center; color:#fff;}
.nn07 h2{color:#fff; padding-top:80px; font-size:51px; line-height:64px; font-weight:100;}
.nn07 p{font-size:41px; line-height:54px; display:block; margin-top:10px;}

.nn07 .gotop{width:100px; height:99px; display:block; position:absolute; background:url(775872.png) no-repeat 0 0; left:50%; margin-left:-50px; top:380px; cursor:pointer;}
.nn07 .gotop:hover{filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity: 0.8;opacity: 0.8;}