@charset "UTF-8";
@import url(ie10-viewport-bug-workaround.css);
@import url(hover.css);
@import url(animate.css);
@import url(cb-slideshow.css);

/*------------HAPPY GO 固定CSS Start------------*/
body{ margin: 0; padding: 0;font-family:Arial,\5FAE\8EDF\6B63\9ED1\9AD4,'微軟正黑體','Microsoft JhengHei';}
body.inter{ background: url(../images/header-inter.jpg) no-repeat center -100px; background-size:130%}
body.inter_list{ background: url(../images/header02.jpg) no-repeat center -160px #230924; background-size:contain}
* {margin: 0; padding: 0;font-family:Arial,\5FAE\8EDF\6B63\9ED1\9AD4,'微軟正黑體','Microsoft JhengHei';}
a, a:link, a:visited{text-decoration: none; cursor: pointer;}
a:hover, a:active{text-decoration:none;}
ul{list-style: none;display: inline-block;margin: 0; padding: 0;}
li{display: inline-block;}
.clr {clear: both;}
.fl {float: left;}
.fr {float: right;}
.tc{text-align: center;margin: 0 auto;}
/*header*/
.site_inter {z-index: 110; position:absolute;width: 100%; height: 100vh; display: block}
header {text-align: center;padding: 5px 0;position:fixed;z-index:109;padding-left:10px;top:0;/*背景色*//*background-color:#050436;height:40px;position:fixed;top:0;width:100%;*/}
header .fr a:link, header .fr a:visited{display:inline-block;margin-left:5px;}
header .topnav {/*width:98%;margin:0 auto;line-height:30px;font-size:15px;*/}
header .topnav a:link, header .topnav a:visited{text-decoration: none; color:#050436; font-size: 15px; }
header .topnav a:hover, header .topnav a:active{color:#050436; text-decoration: none;}
header .topnav .fl{margin-right: 8px;}
header .topnav .fl img,
header .topnav .fr img{vertical-align:middle;margin-right:3px;margin-left: 10px;margin-top: -2px;}
header .topnav .fl.pt {padding-top:4px;}
header .topnav > div.fl:first-child > a > img{margin-left: 0;}
header .topnav div.gg{margin-top: 5px;margin-left: 20px;}
header .topnav div.fb{margin-top: -5px;}
@media screen and (min-width: 650px) and (max-width: 934px) {
  header .topnav {width: 100% ; margin:5px 20px 0 auto;line-height:18px;font-size:12px;}
  header .topnav div.fb{margin-top: 5px;}
  }
@media screen and (min-width: 320px) and (max-width: 649px) {
  header .topnav {width: 100% ; margin:0 20px 0 auto;line-height:18px;font-size:12px;}
  header .topnav .fl:first-child a img{width: 70%;margin-top:5px; float: left}
  header .topnav div:first-child + div{display: none;}
}

@media screen and (min-width: 1500px){
body.inter{ background: url(../images/header-inter.jpg) no-repeat center -160px; background-size:cover}
body.inter_list{ background: url(../images/header02.jpg) no-repeat center -600px #230924; background-size:cover}
}
@media screen and (max-width:768px){
header {position:absolute;}
body.inter{ background: url(../images/header01-xs.jpg) no-repeat center top;background-size:contain}
body.inter_list{ background: url(../images/header02-xs.jpg) no-repeat center top #fff; background-size:contain}
}
/*@media screen and (device-aspect-ratio: 1366/1024),(device-aspect-ratio: 1280/1024),(device-aspect-ratio: 1024/768){
.intro-inter{height: 35vh;}
}
@media screen and (device-aspect-ratio: 1024/1366),(device-aspect-ratio: 768/1024){
.intro-inter{height: 25vh;}
}
@media screen and (max-width: 767px){
.intro {height: calc(100% - 60px)}
.intro-inter{height: 60vh;}
}*/
.main{
	position:relative;
	height:100vh;
	z-index: 2;
}
.kv-text{ margin-top: 50px;}
.main-inter .kv-text{ margin-top: 70px;}

.focus-point{ margin:35px auto 35px; padding-bottom: 35px; width: 90%}
.focus-point .point{background:url(../images/bg_point.png) no-repeat center top; display: block; background-size: cover; padding-bottom: 15px;}
.pic { display: block; width: 100%;padding: 5px;}
.pic img{width:100%!important;}
.focus-point a{ display: block; text-decoration: none;}
.focus-point a:hover{text-decoration: none;}
@media screen and (min-width:1921px){
.kv-text{ margin-top: 280px;}
.container-fluid{ width: 1500px}
}
@media screen and (min-width:1600px) and (max-width:1920px){
.kv-text{ margin-top: 150px;}
.container-fluid{ width: 1500px}
}
@media screen and (min-width:1024px){
.focus-point .col-md-2{ width: 20%}
	.focus-point .point.aa{ margin-top: 0px}
	.focus-point .point.bb{ margin-top: 35px;-webkit-transform: scale(1) rotate(4deg);transform: scale(1) rotate(4deg);}
	.focus-point .point.cc{ margin-top: 0px}
	.focus-point .point.dd{ margin-top: 25px;-webkit-transform: scale(1) rotate(-4deg);transform: scale(1) rotate(-4deg);}
	.focus-point .point.ee{ margin-top: 0px}
}
@media screen and (max-width:768px){
.kv-text{ margin-top: 70px;}
.focus-point{ margin:35px auto 35px; padding-bottom: 35px; width:100%!important}
.focus-point a{ margin-bottom: 15px;}
}
.point p{ margin: 0; padding: 0; font-size: 15px;color:#ff448f; text-align: center}
.point p.title{ font-weight: bolder;color:#252279}

/*list*/
.list-area{margin-top:80px;}
.list-group{color:#252279; letter-spacing: 1px; padding:35px 0 0px;background-color: #fff;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;}
.list-area .focus-point > div { min-height: 230px;}
.list-area h1{ text-align: center; margin-bottom: 25px; margin: 0; padding: 0;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.3, #252279), color-stop(.3, transparent), to(transparent));
background-repeat: repeat-x;
background-position: center center;
-webkit-background-size: 1px;}
.list-area h1 span{font-size: 20px; color: #fff ;font-weight: bolder; margin: 0 0 15px; padding:7px 35px 5px;background-color: #232075;-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px; line-height: 22px;}
@media screen and (min-width:1280px){
.list-area .container-fluid{ width: 1200px}
}
@media screen and (max-width:768px){
.list-area{margin-top:30px;}
.list-area .focus-point > div { min-height: auto; padding: 0 5px; }
.list-area .focus-point .point{background:url(../images/bg_point.png) no-repeat center top;background-size:cover; padding-bottom: 15px;}
.pic {padding: 8px 5px 5px;}
}
@media screen and (max-width:640px){
.list-area .focus-point .point{background-image:none; padding-bottom: 0px;}
}
/*rule*/
.rule-area{ margin-top:80px;}
.rule{ color:#252279; letter-spacing: 1px; padding:35px 55px 55px;background-color: #fff;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; }
.rule{ letter-spacing: 1px; padding-bottom: 55px;}
.rule h1{ text-align: center; margin-bottom: 25px;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.3, #252279), color-stop(.3, transparent), to(transparent));
background-repeat: repeat-x;
background-position: center center;
-webkit-background-size: 1px;}
.rule h1 span{font-size: 20px; color: #fff ;font-weight: bolder; margin: 0 0 15px; padding:7px 35px 5px;background-color: #232075;-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px; line-height: 22px;}
.rule h2{ font-size: 18px; color: #ff448f ;font-weight: bolder;}
.rule p{ font-size: 16px; line-height: 25px; color: #232075}
.rule .text li{display:block;padding-left:15px; text-indent: -1em;line-height: 25px;color: #232075;font-size:16px; margin-bottom: 5px;}
.rule .text li::before {
  content: "● ";
  color: #232075;
  font-size:16px;
  position:relative; top:0px;
}
@media screen and (max-width:768px){
.rule-area{ margin-top:30px;}
.rule{padding:5px 15px 55px;}
}
/* footer */
footer{padding:15px 0 5px; clear:both; background-color:#252279;color:#fff;width: 100%;}
footer p{font-size:12px; line-height:16px; text-align:center}
footer.inter{position:relative; bottom:auto;}
@media screen and (device-aspect-ratio: 1366/1024),(device-aspect-ratio: 1280/1024),(device-aspect-ratio: 1024/768){
footer{position:absolute!important; bottom:0!important;}
}
@media screen and (min-width:1441px){
footer{position:absolute; bottom:0;}
}
@media screen and (min-width:768px){
	footer br{ display: none}
}


.nav-mobile{position:fixed;top:5px; right:2px;z-index:100;}
.nav-mobile-header{width:85px;height:72px;background:url(../images/icon_menu_mobile.png); display:block; cursor:pointer;position:relative;z-index:110;}
.nav-mobile-header.fold{
	background-position: 83px 0;
}

#main-nav.mobile{ display: none;position:fixed; top:60px; right:20px;z-index:100;}
#main-nav.mobile ul{ margin:0px; padding:10px 15px;list-style-type:none;display: block; background:url(../images/w-alpha.png);-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
#main-nav.mobile li{ font-size:12px; color:#222275;text-align:right; padding:0 0 3px; margin-top:5px;display: block; border-bottom: 1px dashed #252279;}
#main-nav.mobile li p{ margin-top: 3px; margin: 3px 0 0; padding: 0;font-size: 16px; color: #252279; font-weight: bolder;}
#main-nav.mobile li:last-child{border-bottom: none}
#main-nav.mobile li a{color:#222275; }
#main-nav.mobile li a:hover{color:#050436; text-decoration:none;}
@media screen and (max-width:768px){
	.nav-mobile{position:absolute;top:-10px; right:-12px;z-index:100;}
	#main-nav.mobile{top:45px; right:10px;}
	#main-nav.mobile ul{ background-color: #fff;}
}