@charset "utf-8";
/* reset css */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, textarea, p, th, td {margin:0; padding:0; -webkit-text-size-adjust:none;}
th{font-weight:normal; text-align:left;}
table{border-collapse:collapse; border-spacing:0;}
img{border:0;}
ol, ul{list-style:none;}
a{outline:none; hlbr:expression(this.onFocus=this.blur()); text-decoration:none; cursor:pointer;}
input , select , textarea , button{outline:none; border-radius:0; font-family:arial , "微軟正黑體";}
input[type="number"]::-webkit-inner-spin-button ,
input[type="date"]::-webkit-inner-spin-button{-webkit-appearance:none;}
button{padding:0; cursor:pointer;}

html , body{min-height:100%;}
body{background:url(../images/body_bg.jpg) center center no-repeat; background-size:cover; background-attachment:fixed; font-family:arial , "微軟正黑體";}

/* header */
#header{position:fixed; left:0; top:0; width:100%; padding:20px; box-sizing:border-box; z-index:10}
#header:after{content:""; display:block; clear:both;}
#logo{float:left; display:block; width:170px; height:45px; background:url(../images/logo.png); text-indent:-9999px;}
#top-link{float:right; margin-top:3px;}
#top-link a{display:inline-block; width:36px; height:36px; margin:0 3px; background-image:url(../images/toplink.png); background-color:#EEE; background-position-y:top; border-radius:50%; text-indent:-9999px; transition:all .3s;}
#top-link a.line{position:relative; background-position-x:left;}
#top-link a.fb{background-position-x:center;}
#top-link a.home{background-position-x:right;}
#top-link a:hover{background-position-y:bottom;}
#top-link a.line:hover{background-color:#4acc00;}
#top-link a.fb:hover{background-color:#3b5998;}
#top-link a.home:hover{background-color:#da251d;}

#top-link a.line span{position:absolute; right:0; top:100%; display:none; width:120px; margin-top:15px; padding:10px; background:#FFF; box-sizing:border-box;}
#top-link a.line span:before{content:""; position:absolute; right:10px; top:-9px; display:block; width:0; height:0; border-style:solid; border-width:0 8px 9px 8px; border-color:transparent transparent #FFF transparent;}
#top-link a.line span img{display:block; width:100%; height:auto;}
#top-link a.line:hover span{display:block;}

#top-link #mobi-btn{display:none; background:url(../images/mobile.png) center center no-repeat;}
#top-link #mobi-btn.active{background:url(../images/close.png) center center no-repeat;}

/* mobile */
#mobile{position:fixed; left:0; top:0; display:none; width:100%; height:100%; padding:85px 15px 0 15px; background:url(../images/mobile_bg.png) center top; box-sizing:border-box; z-index:9;}
#mobile li{border-top:1px solid #615e5e; border-bottom:1px solid #000;}
#mobile li.btn-1{border-top:none;}
#mobile li.btn-5{border-bottom:none;}
#mobile li a{display:block; font-size:18px; color:#FFF; line-height:60px;}
#mobile li a span{display:block; width:140px; margin:0 auto;}
#mobile li a span:before{content:""; position:relative; display:inline-block; width:30px; height:30px; margin-right:10px; background:url(../images/mobile_icon.png); vertical-align:middle;}
#mobile li.btn-1 a span:before{background-position:left top;}
#mobile li.btn-2 a span:before{background-position:-30px top;}
#mobile li.btn-3 a span:before{background-position:center top;}
#mobile li.btn-4 a span:before{background-position:-90px top;}
#mobile li.btn-5 a span:before{background-position:right top;}

/* csidea */
#csidea{position:absolute; left:0; top:0; width:100%; height:100%; box-sizing:border-box;}
#csidea li{position:absolute; top:0; width:22%; height:100%; transform-origin:left center; -webkit-transform-origin:left center; animation:flip .5s forwards; -webkit-animation:flip .5s forwards;}
#csidea li:before{content:""; position:absolute; left:0; display:block; width:100%; height:0; background:#d3d3d3; transition:all .8s;}
#csidea li.block-1{left:0; transform:rotateY(90deg); -webkit-transform:rotateY(90deg); animation-delay:.1s; -webkit-animation-delay:.1s;}
#csidea li.block-2{left:19.7%; transform:rotateY(-90deg); -webkit-transform:rotateY(-90deg); animation-delay:.3s; -webkit-animation-delay:.3s;}
#csidea li.block-3{left:39.3%; transform:rotateY(90deg); -webkit-transform:rotateY(90deg); animation-delay:.5s; -webkit-animation-delay:.5s;}
#csidea li.block-4{left:58.5%; transform:rotateY(-90deg); -webkit-transform:rotateY(-90deg); animation-delay:.7s; -webkit-animation-delay:.7s;}
#csidea li.block-5{right:0; transform:rotateY(90deg); -webkit-transform:rotateY(90deg); animation-delay:.9s; -webkit-animation-delay:.9s;}
#csidea li.block-1:before ,
#csidea li.block-3:before ,
#csidea li.block-5:before{bottom:0;}
#csidea li.block-2:before ,
#csidea li.block-4:before{top:0;}
#csidea li:hover{z-index:2;}
#csidea li:hover:before{height:100%;}

#csidea li .wrap{position:absolute; left:0; width:100%;}
#csidea li.block-1 .wrap ,
#csidea li.block-3 .wrap ,
#csidea li.block-5 .wrap{top:27%; text-align:right;}
#csidea li.block-2 .wrap ,
#csidea li.block-4 .wrap{top:7%; z-index:1;}

#csidea li .wrap .title{position:absolute; width:45px; font-size:50px; color:#333; text-align:center; word-break:break-all; opacity:0; animation:fade 1s 1s forwards; -webkit-animation:fade 1s 1s forwards;}
#csidea li.block-1 .wrap .title{left:15%; top:0; margin-top:-130px;}
#csidea li.block-2 .wrap .title{right:15%; bottom:0; margin-bottom:-130px;}
#csidea li.block-3 .wrap .title{left:15%; top:0; margin-top:-170px;}
#csidea li.block-4 .wrap .title{right:15%; bottom:0; margin-bottom:-130px;}
#csidea li.block-5 .wrap .title{left:15%; top:0; margin-top:-130px;}

#csidea li .wrap .title span{color:#FFF;}

#csidea li .wrap a{display:block; width:100%; padding-bottom:100%; background-size:cover; text-align:left; text-indent:-9999px;}
#csidea li.block-1 .wrap a{background-image:url(../images/upload/index_img_01.jpg);}
#csidea li.block-2 .wrap a{background-image:url(../images/upload/index_img_02.jpg);}
#csidea li.block-3 .wrap a{background-image:url(../images/upload/index_img_03.jpg);}
#csidea li.block-4 .wrap a{background-image:url(../images/upload/index_img_04.jpg);}
#csidea li.block-5 .wrap a{background-image:url(../images/upload/index_img_05.jpg);}

#csidea li .wrap p{display:inline-block; max-width:305px; padding:20px; border-color:#000; font-size:18px; color:#333; line-height:30px; letter-spacing:.5px; box-sizing:border-box; opacity:0; animation:fade 1s 1.5s forwards; -webkit-animation:fade 1s 1.5s forwards;}
#csidea li.block-1 .wrap p ,
#csidea li.block-3 .wrap p ,
#csidea li.block-5 .wrap p{margin-right:20px; border-right:1px solid;}
#csidea li.block-2 .wrap p ,
#csidea li.block-4 .wrap p{margin-left:20px; border-left:1px solid;}

#csidea li.block-5 .wrap p .line{color:#5fb618;}
#csidea li.block-5 .wrap p .skype{color:#4ec4eb;}

@keyframes flip{
to{transform:rotateY(0deg);}
}

@-webkit-keyframes flip{
to{-webkit-transform:rotateY(0deg);}
}

/* footer */
#footer{position:fixed; left:0; bottom:0; width:100%; padding:20px; background:#F7F7F4; font-size:14px; color:#5f5f5f; text-align:center; box-sizing:border-box; opacity:0; animation:fade 1s 2s forwards; -webkit-animation:fade 1s 2s forwards; z-index:10}
#footer:before{content:""; position:absolute; left:0; top:-30px; display:block; width:100%; height:30px; background:url(../images/footer.png) left top; animation:footer 100s infinite;}
#footer a{color:#5f5f5f; transition:all .3s;}
#footer a:hover{color:#000;}


@keyframes fade{
to{opacity:1;}	
}

@-webkit-keyframes fade{
to{opacity:1;}	
}

@keyframes footer{
from{background-position-x:0;}
to{background-position-x:10000px;}	
}

@-webkit-keyframes footer{
from{background-position-x:0;}
to{background-position-x:10000px;}	
}







/* RWD */
@media screen and (max-width:1300px){
/* csidea */
#csidea li .wrap p{display:none;}
#csidea li.block-1 .wrap ,
#csidea li.block-3 .wrap ,
#csidea li.block-5 .wrap{top:37%;}
#csidea li.block-2 .wrap ,
#csidea li.block-4 .wrap{top:17%;}
}

@media screen and (max-width:768px){
/* header */
#header{padding:10px; background:url(../images/body_bg.jpg) center top no-repeat;}
#top-link #mobi-btn{display:inline-block;}
/* csidea */
#csidea{position:static; padding-top:65px;}
#csidea li{position:relative; left:0 !important; width:100%; height:320px;}
#csidea li .wrap{top:0 !important; height:100%; padding:100px 20px 0 20px; box-sizing:border-box;}
#csidea li.block-1 .wrap ,
#csidea li.block-3 .wrap ,
#csidea li.block-5 .wrap{text-align:left;}
#csidea li.block-2 .wrap ,
#csidea li.block-4 .wrap{text-align:right;}
#csidea li .wrap a{position:absolute; left:0; top:0; height:100%; padding:0;}
#csidea li.block-1 .wrap a{background-image:url(../images/upload/index_img_mobile_01.jpg);}
#csidea li.block-2 .wrap a{background-image:url(../images/upload/index_img_mobile_02.jpg);}
#csidea li.block-3 .wrap a{background-image:url(../images/upload/index_img_mobile_03.jpg);}
#csidea li.block-4 .wrap a{background-image:url(../images/upload/index_img_mobile_04.jpg);}
#csidea li.block-5 .wrap a{background-image:url(../images/upload/index_img_mobile_05.jpg);}
#csidea li .wrap .title{position:relative; left:0 !important; width:100%; margin:0 !important; z-index:1}
#csidea li.block-1 .wrap .title ,
#csidea li.block-3 .wrap .title ,
#csidea li.block-5 .wrap .title{text-align:left;}
#csidea li.block-2 .wrap .title ,
#csidea li.block-4 .wrap .title{text-align:right;}
#csidea li .wrap p{position:relative; display:inline-block; max-width:290px; margin:10px 0 0 0 !important; padding:0 !important; border:none !important; font-size:17px; line-height:24px; letter-spacing:.5px; z-index:1;}
#csidea li.block-1 .wrap p ,
#csidea li.block-3 .wrap p{color:#CCC;}
#csidea li.block-2 .wrap p ,
#csidea li.block-4 .wrap p ,
#csidea li.block-5 .wrap p{color:#000;}
/* footer */
#footer{position:static;}
#footer:before{display:none;}
}

@media screen and (max-width:480px){
/* header */
#logo{width:45px;}
/* csidea */
#csidea li{height:130px;}
#csidea li .wrap{padding-top:80px;}
#csidea li .wrap .title{font-size:29px;}
#csidea li .wrap a{background-position:center center;}
#csidea li .wrap p{display:none;}
}