@charset "utf-8";
/* CSS Document */
/*CSS RESET*/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
@font-face {
  font-family: 'Noto Sans TC';
  src: url("../Noto_Sans_TC/NotoSansTC-Black.otf")format("opentype"),
         url("../Noto_Sans_TC/NotoSansTC-Bold.otf")format("opentype"),
	  url("../Noto_Sans_TC/NotoSansTC-Light.otf")format("opentype"),
	  url("../Noto_Sans_TC/NotoSansTC-Medium.otf")format("opentype"),
	  url("../Noto_Sans_TC/NotoSansTC-Regular.otf")format("opentype"),
	  url("../Noto_Sans_TC/NotoSansTC-Thin.otf")format("opentype");
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
  overflow-y: scroll;
  overflow-x: hidden;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/*CSS RESET*/


body,div,ul,li,form,button,header,footer,nav,input,textarea,th,td,span,p,select,h1,h2,h3,h4,h5,h6{ 
font-family:'Noto Sans TC','Open Sans', Geneva,'Microsoft JhengHei',"微軟正黑體", sans-serif; letter-spacing:0.5px; }
h1,h2,h3,h4,h5,h6{  margin:0 0 1em 0; padding:0; }
body { margin:0;  color:#333333 ; padding:0; background-color: #f6f4f5;}
html,body {  
	font-size:100%; -webkit-text-size-adjust:100% ; height: 100%;  min-height: 100% !important;} /*for ipad*/
html {  
	image-rendering:-webkit-optimize-contrast;
}

*{ box-sizing: border-box; 
   -webkit-box-sizing: border-box; 
   -moz-box-sizing: border-box;
}

a, a h1, a h2, a h3, a h4, a h5, a h6{ text-decoration: none ; 
-o-transition:all 0s ease 0s, all 160ms ease 0s;
-webkit-transition:all 0s ease 0s, all 160ms ease 0s;
-moz-transition: all 0s ease 0s, all 160ms ease 0s;
transition: all 0s ease 0s, all 160ms ease 0s;     
}
a:hover, a:hover h1, a:hover h2, a:hover h3, a:hover h4, a:hover h5, a:hover h6{ text-decoration: none;}
a img{ border:0px; max-width: 100%; }
a, a:link { 
	width: 100%; height: 100%; 
	display:inline-block;
}

/*img{ vertical-align: top; max-width: 100%; }*/

ul, ol, li { list-style: none; list-style-type:none; }
input {border:0px ;  line-height:1.5em; vertical-align:middle; background:transparent; color:#212121; padding:0.2em 0; outline:0 !important;menuwidth: 100%; border-bottom: 1px solid #d57c97; width: 80%; margin: 0 auto; font-size: 2em;}
/*input:hover, textarea:hover, input:focus, textarea:focus{ }*/
textarea {border:0; background:#f6f6f6; color:#000; padding:5px; width:100%; font-size:0.9375em; }
/*input[type=checkbo<navx] { border:0px\9; background:none; width:auto !important; height:auto !important;}*/

nav { display:block; }

select {  border: 0; background: transparent; color:#000; vertical-align:middle; font-size:16px;}
select:hover, select:focus{border:0px; background: transparent ; color:#000;}
/*input[type="radio"]{border:0px\9; background:none; vertical-align:middle;  width:auto !important; height:auto !important;}*/


/*-------------------------------------基本設定-------------------------------------------*/
/*最外框*/
.wrap{ width:100%; margin:0 auto; position:relative; line-height: 1.7; min-height: 100%; } /*外層裝所有物件除了縮小選單*/


/*主內容外框*/
.full { width: 100%; }
.bg-green { background-color: #a5bba9; }
.bg-white { background-color: #ffffff; }
.bg-khaki { background-color: #b8905b;}
.bg-blueSea { background-color: #3461a3;}

.mainCont {
	width: 1280px;
	margin: 0 auto;
}

*::before, *::after {pointer-events: none;}
.toTOP {
	width: 55px; height: 55px; border-radius: 28px;
	position: fixed; bottom: 135px; right: 50px;
	background:#4f5260;
	color:#fff; font-size: 1em;
	font-weight: 500;
	text-align: center; line-height: 4.5em;
	display: none; z-index: 999;
}
.toTOP:hover { opacity:.8;}
.toTOP a, .toTOP a:link, .toTOP a:visited { color:#fff; text-decoration: none;}
.toTOP::before {
	content:'▲';
	position: absolute; top: -20px; left: 18px;
}
.toTOP.btnShow { 
	display: block;
	animation-name: ani-btnShow;
	animation-duration: 3.5s;
	animation-iteration-count: 0;
    animation-direction: alternate-reverse;
}
@keyframes ani-btnShow {
    0%{ 
		bottom: 90px;
		opacity: 0.0;
    }
    100%{
		
		bottom: 105px;
		opacity: 1.0;
		
    }
}



/*選單-----------------------------*/

header { 
	position:absolute; top: 0; 
	width:100%; height: 80px;
	margin:0 auto; padding:0;    
	z-index: 1080;
	display: block;
}
.menuCont { width: 1280px; margin: 0 auto;}



/*內頁logo*/
.logo { 
	width: 195px!important; 
	height: auto!important;   
	position: absolute; 
	margin: 1em; 
	z-index: 3000;
}
.logo img { width: 100%; height: auto; }
/*.inner .logo a{background-image: url("../../images/inner_logo.png"); background-repeat: no-repeat;
      height: 0; width: 100%; display: block;
     padding-bottom: 100%; 
	-webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;}*/

/*.indexH { position: relative; }
.indexH ul.pcNav { margin: 620px auto 0 auto; padding: 1em 1.5em; text-align: center;}
.indexH .pcNav li { display: inline-block; text-align: center; height: 30px; margin: 0.5em;}*/
/*選單文字樣式*/
/*.indexH .pcNav li a { font-size: 1.25em; }
.indexH .pcNav li a:hover, .inner .pcNav li a:hover { color:#f6d851; -webkit-text-stroke-color: #f6d851; }
.indexH .pcNav li a, .inner .pcNav li a { padding: 0;  line-height: 30px; color: #FFF; font-weight: bold; }
.indexH .logoH { margin-bottom: 0.5em;}
.indexH .pcNav li a {display: inline-block;}*/



ul.pcNav { margin: 0; padding: 0; }

/*內頁選單*/
.inner ul.pcNav { 
	width: auto; 
	display: block; 
	top: 0; 
	padding: 1em; 
	margin: 0 auto 0 auto; 
	text-align: right;
}
/*下滑選單陰影*/
/*.inner ul.pcNav.navShadow {
  -webkit-filter: drop-shadow(0px 3px 2px rgba(0, 0, 0, 0.2));
  z-index: 1;
}*/
.pcNav li { display: inline-block; position: relative; }
.inner .pcNav li { margin: 0 .3em; color:#fff}
.inner .pcNav li.navLine { margin: 0;}
.inner .pcNav li a { font-size: 1.125em; color: #fff; font-weight:500; }
.inner .pcNav li a:hover { color:#99ccf8; }
.pcNav li.active a {color:#333;}
/*.pcNav li a{ display: block; padding: 0.8em 0;}*/


/*.closeBtn { position: absolute;  top: 15px; right: 5.3%; display: none;  width: 35px; height: 35px;cursor:pointer; background-color: transparent;border: 0;}
.closeBtn .line1, .closeBtn .line2 {width: 35px;height: 2px;background-color: #e292aa;display:block;}
.open-closeBtn { display:block; z-index:1085; }
.closeBtn .line1 {-webkit-transform: rotate(45deg) translate(0px, 2px); transform: rotate(45deg) translate(0px, 2px);}
.closeBtn .line2 { -webkit-transform: rotate(-45deg) translate(0px, -2px); transform: rotate(-45deg) translate(0px, -2px);}*/

.grt-mobile-button { display:none; }
.grt-mobile-button:focus { border:0; outline:0; }
header.full { height:100% !important; }

/*滑動logo和nav加陰影*/
/*header.shadow .pcNav, header.shadow.inner img.logo {
	-webkit-box-shadow: 2px 7px 4px -3px rgba(0,0,0,0.08);
    -moz-box-shadow: 2px 7px 4px -3px rgba(0,0,0,0.08);
    box-shadow: 2px 7px 4px -3px rgba(0,0,0,0.08);
    -webkit-filter: drop-shadow(0px 3px 2px rgba(0, 0, 0, 0.2));
    -moz-filter: drop-shadow(0px 3px 2px rgba(0, 0, 0, 0.2));
    -ms-filter: drop-shadow(0px 3px 2px rgba(0, 0, 0, 0.2));
 }*/


header.changeS { -webkit-animation: MoveBg 0.2s ease-in-out forwards; animation: MoveBg 0.2s ease-in-out forwards; }
@keyframes MoveBg {
    from { height: 98px; }
    to { height: 70px; }
}

header.changeH{ -webkit-animation: MoveBg2 0.2s ease-in-out forwards; animation: MoveBg2 0.2s ease-in-out forwards;     }
@keyframes MoveBg2 {
    from { height: 70px; }
    to { height: 98px; }
}


/*手機版logo下滑*/
/*header.changeS .logo { -webkit-animation: MoveLogo 0.2s ease-in-out 1 forwards; animation: MoveLogo 0.2s ease-in-out 1 forwards;      }
@keyframes MoveLogo {
    from { transform: scale(1); top: auto; margin-top: 0;}
    to {  transform: scale(0.85); top: 19px;margin-top: -25px;}
    from { opacity:1; margin-top: 0;}
    to {  opacity:0;margin-top: -25px;}
}*/

/*手機版logo初始*/
/*header.changeH .logo { -webkit-animation:MoveLogo2 0.2s ease-in-out 1 forwards; animation: MoveLogo2 0.2s ease-in-out 1 forwards;  }
@keyframes MoveLogo2 {
    from { transform: scale(0.85); top: 19px; margin-top: -20px;}
    to {  transform: scale(1); top: auto;  margin-top: 0;}}*/

/*滑動後banner消失*/
/*.banner.fadeOut { -webkit-animation:Fade 0.2s ease-in-out 1 forwards; animation: Fade 0.2s ease-in-out 1 forwards; pointer-events: none; }
@keyframes Fade {
    from { opacity:1;}
    to {  opacity:0;}
}*/

/*首頁選單移動*/
/*header.changeS .pcNav{-webkit-animation: MoveNav 0.2s ease-in-out 1 forwards;animation: MoveNav 0.2s ease-in-out 1 forwards;}
@keyframes MoveNav {
    from { top: 40px;}
    to {  top: 25px;}}

header.changeH .pcNav{-webkit-animation: MoveNav2 0.2s ease-in-out  forwards;animation: MoveNav2 0.2s ease-in-out  forwards;}
@keyframes MoveNav2 {
    from { top: 10px;}
    to {  top: 35px;}}*/

h2.title { 
	font-size: 1.875em; color: #333;
	letter-spacing: 5px;
	font-weight: 500;
	display: block;
	width: 300px;
	text-align: center;
	margin:35px auto;
	background-image: url("../../images/slash.png"), url("../../images/slash.png");
	background-size:39px 66px;
	background-position:left center, right center;
	background-repeat: no-repeat;
}

h2.titleDesp::after {
	content:'學習動機';
	color:#999;
	display: block;
	font-size: .6em;
	text-align: center;
	letter-spacing: .1em;
}
.banner h1 { 
	width:850px; height: 192px;
	display: block;
	font-size: 2.34em; color: transparent; 
	position: absolute; top: 88px; left:calc(50% - 424px);
	margin: 130px auto auto auto;
	z-index: 99;
	background-image: url("../../images/title.png");
	background-size: cover;
	background-repeat: no-repeat;
}


.banner { 
	width: 100%; height: 620px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}


/*****************大圖輪播*****************/
.carousel-container {
      position: relative;
      overflow: hidden;
      max-width: 600px;
      margin: auto;
      border-radius: 10px;
    }

    .carousel-track {
      display: flex;
      transition: transform 0.4s ease-in-out;
    }

    .carousel-slide {
      min-width: 100%;
      user-select: none;
		
    }


.carousel .slick-slide { margin: 0;}
.slick-slide .carousel-item {
	dsiplay: flex!important;
	justify-content: center;
}

    .slick-slide .carousel-item img {
      width: 100%;
	  height: auto;
      display: block;
		margin: auto;
    }

    .carousel-dots {
      text-align: center;
      margin-top: 10px;
    }

    .carousel-dot {
      display: inline-block;
      width: 10px;
      height: 10px;
      margin: 0 5px;
      border-radius: 50%;
      background-color: #bbb;
      cursor: pointer;
    }

    .carousel-dot.active {
      background-color: #333;
    }


/*********************影片slider***************************/

.featured { margin-bottom: 100px;}
.featured-item { 
	position: relative;
	overflow: hidden;
	border-radius: 10px;
	
}
.featured-item p { 
	position: absolute;
	bottom: 20px; left: 10px;
	color: #fff;
	z-index: 33;
	font-size: 1.625em;
	font-weight: 300;
	pointer-events: none;
}
.featured-item a {
    display: block;
    overflow: hidden;
    width: 100%;
}
.featured-item a img { transition: all .3s ease; }

.featured-item a:hover img {
	transform: scale(1.1);
}


/*影片*/
.film { margin-bottom: 300px; position: relative;
}


.film h2 {
	width:366px; height: 144px;
	display: block;
	font-size: 2.34em; color: transparent; 
	position: relative; 
	margin: 139px auto auto auto;
	z-index: 99;
	
}
.video-box {
	border: solid 1px #333;
	padding: 1em;
	width: 1000px;
	margin: 70px auto auto auto;
}
.video-cont{
	position: relative;
	padding-bottom: 56.25%; 
    padding-top: 0px;
	height: 0; width: auto;
	overflow: hidden;
	background-color: transparent;
	z-index: 0;/*修復safari圓角overflow失效*/
}
.video-cont iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.video-cont img {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}


/*底部對外連結區塊*/
.featured-item.btn-item p {
	font-size: 1.5em;
	line-height: 1.3em;
}






/*作品列表*/

.t-outdent { text-indent: 0em!important;}
.t-outdent-l { 
	display: block;
	text-indent: 4.6em!important;
}
.t-spacing { letter-spacing: -.1px!important;}
.bg-leaf {
	width: 100%;
	position: relative;
	background-image: url("../../images/fern1.png"), url("../../images/fern2.png"), url("../../images/fern3.png");
	background-size:115px 165px, 172px 285px, 148px 334px;
	background-position: 101% 5%, -20px 40%, 101% 90%;
	background-repeat: no-repeat;
}
.expert { position: relative;
	margin-bottom: 95px;
}
.expert h2.title {
	position: absolute;
	left: calc(50% - 150px);
	top: -200px;
}
.expert::before {
	content:'';
	width: 178px; height: 178px;
	display: block;
	background-image:url("../../images/expert.png");
	background-size: cover;
	background-repeat: no-repeat;
	position: absolute;
	top: -75px; left:calc(50% - 89px);
}
.expert p { color:#e9e8e9; text-align: center;
	width: 640px;
	font-weight: 500;
	margin: auto; padding: 9em 0 3em 0;
	position: relative;
}
.expert p::before {
	content:'{';
	font-size: 6.5em; font-weight: 300;
	position: absolute;
	left: -2em; top: .5em;
}
.expert p::after {
	content:'}';
	font-size: 6.5em; font-weight: 300;
	position: absolute;
	top: .5em; right: -2em;
}
.expert p span { display: block;}
.item {
	display: flex;
	flex-direction: row;/*元件排序方向*/
	flex-wrap: nowrap;
	justify-content: space-between;/*水平對齊*/
	align-items: center;/*子元素對齊*/
	align-content: center;
	position: relative;
	margin: 2.2em auto;
	width: 1230px;
}
.item::before {
	content:'';
	width: 10px; height: 59px;
	display: block;
	position: absolute;
	background-color: #333;
	left: -2em;
	top: calc(50% - 30px);
}
.item::after {
	content:'';
	width: 10px; height: 59px;
	display: block;
	position: absolute;
	background-color: #333;
	right: -2em;
	top: calc(50% - 30px);
}
.item-film { width: 762px; height: 425px;}

.item-film .bxslider div p.picText {
	position: absolute;
	width: 100%;
	height: 60px;
	background-color: rgba(255,255,255,0.8);
	color: #333;
	bottom:0;
	padding: 5px 10px 0 10px;
	font-size: 1.25em;
	font-weight: 500;
	text-align: center;
}
.item-film .bxslider div a {
	position: relative;
	z-index:99;
}

.txt { width: 400px;
}
h3 {
	font-size: 1.875em;/*30px*/
	line-height: 1.3em;
	font-weight: 500;
}
.notes {
	font-size: 1em;
	font-weight: 300;
	color: #999;
	margin-top: -2em;
}
.description {
	text-align: center;
	margin:40px auto 40px auto;
}
.description h3 { 
	font-size: 1.625em;
	font-weight: 500;
	color: #333;
}
.description p { 
	font-size: 1em;
	font-weight: 300;
	color: #333;
}


.p-btn {
	position: relative;
	width: 95%;
	display: flex;
	justify-content: space-between;
	margin: auto;
}
.p-btn a {
	width: 360px; height: 180px;
	border-radius: 10px;
	transition: all .2s ease;
	font-size: 1.25em;
	color:#333;
	font-weight: 300;
	position: relative;
	text-align: center;
}
.p-btn a:hover.p-btn-01, .p-btn a:hover.p-btn-02, .p-btn a:hover.p-btn-03 {
	background-size: 115%;
}
.p-btn a p {
	position: absolute;
	bottom: 10px;
	width: 100%;
	background:rgba(255,255,255,.6);
	padding: 10px 0;
}
.p-btn-01 {
	background:url("../../images/p-btn-01.png") no-repeat;
	background-size: 100% auto;
	background-position: center;
	transition: all .5s ease; 
}

.p-btn-02 {
	background:url("../../images/p-btn-02.png") no-repeat;
	background-size: 100% auto;
	background-position: center;
	transition: all .5s ease; 
}

.p-btn-03 {
	background:url("../../images/p-btn-03.png") no-repeat;
	background-size: 100% auto;
	background-position: center;
	transition: all .5s ease; 
}


.SocialMedia {
	display: flex;
	flex-direction: row;/*元件排序方向*/
	flex-wrap: nowrap;
	justify-content: center;/*水平對齊*/
	align-items: flex-end;/*子元素對齊*/
	align-content: center;
	position: relative;
}
.SocialMedia div {
	width: 121px; height: 160px;
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: top center;
	margin:3em 2em; padding-top: 130px;
	color: #88883e;
	font-size: 1em;
	font-weight: 500;
	line-height: 45px;
	text-align: center;
	align-self: flex-end;
	align-items: flex-end;/*子元素對齊*/
	align-content: center;
	position: relative;
}
.SocialMedia div:hover {
	opacity:.8;
}

.SocialMedia a, .SocialMedia a:link, .SocialMedia a:visited { color: #6a99da;}
.SocialMedia a, .SocialMedia a:link { width: 100%; height: 100%; 
	position: absolute; top:-1px; left: -1px; right: -1px; bottom: -1px;
	padding-top: 120px;
}/*按鈕範圍擴張*/
.ig {
	background-image: url("../../images/ig.png");
}
.yt {
	background-image: url("../../images/yt.png");
}

.fb {
	background-image: url("../../images/fb.png");
}






/*footer*/

footer { 
	color: #2c2c50; font-size:0.9375em; 
	padding: 6em 1em 2.5em 1em; 
	line-height: 1.2;  font-weight: 500;
	text-align: center;
	z-index: 10;
	position: relative;
}
.purpose {
	background-color:#807cb4;
	border-radius: 1em;
	width: 807px; height: 255px;
	margin: auto auto 55px auto;
	position: relative;
	font-size: 1.25em; color: #333;
}
.purpose .title {
	width: 463px; height: 108px;
	display: block;
	background-image: url("../../images/purposeTitle.png");
	background-size: cover;
	background-repeat: no-repeat;
	position: absolute;
	top: -25px; left: calc(50% - 231px);
}
.point {
	display: flex;
	flex-direction: row;/*元件排序方向*/
	flex-wrap: nowrap;
	justify-content: center;/*水平對齊*/
	align-items: flex-end;/*子元素對齊*/
	align-content: center;
	position: relative;
	margin: auto;
	padding-top: 70px;
}
.point li { 
	position: relative;
	margin: 35px 30px;
}
.point li:first-child, .point li:nth-child(2) {
	border-right: #fff solid 1px;
	padding-right: 40px;
}
.point li::before {
	content:'';
	background-repeat: no-repeat;
	background-position: center center;
	width: 100%; height: 67px;
	display: block;
	margin-bottom: 10px;
}

.point li:first-child::before {
	background-image: url("../../images/icon01.png");
	background-size: 61px 60px;
}
.point li:nth-child(2)::before {
	background-image: url("../../images/icon02.png");
	background-size: 60px 62px;
}
.point li:nth-child(3)::before {
	background-image: url("../../images/icon03.png");
	background-size: 61px 56px;
}

footer a, footer a:link {
	/*display: inline;*/
	color: inherit;
	text-decoration: underline;
	cursor: pointer;
	width: auto; height: auto;
}

footer a:hover {
	color: #555;
}
.knsh_digi {
	background: url("../../images/knsh_digital.png") no-repeat;
	background-size: 101px 20px; 
	width: 101px; height: 20px;
	display: block;
	margin: 10px auto;
	
}