.wrapper{ position:relative; width:100%; text-align:left; background:#d2eaf4 url(../images/bg.jpg) center top repeat-y; overflow: hidden; font-family:"Microsoft JhengHei","Apple LiGothic Medium";}
.wrapper img{ border:0; vertical-align:top; width: 100%; }
.for_pc{ display: block; }
.for_m{ display: none; }
#set-footer-base{z-index: 99}


.main{background:url(../images/mainBG.png) center top no-repeat; height: 758px;}
.main .titleAnimate{width: 552px; height: 599px; position: absolute; left: 50%; margin: 12px 0 0 -250px; background:url(../images/titleAnimate.png); animation:titleAnimate 0.6s steps(4) infinite alternate;}
.main .description1{width: 351px; height: 89px; position: absolute; left: 50%; margin: 105px 0 0 -541px; animation:description1 1s 1;}
.main .description2{width: 343px; height: 82px; position: absolute; left: 50%; margin: 366px 0 0 284px; animation:description2 2s 1;}
.main .description3{width: 294px; height: 75px; position: absolute; left: 50%; margin: 460px 0 0 -448px; animation:description3 3s 1;}
@keyframes titleAnimate {
   from { background-position: 0px; }
     to { background-position: -2208px; }
}
@keyframes description1 {
   from { opacity: 0;}
     to { opacity: 1;}
}
@keyframes description2 {
   0% { opacity: 0;}
   50%{ opacity: 0; }
   100%{ opacity: 1;}
}
@keyframes description3 {
   0% { opacity: 0;}
   33%{ opacity: 0; }
   66%{ opacity: 0; }
   100%{ opacity: 1;}
}


#work .topic{position: relative; height: 306px; margin:-145px 0 0 0;}
#work .topic a{position:absolute; left: 50%; display: block; width: 324px; }
#work .topic a img:last-child{position: absolute; left: 0; top: 0; opacity: 0; transition: all 0.2s;}
#work .topic a:hover img:last-child{opacity: 0.5;}
#work .topic a.active img:last-child{opacity: 1;}
#work .topic a.work01{margin:0 0 0 -541px;}
#work .topic a.work02{margin:0 0 0 -141px;}
#work .topic a.work03{margin:0 0 0 255px;}


#work .topic-body{position: relative; width: 1220px; left: 50%; top: 0; margin:0 0 0 -610px;}
#work .topic-body .tour{position: relative; padding: 0 0 75px 47px}
#work .tour h2{display: inline-block; position: relative; font-size: 42px; font-weight: bold; line-height: 73px; height: 73px; color: #fff; padding:0 18px 0 36px; background:#ff006a; z-index: 5; clear: both;}
#work .tour h2:before{content:""; width: 20px; height:100%; background:#a20043; position:absolute; left: 0; top: 0;}
#work .tour h2:after{content:""; position: absolute; right: 0; top: 0; margin: 0 -34px 0 0;width: 0;height: 0;border-style: solid;border-width: 36.5px 0 36.5px 34px;border-color: transparent transparent transparent #ff006a;}
#work .tour .dotHorizontal{width: 360px; border-bottom: dotted 9px #ff006a; position: absolute; left: 50%; margin: 33px 0 0 -28px;}
#work .tour .dotHorizontal2{width: 1150px; border-bottom: dotted 9px #ff006a; position: absolute; left: 0%; margin: 33px 0 0 60px;}
#work .tour .dotVertical{height: 95%; border-left: dotted 9px #ff006a; position: absolute; left: 50%; margin: 90px 0 0 -554px;}
#work .tour .descript{position: relative; width: 1016px; text-align: center; clear: both; background: url(../images/wBG1.png) no-repeat; background-position: 0px -33px; padding-bottom: 50px;}
#work .tour .descript h3{display: inline-block; font-size: 26px; font-weight: bold; color: #000; text-shadow: 0 0 0.2em #fff77d,0 0 0.2em #fff77d,0 0 0.2em #fff77d,0 0 0.2em #fff77d,0 0 0.2em #fff77d; margin: 43px 0 0 0; letter-spacing: 0.1em;}
#work .tour .descript p{font-size: 18px; line-height: 30px; color: #000; margin: 27px 0 0 0; }
#work .tour .descript img{width: 277px; position: absolute; left: 50%; margin: -74px 0 0 394px;}
#work .tour .descript img.cute3{width:380px; margin: -74px 0 0 320px;}

/*turn*/
#work .tour.turn h2{background: #15baff; float: right; padding: 0 36px 0 18px;}
#work .tour.turn h2:before{background: #0085bc; left: inherit; right: 0;}
#work .tour.turn h2:after{border-color: transparent #15baff transparent transparent; border-width: 36.5px 34px 36.5px 0; right: inherit; left: -34px;}
#work .tour.turn .dotHorizontal{width: 420px; border-bottom: dotted 9px #15baff; left: 0; margin: 33px 0 0 270px;}
#work .tour.turn .dotHorizontal2{width: 1110px; border-bottom: dotted 9px #15baff; left: 0%; margin: 33px 0 0 56px;}
#work .tour.turn .dotVertical{border-left: dotted 9px #15baff; left: inherit; right: 0; margin: 90px 0 0 0; }
#work .tour.turn .descript{margin: 0 0 0 138px; background-position: -38px -33px;}
#work .tour.turn .descript img.cute2{width: 216px;left: 0;margin: -74px 0 0 -132px;}
#work .tour.turn .descript img.cute4{width: 307px;left: 0;margin: 0 0 0 -132px;}