@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;}
em{font-style:normal;}
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;}

@font-face{font-family:axaxaxl; src:url(axaxaxl.ttf);}

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

/* header */
#header{padding:20px 0; background:url(../images/navi_bg.jpg); box-sizing:border-box; z-index:10}
#logo{display:block; width:244px; height:115px; margin:0 auto 10px auto; background:url(../images/logo.png); background-size:100% auto; text-indent:-9999px;}
#navigation{font-size:18px; color:#FFF; line-height:30px; text-align:center;}
#navigation a{display:inline-block; padding:5px 20px; border-radius:15px; color:#FFF; transition:all .3s;}
#navigation a:hover{background-color:#FFF; color:#000;}

/* mobile */
#mobi-btn{position:relative; float:right; display:none; width:35px; height:30px; margin-top:25px;}
#mobi-btn:before ,
#mobi-btn hr ,
#mobi-btn:after{content:""; position:absolute; left:0; display:block; width:100%; height:4px; margin:0; padding:0; background:#FFF; border:none; border-radius:3px; transition:all .3s;}
#mobi-btn:before{top:0;}
#mobi-btn hr{top:13px;}
#mobi-btn:after{bottom:0;}
#mobi-btn.active:before{top:13px; transform:rotate(45deg);}
#mobi-btn.active hr{opacity:0;}
#mobi-btn.active:after{top:13px; transform:rotate(-45deg);}
#mobile{position:absolute; left:0; top:100%; display:none; width:100%; background:rgba(255,255,255,.9);}
#mobile a{display:block; padding:20px; border-bottom:1px solid #666; font-size:18px; color:#333; text-align:center;}
#mobile span{display:none;}

/* container */
#container{width:90%; max-width:1000px; margin:0 auto; padding:100px 0;}

/* main-title */
#main-title{position:absolute; left:0; top:10px; width:100px; padding-top:10px; font-size:45px; color:#ffd800; line-height:55px; text-align:center; border-top:3px solid #FFF;}
#main-title span{position:absolute; left:130px; top:-6px; display:block; width:200px; font-family:axaxaxl; font-size:20px; color:#FFF; line-height:20px; text-align:left; transform-origin:left top; -webkit-transform-origin:left top; transform:rotate(90deg); -webkit-transform:rotate(90deg);}

/* about */
#about{margin-bottom:200px;}
#about .photo{margin-bottom:20px; overflow:hidden;}
#about .photo li{position:relative; top:-100px; float:left; width:31.33%; margin:1%; border-radius:10px; overflow:hidden; opacity:0;}
#about .photo li img{display:block; width:100%; height:auto;}
#about .photo li p{position:absolute; left:0; bottom:0; width:100%; padding:10px; background:rgba(0,0,0,.6); font-size:24px; color:#FFF; text-align:center; box-sizing:border-box;}
#about .photo li p span{padding-left:5px; font-size:18px;}
#about .wrap{position:relative; top:100px; padding-left:180px; font-size:18px; color:#FFF; line-height:35px; opacity:0;}

#about.active .photo li{animation:about 1s forwards; -webkit-animation:about 1s forwards;}
#about.active .photo li:nth-child(1){animation-delay:.1s; -webkit-animation-delay:.1s;}
#about.active .photo li:nth-child(2){animation-delay:.2s; -webkit-animation-delay:.2s;}
#about.active .photo li:nth-child(3){animation-delay:.3s; -webkit-animation-delay:.3s;}
#about.active .wrap{animation:about 1s .5s forwards; -webkit-animation:about 1s .5s forwards;}

@keyframes about{
to{top:0; opacity:1;}
}

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

/* product */
#product{margin-bottom:200px;}
#product .photo{margin-bottom:20px; overflow:hidden;}
#product .photo .left{float:left; width:35%; opacity:0; transform:scale(.5,.5); -webkit-transform:scale(.5,.5);}
#product .photo .left img{display:block; max-width:100%; height:auto; margin:0 auto;}
#product .photo .right{float:right; width:65%; overflow:hidden;}
#product .photo .right li{position:relative; float:left; width:21%; margin:2%; opacity:0; transform:scale(.5,.5); -webkit-transform:scale(.5,.5);}
#product .photo .right li img{display:block; width:100%; height:auto; margin-bottom:10px;}
#product .photo .right li p{text-align:center; width:100%; font-size:18px; color:#FFF;}
#product .wrap{position:relative; top:100px; padding-left:180px; font-size:18px; color:#FFF; line-height:35px; opacity:0;}

#product.active .photo .left{animation:product 1s forwards; -webkit-animation:product 1s forwards;}
#product.active .photo .right li{animation:product .5s .3s forwards; -webkit-animation:product .5s .3s forwards;}
#product.active .photo .right li:nth-child(1){animation-delay:.1s; -webkit-animation-delay:.1s;}
#product.active .photo .right li:nth-child(2){animation-delay:.2s; -webkit-animation-delay:.2s;}
#product.active .photo .right li:nth-child(3){animation-delay:.3s; -webkit-animation-delay:.3s;}
#product.active .photo .right li:nth-child(4){animation-delay:.4s; -webkit-animation-delay:.4s;}
#product.active .photo .right li:nth-child(5){animation-delay:.5s; -webkit-animation-delay:.5s;}
#product.active .photo .right li:nth-child(6){animation-delay:.6s; -webkit-animation-delay:.6s;}
#product.active .photo .right li:nth-child(7){animation-delay:.7s; -webkit-animation-delay:.7s;}
#product.active .wrap{animation:product 1s .8s forwards; -webkit-animation:product 1s .8s forwards;}

@keyframes product{
to{top:0; transform:scale(1,1); opacity:1;}
}

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

/* usage */
#usage{margin-bottom:200px; overflow:hidden;}
#usage .photo{position:relative; left:-100px; float:left; width:30%;}
#usage .photo img{display:block; width:100%; height:auto;}
#usage .wrap{position:relative; left:100px; float:right; width:70%; padding-left:50px; font-size:18px; color:#FFF; line-height:35px; box-sizing:border-box;}
#usage .wrap #main-title{position:relative; margin-bottom:20px;}

#usage.active .photo ,
#usage.active .wrap{animation:usage 1s forwards; -webkit-animation:usage 1s forwards;}

@keyframes usage{
to{left:0; opacity:1;}
}

@-webkit-keyframes usage{
to{left:0; opacity:1;}
}

/* question */
#question{position:relative; margin-bottom:200px; padding-left:180px; opacity:0;}
#question .wrap{padding:20px; background:#f1f0f0; border-radius:10px; font-size:18px; line-height:35px;}
#question .wrap dl{position:relative; top:50px; margin-bottom:10px; opacity:0;}
#question .wrap dt{color:#dd4984;}
#question .wrap dt:before{content:"Q：";}
#question .wrap dd{color:#666;}
#question .wrap dd:before{content:"A：";}

#question.active{animation:question 1s forwards; -webkit-animation:question 1s forwards;}
#question.active .wrap dl{animation:question .5s forwards; -webkit-animation:question .5s forwards;}
#question.active .wrap dl:nth-child(1){animation-delay:.3s; -webkit-animation-delay:.3s;}
#question.active .wrap dl:nth-child(2){animation-delay:.4s; -webkit-animation-delay:.4s;}
#question.active .wrap dl:nth-child(3){animation-delay:.5s; -webkit-animation-delay:.5s;}
#question.active .wrap dl:nth-child(4){animation-delay:.6s; -webkit-animation-delay:.6s;}

@keyframes question{
to{top:0; opacity:1;}
}

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

/* order */
#order{position:relative; padding-left:180px; opacity:0; transition:all 1s;}
#order form{padding:20px; background:#f1f0f0; border-radius:10px;}
#order form li{position:relative; margin-bottom:15px; padding-left:100px; font-size:18px; color:#000; box-sizing:border-box;}
#order form li span{position:absolute; left:0; top:8px;}
#order form li input[type="text"] ,
#order form li input[type="email"] ,
#order form li input[type="number"] ,
#order form li input[type="tel"]{display:block; width:100%; height:40px; padding:5px 10px; background:#f9f9f9; border:1px solid #cfcfcf; font-size:15px; color:#333; box-sizing:border-box;}
#order form li textarea{width:100%; height:150px; padding:10px; background:#f9f9f9; border:1px solid #cfcfcf; font-size:15px; color:#333; box-sizing:border-box;}

#order form li .color{overflow:hidden;}
#order form li .color li{float:left; width:33.33%; padding:0 15px 0 60px;}
#order form li .color li input{text-align:center;}
#order form li .note{font-size:15px; color:#000;}

#order form .btn{padding-left:100px; text-align:center;}
#order form .btn button{display:inline-block; margin:5px; padding:5px 20px; background:#a14040; border:none; border-radius:5px; font-size:15px; color:#FFF; cursor:pointer; transition:all .3s;}
#order form .btn button:hover{background:#666;}

#order.active{opacity:1;}

/* footer */
#footer{padding:10px 0; background:#000; font-size:13px; color:#FFF; line-height:26px; text-align:center;}
#footer a{color:#FFF; transition:all .3s;}
#footer a:hover{color:#666;}

/* gotop */
#gotop{position:fixed; right:20px; bottom:20px; display:block; width:40px; height:40px; background:#FFF; border:1px solid #dd4984; border-radius:50%; text-indent:-9999px; transition:all .3s;}
#gotop:before{content:""; position:absolute; left:50%; top:50%; display:block; width:0; height:0; margin:-6px 0 0 -8px; border-style:solid; border-width:0 8px 12px 8px; border-color:transparent transparent #dd4984 transparent;  transition:all .3s;}
#gotop:hover{background:#dd4984;}
#gotop:hover:before{border-bottom-color:#FFF;}






/* RWD */
@media screen and (max-width:768px){
/* header */
#header{position:fixed; left:0; top:0; width:100%; padding:10px 20px;}
#header:after{content:""; display:block; clear:both;}
#logo{float:left; width:180px; height:80px; margin:0;}
#navigation{display:none;}
/* mobile */
#mobi-btn{display:block;}
/* container */
#container{padding:150px 0 50px 0;}
/* about */
#about .photo{display:none;}
/* product */
#product .photo{margin-bottom:50px;}
#product .photo .left ,
#product .photo .right{float:none; width:100%;}
/* order */
#order form li .color li{float:none; width:100%; padding-right:0;}
/* gotop */
#gotop{display:none;}
}

@media screen and (max-width:480px){
/* main-title */
#main-title{position:relative; left:0; top:0; margin-bottom:20px;}
/* about */
#about{margin-bottom:100px;}
#about .wrap{padding:0;}
/* product */
#product{margin-bottom:100px;}
#product .wrap{padding:0;}
/* usage */
#usage{margin-bottom:100px;}
#usage .photo{display:none;}
#usage .wrap{float:none; width:100%; padding:0;}
/* question */
#question{margin-bottom:100px; padding:0;}
/* order */
#order{padding:0;}
#order #main-title{margin-bottom:30px;}
}