@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);

*,
*:before,
*:after {
  box-sizing: border-box;
}

a, a:hover, div, span, i, button, div:hover, img, img:hover, *:before,
*:after {
    text-decoration: none;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
a{color: #009fa8; text-decoration: none;}
a:hover, a:active, a:focus, a:hover:active{ text-decoration: none;}
strong, b, .highlight{color: #00616c;}
/*a:hover, a:active, a:hover:active, a:focus{color: #6de8ef;}*/
hr{ border-bottom: 2px solid #eeeeee; max-width:100%;}
ul, li { list-style: none; margin-left: 0;}
      
      
body {
	font-family: 'Noto Sans TC', '微軟正黑體', "PT Sans", Arial, sans-serif;
	font-size: 16px;
	line-height: 28px;
	color: #282828;
	height: 100%;
	position: relative;
	padding: 0; margin: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

::-webkit-selection {
color: #000;
background: #ffc400;
}

::-moz-selection {
color: #000;
background: #ffc400;
}

::selection {
color: #000;
background: #ffc400;
}

.show_pad{display: none;}
.hidden_pad{ display: block;}

.navbar-brand{ background: url(../images/logo.png) no-repeat ; width: 70px;;  background-size: contain; border: 0; background-position: 0px 6px; margin-left: 10px; }
.navbar-toggle{  background: #fff;
    border: 0;
    border-radius: 0;
    margin: 0;
    width: 50px;
    height: 50px;
}
.navbar{ background: url(../images/nav_bg.png) repeat-x ; width: 100%; height: 50px; background-size: cover; border: 0; position: fixed; z-index: 99999; border-radius: 0;}

.navbar-default .navbar-toggle{ background: transparent;}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:active:hover, .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:active{ background: transparent;}
.navbar-default .navbar-nav>li>a{ color: #fff;  padding: 15px 25px;}
.navbar-default .navbar-nav>li>a:hover{ color: #fff;  }
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:active, .navbar-default .navbar-nav>li>a:hover:active{ color: #ececec;  }
.navbar-default .navbar-nav>li:before{ content:''; background:   url(../images/nav_border.png); width: 5px; height: 16px; position: absolute; bottom: 15px; margin-right: 15px;}
.navbar-default .navbar-nav>li>a:after{ content:''; background:#8ee3e1;  height: 5px; width: 0; position: absolute; left: 0; bottom: 0; z-index: 0; }
.navbar-default .navbar-nav>li>a:hover:after{ content:''; width: 100%; }
.navbar-default .navbar-toggle .icon-bar{ background: #fff;}

.banner{ /*background: url(../images/bg.png) repeat;*/ background: #f2fbff; position: relative; padding: 6em; min-height: 75vh; overflow: hidden;     width: 100%;}    
.banner .container { width: 100%;  /*display: flex; align-items: flex-end; justify-content: flex-end;*/}
.banner h1 img{    max-width: 100%;    box-shadow: 0 3px 5px rgba(0,0,0,0.3);   width: 640px;}
.inner{position: relative; z-index: 10;}
.inner h1{  text-align: center; display: block;  }
.inner .intro{ background: #0abbb5; color: #fff;     box-shadow: 0 3px 5px rgba(0,0,0,0.3);  padding: 30px;     margin-right: -30px;  margin-left: 30px;  position: relative;}

/*.kv_img{ display: flex; align-items: flex-end; justify-content: flex-end;}*/
.kv_img > div{ position: absolute;}
.kv_center{    margin-bottom: -50px;   z-index: 9;}
.kv_img div img{ max-width: 100%;}
.sky, .tree{  width: 100%; left:0;}
.windmill01, .windmill02{ bottom:-3%; max-width: 190px;}
.windmill01{ right:35%;z-index: 10;}
.windmill02{ right:20%; }

.tree{  bottom: 0;  z-index: 11;}
.city{ position: relative; z-index: 11;}
.bird{ right: 13%; top: 28%;}
.bird img{transform-origin: 50% 50%;  animation: float 4s infinite ease-in-out;}
.sky{ top: 0;   left: 0%; z-index: 0; animation: float2 10s infinite ease-in-out;}
.rain{ top: -88%;   left: 20%;}
.sea{ background: url(../images/bg_sea.jpg) no-repeat; background-attachment: fixed; padding-top: 3em;  background-size: cover;}

.forward{ max-width: 800px;margin: 80px auto 120px auto; line-height: 38px;     padding: 0 30px; }
.forward p{ line-height: 28px; margin-bottom: 30px;}
#sec_02{ position: relative;  overflow: hidden; padding: 20px;}        
/*#sec_02:after{ content: '';  background: url(../images/bg_triangle.png) no-repeat; height: 210px;   width: 100%;   position: absolute;  bottom: -4px;  left: 0 ;  background-size: contain;}*/
.title{ text-align: center; margin: 1em 0;}
.title img{  max-width: 220px;}
/*
#sec_02 .title:before{ content: url(../images/sec02_title_l.png); margin-right: 10px;  display: inline-block; vertical-align: middle; transform: scale(.8);}
#sec_02 .title:after{ content: url(../images/sec02_title_r.png); margin-left: 10px; display: inline-block;     vertical-align: middle;  transform: scale(.8);}
*/
#sec_02 .intro{ max-width: 1200px; margin:  3em auto; padding:30px; border: 8px #0abbb5 solid; background: #fff;  box-shadow: 0 3px 5px rgba(0,0,0,0.3);   position: relative; z-index: 9; }
.qa_block{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap;}     
.qa_block  .item{ width: 100%;  height: 250px;  }
.qa_block  .item_border{ border: 1px solid #0abbb5; width:calc( (100% / 2 ) - 45px ); margin: 1em 20px; position: relative; margin: 10px; padding: 8px; }
.qa_block  .item_border:hover{border: 1px solid #006470;  }
.qa_block .item .qa{ position: relative; height: 100%; width: 100%;  left: 0; bottom: 0;  padding: 20px;  color: #fff;  transition: all .3s; overflow: hidden;    }
.qa_block .item_border:hover .qa{  top: 0;  background: #006470;  }
.qa_block .item .qa .qus{ position: absolute; bottom:0; left: 0; padding: 0 20px;    font-size: 22px;  line-height: 33px;transition: all .3s;}
.qa_block .item .qa .qus:after{ content:''; position: absolute; bottom: -15px; left: 20px;width: 0; border-bottom: 1px #fff solid; transition: .5s all .5s;}
.qa_block .item_border:hover .qa .qus:after{ width: 30%; }
.qa_block .item .qa .ans{ visibility: hidden;  position: absolute; bottom:-50%; left: 0;  padding: 20px; line-height: 28px;  }
.qa_block .item .qa .ans .more{ background: #0abbb5;     border-radius: 25px;
padding: 0px 15px;  }
.qa_block .item_border:hover .qus{  bottom:52%;}
.qa_block .item_border:hover .ans{  visibility: visible;  bottom:0; }
      
.qa_block .item_border .item:before{ content: ''; width: 70px; height: 70px; position: absolute; top: 0; left: 0; z-index: 9;}
.qa_block .item_border:nth-of-type(1) .item{ background: url(../images/sec02_img01.jpg); background-size: cover;}
.qa_block .item_border:nth-of-type(1) .item:before{  background: url(../images/q01.png); background-size:contain; }
.qa_block .item_border:nth-of-type(2) .item{ background: url(../images/sec02_img02.jpg);  }
.qa_block .item_border:nth-of-type(2) .item:before{  background: url(../images/q02.png);  background-size:contain;}
.qa_block .item_border:nth-of-type(3) .item{ background: url(../images/sec02_img03.jpg);  }
.qa_block .item_border:nth-of-type(3) .item:before{  background: url(../images/q03.png); background-size:contain; }
.qa_block .item_border:nth-of-type(4) .item{ background: url(../images/sec02_img04.jpg);  }
.qa_block .item_border:nth-of-type(4) .item:before{  background: url(../images/q04.png);  background-size:contain;}

#sec_03{ background:url(../images/blue_bg.jpg) #cafcfb;  padding: 30px 0px 100px 2px;  
/*
	-webkit-animation: 10s linear 0s infinite move;
	-moz-animation: 10s linear 0s infinite move;
	-ms-animation: 10s linear 0s infinite move;
	-o-animation: 10s linear 0s infinite move;
	animation: 10s linear 0s infinite move;
*/
 
}
.article_item{ width: calc( (100% / 3 ) - 40px ); margin: 1em 20px; position: relative; margin: 20px; float: left;} 
.article_item .img{  box-shadow: 0 3px 5px rgba(0,0,0,0.3);  border: 10px #fff solid;  position: relative; overflow: hidden;} 
.cover_line{ width:100%;height:100%;  background:url(../images/bg-txt.png); opacity:0.2; position:absolute; right:0; top:0; transition:all 0.5s; }
.cover_line:hover{ opacity:0;}
.article_item .img img{ max-width: 100%; width: 100%;} 
.article_item:hover .img img{ transform: scale(1.1); -webkit-transform: scale(1.1);}
.article_item .txt { min-height: 110px;} 
.article_item .txt h3{ font-size: 18px; color: #000;    display: inline-block;  border-bottom: 1px #000 solid;    padding-bottom: 3px;} 
.article_item .txt h2{ font-size: 21px; color: #00616c; margin-bottom: 10px; margin-top: 0; line-height: 28px;} 
.article_item .btn{ font-size: 15px; text-align: left; color: #00616c; letter-spacing: 3px; border: 1px #00616c solid; background: #fff; padding: 15px;  border-radius: 0; width: 100%; margin:0 0 2em 0; position: relative;} 
.article_item .btn .btn_bg{ height: 100%; width: 0;background:#00616c; position: absolute;  top: 0; left:0; z-index: 0;  }
.article_item:hover .btn span{ color: #fff;}
.article_item:hover .btn .btn_bg{ width: 100%; }
.article_item .btn span, #sec_03 .item .txt .btn .btn_arrow  {z-index: 1; position: relative;}  
.article_item .btn .btn_arrow{ width: 50px; position: relative; float: right; margin-top: 15px;}   
.article_item:hover .btn .btn_arrow {width: 40px; margin-right: -5px;  }
.article_item:hover .btn .btn_arrow .line_01, .article_item:hover .btn .btn_arrow .line_02{background:#fff; } 
.article_item .btn .btn_arrow .line_01{ position: absolute;  bottom: 0;   right: 0;   left: 0; height: 1px; background:#00616c; }   
.article_item .btn .btn_arrow .line_02{    height: 1px;    position: absolute;    bottom: 0;    right: 0;    -webkit-transform: rotate(45deg);    -ms-transform: rotate(45deg);    transform: rotate(45deg);    -webkit-transform-origin:right bottom;    -ms-transform-origin: right bottom;    transform-origin: right bottom;width: 15px; background:#00616c; }   
   
.item_two { width: calc( 100% - ( 100% / 3 ) ); margin: 2em auto; overflow: hidden;}
.item_two > .article_item{ width: calc( ( 100% / 2 ) - 40px ) !important;}


#csr_report{ padding: 50px 0;     background: url(../images/blue_bg.jpg) #cafcfb; 
/*
	-webkit-animation: 10s linear 0s infinite move reverse;
	-moz-animation: 10s linear 0s infinite move reverse;
	-ms-animation: 10s linear 0s infinite move reverse;
	-o-animation: 10s linear 0s infinite move reverse;
	animation: 10s linear 0s infinite move reverse;
*/
}
#csr_report .title img{ max-width: 300px;}
#sec_04{  padding-bottom: 3em; position: relative; background: #fafafa;}
#sec_04:after{ content:''; background:url(../images/line.jpg); width: 100%; height: 8px;    position: absolute; bottom: 0;}
#sec_04 .title{margin-top: -60px;}
#sec_04 .title img{max-width: 220px;}

#sec_04 .sec04_line_l{ width:calc( (100% - 290px) / 2); background:url(../images/line_l.jpg); height: 8px;    position: absolute;left: 0; top:0;}
#sec_04 .sec04_line_r{ width:calc( (100% - 290px) / 2); background:url(../images/line_r.jpg); height: 8px;    position: absolute; right: 0; top:0;}
.item_two .article_item{ width: calc( (100% / 2 ) - 40px ); margin: 1em 20px; position: relative; float: left;} 


.book_block{max-width: 800px;  margin: 30px auto;}
.book_block h2{ font-weight: 600; color: #00616c; display: inline-block; position: relative; font-size: 35px;}
.book_block h2:after{ content:''; background:#8ee3e1;  height: 10px; width: 0; position: absolute; left: 0; bottom: 0; z-index: -1; }
.book_block:hover h2:after{ content:''; width: 100%; }
.book_block strong{ font-size:25px; color: #006470;  }
.book_block .btn{ font-size: 20px; text-align: left; color: #fff; background:#00616c; color: #fff;  padding: 10px;  border-radius: 0; width: calc( 100% / 2 - 17px); margin: .5em 0; text-align: center; margin-right: 15px;} 
.book_block .btn:hover{ background:#0abbb5; color: #00616c; }
.book_img img{animation: 3s linear 0s infinite  bounce;}
.sec04_line_l { background:url(../images/line_l.jpg); width: 100%; height: 8px;    position: absolute; bottom: 0;}

#lecture{padding: 40px 0px 80px 0px; position: relative; background: #fff;     background: url(../images/lecture_bg.png) top center no-repeat /contain; background-attachment: fixed;}
#lecture .forward{ margin: 0px auto; padding: 10px;}
#lecture .forward .sub_title{ margin-bottom: 30px;;}
#lecture .forward .coming_txt{ font-size: 25px;  font-weight: bold; }
/*
#lecture .forward .coming_txt span{  position:relative; animation: fade-in-text 1s linear infinite;}
#lecture .forward .coming_txt span:nth-of-type(1){ animation-delay: .5s}
#lecture .forward .coming_txt span:nth-of-type(2){ animation-delay: .6s}
#lecture .forward .coming_txt span:nth-of-type(3){ animation-delay: .7s}
#lecture .forward .coming_txt span:nth-of-type(4){ animation-delay: .8s}
#lecture .forward .coming_txt span:nth-of-type(5){ animation-delay: .9s}
*/

.blink_line{ display: inline-block;height: 2px; width: 15px; background: #000;  animation: blinker 1s linear infinite;}
#lecture .forward p{  margin-bottom:30px; line-height: 30px;}
#lecture .container{ width: auto; max-width: 1400px;} 
#lecture .item{ width: calc( (100% / 3 ) - 41px ); margin: 135px 20px 1em  20px; position: relative; padding: 50px 30px; border: 8px #0abbb5 solid;  float: left;  box-shadow: 0 3px 5px rgba(0,0,0,0.3); background: #fff;} 
#lecture .item .date{ position: relative;  text-align: center; width: 150px; height: 150px; margin:-135px auto  auto auto;} 
#lecture .item .date:after{  content: '';  background: #0abbb5;  opacity: 0;  position: absolute;   width: 180px;  height: 180px;  top: -8%; left: -10%; border-radius: 50%;  z-index: -1;  opacity: 0;} 
#lecture .item.not_yet .date:after{   background: #dcdcdc;  }
#lecture .item:hover{  background: #f9f9f9;} 
#lecture .item:hover .date:after{ opacity: .5 ; animation: 1s linear 0s infinite pulse; -webkit-animation: 1s linear 0s infinite pulse;} 
#lecture .item .date img{  width: 150px;} 
#lecture .item .txt h2{ text-align: center;   margin: .5em 0;    color: #00616c; line-height: 45px;} 
#lecture .item .txt .btn{ font-size: 20px; text-align: left; color: #fff; background:#00616c; color: #fff;  padding: 14px;  border-radius: 0; width: 90%; margin: 1em 0; text-align: center; position: absolute; left: 5.4%; letter-spacing: 5px; bottom: -10%;} 
#lecture .item:hover .txt .btn{ background: #0abbb5;}
#lecture .item.not_yet{ background: #e9e9e9; min-height: 534px;}
#lecture .item.not_yet .txt{ display: flex;align-items: center;  justify-content: center;  height: 100%;width: 100%;   position: absolute; top: 0;left: 0; }
#lecture .item.not_yet .txt .btn{ background: #888888; cursor: default;}

#lecture .btn {
  padding: 10px 20px;
  display: inline-block;
  position: relative;
  -webkit-transition: all 0.2s ease;
          transition: all 0.2s ease;
  overflow: hidden; }
 #lecture  .btn:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    width: 1px;
    top: 0;
    bottom: 0;
    margin: auto;
    background: #0abbb5;
    -webkit-transition: -webkit-transform 0.2s ease;
            transition: transform 0.2s ease;
    z-index: -1;
    opacity: 0; }
  #lecture .btn span {
    position: relative;
    z-index: 5; }
  #lecture .btn:hover {
    color: #FFF; }
  #lecture .btn:hover:before {
      -webkit-transform: scaleX(500);
          -ms-transform: scaleX(500);
              transform: scaleX(500);
      opacity: 1; }

footer{ padding: 1em 20px; background: #cafcfb;  overflow: hidden;}
footer p{ margin: 0 ; font-size:14px;}
.logo_block img{ height: 35px; margin: 1em 5px;}

.gotop{ position: fixed; bottom: -5px; right: 20px;  z-index: 9999;}
.gotop:hover{ bottom: 0px; }
.fbsharelink img{ width: 15px; margin-right: 3px; margin-top: -3px;}


/*animation*/

@keyframes blinker {
  50% { opacity: 0; }
}

@-webkit-keyframes pulse {
0%, 100% {
    
	transform:scale(1.05);
	-webkit-transform:scale(1);
    }
50% {
    
	transform:scale(1.2);
	-webkit-transform:scale(1);
    }
}
    
@keyframes pulse {
0%, 100% {
    
	transform:scale(1.05);
	-webkit-transform:scale(1);
    }
50% {
    
	transform:scale(1.2);
	-webkit-transform:scale(1);
    }
}

@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translatey(0, 0);
        transform: translate(0, 0); }
40% {
-webkit-transform: translate(0, -10px);
        transform: translate(0, -10px); }
60% {
-webkit-transform: translate(0, -5px);
        transform: translate(0, -5px); }
}

@keyframes float {
	0%, 100% {
		transform: translatey(0px);
		top: 0;
	}
	50% {
		transform: translatey(-20px);
	}
}

@keyframes float2 {
	0%, 100% {
		transform:scale(1.1)  translateX(0);
	}
	50% {
		transform: scale(1.1) translateX(-20px);
	}
}


@-webkit-keyframes move {
	from {background-position:0 0;}
	to {background-position: 1500px 0;}
}
 
@-moz-keyframes move {
	from {background-position:0 0;}
	to {background-position: 1500px 0;}
}
 
@-ms-keyframes move {
	from {background-position:0 0;}
	to {background-position: 1500px 0;}
}
 
@-o-keyframes move {
	from {background-position:0 0;}
	to {background-position: 1500px 0;}
}
 
@keyframes move {
	from {background-position:0 0;}
	to {background-position: 1500px 0;}
}

@-webkit-keyframes fade-in-text{
    from{
        opacity:0;
        left:0px;
    }
    to{
        opacity:1;
        left:-5px;
    }
}


/* RESPONSIVE*/

@media ( min-height: 600px) and ( max-height: 850px){
    .banner{ height: 100vh;}
}
@media screen and (max-width: 1024px){
    .windmill01{ right: 18%; bottom: -3%;}
    .windmill02{ display: none;}
}

@media screen and (max-width: 991px){
  .bird{  display:none; }
  .qa_block  .item{ height: 300px;}
  #lecture .item{ width: calc( ( 100% / 1 ) - 10px );  float: none;  margin: 135px 0px 1em 0px;}
}
@media screen and (max-width: 768px){
    
    .show_pad{display: block;}
    .hidden_pad{ display: none;}
    .nav>li {  border-bottom: 1px #fff solid;}
    .navbar-nav{ margin: 0 -15px;}
    
    .windmill01{  right: 0; max-width: 150px;}
    .windmill02{ max-width: 100px; right: 24%; z-index: 10; display: block; }
    .navbar-default{  background-size:auto;}
    .navbar-collapse{background: #0abbb5;}
    .navbar-default .navbar-nav>li:before{ display: none;}
    
    .qa_block  .item_border{ width: 100%;}
    .qa_block  .item{ height: 250px;}

    #sec_02 .intro{ padding: 10px;}
    .item_two {  width: 100% ;    margin: 0em;}
    .article_item{ width: calc( ( 100% / 2 ) - 20px );   margin: 10px;}

    .book_block .book_img img{  max-width: 250px;  margin: auto;}
    .article_item .btn_bg{ display: none;}
    .article_item:hover .btn span{ color:#00616c;}
    .article_item .btn .btn_arrow{ width: 50px; position: relative; float: right; margin-top: 15px;}   
    .article_item:hover .btn .btn_arrow .line_01, .article_item:hover .btn .btn_arrow .line_02{ background: #00616c;}
    
    
    @keyframes float2 {
        0%, 100% {
            transform:scale(1.2)  translateX(0);
        }
        50% {
            transform: scale(1.2) translateX(-20px);
        }
    }

}
@media screen and (max-width: 600px){
    
  .banner{ padding: 9em 0em;  min-height: auto;}
  #lecture{ background-attachment: scroll;}
  .windmill01 { bottom: -6%;}
  .windmill02{ display:none; }
  #sec_02 .title:before, #sec_02 .title:after, .navbar-default .navbar-nav>li>a:after{ display: none;}
   #lecture, #sec_02{ padding: 2em 0;}
  .article_item, .item_two > .article_item{ width: calc( ( 100% / 1 ) - 10px ) !important; margin: 10px 0; float:none;}
}