@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{padding-top:85px; background:url(../images/body_bg.jpg) center center no-repeat; background-size:cover; background-attachment:fixed; font-family:arial , "微軟正黑體";}
#ascrail2000{z-index:10 !important;}

/* header */
#header{position:fixed; left:0; top:0; width:100%; padding:20px; background:url(../images/body_bg.jpg) center top no-repeat; 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;}
#navigation{position:absolute; right:150px; top:0;}
#navigation li{display:inline-block;}
#navigation li a{display:block; padding:25px; border-top:5px solid transparent; font-size:18px; color:#211c19; letter-spacing:1px; transition:all .3s;}
#navigation li a:hover{border-color:#da251d; color:#da251d;}
#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;}

/* 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 forwards; -webkit-animation:fade 1s 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;}	
}

/* company */
#company .tab-block{margin-bottom:30px; padding:0 20px;}
#company .tab-block .tabs{position:relative; margin-bottom:25px; text-align:center;}
#company .tab-block .tabs:before{content:""; position:absolute; left:0; bottom:2px; display:block; width:100%; height:1px; background:#000; border-bottom:1px solid #FFF;}
#company .tab-block .tabs a{display:inline-block; margin:0 6%; font-size:20px; color:#000; letter-spacing:2px; text-shadow:1px 1px 0 #FFF; transition:all .3s;}
#company .tab-block .tabs a:after{content:""; display:block; width:5px; height:5px; margin:10px auto 0 auto; background:#000; transform:rotate(45deg); -webkit-transform:rotate(45deg);}
#company .tab-block .tabs a:hover ,
#company .tab-block .tabs a.active{color:#806355;}
#company .tab-block .tabs a:hover:after ,
#company .tab-block .tabs a.active:after{background:#806355;}
#company .tab-content > li{display:none; font-size:18px; color:#000; line-height:30px; letter-spacing:1px; text-shadow:1px 1px 0 #FFF;}
#company .tab-content > li .red{color:#a3100a; text-align:right; font-style:italic;}

#company .owl-carousel{transform:translateX(-100%); -webkit-transform:translateX(-100%); animation:company 1s forwards; -webkit-animation:company 1s forwards;}
#company .owl-carousel .item a{position:relative; display:block; overflow:hidden;}
#company .owl-carousel .item a img{display:block; width:100%; height:auto; backface-visibility:hidden; transition:all 2s;}
#company .owl-carousel .item a .wrap{position:absolute; left:0; bottom:-100%; width:100%; padding:20px; background:rgba(0,0,0,.9); text-align:center; letter-spacing:2px; box-sizing:border-box; transition:all .8s;}
#company .owl-carousel .item a .wrap h2{margin-bottom:5px; font-size:18px; color:#FFF; font-weight:normal;}
#company .owl-carousel .item a .wrap p{font-size:14px; color:#bbbbbb;}
#company .owl-carousel .item a .wrap p:after{content:""; display:block; width:45px; height:28px; margin:10px auto; background:url(../images/view.png);}

#company .owl-carousel .owl-nav{opacity:0; transition:all .3s;}
#company .owl-carousel .owl-nav > div{position:absolute; top:0; width:40px; height:100%; background:rgba(0,0,0,.7); text-indent:-9999px; transition:all .3s;}
#company .owl-carousel .owl-nav > div:before{content:""; position:absolute; top:50%; display:block; width:12px; height:22px; margin-top:-11px; background:url(../images/arrow_2.png);}
#company .owl-carousel .owl-nav .owl-prev{left:0;}
#company .owl-carousel .owl-nav .owl-prev:before{left:11px; background-position:left top;}
#company .owl-carousel .owl-nav .owl-next{right:0;}
#company .owl-carousel .owl-nav .owl-next:before{right:11px; background-position:right top;}

#company .owl-carousel:hover .item a img{opacity:.6;}
#company .owl-carousel:hover .item a:hover img{opacity:1; transform:scale(1.1,1.1); -webkit-transform:scale(1.1,1.1)}
#company .owl-carousel:hover .item a:hover .wrap{bottom:0;}
#company .owl-carousel:hover .owl-nav{opacity:1;}
#company .owl-carousel:hover .owl-nav > div:hover{background:#da251d;}

@keyframes company{
to{transform:translateX(0);}
}

@-webkit-keyframes company{
to{-webkit-transform:translateX(0);}
}

/* web-design */
#web-design{position:absolute; left:0; top:0; width:100%; height:100%; padding-top:85px; box-sizing:border-box;}
#web-design .left ,
#web-design .right{float:left; width:50%; height:100%;}
#web-design .left{position:relative; background:url(../images/web_design_bg_1.jpg) right top no-repeat; background-size:cover;}
#web-design .left span{position:absolute; display:block; background-repeat:no-repeat; background-size:100% auto; text-indent:-9999px; animation:web-design 1s forwards; -webkit-animation:web-design 1s forwards;}
#web-design .left span.tablet{left:23%; top:0; width:39.37%; padding-bottom:22.8%; background-image:url(../images/web_design_tablet.png); transform:translateY(-100%); -webkit-transform:translateY(-100%); animation-delay:.3s; -webkit-animation-delay:.3s;}
#web-design .left span.mobile{left:3%; top:25%; width:14%; padding-bottom:28.8%; background-image:url(../images/web_design_mobile.png); transform:translateX(-100%); -webkit-transform:translateX(-100%); animation-delay:.5s; -webkit-animation-delay:.5s;}
#web-design .left span.desktop{left:0; bottom:0; width:85%; padding-bottom:56%; background-image:url(../images/web_design_desktop.png); transform:translateY(100%); -webkit-transform:translateY(100%); animation-delay:.1s; -webkit-animation-delay:.1s;}
#web-design .right{display:table; background:url(../images/web_design_bg_2.jpg) repeat;}
#web-design .right .wrap{display:table-cell; padding:0 20px; vertical-align:middle; text-align:center;}
#web-design .right .wrap h2{font-size:36px; color:#FFF; letter-spacing:.5px; font-weight:normal;}
#web-design .right .wrap em{display:block; font-style:normal; font-size:24px; color:#d9261e;}
#web-design .right .wrap em:after{content:""; display:block; width:100px; height:1px; margin:20px auto; background:#616161;}
#web-design .right .wrap p{font-size:18px; color:#ececec; line-height:30px; letter-spacing:1px;}
#web-design .right .wrap .btn{margin-top:30px;}
#web-design .right .wrap .btn a{display:inline-block; width:210px; margin:5px; padding:5px 0; border:1px solid transparent; font-size:18px; color:#EEE; letter-spacing:.5px; transition:all .3s;}
#web-design .right .wrap .btn a.btn-1{background:#000;}
#web-design .right .wrap .btn a.btn-2{background:#d9261e;}
#web-design .right .wrap .btn a:before{content:""; position:relative; top:3px; display:inline-block; width:25px; height:20px; margin-right:5px; background:url(../images/web_design_icon.png);}
#web-design .right .wrap .btn a.btn-1:before{background-position:left top;}
#web-design .right .wrap .btn a.btn-2:before{background-position:right top;}
#web-design .right .wrap .btn a:after{content:""; display:inline-block; width:6px; height:11px; margin-left:10px; background:url(../images/arrow_1.png);}
#web-design .right .wrap .btn a:hover{background:#666; border:1px solid #FFF;}

@keyframes web-design{
to{transform:translate(0,0);}
}

@-webkit-keyframes web-design{
to{-webkit-transform:translate(0,0);}
}

/* web-design-box */
#web-design-box{position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.7); visibility:hidden; z-index:11}
#web-design-box .wrap{position:absolute; left:0; top:50%; width:100%;}
#web-design-box .control{overflow:hidden;}
#web-design-box .control a{float:right; display:inline-block;}
#web-design-box .control .link{background:#000; font-size:18px; color:#FFF; line-height:40px; letter-spacing:1px; transition:all .3s;}
#web-design-box .control .link:before{content:""; float:left; display:block; width:40px; height:40px; margin-right:25px; background:url(../images/web_design_link.png) center center no-repeat #da251d;}
#web-design-box .control .link:after{content:""; float:right; display:block; width:6px; height:11px; margin:15px 15px 0 15px; background:url(../images/arrow_1.png);}
#web-design-box .control .link:hover{background:#da251d;}
#web-design-box .control .close{width:40px; height:40px; margin-left:-20px; background:url(../images/web_design_close.png) center center no-repeat #222; text-indent:-9999px; transition:all .3s;}
#web-design-box .control .close:hover{background-color:#FFF;}

#web-design-box .item a{position:relative; display:block; border:5px solid transparent; transition:all .3s;}
#web-design-box .item a:before{content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.5); transition:all .3s; z-index:1;}
#web-design-box .item a img{display:block; width:100%; height:auto;}
#web-design-box .item a p{position:relative; padding:20px; background:#131313; font-size:18px; color:#FFF; letter-spacing:1px; transition:all .3s; z-index:2}
#web-design-box .item a p span{color:#da251d; transition:all .3s;}
#web-design-box .item a p:after{content:""; float:right; display:inline-block; width:12px; height:11px; margin-top:7px; background:url(../images/arrow_1.png);}
#web-design-box .item a:hover{border-color:#da251d;}
#web-design-box .item a:hover:before{opacity:0;}
#web-design-box .item a:hover p{background:#da251d;}
#web-design-box .item a:hover p span{color:#FFF;}
#web-design-box .owl-dots{padding:20px 0; text-align:center;}
#web-design-box .owl-dots .owl-dot{display:inline-block; width:14px; height:14px; margin:0 10px; background:#666; border-radius:50%; opacity:.5;}
#web-design-box .owl-dots .owl-dot.active{background:#da251d;}

/* product */
#product .item{position:relative; overflow:hidden; cursor:pointer; opacity:0; animation:product 1s forwards; -webkit-animation:product 1s forwards;}
#product .item.odd{transform:translateY(-100%); -webkit-transform:translateY(-100%);}
#product .item.even{transform:translateY(100%); -webkit-transform:translateY(100%);}
#product .item a{position:absolute; left:0; top:0; display:block; width:100%; height:100%; background-position:center center; background-size:cover; text-indent:-9999px; transition:all 5s;}
#product .item img{display:block; width:100%; height:auto; transition:all 4s;}
#product .item .wrap{position:absolute; left:0; bottom:-100px; width:100%; padding:0 35px 120px 35px; background:rgba(0,0,0,.4); text-align:center; box-sizing:border-box; transition:all .3s;}
#product .item .wrap span{display:block; width:125px; height:125px; margin:-62.5px auto 20px auto; background:#000; border-radius:50%; transition:all 2s;}
#product .item .wrap h2{margin-bottom:10px; font-family:"微軟正黑體"; font-size:22px; color:#da251d; letter-spacing:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:0; transition:all .3s .3s;}
#product .item .wrap p{max-height:50px; overflow:hidden; font-size:16px; line-height:25px; color:#e7dfdf; letter-spacing:1px; opacity:0; transition:all .3s .3s;}
#product .item .wrap:after{content:""; display:block; width:45px; height:28px; margin:10px auto; background:url(../images/view.png);}

#product .item:hover a{transform:scale(1.1,1.1); -webkit-transform:scale(1.1,1.1);}
#product .item:hover .wrap{bottom:0; background:rgba(0,0,0,.8);}
#product .item:hover .wrap span{background:#da251d; transform:rotateY(360deg); -webkit-transform:rotateY(360deg);}
#product .item:hover .wrap h2 ,
#product .item:hover .wrap p{opacity:1;}

@keyframes product{
to{transform:translateY(0); opacity:1;}
}

@-webkit-keyframes product{
to{-webkit-transform:translateY(0); opacity:1;}
}

/* product-box */
#product-box{position:absolute; left:0; top:0; display:none; width:100%; height:100%; padding:0 25px; background:url(../images/product_box_cover.png); box-sizing:border-box; z-index:11}
#product-box .wrap{position:relative; width:100%; height:100%; max-width:1024px; margin:0 auto;}
#product-box .wrap iframe{width:100%; height:100%;}
#product-box .wrap .close{position:absolute; right:-22.5px; top:20px; display:block; width:45px; height:45px; background:#363636; border:5px solid #f2f1f0; border-radius:50%; text-indent:-9999px; box-sizing:border-box; transition:all .3s;}
#product-box .wrap .close:before ,
#product-box .wrap .close:after{content:""; position:absolute; left:9px; top:17px; display:block; width:18px; height:1px; background:#dddcdb;}
#product-box .wrap .close:before{transform:rotate(-45deg);}
#product-box .wrap .close:after{transform:rotate(45deg);}
#product-box .wrap .close:hover{background:#000;}

/* product-box-inner */
#product-box-inner{position:fixed; left:0; top:0; width:100%; height:100%; background:url(../images/product_box_bg.jpg); overflow:hidden;}
#product-box-inner:after{content:""; display:block; clear:both;}
#product-box-inner .left ,
#product-box-inner .right{width:50%; height:100%; box-sizing:border-box;}
#product-box-inner .left{float:left; box-shadow:0 0 10px rgba(0,0,0,.5);}
#product-box-inner .left img{display:block; width:100%; height:auto;}
#product-box-inner .right{position:relative; float:right; padding:35px;}
#product-box-inner .right .info{padding-bottom:30px; border-bottom:1px solid #d0d0d0; letter-spacing:1px; text-shadow:1px 1px 0 #FFF;}
#product-box-inner .right .info h2{font-size:36px; color:#000;}
#product-box-inner .right .info h2:after{content:""; display:block; width:75px; height:1px; margin:15px 0; background:#777;}
#product-box-inner .right .info em{margin-bottom:30px; display:block; font-size:16px; color:#777; font-style:normal;}
#product-box-inner .right .info p{font-size:18px; color:#000; line-height:26px;}
#product-box-inner .right .info .link{display:inline-block; margin-top:15px; padding:10px 20px; background:#000; font-size:16px; color:#FFF; text-shadow:none;}
#product-box-inner .right .info .link:after{content:""; display:inline-block; width:6px; height:11px; margin-left:10px; background:url(../images/arrow_1.png);}
#product-box-inner .right .qrcode{padding:20px; border-top:2px solid #FFF; border-bottom:1px solid #d0d0d0; font-size:16px; color:#777; letter-spacing:1px; text-align:center; text-shadow:1px 1px 0 #FFF;}
#product-box-inner .right .qrcode img{display:inline-block; margin-bottom:20px;}
#product-box-inner .right .qrcode strong{color:#000; font-weight:normal;}
#product-box-inner .right .tag{padding-top:20px; border-top:2px solid #FFF; font-size:16px; color:#777; letter-spacing:1px; text-shadow:1px 1px 0 #FFF;}
#product-box-inner .right .tag:before{content:""; position:relative; top:3px; display:inline-block; width:17px; height:17px; margin-right:10px; background:url(../images/tag.png);}

/* service */
#service{position:absolute; left:0; top:0; width:100%; height:100%; padding-top:85px; box-sizing:border-box;}
#service .left ,
#service .right{position:relative; float:left; width:50%; height:100%;}
#service .left{background:url(../images/upload/service_01.jpg) center center no-repeat; background-size:cover; transform:translateX(-100%); -webkit-transform:translateX(-100%); opacity:0; animation:service-1 .8s forwards; -webkit-animation:service-1 .8s forwards;}
#service .left .wrap{position:absolute; left:0; bottom:0; width:100%; height:50%; padding:30px; background:rgba(0,0,0,.5); font-size:18px; color:#cdcdcd; line-height:30px; letter-spacing:1px; box-sizing:border-box;}
#service .left .wrap a{display:inline-block; margin-left:10px; padding:0 5px; background:#000; color:#da251d; transition:all .3s;}
#service .left .wrap a:hover{background:#666; color:#FFF;}

#service .right .top ,
#service .right .bottom{position:relative; height:50%;}
#service .right .s-1 ,
#service .right .s-2 ,
#service .right .s-3 ,
#service .right .s-4{position:absolute; top:0; height:100%; overflow:hidden; animation-name:service-2; -webkit-animation-name:service-2; animation-duration:1s; -webkit-animation-duration:1s; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards;}
#service .right .s-1{transform-origin:left center; -webkit-transform-origin:left center; transform:rotateY(-90deg); -webkit-transform:rotateY(-90deg); animation-delay:.8s; -webkit-animation-delay:.8s;}
#service .right .s-2{transform-origin:center top; -webkit-transform-origin:center top; transform:rotateX(-90deg); -webkit-transform:rotateX(-90deg); animation-delay:1s; -webkit-animation-delay:1s;}
#service .right .s-3{transform-origin:left center; -webkit-transform-origin:left center; transform:rotateY(-90deg); -webkit-transform:rotateY(-90deg); animation-delay:1.4s; -webkit-animation-delay:1.4s;}
#service .right .s-4{transform-origin:right center; -webkit-transform-origin:right center; transform:rotateY(90deg); -webkit-transform:rotateY(90deg); animation-delay:1.2s; -webkit-animation-delay:1.2s;}

#service .right .s-1{left:0; width:62.5%;}
#service .right .s-2{right:0; width:37.5%;}

#service .right .s-3{left:0; width:50%;}
#service .right .s-4{right:0; width:50%;}

#service .right .s-1:before ,
#service .right .s-2:before ,
#service .right .s-3:before ,
#service .right .s-4:before{content:""; position:absolute; left:0; top:0; width:100%; height:100%; background-position:center center; background-size:cover; transition:all .3s;}
#service .right .s-1:before{background-image:url(../images/upload/service_02.jpg);}
#service .right .s-2:before{background-image:url(../images/upload/service_03.jpg);}
#service .right .s-3:before{background-image:url(../images/upload/service_04.jpg);}
#service .right .s-4:before{background-image:url(../images/upload/service_05.jpg);}

#service .right .s-1 a ,
#service .right .s-4 a{position:absolute; left:0; top:0; display:block; width:100%; height:100%;}
#service .right .s-1 a span ,
#service .right .s-4 a span{position:absolute; left:0; top:-50px; display:block; width:100%; padding:10px; background:#000; font-size:18px; color:#FFF; letter-spacing:5px; text-align:right; box-sizing:border-box; transition:all .3s;}
#service .right .s-1 a span:after ,
#service .right .s-4 a span:after{content:""; position:relative; top:3px; display:inline-block; width:21px; height:21px; margin-left:5px; background:url(../images/plus_small.png);}
#service .right .s-1:hover:before ,
#service .right .s-4:hover:before{top:46px;}
#service .right .s-1:hover a span ,
#service .right .s-4:hover a span{top:0;}

#service .right .s-2 a ,
#service .right .s-3 a{position:absolute; left:0; top:0; display:table; width:100%; height:100%;}
#service .right .s-2 a:before ,
#service .right .s-3 a:before{content:""; position:absolute; left:5%; top:5%; width:90%; height:90%; background:rgba(0,0,0,.7); opacity:0; transition:all .3s;}
#service .right .s-2 a .wrap ,
#service .right .s-3 a .wrap{position:relative; display:table-cell; vertical-align:middle; text-align:center;}
#service .right .s-2 a .wrap h2 ,
#service .right .s-3 a .wrap h2{display:inline-block; margin-bottom:10px; border-top:1px solid #bdbdbd; border-bottom:1px solid #bdbdbd; font-size:24px; color:#FFF; letter-spacing:5px; font-weight:normal;}
#service .right .s-2 a .wrap em ,
#service .right .s-3 a .wrap em{display:block; font-style:normal; font-size:12px; color:#FFF; letter-spacing:3px;}
#service .right .s-2 a .wrap em:after ,
#service .right .s-3 a .wrap em:after{content:""; display:block; width:49px; height:49px; margin:10px auto 0 auto; background:url(../images/plus_large.png);}
#service .right .s-2 a:hover:before ,
#service .right .s-3 a:hover:before{opacity:1;}

@keyframes service-1{
to{transform:translateX(0); opacity:1;}
}

@-webkit-keyframes service-1{
to{-webkit-transform:translateX(0); opacity:1;}
}

@keyframes service-2{
to{transform:rotate(0deg);}
}

@-webkit-keyframes service-2{
to{-webkit-transform:rotate(0deg);}
}

/* contact */
#contact{position:relative; max-width:1400px; margin:0 auto; padding:175px 0; box-sizing:border-box;}
#contact:before{content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:url(../images/contact_bg_1.png) center center no-repeat; opacity:0; transform:scale(0,0); -webkit-transform:scale(0,0); animation:contact-2 1s .5s forwards; -webkit-animation:contact-2 1s .5s forwards;}
#contact .butterfly{position:absolute; left:0; top:0; width:100%; height:100%; background-image:url(../images/contact_bg_2.png); background-position:center center; text-indent:-9999px; opacity:0; animation:contact-1 1s 1s forwards; -webkit-animation:contact-1 1s 1s forwards; z-index:1}
#contact form{position:relative; top:100px; max-width:710px; margin:0 auto; padding:35px 45px; background:url(../images/contact_form_bg.jpg); box-shadow:10px 10px 10px rgba(0,0,0,.5); box-sizing:border-box; opacity:0; animation:contact-1 1s forwards; -webkit-animation:contact-1 1s forwards; z-index:2}
#contact form .intro{margin-bottom:10px; font-size:17px; color:#666; line-height:28px; letter-spacing:1px;}
#contact form .intro span.line{color:#4ecd00;}
#contact form .intro span.skype{color:#00b0f0;}
#contact form .intro span:before{content:""; display:inline-block; width:25px; height:25px; margin:0 3px; background:url(../images/contact_icon.png); vertical-align:middle;}
#contact form .intro span.line:before{background-position:left top;}
#contact form .intro span.skype:before{background-position:right top;}
#contact form .intro strong{color:#da251d; font-weight:normal;}
#contact form ul{margin-bottom:10px; overflow:hidden;}
#contact form li{position:relative; width:49%; margin-bottom:10px; padding:10px 10px 10px 90px; background:#FFF; border-bottom:1px solid #e2e2e2; box-sizing:border-box;}
#contact form li:nth-child(odd){float:left;}
#contact form li:nth-child(even){float:right;}

#contact form li span{position:absolute; left:10px; top:10px; font-size:17px; color:#666;}
#contact form li input{display:block; width:100%; border:none; font-size:17px; color:#000; line-height:24px;}
#contact form li textarea{display:block; width:100%; height:48px; border:none; font-size:17px; color:#000; line-height:24px;}

#contact form li.txt{padding-left:10px; float:none; width:100%; clear:both;}
#contact form li.txt span{position:static; display:block; margin-bottom:5px;}

#contact form li.required:before{content:""; position:absolute; right:10px; top:20px; display:block; width:0; height:0; border-style:solid; border-width:0 5px 7px 5px; border-color:transparent transparent #da251d transparent;}

#contact form .info{font-size:17px; color:#666; line-height:24px; letter-spacing:1px;}
#contact form .info span{color:#32728d;}

#contact form .btn{position:absolute; right:0; bottom:-40px; width:100%; padding-right:45px; text-align:right; box-sizing:border-box;}
#contact form .btn button{display:inline-block; width:85px; height:85px; margin-left:15px; border:none; border-radius:50%; box-shadow:3px 3px 3px rgba(0,0,0,.8); font-size:17px; color:#FFF; letter-spacing:1px; text-align:center; transition:all .3s;}
#contact form .btn button[type="submit"]{background:#da251d;}
#contact form .btn button[type="reset"]{background:#212431;}
#contact form .btn button:hover{background:#666;}

@keyframes contact-1{
to{top:0; opacity:1;}	
}

@-webkit-keyframes contact-1{
to{top:0; opacity:1;}	
}

@keyframes contact-2{
to{transform:scale(1,1); opacity:1;}	
}

@-webkit-keyframes contact-2{
to{-webkit-transform:scale(1,1); opacity:1;}	
}







/* RWD */
@media screen and (max-width:1000px){
body{padding-top:65px;}
/* header */
#header{padding:10px;}
#navigation{display:none;}
#top-link #mobi-btn{display:inline-block;}
/* web-design */
#web-design{position:static; padding:0;}
#web-design .left ,
#web-design .right{float:none; width:100%; height:auto;}
#web-design .left{padding-bottom:50%;}
#web-design .left span.tablet{display:none;}
#web-design .left span.mobile{left:auto; right:5%;}
#web-design .left span.desktop{width:60%; padding-bottom:36%;}
#web-design .right{padding:100px 0;}
/* web-design-box */
#web-design-box .item a:before{display:none;}
/* product */
#product .item .wrap{bottom:0; background:rgba(0,0,0,.8);}
#product .item .wrap h2 ,
#product .item .wrap p{opacity:1;}
/* service */
#service{position:static; padding:0;}
#service .left ,
#service .right{float:none; width:100%; height:auto;}
#service .left .wrap{position:static;}
#service .right .top ,
#service .right .bottom{height:auto; padding-bottom:50%;}
#service .right .s-1 a span ,
#service .right .s-4 a span{top:0;}
#service .right .s-1:before ,
#service .right .s-4:before{top:46px;}
#service .right .s-2 a:before ,
#service .right .s-3 a:before{opacity:1;}
}

@media screen and (max-width:768px){
/* footer */
#footer{position:static;}
#footer:before{display:none;}
/* product */
#product .item .wrap{padding:0 20px 40px 20px;}
#product .item .wrap span{width:80px; height:80px; margin-top:-40px;}
/* product-box */
#product-box{padding:0;}
#product-box .wrap .close{right:20px; top:38px;}
/* product-box-inner */
#product-box-inner{position:static;}
#product-box-inner .left ,
#product-box-inner .right{float:none; width:100%;}
#product-box-inner .right .info h2{padding-right:30px;}
/* contact */
#contact{min-height:900px;}
#contact .butterfly{display:none;}
}

@media screen and (max-width:480px){
/* header */
#logo{width:45px;}
/* product */
#product .item .wrap{padding-bottom:0;}
#product .item .wrap h2 ,
#product .item .wrap p ,
#product .item .wrap:after{display:none;}
/* service */
#service .left{background:url(../images/upload/service_01_mobile.jpg);}
#service .right .top ,
#service .right .bottom{position:static; padding:0;}
#service .right .s-1 ,
#service .right .s-2 ,
#service .right .s-3 ,
#service .right .s-4{position:relative; width:100%;}
#service .right .s-1{padding-bottom:60%;}
#service .right .s-4{padding-bottom:90%;}
#service .right .s-1:before ,
#service .right .s-4:before{top:0 !important;}
#service .right .s-1 a span ,
#service .right .s-4 a span{top:auto !important; bottom:0 !important; background:rgba(0,0,0,.8);}
#service .right .s-2 a ,
#service .right .s-3 a{position:static; display:block;}
#service .right .s-2 a:before ,
#service .right .s-3 a:before{left:0; top:0; width:100%; height:100%; opacity:.5 !important;}
#service .right .s-2 a .wrap ,
#service .right .s-3 a .wrap{display:block; padding:100px 20px;}
/* contact */
#contact{padding:0 0 120px 0; min-height:0;}
#contact:before{background:url(../images/contact_bg_mobile.png) center 90% no-repeat; background-size:100% auto;}
#contact form{padding:0 20px; background:none; box-shadow:none;}
#contact form .intro{letter-spacing:2px;}
#contact form li{float:none !important; width:100%;}
#contact form .btn{position:static; padding:20px 0 0 0; text-align:center;}
#contact form .btn button{margin:0 10px;}
}