@charset "utf-8";
@import url("reset.css");
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; background:url(../img/ind_bg.jpg) no-repeat; -moz-background-size: cover; background-size: cover;}
.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 img{ width:100%;}
.ind_tit h1{ display:none;}
.ind_s-tit{position: absolute; z-index: 999; top: 100px; left: 100px; 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: #222; font-size: 16px; font-weight: 900; line-height: 30px;}
.ind_btn { position: absolute; z-index: 999; top: 490px; left: 87px; font-size:15px; color:#222; font-weight:bold;}
.ind_btn img{ margin:3px 10px 0 0; width:18%;}
.share{position:relative; top: 65px; left:8%; z-index: 999;}
.nav{position: absolute; top:620px; 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: 1080px) {
.ind_bg{ height:730px;top:-50px;}
.ind_s-tit{color: #FFF; top: 80px; left:8%;}
.ind_tit{ height: auto; width: 403px; top: 120px;}
.ind_p{top: 375px;}
.ind_btn {top: 445px;}
.ind_btn img {width:15%;}
.nav{top:580px;}
.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:780px;}
.share{ left:8%; top:50px;}
}

@media screen and (max-width: 801px) {
.ind_action{width: 100%; margin: 0; left:0;}

.ind_s-tit{color:#FFF; background:#4c392a; padding:3px 0; top:55px; font-weight:normal; width:85%; left:5%; text-align:center;}
.ind_tit{top: 100px; left:50%; width: 400px; margin:0 0 0 -200px;}
.ind_bg{ height:450px; top:0;}
.ind_btn {top: 345px; margin:0; left:5%; width:90%;}
.ind_btn img { margin:5px 5px 0 5px; width:18%;}
.ind_p{top: 465px; width:90%; left:5%; text-align:center;}
.nav{top:540px; width:100%;}
.nav li{ margin:0; float:left; width:100%; height:60px; padding:6px 0 0 0;}
.nav li:hover{ background:#8b8b8b;}
.nav li p{ color:#FFF;}
.nav li h2{ color:#FFF;}
.ind_nav1{ background:#ec008d;}
.ind_nav2{ background:#922790;}
.ind_nav3{ background:#fdb813;}
.ind_nav4{ background:#8cc63f;}
.ind_nav5{ background:#00adee;}
.ind_pic1 { display:none;}
.ind_pic2 { display:none;}
.ind_pic3 { display:none;}
.ind_pic4 { display:none;}
.ind_pic5 { display:none;}

.foot{top:880px;}
.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:5%; top:20px;}

}

@media screen and (max-width: 751px) {
.ind_s-tit{top:55px;}
.ind_tit{top: 100px; left:50%; width: 400px; margin:0 0 0 -200px;}
.ind_bg{ height:450px; top:0;}
.ind_btn {top: 350px;}
.ind_btn img { margin:5px 5px 0 3px;}
.ind_p{top: 465px;}
.nav{top:540px;}

.foot{top:880px;}
}

@media screen and (max-width: 641px) {
.ind_bg{ height:440px;}
.ind_s-tit{top:55px; font-weight:normal;}
.ind_tit{top: 100px; width: 380px; margin:0 0 0 -190px;}

.ind_btn {top: 350px; margin:0; font-weight:normal;}
.ind_btn img{width:17%;}
.ind_p{top: 460px; font-weight:normal;}
.nav{top:540px;}
.nav li p{ font-weight:normal;}
.nav li h2{ font-weight:normal;}

.foot{top:880px; width:100%;}
}


@media screen and (max-width: 601px) {
.share{left:5%;}
.ind_bg{ height:440px;}
.ind_btn {top: 350px; margin:0;}
.ind_btn img { margin:5px 5px 0 5px;}
.ind_p{top: 460px;}
.nav{top:540px;}
.foot{top:880px;}
}

@media screen and (max-width: 568px) {
.ind_bg{ height:480px;}
.ind_s-tit{ top:55px; font-size:15px;}
.ind_tit{ width: 300px; top: 100px; margin:0 0 0 -150px;}

.ind_btn {top: 305px; margin:0;}
.ind_btn img { width:30%;}
.ind_p{top: 490px;}
.nav{top:560px;}
.foot{top:890px;}
}

@media screen and (max-width: 481px) {
.ind_bg{ height:530px;}
.ind_s-tit{top: 55px;}
.ind_tit{top: 100px; width:50%; margin:0 0 0 -25%;}
.ind_btn {top: 255px;}
.ind_btn img {width:45%;}
.ind_p{top: 550px; font-size: 13px; line-height:24px; text-align:left;}
.nav{top:620px;}
.foot{ width:95%; margin:0 2.5%; top:980px;}
.m_foot_w{ text-align:left;}
}

@media screen and (max-width: 361px) {
.ind_s-tit{letter-spacing: normal;}
.ind_bg{ height:500px;}
.ind_s-tit{top: 55px; left:50%; margin:0 0 0 -43%;}
.ind_tit{top: 95px; width:70%; margin: 0 0 0 -35%;}
.ind_p{top: 510px;}
.ind_btn {top: 270px;}
.nav{top:630px;}
.foot{top:970px;}
.share{left:5%;}
}

@media screen and (max-width: 321px) {
.ind_bg{ height:450px;}
.ind_btn {top: 250px;}
.ind_p{top: 460px;}
.nav{top:570px;}
.foot{top:920px;}
}