@charset "utf-8";
*{ margin:0; padding:0;}
ul,li{ list-style-type:none;}
img{ border:none;}
a{ text-decoration:none; outline: none;}
input,button,select,textarea{outline:none}
*:focus { outline: none;}
*:link, *:visited, *:hover, *:active, *:focus , * {
-o-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
-webkit-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
-moz-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
transition: color .20s linear, background-color .20s linear, border-color .20s linear;}

body{ font-family:"Microsoft JhengHei", Arial, Helvetica, sans-serif; -webkit-text-size-adjust: 100%;}
body,html{ height:100%;}

/* s_nav */
#nav_wrap{float: left; width:100%; height:45px; background: url(../img/nav_bg.png) repeat-x; border-bottom:1px solid #333; position:relative; z-index:999;}
.sticky-wrapper{ width:100%;}
ul.navigation{ width:960px; margin:0 auto; text-align:center; color:#FFF;}
ul.navigation li { position: relative; float: left; line-height:25px;}
ul.navigation li a{ display: block; padding: 10px 30px 11px 30px; color: #FFF;}
ul.navigation li.fb-like { margin:7px 0 0 0;}			
ul.navigation > li > a:hover{ color: #21b8ce; text-decoration:none;}	
ul.navigation ul{ display: none; float: left; position: absolute; left: 0; margin: 0;}
ul.navigation li:hover > ul{ display: block;}			
ul.navigation ul li { border-bottom: 1px solid #DDD;}
ul.navigation ul li:last-child { border-bottom: none;}
ul.navigation ul a { padding: 10px 20px; color: #FFF; background: #333; width:100px;}
ul.navigation ul a:hover { background: #21b8ce; text-decoration:none;}			
.arrow-bottom { display: inline-block; margin-left: 5px; border-top: 4px solid #FFF; border-right: 4px solid transparent; border-left: 4px solid transparent; width: 1px; height: 1px;}
.arrow-right { display: inline-block; margin-left: 12px; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-left: 3px solid #666; width: 1px; height: 1px; }
.arrow-bottom { display: inline-block; margin-left: 5px; border-top: 4px solid #FFF; border-right: 4px solid transparent; border-left: 4px solid transparent;	width: 1px; height: 1px;}
.arrow-right { display: inline-block; margin-left: 12px; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-left: 3px solid #666; width: 1px; height: 1px;}
	
/* over */
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-table;}
*html .clearfix{height:1%;}
.clearfix{display:block;}
*+html .clearfix{min-height:1%;}

/* h_nav */
.h_nav_wrap{ width:900px; height:50px; line-height:50px; font-size:1em; font-weight:bold; position: absolute; top:0; left:50%; margin-left:-450px; display:block; background:#69C; z-index:999;}
.h_nav_wrap li { width: 150px; height: 50px; background:#fff; text-align:center; color:#1e150e; float:left;}
.h_nav_wrap li a {display:block;  width: 100%; height: 100%; text-decoration: none; cursor: pointer; color:#1e150e;}
.h_nav_wrap li a:hover { text-decoration: none; background:#68d4e7; color:#fff;}

/* section */
.ind_wrap{ position:relative; width:100%; height:700px; float:left; background: url(../img/bg_w.png) repeat;}
.ind_bg{ position:absolute; width:100%; left:0; top:300px; height:400px; background:url(../img/bg_b.png) repeat;}
.section{ width:100%; position:absolute; top:20px;}
.logo{ width:105px; position:absolute; top:0; left:10%; z-index:999;}
.logo img{ width:100%;}
.ind_tit{ width:540px; margin-right:20px; position:absolute; top:600px; left:30%; z-index:999;}
.ind_tit img{ width:100%;}
.ind_cover{ width:170px; position:absolute; top:550px; left:60%; z-index:999;}
.ind_cover img{ width:100%;}
.ind_buy{ width:100px; position:absolute; top:630px; left:67%; z-index:999;}
.ind_buy img{ width:100%;}

/* slide */
.clearfix{ width:80%; height:500px; margin:0 auto; position:relative; z-index:99;}
.clearfix li{width: 100%; float:left; position:relative; overflow:hidden; background:#000;}
.photo{ height:550px;}
.photo img{ width:100%;}
.tit1{ position: absolute; bottom:-5px; left:0; width:160px;}
.tit1 img{ width:100%;}
.tit2{ position: absolute; top:50%; left:50%; width:160px; margin-left:-80px; margin-top:-80px;}
.tit2 img{ width:100%;}
.tit3{ position: absolute; bottom:-5px; right:0; width:160px;}
.tit3 img{ width:100%;}
.rsp{width: 100%; height: 100%; overflow:hidden; position: absolute; background: url(../img/bg.png) repeat; top:0px; left:0px;}
.text{position:absolute; width:100%; left:-50%; top:0px; overflow:hidden; text-align:center;}
.text_td{ width:80%; margin:35% auto 0 auto; border:3px dashed #ccc; padding:20px 0;}
.text h2{ color:#00c6e9; font-size:2.5em; line-height:45px; font-weight:normal;}
.text span{ color:#fff; font-size:1.125em; line-height:30px; font-weight:bold;}

/* top */
#back-top {position: fixed; bottom: 0; right: 0;}
#back-top span {width: 80px;height: 30px; display: block; background: #ddd url(../img/up-arrow.png) no-repeat center center; -webkit-transition: 1s;-moz-transition: 1s;transition: 1s;}
#back-top a:hover span {background-color: #68d4e7;}

/* foot */
footer{ width:100%; text-align:center; font-size:0.813em; color:#fff; background:#2b3133; float:left;}
footer ul{ width:1200px; height:40px; margin:0 auto; position:relative;}
footer ul li{position:absolute;}
.foot_w{ left:0; line-height:40px; }
.foot_sh{ right:0; line-height:20px; padding-top:10px;}

.foot_school{ display:block; width:80%; background:#3B3B3B; float:left; line-height:30px; padding:10px 10%;}
.foot_school a{ color:#fff;}
.foot_school a:visited{ color:#fff;}
.foot_school a:hover{ color:#68d4e7;}

/* m_sh */
.m_sh2{ display:none;}

.ind_btn { width:40%; height: 30px; background:#1e150e; color:#fff; font-size:1em; line-height:30px; margin: 15px 30% 0 30%; text-align:center;}
.ind_btn a { display: block; width: 100%; height: 100%; text-decoration: none; cursor: pointer;}
.ind_btn:hover { text-decoration: none; background:#68d4e7;}

/* school */
.r_tit{ width:90%; margin:0 5% 30px 5%; float:left; text-align:center;}
.r_tit span{ display:block; background:#68d4e7; color:#fff; line-height:40px; text-align:center; width:40px; height:40px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; margin:0 auto; margin-bottom:10px; font-size:1.25em;}
.s_w{ color:#1e150e; font-size:1em; font-weight:bold; display:block; margin:0 auto;}
.s_w:before{content: url(../img/tit_line.png);}
.s_w:after{content: url(../img/tit_line.png);}
.s_wrap{ float:left; width:70%; padding:40px 15%; background:#f5f5f5;}
.s_td{ float:left; width:20%; font-size:1.125em; color:#303030; padding:0 2.5%;}
.s_td p{ background:#f5f5f;}
.s_td p a{ color:#303030; display: block; text-decoration: none; cursor: pointer; padding:5px 0;}
.s_td p a:hover {text-decoration: none; background-color: #68d4e7; text-align:center; color:#fff;}

/* school2 */
.s_wrap2{ float:left; width:70%; padding:40px 15%; }
.story2{ width:100%; float:left; margin-bottom:10px;}
.story2 li{float:left; width:22%; margin-bottom:30px; padding: 0 1.5%}
.story2 li a{ display: block; width: 100%; height: 100%; text-decoration: none; cursor: pointer;}
.story2 li a:visited { text-decoration: none;}
.story2 li a:hover { text-decoration: none;	filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; -o-transition: opacity .20s linear; -webkit-transition: opacity .20s linear; -moz-transition: opacity .20s linear; transition: opacity .20s linear;}
.story2 img{ margin:0 auto 5px auto; width:100%;}
.story2 h2{ font-size:1em; color:#1e150e; width:100%; line-height:25px; font-weight:500; margin-bottom:10px;}
.story2 p{ font-size:1em; line-height:28px; color:#666;}

.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
@-webkit-keyframes fadeInDown {
  0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0);}

  100% { opacity: 1; -webkit-transform: none; transform: none;}
}
@keyframes fadeInDown {
  0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0);}

  100% { opacity: 1; -webkit-transform: none; transform: none;}
}
.fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown;
}

@media screen and (max-width: 1680px) {
.ind_tit{ left:25%;}
.ind_cover{ left:59%;}
}

@media screen and (max-width: 1440px) {
.clearfix{ width:90%;}
.logo{ left:5%;}
.s_wrap{width:80%; padding:40px 10%;}
.s_wrap2{width:80%; padding:40px 10%;}
.ind_tit{ left:19%;}
.ind_cover{ left:61.5%;}
.ind_buy{ left:72%;}
.foot_school{ width:90%; padding:10px 5%;}
}

@media screen and (max-width: 1280px) {
.clearfix{ width:95%;}
.logo{ left:2.5%;}
.s_wrap{width:95%; padding:40px 2.5%;}
.s_wrap2{width:95%; padding:40px 2.5%;}
.ind_tit{ left:16.5%;}
.ind_cover{ left:63%;}
.ind_buy{ left:73%;}
.text_td{ margin:45% auto 0 auto;}
.text h2{ font-size:2em; line-height:40px;}
.foot_school{ width:95%; padding:10px 2.5%;}
.h_nav_wrap{ width:780px; margin-left:-390px;}
.h_nav_wrap li{ width:130px;}
}

@media screen and (max-width: 1080px) {
.ind_wrap{ height:620px;}
.ind_bg{ top:200px; height:420px;}
.ind_tit{ left:10%; top:520px;}
.ind_cover{ left:66%; top:470px;}
.ind_buy{ left:79%; top:530px;}
.photo{ height:480px;}
footer ul{ width:960px;}
.h_nav_wrap{ width:780px; margin-left:-282px;}
}

@media screen and (max-width: 1024px) {
.h_nav_wrap{ width:780px; margin-left:-302px;}
}

@media screen and (max-width: 800px) {
.section{ top:70px;}
.logo{ top:70px;}
.tit1{ width:120px;}
.tit2{ width:120px; margin-left:-60px; margin-top:-60px;}
.tit3{width:120px;}
.ind_wrap{ height:550px;}
.ind_bg{ top:200px; height:350px;}
.photo{ height:365px;}
.ind_tit{ left:6.5%; top:460px; width:445px;}
.ind_cover{ left:68%; top:415px; width:150px;}
.ind_buy{ left:83.5%; top:480px; width:80px;}
.text h2{ font-size:1.5em; line-height:30px;}

.h_nav_wrap{ display:none;}
#nav_wrap{ display:none;}
.m_sh2{ display:block; left:0; bottom:0; width:100%; position:fixed; float:left; z-index:999;}
.m_sh2 li{ width:50%; height:40px; float:left; text-align:center; color:#fff; font-size:1em;}
.m_sh2 li a{ display: block; text-decoration: none; cursor: pointer; color:#fff;}
.m_sh2 li a:hover { text-decoration: none;}
.m_sh2 li img{ width:30px; vertical-align: text-bottom; margin-top:5px;}
.m_fb_td{ background:#3c5fac;}
.m_g_td{ background:#dd4e40;}
.m_line_td{ background:#00c300;}

footer{ margin-bottom:40px;}
footer ul{ width:100%; text-align:center;}
.foot_w{ left:0; line-height:40px; position:inherit;}
.foot_sh{ display:none;}

#back-top { bottom: 40px;}
}

@media screen and (max-width: 768px) {
.photo{ height:360px;}
}

@media screen and (max-width: 750px) {
.ind_tit{ left:2.5%;}
.ind_cover{ left:68%;}
.ind_buy{ left:86%;}
.text_td{ margin:35% auto 0 auto;}
.photo{ height:340px;}
.ind_wrap{ height:550px;}
.ind_bg{ height:350px;}
}

@media screen and (max-width: 720px) {
.photo{ height:320px;}
.ind_wrap{ height:500px;}
.ind_bg{ height:300px;}
.ind_tit{ top:410px;}
.ind_cover{ left:69.5%; top:375px;}
.ind_buy{ top:435px;}
}


@media screen and (max-width: 640px) {
.photo{height: 500px;}
.ind_wrap{ height:700px;}
.ind_bg{ top:300px; height:400px;}
.ind_tit{ top:610px; width:400px; left:6.5%;}
.ind_cover{top:567px; left:77%;}
.ind_buy{ display:none;}
.s_td{ width:45%; padding:0 2.5%;}
.story2 li{width:45%; padding: 0 2.5%}
}

@media screen and (max-width: 568px) {
.ind_tit{ width:350px; left:6%;}
}

@media screen and (max-width: 540px) {
.ind_tit{ left:4%;}
}

@media screen and (max-width: 480px) {
.photo{height: 430px;}
.ind_wrap{ height:600px;}
.ind_bg{ top:300px; height:300px;}
.ind_tit{ left:3%; width:320px; top:530px;}
.ind_cover{left:75%; top:467px;}
.s_td{ width:90%; padding:0 5%; text-align:center; margin-bottom:20px;}
.s_wrap{width:100%; padding:40px 0;}
.s_wrap2{width:100%; padding:40px 0;}
.story2 li{width:90%; padding: 0 5%}
}


@media screen and (max-width: 424px) {
.ind_tit{ left:5%; width:90%; top:535px;}
.ind_cover{ display:none;}
}

@media screen and (max-width: 320px) {
.ind_tit{ top:540px;}
}