@charset "utf-8";
@import url("reset.css");
.full-width, img .full-width { width:100% !important; height:auto !important; box-sizing:border-box !important; -moz-box-sizing:border-box !important;}
iframe {overflow:hidden;}
body{margin: 0; padding: 0; font-family: "微軟正黑體", Arial, Helvetica, sans-serif; background-image: url(../img/bg.png); background-repeat: repeat; -webkit-text-size-adjust: 100%;}
body, html{ height:100%;}
.ind_bg{ width:100%; height:800px; border:0; top:-100px; position:absolute;}
.ind_action{width: 960px; margin: 0 0 0 -480px; position: absolute; z-index:100; left:50%;}
.ind_section{ width:100%; margin:0; position:relative;}
.ind_tit{position: absolute; height: 250px; width: 450px; z-index: 999; top: 130px; left: 83px;}
.ind_tit h1{ display:none;}
.ind_s-tit{position: absolute; z-index: 999; top: 100px; left: 114px; color: #000; font-size: 18px; font-weight: 900; line-height: 25px; letter-spacing: 0.3em;}
.ind_p{position: absolute; z-index: 999; top: 420px; left: 87px; color: #000; font-size: 16px; font-weight: 900; line-height: 30px;}
.ind_bg2{width: 700px; height:auto; position: absolute; top: 20px; left: -48px;}
.ind_btn { position: absolute; z-index: 999; top: 490px; left: 87px; width:200px; font-size:15px; color:#bf3147;}
.ind_btn img{ margin:3px 0 0 0;}
.share{position:relative; top: 20px; left:90%; z-index: 999;}
.nav{position: absolute; top:600px; z-index:99; width:100%;}
.nav li{ margin:0 20px 0 21px;height: 220px; width: 150px; text-align:center; float:left;}
.nav p{color:#222;line-height:25px; font-size:15px; font-weight:900;}
.ind_nav1{}
.ind_pic1 {height: 150px; width: 150px; background:#ec008d;-webkit-border-radius: 80px; -moz-border-radius: 80px; border-radius: 80px; color:#FFF; text-align:center; line-height:150px; font-size:60px; margin:0 0 10px 0;-o-transition: margin .20s linear; -webkit-transition: margin .20s linear; -moz-transition: margin .20s linear; transition:  margin .20s linear;}
.ind_pic1 a {display: block; width: 100%; height: 100%; text-decoration: none; cursor: pointer;}
.ind_pic1:hover {text-decoration: none; background-color: #ad0168; margin:5px 0; -o-transition: margin .20s linear; -webkit-transition: margin .20s linear; -moz-transition: margin .20s linear; transition:  margin .20s linear;}
.ind_nav1 h2{ color:#ec008d; font-size:20px; font-weight:900; line-height:25px;}
.ind_nav2{animation-delay:.4s;-moz-animation-delay:.4s;-webkit-animation-delay:.4s;}
.ind_pic2 {height: 150px; width: 150px; background:#922790;-webkit-border-radius: 80px; -moz-border-radius: 80px; border-radius: 80px; color:#FFF; text-align:center; line-height:150px; font-size:60px; margin:0 0 10px 0;-o-transition: margin .20s linear; -webkit-transition: margin .20s linear; -moz-transition: margin .20s linear; transition:  margin .20s linear;}
.ind_pic2 a {display: block; width: 100%; height: 100%; text-decoration: none; cursor: pointer;}
.ind_pic2:hover {text-decoration: none; background-color: #641a63; margin:5px 0; -o-transition: margin .20s linear; -webkit-transition: margin .20s linear; -moz-transition: margin .20s linear; transition:  margin .20s linear;}
.ind_nav2 h2{ color:#922790; font-size:20px; font-weight:900;}
.ind_nav3{animation-delay:.6s;-moz-animation-delay:.6s;-webkit-animation-delay:.6s;}
.ind_pic3 {height: 150px; width: 150px; background:#fdb813;-webkit-border-radius: 80px; -moz-border-radius: 80px; border-radius: 80px; color:#FFF; text-align:center; line-height:150px; font-size:60px; margin:0 0 10px 0;-o-transition: margin .20s linear; -webkit-transition: margin .20s linear; -moz-transition: margin .20s linear; transition:  margin .20s linear;}
.ind_pic3 a {display: block; width: 100%; height: 100%; text-decoration: none; cursor: pointer;}
.ind_pic3:hover {text-decoration: none; background-color: #c87818; margin:5px 0; -o-transition: margin .20s linear; -webkit-transition: margin .20s linear; -moz-transition: margin .20s linear; transition:  margin .20s linear;}
.ind_nav3 h2{ color:#fdb813; font-size:20px; font-weight:900;}
.ind_nav4{animation-delay:.8s;-moz-animation-delay:.8s;-webkit-animation-delay:.8s;}
.ind_pic4 {height: 150px; width: 150px; background:#8cc63f;-webkit-border-radius: 80px; -moz-border-radius: 80px; border-radius: 80px; color:#FFF; text-align:center; line-height:150px; font-size:60px; margin:0 0 10px 0;-o-transition: margin .20s linear; -webkit-transition: margin .20s linear; -moz-transition: margin .20s linear; transition:  margin .20s linear;}
.ind_pic4 a {display: block; width: 100%; height: 100%; text-decoration: none; cursor: pointer;}
.ind_pic4:hover {text-decoration: none; background-color: #5e8628; margin:5px 0; -o-transition: margin .20s linear; -webkit-transition: margin .20s linear; -moz-transition: margin .20s linear; transition:  margin .20s linear;}
.ind_nav4 h2{ color:#8cc63f; font-size:20px; font-weight:900;}
.ind_nav5{animation-delay:.10s;-moz-animation-delay:.10s;-webkit-animation-delay:.10s;}
.ind_pic5 {height: 150px; width: 150px; background:#00adee;-webkit-border-radius: 80px; -moz-border-radius: 80px; border-radius: 80px; color:#FFF; text-align:center; line-height:150px; font-size:60px; margin:0 0 10px 0;-o-transition: margin .20s linear; -webkit-transition: margin .20s linear; -moz-transition: margin .20s linear; transition:  margin .20s linear;}
.ind_pic5 a {display: block; width: 100%; height: 100%; text-decoration: none; cursor: pointer;}
.ind_pic5:hover {text-decoration: none; background-color: #0188bb; margin:5px 0; -o-transition: margin .20s linear; -webkit-transition: margin .20s linear; -moz-transition: margin .20s linear; transition:  margin .20s linear;}
.ind_nav5 h2{ color:#00adee; font-size:20px; font-weight:900;}
.foot{ position:absolute; top:860px; width:100%; margin:20px 0 0 0;}
.foot_td{ float:left; width:90%;}
.foot_logo a{background-image: url(img/logo.png); height: 39px; width: 90px; float:left; margin:0 20px 20px 20px;}
.foot_w{color:#666; font-size:13px; line-height:20px;}
.m_foot_w{ display:none;}

@media screen and (max-width: 1025px) {
.ind_bg{ height:730px;top:-50px;}
.ind_bg2{width: 570px; top: 0; left: -5px;}
.ind_s-tit{color: #FFF;top: 80px;}
.ind_tit{ height: auto; width: 403px; top: 120px;}
.ind_p{top: 375px;}
.ind_btn {top: 445px;}
.nav{top:560px;}
.nav li{ margin:0 0 0 27px; height: 80px; width: 160px;}
.ind_pic1 {height: 120px; width: 120px; line-height:120px; margin:0 0 10px 20px;}
.ind_pic1:hover {margin:5px 0 0 20px;}
.ind_pic2 {height: 120px; width: 120px; line-height:120px; margin:0 0 10px 20px;}
.ind_pic2:hover {margin:5px 0 0 20px;}
.ind_pic3 {height: 120px; width: 120px; line-height:120px; margin:0 0 10px 20px;}
.ind_pic3:hover {margin:5px 0 0 20px;}
.ind_pic4 {height: 120px; width: 120px; line-height:120px; margin:0 0 10px 20px;}
.ind_pic4:hover {margin:5px 0 0 20px;}
.ind_pic5 {height: 120px; width: 120px; line-height:120px; margin:0 0 10px 20px;}
.ind_pic5:hover {margin:5px 0 0 20px;}
.foot{top:750px;}
.share{ right:10px;}
}

@media screen and (max-width: 801px) {
.ind_action{width: 100%; margin: 0; left:0;}
.ind_bg{ height:680px;}
.ind_bg2{width: 500px; top: 40px; }
.ind_s-tit{color: #FFF;top: 60px; left:60px;}
.ind_tit{top: 100px; left:30px;}
.ind_p{top: 350px; left:50px;}
.ind_btn {top: 420px; left:50px;}
.nav{top:530px;}
.nav li{ margin:0 0 0 20px; height: 80px; width: 130px;}
.nav p{ line-height:20px;}
.ind_pic1 {height: 100px; width: 100px; line-height:100px;}
.ind_pic2 {height: 100px; width: 100px; line-height:100px;}
.ind_pic3 {height: 100px; width: 100px; line-height:100px;}
.ind_pic4 {height: 100px; width: 100px; line-height:100px;}
.ind_pic5 {height: 100px; width: 100px; line-height:100px;}
.foot{top:800px; width:100%; margin:20px 0 0 0;}
.foot_td{width:100%;}
.share{left:81%;}
}

@media screen and (max-width: 751px) {
.nav li{ margin:0 0 0 11px;}
.ind_btn { left:50px; top: 420px;}
}

@media screen and (max-width: 641px) {
.ind_bg{ height:550px; top:0;}
.ind_bg2{width: 480px; top:40px; left:0}
.ind_s-tit{color:#FFF; background:#4c392a; padding:3px 10px; top:55px; left:40px; font-weight:normal;}
.ind_tit{top: 100px; left:30px; width: 380px;}
.ind_p{top: 345px; left:50px; font-weight:normal;}
.ind_btn {top: 415px; width:150px;}
.ind_btn img { width:80%;}
.nav{top:510px;}
.nav li{ margin:0 0 0 20px; height: 80px; width: 100px;}
.nav p{ font-weight:normal;}
.ind_nav1 h2{ font-weight:normal;}
.ind_nav2 h2{ font-weight:normal;}
.ind_nav3 h2{ font-weight:normal;}
.ind_nav4 h2{ font-weight:normal;}
.ind_nav5 h2{ font-weight:normal;}
.ind_pic1 {font-size:40px; height: 80px; width: 80px; line-height:80px; margin:0 0 10px 12px;}
.ind_pic1:hover {margin:5px 0 0 12px;}
.ind_pic2 {font-size:40px; height: 80px; width: 80px; line-height:80px; margin:0 0 10px 12px;}
.ind_pic2:hover {margin:5px 0 0 12px;}
.ind_pic3 {font-size:40px; height: 80px; width: 80px; line-height:80px; margin:0 0 10px 12px;}
.ind_pic3:hover {margin:5px 0 0 12px;}
.ind_pic4 {font-size:40px; height: 80px; width: 80px; line-height:80px; margin:0 0 10px 12px;}
.ind_pic4:hover {margin:5px 0 0 12px;}
.ind_pic5 {font-size:40px; height: 80px; width: 80px; line-height:80px; margin:0 0 10px 12px;}
.ind_pic5:hover {margin:5px 0 0 12px;}
.foot{top:710px; margin:0 auto; width:100%;}
.foot_td{ display:none;}
.m_foot_w{ display:block; color:#666; font-size:13px; line-height:20px; text-align:center; width:100%; margin:0 0 30px 0;}
.share{left:10%;}
}


@media screen and (max-width: 601px) {
.nav li{ margin:0 0 0 15px;}
.ind_btn { left:50px; top: 410px;}
}

@media screen and (max-width: 568px) {
.ind_bg{ height:500px;}
.ind_bg2{ width: 400px; top:10px;}
.ind_s-tit{ top:55px; font-size:15px;}
.ind_tit{ height: auto; width: 300px; top: 95px; left: 40px;}
.ind_p{ top: 290px; left:40px; line-height:25px;}
.ind_btn { left:40px; top: 355px;}
.nav{ top:450px;}
.nav li{ margin:0 0 0 10px;}
.foot{top:630px;}
}

@media screen and (max-width: 481px) {
.ind_bg{ height:360px;}
.ind_bg2{ width: 60%; top:20px; left:20%;}
.ind_s-tit{top: 55px; left:50%; margin:0 0 0 -35%;}
.ind_tit{top: 100px; left:25%; width:50%;}
.ind_p{top: 380px; left:0; width:90%; margin:0 5%;}
.ind_btn {top: 250px; left:50%; margin:0 0 0 -18%;}
.nav{top:450px;}
.nav li{ margin:0 0 100px 18px; height: 80px; width: 80px;}
.ind_pic1 {height: 80px; width: 80px; line-height:80px; font-size:30px; margin:0 0 3px 3px;}
.ind_pic1:hover {margin:5px 0 0 3px;}
.ind_pic2 {height: 80px; width: 80px; line-height:80px; font-size:30px; margin:0 0 3px 3px;}
.ind_pic2:hover {margin:5px 0 0 3px;}
.ind_pic3 {height: 80px; width: 80px; line-height:80px; font-size:30px; margin:0 0 3px 3px;}
.ind_pic3:hover {margin:5px 0 0 3px;}
.ind_pic4 {height: 80px; width: 80px; line-height:80px; font-size:30px; margin:0 0 3px 3px;}
.ind_pic4:hover {margin:5px 0 0 3px;}
.ind_pic5 {height: 80px; width: 80px; line-height:80px; font-size:30px; margin:0 0 3px 3px;}
.ind_pic5:hover {margin:5px 0 0 3px;}
.foot{ width:95%; margin:0 2.5%; top:800px;}
.share{left:15%;}
}

@media screen and (max-width: 361px) {
.ind_bg{ height:370px;}
.ind_bg2{ width: 90%; left:5%;}
.ind_s-tit{top: 55px; left:50%; margin:0 0 0 -43%;}
.ind_tit{top: 100px; left:15%; width:70%;}
.ind_p{top: 380px;}
.ind_btn {top: 265px; margin:0 0 0 -25%;}
.nav{top:510px;}
.nav li{ margin:0 0 100px 27px;}
.foot{top:890px;}
.share{left:5%;}
}

@media screen and (max-width: 321px) {
.ind_bg{ height:350px;}
.ind_s-tit{letter-spacing: 0.2em;}
.ind_btn {top: 250px; margin:0 0 0 -26%;}
.ind_p{top: 360px;}
.nav{top:480px;}
.nav li{ margin:0 0 80px 13px;}
.ind_pic1 {height: 60px; width: 60px; line-height:60px;font-size:30px;margin:0 0 3px 10px;}
.ind_pic1:hover {margin:5px 0 0 10px;}
.ind_pic2 {height: 60px; width: 60px; line-height:60px;font-size:30px;margin:0 0 3px 10px;}
.ind_pic2:hover {margin:5px 0 0 10px;}
.ind_pic3 {height: 60px; width: 60px; line-height:60px;font-size:30px;margin:0 0 3px 10px;}
.ind_pic3:hover {margin:5px 0 0 10px;}
.ind_pic4 {height: 60px; width: 60px; line-height:60px;font-size:30px;margin:0 0 3px 10px;}
.ind_pic4:hover {margin:5px 0 0 10px;}
.ind_pic5 {height: 60px; width: 60px; line-height:60px;font-size:30px;margin:0 0 3px 10px;}
.ind_pic5:hover {margin:5px 0 0 10px;}
.foot{top:800px;}
}