@charset "UTF-8";
/*!
 * Bootstrap v3.3.6 (http://getbootstrap.com)
 * Copyright 2011-2015 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700,600);
@import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,700);
@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);



html, body,ul{  font-family: "Noto Sans TC", cursive;
  height: 100%; width: 100%; margin: 0; padding: 0; }
.container{max-width: 1600px;}
img{display: block; margin: auto; }

.logo {
  position: absolute;
  top: 20px;
  left: 10px;}

.logo span {
    font-size: 21px;
    display: block;
    color: #fff;
    text-align: right;
}


.kv{
 /* border: 3px yellow solid;框框for design*/
  background: url(../images/kv/kv_big.jpg) no-repeat top center  #fff;
  background-size: cover;}
@media screen and (max-width: 767px){
  .kv{background-position: 41% 0}

}

.container{
  /*border: 1px solid rgba(255,255,255,0);框框for design*/
  width: 85%;
  max-width: 1600px;
  margin: auto;
  box-sizing:border-box;
}

.kv-text{
    font-weight: normal;
    color: #fff;
    font-size: 48px;
    margin: 262px 0 200px;
    text-shadow: 3px 2px 10px #000;
}
.subtitletext{
  font-size: 18px;
    color: #111f11;
    font-weight: 300;
    line-height: 1.8;
    padding: 0 10%;
  
}
.bg_transparent{
  background-color: rgba(238,238,238,0.9);
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+19 */
/*background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 20%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
/*background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 20%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
/*background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 20%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

  width:100%;
}

.titletext{
    font-weight:400;
    font-size: 36px;
    padding: 50px 0 40px;
    margin: 0;
    color: #03253f;

}


/*background partA*/
.background.partA{
  background: url(../images/theme/bg_A.jpg) no-repeat center center  #555;
  background-size: cover;
}
.contentarea{
  padding: 3%;
  background-color: rgba(0,0,0,0.5);
}

.container.partA{
  width: 85%;
}
.titletext2{
    font-weight: 300;
    font-size: 36px;
    padding: 10px 0 10px 0;
    margin: 0;
    color: #fff;
/*    text-shadow: 3px 2px 0px #fff;*/

}
.subtitletext2{
  font-size: 18px;

  font-weight: 300;   
  line-height: 1.8;
  color: #fff;
  padding: 20px 20px 30px 20px;
  box-sizing: border-box;
}
@media screen and (min-width: 1400px) {
  .container.partA{
  width: 55%;
}
}
@media screen and (min-width: 1850px) {
  .container.partA{
  width: 55%;
  max-width: 480px;
  margin:0 20%
  box-sizing:border-box;
}
}
@media screen and (max-width: 475px) {
  .container.partA{width: 80%;}
  .subtitletext2{padding: 0;}
}



.partB{
  background-color: #fff;

}



.titletext_B{
    font-weight: 300;
    font-size: 36px;
    padding: 10px 0 10px;
    margin: 30px auto;
    color: #3e3e3e;
/*    text-shadow: 3px 2px 0px #fff;*/

}
.partBtheme{
  background: url(../images/theme/mid.jpg) no-repeat center center  #555;
  background-size: cover;
  height: 300px;
}

@media screen and (max-width: 767px) {
.partBtheme{
height: 200px;}
}

figure{
    /*border: 3px yellow solid;框框for design*/
    width: 100%;
    margin: 0;
    padding: 0;

}
.puzzle img{
  display: block;
  max-width: 600px;
  margin: auto;
  position: relative;
  left: 6%;
}

.puzzle img.puzzle2{ display: none; width: 100%; position: relative;bottom: 3%;}

@media screen and (max-width: 767px) {
.puzzle img.puzzle1{ display: none;}
.puzzle img.puzzle2{ display: block;left: 3%}
}


.partC{
  background-color: #f9f9f9;
  padding-bottom:3%;
}
p.overhidden{
  margin-bottom: 0;
  height: 192px;
  width: 100%;    
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}
@media screen and (min-width: 1404px) {
  p.overhidden{  height: auto;}
}

@media screen and (max-width: 767px) {
p.overhidden{  height: auto;
    -webkit-line-clamp: 10;}
}

.partC h4{
  height: px;
  margin-bottom: 0;
}



.partC img{
  width: 100%;
  max-width: 220px;
  margin-top: 20px;

}
.bordergrey{
    border: 1px solid #b5b5b5;


}
.updown_line{
  padding-top: 30px;
  padding-bottom: 30px;
  margin: auto 5%;
  border-top: 1px solid #b5b5b5;
  border-bottom: 1px solid #b5b5b5;
}

@media screen and (max-width: 767px) {
.partC h4{
  height: auto;}
li {margin: 40px auto; }
}
.partC .row li h3 {
  font-size: 2.5rem;
  font-weight: normal;
  margin-top: 20px;

  margin-bottom: 20px; 
}
.partC .row li h4 {
    width: 100%;
    color: #03253f;
    
    font-size: 2rem;
    
    font-weight: 400;
    margin-top: 0px;
    word-break: normal;}

@media screen and (min-width: 904px) and (max-width: 1224px){
.partC .row li h4 {
    font-size:150%;
  overflow : hidden;
  text-overflow: ellipsis;}
}

/*@media screen and (max-width: 809px) {
.partC .row li h4 {
    height: 160px;
    margin: 20px auto auto auto;
}
}*/


.partC .row li p {
  margin-top: 20px;

    font-size: 18px;
    color: #000;
    font-weight: 300;
    line-height: 1.8;

}

.background.partAD{
  
  background: url(../images/bg_06.jpg) no-repeat center center  #555;
  background-size: cover;
} 

.contentarea_AD{

  padding: 2%;
  background-color: rgba(1,1,1,0.4);

}
.titletext3{
    text-shadow: 1px 1px 20px #000;
    
    font-weight: 300;
    font-size: 36px;
    padding: 10px 0 10px 0;
    margin: 0;
    color: #fff;

}
.subtitletext3{
    text-shadow: 1px 1px 20px #000;

    font-size: 18px;
    font-weight: 300;
    line-height: 1.8;
    color: #fff;
    padding: 10px 20px 10px 20px;
    margin: 0;
    box-sizing: border-box;
}

@media screen and (max-width: 435px){
  .titletext3{font-size: 20px;}
.subtitletext3{font-size: 14px;}
}


/*buttons // start*/
.bbox {
 
  margin: 20px auto;

}


.button{
  width: 30%;
  margin-top:15%; 
  padding:6px 10% ;
  font-size: 16px;
  font-weight: 500;
 
  color: #626262;
  text-decoration: none;
  border-radius: 5px;
  border:solid 2px #626262;
  cursor: pointer;
  transition:1s;
}

.button a{
  margin-left, margin-right:  auto;
  color: #626262;
}

.button:hover{
  color:#fff;
  background-color: #626262;
}

.button2{
  width: 30%;
  margin-top:15%; 
  padding:6px 10% ;
  font-size: 16px;
  font-weight: 500;
 
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  border:solid 2px #fff;
  cursor: pointer;
  transition:1s;
}
.button2:hover{
  color:#626262;
  background-color: #fff;
}

/*buttons // End*/
ul{list-style: none;    padding: 0 2%;
}

.text-center{text-align: center;}


    
/*gotop、fb、line//start*/
.gotop {
  position: fixed;
  right: 10px;
  bottom: 80px;
  z-index: 10;
}
.fade {
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
.fade.in {
  opacity: 1;
}
.social_fb {
  position: fixed;
  left: 10px;
  bottom: 140px;
  z-index: 10;
}
.social_line {
  position: fixed;
  left: 10px;
  bottom: 80px;
  z-index: 10;
}
.back {
  position: fixed;
  left: 10px;
  bottom: 200px;
  z-index: 10;
}
/*gotop、fb、line//END*/

footer {
    padding: 14px 0;
    color: #777;
    border-top: 1px solid #e5e5e5;
    line-height: 20px;
    text-align: center;
}

/*clearfix*/

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  zoom: 1;
}