@charset "utf-8";
@font-face {  font-family: BebasNeue; src: url(../font/BebasNeue.otf);}

body { margin:0; padding:0; font-family:Microsoft JhengHei; position:relative; font-size:16px;}
img { border:0; vertical-align:middle;}
input { vertical-align:middle; font-family:Microsoft JhengHei;}
select {  font-family:Microsoft JhengHei;}

/*  漸變效果 */
a {transition: all 0.3s ease 0s; text-decoration:none;}

.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}/* End hide from IE-mac */


/*  padding and border no width  */
*{
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
 -moz-box-sizing: border-box;   /* Firefox, other Gecko */
 box-sizing: border-box;        /* Opera/IE 8+ */
}

.wallpeper { width:100%; overflow:hidden;  }
.main-box {  }
.in-main-box { background:url(../images/inside-main-bg.jpg); }
.inside-main-box { margin:0 auto; padding:0 10px 60px 10px;  }
.index-top { background: url(../images/top-bg.jpg); background-size:cover; height:100px; position: fixed; top:0; left:0; width:100%; z-index:100;}
.inside-top { background: url(../images/top-bg.jpg); background-size:cover; min-height:100px; position:relative; z-index:100;}
.left-bg { position:absolute; top:0; left:0; width:auto; height:auto; z-index:1; }

.w-960 { max-width:960px; margin: 0 auto;}
.w-640 { max-width:640px; margin: 0 auto;}

.top-banner {background-position:top; background-repeat:no-repeat; background-size: cover; padding:30px 0 20px 0; }
.top-banner h3 { background:#3987d7; width:160px; height:160px; text-align:center;  margin:0 auto; font-size:20px; color:#ffffff; padding:55px 10px; font-weight:normal; border-radius:99em;}
.top-banner h3 span { display:block; font-size:14px; padding-top:0px; color:#ffffff;}
.top-banner h3.top02 { padding:45px 10px; font-size:18px; }
.top-banner h3.top02 span { font-size:12px; }

.title-bg01 { background-image:url(../images/inside-bg.png);}
.title-bg02 { background-image:url(../images/inside-bg.png);}
.title-bg03 { background-image:url(../images/inside-bg.png);}
.title-bg04 { background-image:url(../images/inside-bg.png);}
.title-bg05 { background-image:url(../images/inside-bg.png);}
.title-bg06 { background-image:url(../images/inside-bg.png);}


/*  header */
header { background:#5097f3; width:100%; height:90px; border-bottom:5px #59bfff  solid; position:relative; }
header .logo { background:#ffffff; position:absolute; top:0px; left:50px; z-index:999; width:130px; height:130px; padding:5px 0; border-bottom:5px #59bfff solid; text-align:center; }
header .logo img { height:100%; width:auto; margin:0 auto; display:block;}

.login-info { font-size:14px; color:#C30; position:absolute; right:0; top:10px;}
.login-info a { color:#666; padding:0 5px;}
.login-info span.name { color:#333; padding-right:10px;}
.login-info a img { height:14px; width:auto; padding-right:5px;}

ul.top-tool { list-style:none; padding:5px 10px; margin:0; position:absolute; right:0; top:50%; margin-top:-25px;  border:0px #CCCCCC solid; border-radius: 20px;}
ul.top-tool li { display:inline-block;}
ul.top-tool li a { display:block; padding:5px; color:#333; font-size:14px;}
ul.top-tool li.icon a {  padding:5px 0;}

ul.top-tool li a:hover { color:#F00;}
ul.top-tool li img { height:30px; width:auto;}
ul.top-tool li:hover img { opacity:0.6;}
ul.top-tool li .search-input { background:#EFEFEF; border:0; border-radius: 2px 0 0 2px; width:100px; margin:0; font-family:Microsoft JhengHei; font-size:14px; padding:2px 5px 3px 15px;}
ul.top-tool li .search-btn { font-family:Microsoft JhengHei; background:#2496a0; color:#ffffff; padding:0px 15px; margin:0; line-height:24px; font-size:14px; border:0; border-radius:0 2px 2px 0;}

.loginfo { position:absolute; top:7px; right:10px; color:#ffffff; text-align:right; font-size:14px;}
.loginfo a { background:#36C; color:#ffffff; padding: 3px 10px; border-radius: 3px; margin-left:10px;}
.loginfo a:hover { background: #639;}


/*  nav  */
nav { position:absolute; right:15px; bottom:15px;}
.menu { margin:0; padding:0; list-style:none; text-align:center;}
.menu>li { color:#ffffff; font-size:16px; position:relative; display:inline-block; width:120px;} 

.menu>li>a { display:block; color:#ffffff; padding:0 10px; line-height:24px; vertical-align:middle;}
.menu>li>a:hover { opacity:0.6;}
.menu>li.cart>a  { background:none;  padding:0 10px; color:#08575e; border-right:0;}
.menu>li.cart>a:hover { color:#333333;}
.menu>li.cart>a img { height:16px; width:auto; padding-right:5px; vertical-align:middle; margin-top:-4px;}

.menu li>.main-nav {display:block;  color:#ffffff; padding:0 0px; line-height:35px; vertical-align:middle; cursor:pointer;}
.menu li>ul.sub { background:#ffffff; opacity:0; position:absolute; left:0; top:50px; width:100%; transition: all 0.3s ease 0s; visibility: hidden; z-index: 9999;}
.menu li:hover>span { background:#de5900; }

.menu li:last-child>span { border-right:0; }
.menu li>ul.sub { margin:0; padding:5px; list-style:none; width:100%;}
.menu li>ul.sub>li { padding:0; border-bottom:1px #66CCFF solid;}
.menu li>ul.sub>li:last-child { border-bottom:0;}
.menu li>ul.sub>li a { background:#4f98f3; display:block; color:#ffffff; font-size:14px; padding:7px;}
.menu li>ul.sub>li a:hover { background: #66C; color:#ffffff; }
.menu li:hover>ul.sub {  opacity:1; top:35px; transition: all 0.3s ease 0s; visibility: visible; }

span.nav-icon { background:url(../images/nav-icon.png); background-size:cover; width:24px; height:24px; display:inline-block; margin:-5px 10px 0 0; vertical-align:middle; } 

/*  banner  */
.banner { position:relative; z-index:900;}
.banner-box-content>div { position:relative;}
.banner-content { background:rgba(0,0,0,0.6); color:#ffffff; padding:25px; position:absolute; left:10%; top:45%;}
.banner-content h3 { font-weight:normal; margin:0 0 15px 0; font-size:36px;}
.banner-content p { margin:0; padding:0; line-height:1.4em; font-size:18px;}

/* member   */

.left-menu02 { }
.left-menu02 ul { margin:0; padding:0; list-style:none;}
.left-menu02 ul li { margin: 0 0 0px 0; border-bottom:1px #aae5eb solid; font-size:14px;}
.left-menu02 ul li a { background:#ffffff; color:#999999; padding:5px 10px; display:block;}
.left-menu02 ul li a:hover { background:#999999; color:#ffffff;}



/*  content  內文  */
.font-title { font-size:30px; margin:0 0 10px 0; padding:0; color:#333; font-weight:normal;}
.font-title-02 { font-size:18px; margin:0 0 10px 0; color:#a8a69c; font-weight:normal; }
.font-content { font-size:16px; line-height:1.6em; padding:20px 0; color:#3a3a3a;}
.img-left { padding-right:20px; padding-bottom:10px;}
.img-right { padding-left:20px; padding-bottom:10px;}
.content-box { background:#ffffff; padding:25px 20px; border-radius: 4px; overflow:hidden; box-shadow:0 0 10px #CCCCCC; border-bottom:6px #3987d7 solid;  border-top:6px #3987d7 solid;}


/*  about  內文  */
.about-pro { padding:0 20px;}
.about-pro img { max-height:150px; height:auto; width:auto;}
.pro-title { color:#808239; font-size:16px; margin:0; padding:20px 0 10px 0;}


/*  left-menu  */
.left-menu {  margin: 0; padding:0; list-style:none; border-radius: 5px; overflow:hidden; border-bottom:5px #3987d7 solid;}
.left-menu>li { background:#ffffff; }
.left-menu>li>a, .left-menu>li>span { background: #E6E6E6; display:block; padding:10px; color: #999; font-size:16px; text-align:center; border-bottom:1px #ffffff solid; }
.left-menu>li>a:hover,.left-menu>li.active>a, .left-menu>li.active>span { background: #3987d7; color:#ffffff; border-bottom:1px #ffffff solid;}
.left-menu>li.active {border-bottom:0; }
.left-menu>li:last-child>a { border-bottom:0; }

.m-left-menu { display:none; }
.left-menu>li>.sub { padding-left: 20px;}

.sub { list-style:none; margin:0 0 10px 10px; padding:5px 0 10px 0;}
.sub>li { padding:3px 0;}
.sub>li>a, .sub>li>span {font-size:14px; color:#fff; display:block;}
.sub>li>a:hover { color:#fff;}

/*  page  */
.page-box {  border-radius:10px; overflow:hidden; }
.page-title {  margin:20px 0 20px 0;}
.page-title h3 { background: #F69; font-weight:normal; font-size:20px; color:#ffffff; margin:0 0 0px 0; padding:7px 15px; text-align:center; }
.page-box .content-box { background:#ffffff; min-height:300px; padding: 15px 0px 30px 0px; position:relative; z-index:10;}
.page-box .page-cornor { position:relative; z-index:1; } 
.page-box .page-cornor .left { position:absolute; bottom:0px; left:0px;}
.page-box .page-cornor .right { position:absolute; bottom:0px; right:0px;}

.sub-title { background:#ffd3d7; font-size:18px; font-weight:normal; color:#972c2c; margin:0; padding:10px 20px; line-height:32px; border-radius: 5px 5px 0 0;}
.sub-title img { padding-right:5px;}


/* 首頁模組 */
.index-main-box {}
h3.index-h3 { border-left:4px #669933 solid; color:#669933; font-size:16px; font-weight:normal; padding-left:10px; line-height:16px;}
.inde-video iframe { display:block; width:100%; height:200px; }
.inde-pro a { display:block; width:100%; height:200px; background:center; background-size: cover; }
.inde-pro a:hover { opacity:0.8;}
.inde-fbfans iframe { display:block; width:100%; height:200px; }
.inde-event-box { display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap;}
.inde-event-box a {display:block; height:200px; -webkit-flex: 1;  flex: 1; background:center; background-size: cover;}
.inde-event-box a:hover { opacity:0.8;}
.inde-event-box:first-child a { margin-right:3px;}
.inde-event-box:last-child a { margin-left:3px;}
.index-title {  color:#2d2d2d; font-size:18px; border-left:5px #d42e2e solid; padding:0 0 0 10px; }


.birthday-box { border:5px #fccd10 solid; max-width:1200px; box-shadow:0 0 30px #CCCCCC; position:relative; margin:35px auto; z-index:910;}
.birthday-box .photo { width:25%; float:left; background-size:cover;}
.birthday-box .photo a { display:block; width:100%; height:0; padding-bottom:75%;}
.birthday-box .con-box { width:35%; float:left; padding:10px 20px; }
.birthday-box .con-box h3 { font-weight:normal; margin:0 0 15px 0; padding:10px 0 0 0; }
.birthday-box .con-box p { margin:0; color:#877f7f; line-height:1.6em;  }
.birthday-box .pic-bg { width:40%; position:absolute; right:0; bottom:0;}
.birthday-box .pic-bg img { width:100%; height:auto;}
.birthday-box a.btn-more { background:#fccd10; padding:12px 25px; font-size:16px; color:#ffffff; position:absolute; right:0px; bottom:0px;  border-radius:5px 0 0 0; }
.birthday-box a.btn-more:hover { color:#F00;}

/* message */
.message-box { padding:50px 0;}
.message-box .table-box { background: url(../images/cart-bg.jpg); padding:10px 20px; max-width:500px; margin:0 auto; border:5px #E2E2E2 solid; }
.message-box .table-box h3 { font-weight:normal; margin:0 0 10px 0; padding-bottom:10px; font-size:16px; border-bottom:1px #CCCCCC dotted;}
.message-box .table-box h3 img { height:18px; opacity:0.5; padding:0 5px 2px 0;}
.message-box .table-box .content { font-size:14px; line-height:1.6em; min-height:100px;}
.message-box .table-box .content span { color:#C30;}
.message-box .table-box .forget { padding-top:10px; font-size:14px; line-height:1.6em; min-height:100px; color:#C30;}


.message-lis { max-width:960px; margin:0 auto;}
.message-lis .teacher { background: #ffffff; min-height:160px; box-shadow:0 0 10px #CCCCCC inset; padding:15px; color:#333333; font-size:14px; border-radius:15px; position:relative; margin:0 10px 15px 10px; border:5px #CCCCCC solid;}
.message-lis .teacher::before { content:""; position:absolute; left:-20px; top:30px; width: 0;
height: 0;
border-style: solid;
border-width: 10px 20px 10px 0;
border-color: transparent #CCCCCC transparent transparent;}

.message-lis .teacher img { width:75px; height:auto; position:absolute; left:10px; bottom:10px;}
.message-lis .teacher p { margin:0 0 0 90px; padding:0;}
.message-lis .teacher .time { margin:0 0 10px 90px; padding:0 0 5px 0; border-bottom:1px #CCCCCC dotted;}

.message-lis .parant { background: #ffffff; min-height:160px; box-shadow:0 0 10px #CCCCCC inset; padding:15px; color:#333333; font-size:14px; border-radius:15px; position:relative; margin: 0 10px 15px 10px; border:5px #FFCC99 solid;}
.message-lis .parant::before { content:""; position:absolute; right:-20px; top:30px; width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 20px;
border-color: transparent transparent transparent #FFCC99;}

.message-lis .parant img { width:75px; height:auto; position:absolute; right:10px; bottom:10px;}
.message-lis .parant p { margin:0 90px 0 0 ; padding:0;}
.message-lis .parant .time { margin:0 90px 10px 0 ; padding:0 0 5px 0; border-bottom:1px #CCCCCC dotted;}

.more-message { text-align:center; padding:0 0 20px 0; }
.more-message a { display:block; margin:0 auto; color:#333; width:150px; }
.more-message a:hover { opacity:0.6;}
.more-message a span { width:24px; display:block; margin:5px auto; }
.more-message a span img { width:100%; height:auto;}


/* newsletter */
.newsletter-box { background:#ffffff; box-shadow:0 0 10px #CCCCCC inset; padding:15px;  border-top:4px #3987d7 solid;  border-bottom:4px #3987d7 solid; border-radius:15px; overflow:hidden;} 
.newsletter-box img { max-width:100%; width: auto; height:auto;}
.newsletter-box .time {  background:#3987d7; padding:10px 15px; font-size:18px; color:#ffffff; margin:-15px -15px 10px -15px; }
.newsletter-box .time span { display:block; font-size:14px; padding:5px 0 0 0; color:#CCC; }

.newsletter-list { }
.newsletter-list ul { padding:0; margin:0; list-style:none; }
.newsletter-list ul li { position:relative; padding:0 0 10px 0;}
.newsletter-list ul li:first-child .time { background:#C90; }
.newsletter-list ul li:first-child a {border:1px #C90 solid; border-left:0; color:#F00; }
.newsletter-list ul li .time { background:#0b87ce; width:65px; height:65px; color:#ffffff; text-align:center; padding:10px; font-size:16px; float:left;  border-radius:5px 0 0 5px;}
.newsletter-list ul li .time span { display:block; }
.newsletter-list ul li a { background:#ffffff; display:block; font-size:16px; color:#171717; line-height:2em; text-align:left; margin-left:65px; height:65px; overflow:hidden; padding:0 15px; border:1px #6699FF solid; border-left:0;  border-radius: 0 5px 5px 0;}
.newsletter-list ul li a:hover { background: #FBF3EA; color:#C60; }

/*  index-news  */
.i-news { padding:10px  0px 0; }
.i-team { background:#ffe6c9; padding:10px 0 0px 0;}

.news-more { }
.news-more a { background:#2496a0; color:#ffffff; font-size:14px; display: inline-block; padding:10px 50px; }
.news-more a:hover { background:#900;}

.index-one { float:left; width:60%; padding:0 10px;}
.index-one .photo { background:#ffffff; padding:10px; border:1px #c7c7c7 solid; float:left; width:30%; }
.index-one .photo img { width:100%; height:auto;}
.index-one .photo:hover { opacity:0.6;}
.index-one .cont { float:left; width:70%; padding:0 10px 0 20px;}
.index-one .time { color:#d42e2e; font-size:18px; }
.index-one h3 { font-size:18px; color:#000000; margin:0 0 10px 0; padding:0; }
.index-one p { margin:0; padding:10px 0; font-size:16px; color:#686868; line-height:1.6em;}

.index-list { paddingt:0px; float:left; width:40%;}
.index-list ul { list-style:none; margin:0; padding:0 10px 0 0; }
.index-list ul li { padding:5px 0;  border-bottom:1px #d42e2e dotted; font-size:16px; }
.index-list ul li span { float:left; width:95px; color:#d42e2e; border-right:1px #d42e2e solid; line-height:1.2em; }
.index-list ul li a { color:#333; display:block;  margin-left:110px; }
.index-list ul li a:hover { color:#F60;}

.index-more { padding-top:30px; margin-bottom:0px; }
.index-more .more-box { border-bottom:1px #e99696 solid; position:relative; height:0; }
.index-more .more-box a { background:#ffffff; display:block; width:120px; padding:5px 10px; font-size:15px; color:#d42e2e; border:1px #d42e2e solid; position:absolute; left:50%; top:0; margin:-16px 0 0 -60px; text-align:center;}
.index-more .more-box a:hover { background:#d42e2e; color:#ffffff;}

.i-box { padding: 20px 0 0 0;}
.i-box-3 { padding: 20px 0 0 0; margin:0 -0.5%;}
.i-sup { float:left; width:65%;} 


.i-about { width:100%; padding:20px 0 100px 0; background:url(../images/index-bg02.jpg) #ffffff bottom no-repeat; background-size: cover; position:relative; }
.i-facebook { max-width:500px; margin:0 auto; overflow:hidden;  }

.team-lis { max-width:1200px; margin:0 auto; padding-bottom:30px; }
.team-lis .item { background:#3987d7; display: inline-block; text-align:center; width:20%; margin:2%; border-radius:99em; overflow:hidden; color:#ffffff; position:relative; cursor:pointer; transition: all 0.3s ease 0s;}
.team-lis .item:hover { background:#63C; transition: all 0.3s ease 0s;}
.team-lis .item a { height:0; width:100%; padding-bottom:100%; display:block; position:relative; z-index:10;}
.team-lis .item h3 { margin:0; padding:10% 0 0 0; width:100%; height:100%; position:absolute; top:0; left:0; z-index:5; font-weight:normal; font-size:36px;}
.team-lis .item h3 img { width:40%; display:block; padding:0; margin:0 auto;}
.team-lis .item h3 span { display:block; font-size:16px; }

.i-video { background:url(../images/i-video-bg.jpg) center no-repeat; background-size: cover; width:100%; overflow:hidden;}
.i-video .v-box { position:relative; height:0; width:100%; padding-bottom:45%;}

.i-event-bg { background:url(../images/index-bg01.jpg) center no-repeat; background-size:cover; text-align:center; padding:50px 20px; position:relative;}
.i-event-top-bg { width:100%; height:auto; position:absolute; top:0; left:0;}
.i-event-bottom-bg { width:100%; height:auto; position:absolute; bottom:0; left:0;}
.i-event-box { max-width:1200px; margin:0 auto; padding:50px 0;}
.i-event { display:inline-block; width:47%; margin:1%; }
.i-event h3 { position:relative; border-left:8px #0b87ce solid; font-size:30px; line-height:30px; color:#2d2d2d; padding:0 0 0 30px; font-weight:normal; margin:0 0 20px 0; text-align:left;}
.i-event h3 span { font-size:30px; color:#b3b3b3;}
.i-event h3 a { background:#454749; display:block; position:absolute; top:0px; right:0px; font-size:16px; line-height:30px; color:#ffffff; padding:0 30px; border-radius:99em;}
.i-event h3 a:hover { background: #66C;}

.i-event ul { padding:0; margin:0; list-style:none; }
.i-event ul li { position:relative; border-bottom:1px #dfdfdf solid; padding:10px 0;}
.i-event ul li .time { background:#0b87ce; width:65px; height:65px; color:#ffffff; text-align:center; padding:10px; font-size:16px; float:left;}
.i-event ul li .time span { display:block; }
.i-event ul li a { display:block; font-size:16px; color:#171717; line-height:2em; text-align:left; margin-left:80px; height:65px; overflow:hidden;}
.i-event ul li a:hover { color:#C60; }
	  


/* birthday */
.the-month-star { text-align:center;}
.the-month-star h3 { text-align:center; font-weight:normal; padding:10px 0;}
.the-month-star h3 img { max-width:400px; width:auto; height:auto; padding:0 10px;}
.birth-star { display:inline-block; width:21%; margin:1%; position:relative;}
.birth-star .item { position:absolute; top:0; left:0; width:100%; height:100%;  background-size:cover; background-repeat:no-repeat;}
.birth-star span { display:block; width:100%; height:0; padding-bottom:100%; }
.birth-star .name { background: rgba(0,0,0,0.9); color:#ffffff; padding:5px 10px; text-align:center; position:absolute; bottom:0; left:0%; border-radius:5px;}
.birth-star .border-box { background-size:cover; background-repeat:no-repeat; position:absolute; top:0; left:0; width:100%; height:100%;  }
.birth-star .style01 { background-image:url(../images/border001.png);}
.birth-star .style02 { background-image:url(../images/border002.png);}
.birth-star .style03 { background-image:url(../images/border003.png);}
.birth-star .style04 { background-image:url(../images/border004.png);}

.month-list { }
.month-list ul { list-style:none; padding:0; margin:0 -1%;}
.month-list ul li { background:#6fd5ff; width:23%; float:left; margin:0 1% 2% 1%; border-radius:5px; overflow:hidden; position:relative; transition: all 0.3s ease 0s;}
.month-list ul li:hover { background:#66C; transition: all 0.3s ease 0s;}
.month-list ul li a { display:block; width:100%; height:0; padding-bottom:100%; position:relative; z-index:10; }
.month-list ul li .itme { color:#ffffff; position:absolute; z-index:1; width:100%; height:100%; cursor:pointer; background-size:cover; border:5px #999999 solid;
display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
 }
.month-list ul li .itme:hover { opacity:0.6;}
 
.month-list ul li .itme>div { }
.month-list ul li .month01 { background-image:url(../images/month01.jpg);}
.month-list ul li .month02 { background-image:url(../images/month02.jpg);}
.month-list ul li .month03 { background-image:url(../images/month03.jpg);}
.month-list ul li .month04 { background-image:url(../images/month04.jpg);}
.month-list ul li .month05 { background-image:url(../images/month05.jpg);}
.month-list ul li .month06 { background-image:url(../images/month06.jpg);}
.month-list ul li .month07 { background-image:url(../images/month07.jpg);}
.month-list ul li .month08 { background-image:url(../images/month08.jpg);}
.month-list ul li .month09 { background-image:url(../images/month09.jpg);}
.month-list ul li .month10 { background-image:url(../images/month10.jpg);}
.month-list ul li .month11 { background-image:url(../images/month11.jpg);}
.month-list ul li .month12 { background-image:url(../images/month12.jpg);}

/* group */
.group-lis { text-align:center; }
.group-lis .item-box { display: inline-table; width:30%; padding:0 30px; }
.group-lis .item-box .photo { width:170px; background-size:cover; background-position:center; margin:0 auto; border-bottom:5px #3399FF solid;  border-radius:50%; overflow:hidden;}
.group-lis .item-box .photo span { width:100%; height:0; padding-bottom:100%; display:block;}
.group-lis .item-box .photo img { height:100%; width:auto;}
.group-lis .item-box h3 { font-size:20px; font-weight:500; margin:10px 0; padding:0 0 10px 0; border-bottom:1px #e5e5e4 solid; }
.group-lis .item-box h3 span { font-size:14px; color:#787878; display:block; }
.group-lis .item-box p { font-size:14px; color:#787878; line-height:1.6em; text-align:left;}


/* news */ 
.news-list { paddingt:0px; min-height:300px;}
.news-list ul { list-style:none; margin:0; padding:0 0 10px 0; }
.news-list ul li { background:#F2F2F2; width:23%; margin:1%; float:left; border:7px #F2F2F2 solid; overflow:hidden; border-radius:7px; transition: all 0.3s ease 0s;}
.news-list ul li:hover { background:#3987d7; border:7px #3987d7 solid; transition: all 0.3s ease 0s; }
.news-list ul li .photo { width:100%; background-size:cover; background-position:center; background-repeat:no-repeat; position:relative; overflow:hidden; border-radius:5px;}
.news-list ul li .photo a { display:block; width:100%; padding-bottom:100%; height:0; background-size:cover; position:relative; z-index:10;}
.news-list ul li .photo a:hover { opacity:0.8;} 
.news-list ul li .photo .info { background:rgba(57,135,215,0.9); display:flex; position:absolute; width:100%; top:65%; bottom:0; text-align:center; opacity:0; color: #ffffff; padding:10px;
display:flex; text-align:center;
-webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
   opacity:1;
   z-index:1;
   transition: all 0.3s ease 0s;
}
.news-list ul li .photo .info span.time { color: #ffffff; font-size:16px; display:block; line-height:1.2em; padding:5px 0; }
.news-list ul li .photo .info p { margin:0; padding:0;  max-height:2.8em; line-height:1.4em; overflow:hidden; text-align:left; }
.news-list ul li .photo .info .more { font-size:12px; display: none; color: #ffffff; padding-top:5px;}


.news-cont { position:relative; z-index:10; padding-bottom:10px;}
.news-title { font-size:30px; margin:0 0 10px 0; padding:0 0 10px 0; color:#333; font-weight:normal; border-bottom:1px #999999 dotted;}
.news-time { font-size:18px; margin:0 0 10px 0; color:#a8a69c; font-weight:normal; }
.news-content { font-size:16px; line-height:1.6em; padding:20px 0; color:#3a3a3a;}
.news-content img { display:block; width:auto; height:auto; max-width:100%; margin-bottom:10px;}

.news-list02 { }
.news-list02 ul { padding:0; margin:0; list-style:none; }
.news-list02 ul li { position:relative; border-bottom:1px #dfdfdf solid; padding:10px 0;}
.news-list02 ul li .time { background:#0b87ce; width:65px; height:65px; color:#ffffff; text-align:center; padding:10px; font-size:16px; float:left;}
.news-list02 ul li .time span { display:block; }
.news-list02 ul li a { 
    display: block; 
    font-size: 16px; 
    color: #171717; 
    line-height: 2em; 
    text-align: left; 
    margin-left: 80px; 
    height: auto;          /* 1. 從 65px 改為 auto，讓高度隨文字多寡自動延伸 */
    overflow: visible;     /* 2. 從 hidden 改為 visible，讓超出 65px 的字正常顯示不被遮蓋 */
}
.news-list02 ul li a:hover { color: #C60; }
.news-list02 ul li a:hover { color:#C60; }

/* download */
.download-list { }
.download-list ul { padding:0; margin:0; list-style:none; }
.download-list ul li { position:relative; padding:0 0 5px 0; display: flex;}
.download-list ul li a.tab { background:#0b87ce; width:100px; line-height:22px; color:#ffffff; min-height:50px; text-align:center; padding:7px 10px; font-size:12px; float:right; border-radius:0 5px 5px 0px; margin-right:0px; -webkit-flex: initial; flex: initial;}
.download-list ul li a.tab:hover { background:#639;}
.download-list ul li a.tab::after { content:""; background:url(../images/download_icon.png); display: inline-block; background-size:cover; width:24px; height:24px; vertical-align:middle;}

.download-list ul li span { background:#ffffff; display:block; border:1px #CCCCCC solid; border-right:0; padding:2px 0 0 10px; font-size:16px; color:#171717; line-height:1.6em; text-align:left;  min-height:30px; float:left; border-radius:5px 0px 0px 5px; -webkit-flex: 1; flex: 1; min-height:50px;}


/* album */ 
.album-list { paddingt:0px; min-height:300px;}
.album-list ul { list-style:none; margin:0; padding:0 0 10px 0; }
.album-list ul li { background:#F2F2F2; width:31.33%; margin:1%; float:left; border:7px #F2F2F2 solid; overflow:hidden; border-radius:7px; transition: all 0.3s ease 0s;}
.album-list ul li:hover { background:#3bc1ff; border:7px #3bc1ff solid; transition: all 0.3s ease 0s; }
.album-list ul li .photo { width:100%; background-size:cover; background-position:center; background-repeat:no-repeat; position:relative; overflow:hidden; border-radius:5px;}
.album-list ul li .photo a { display:block; width:100%; padding-bottom:120%; height:0; background-size:cover; position:relative; z-index:10;}
.album-list ul li .photo a:hover { opacity:0.8;} 
.album-list ul li .photo .info { background:rgba(57,135,215,0.9); display:flex; position:absolute; width:100%; top:65%; bottom:0; text-align:center; opacity:0; color: #ffffff; padding:10px;
display:flex; text-align:center;
-webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
   opacity:1;
   z-index:1;
   transition: all 0.3s ease 0s;
}
.album-list ul li .photo .info span.time { color: #ffffff; font-size:20px; display:block; line-height:1.2em; padding:5px 0; }
.album-list ul li .photo .info p { margin:0; padding:0;  max-height:2.8em; line-height:1.4em; overflow:hidden; text-align:left; }
.album-list ul li .photo .info .more { font-size:12px; display:block; color: #ffffff; padding-top:5px;}


.album-cont { position:relative; z-index:10; padding-bottom:10px;}
.album-title { font-size:30px; margin:0 0 10px 0; padding:0 0 10px 0; color:#333; font-weight:normal; border-bottom:1px #999999 dotted;}
.album-time { font-size:18px; margin:0 0 10px 0; color:#a8a69c; font-weight:normal; }
.album-content { font-size:16px; line-height:1.6em; padding:20px 0; color:#3a3a3a;}
.album-content img { display:block; width:auto; height:auto; max-width:100%; margin:10px auto;}


/* index-main-news */
.index-main-news { padding:20px 20px 20px 100px; max-width:1200px; background:#5097f3; margin:0 auto; position: relative; }
.index-main-news a { color:#ffffff; font-size:16px;}
.index-main-news .news-icon { position:absolute; top:0; bottom:0; left:0; width:80px; background:#339; color: #6FF; line-height:60px; text-align:center;}

.i-tool-area { max-width:1200px; margin:0 auto;}
.i-facebook { float:left; width:35%; height:500px; margin-right:5%;}
.i-googlemap {float:left; width:60%; height:500px; padding:10px; background:#ffffff; }

/* footer */
footer { background:#4f98f4; background-size:cover; padding:0px 0 0px 0; position:relative;}
.foot-link { max-width:1200px; padding:35px 0; margin:0 auto;}
.foot-link ul {  margin:0 auto; list-style:none; padding:0px 0; text-align:center; margin:0 -1.2%;}
.foot-link ul li { display:inline-block; margin:0 0.6%; vertical-align:top; width:18%;}

.foot-link ul li a { background:#ffffff; color:#20747c; width:150px; height:150px; display:block; padding:25px; border-radius:99em; margin:0 auto 20px auto; position:relative;}
.foot-link ul li a img { width:100%; height:auto;}
.foot-link ul li a:hover { opacity:0.9; }
.foot-link ul li a::after { content:""; 
width: 0;
height: 0;
border-style: solid;
border-width: 15px 10px 0 10px;
border-color: #ffffff transparent transparent transparent; 
position:absolute; bottom:-10px; left:50%; margin-left:-10px; }

.foot-link ul li span { display:block; text-align:center; font-size:16px; color:#ffffff;}
.foot-link ul li .info { color: #FF9; padding-top:5px; display:block; font-size:12px; }
.foot-icon { height:18px; width:auto; padding-right:10px;}

footer .bg { }

.foot-btn { text-align:center; }
a.go-visit { background:#094794; display: inline-block; text-align:center; margin:10px; color:#FFF; font-size:24px; width:240px; padding:5px 15px; border-radius:99em;  vertical-align:middle;}
a.go-visit:hover { background: #339;}
a.go-visit img { width:24px; height:auto; margin-right:5px; vertical-align: baseline;}


.foot-info { color:#ffffff; max-width:1200px; margin:0 auto; padding:10px 0 30px 0; font-size:16px; line-height:1.6em; text-align:center;}
.foot-info h3 { font-weight:normal; font-size:24px; vertical-align:middle;}
.foot-info h3 img { width:30px; height:auto; margin-left:5px; display:inline-block; vertical-align: text-bottom;}
.foot-info a { color:#ffffff;}
.foot-info a:hover { color:#FF0;}
.copyright { background:#59bfff; padding:10px 0 15px 0; font-size:14px; text-align:center; padding:22px; color:#ffffff;}
.wrap {}

footer a.btn-top { display:block; width:90px; height:90px; background:#4f98f4; padding:15px 21px 21px 21px; position:absolute; top:-40px; left:50%; margin-left:-45px; border-radius:99em;}

/* form */
.form { max-width:500px; margin:0 auto; }
.form .note { font-size:16px; color:#F30; padding:0 0 10px 0;}
.form .form-lis { display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap; font-size:14px; line-height:1.2em; padding:3px 0;}
.form .form-lis .title { display:block; font-size:14px; color:#333333; width:120px; padding:5px 7px; text-align:right;}
.form .form-lis .data {  display:block; padding:5px 7px; -webkit-flex: 1; flex: 1; font-size:14px; color: #666; border:1px #CCCCCC solid; border-radius:3px;}
.form .form-lis input.data {width:100%; font-size:14px; font-family:Microsoft JhengHei; border:1px #CCCCCC solid;  border-radius:3px; }
.form .form-lis textarea.data { border:0; width:100%; font-size:14px; font-family:Microsoft JhengHei;  border:1px #CCCCCC solid; border-radius:3px;}
.form .form-lis .code {  background:#ececec; display:block; padding:0; -webkit-flex: 1; flex: 1; font-size:14px; color: #666;}
.form .form-lis .code img.img-code { height:29px; width:auto; float:right;}
.form .form-lis .code input { border:0;  font-size:14px; font-family:Microsoft JhengHei;padding:5px 7px; }

.botton-m { text-align:center; font-size:14px; margin-top:10px; padding:10px 0 20px 0; }
.botton-m a { display:inline-block; color:#ffffff; padding:5px 15px; font-size:16px; border-radius:3px;}
.botton-m a.left { background:#5dc2cc; margin-right:5px;}
.botton-m a.left:hover { background: #C60;}
.botton-m a.mid { background:#933; margin-right:5px;}
.botton-m a.mid:hover { background:#C03;}
.botton-m a.right { background:#2496a0; }
.botton-m a.right:hover { background:#F03;}


/* login */


.login-bg { background:url(../images/login-bg.jpg) no-repeat; background-size:cover; max-width:300px; margin:0 auto; padding:30px 30px;  border-top:5px #6666CC solid; border-bottom:5px #6666CC solid;  border-radius:10px; }
.login .form-lis { display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap; font-size:14px; line-height:1.2em; padding:3px 0;}
.login .form-lis .title { display:block; font-size:14px; color:#333333; width:80px; padding:5px 7px; text-align:right; border-left:3px #2496a0 solid;  }
.login .form-lis .data { border:1px #ececec solid; display:block; padding:5px 7px; -webkit-flex: 1; flex: 1; font-size:14px; color:#ffffff;}
.login .form-lis input.data { width:100%; font-size:14px; font-family:Microsoft JhengHei; }
.login .form-lis textarea.data { width:100%; font-size:14px; font-family:Microsoft JhengHei; }
.login .form-lis .code { background:#e7dcdc; display:block; padding:0; -webkit-flex: 1; flex: 1; font-size:14px; color: #666;}
.login .form-lis .code img.img-code { height:29px; width:auto; float:right;}
.login .form-lis .code input { background:#e7dcdc; border:0;  font-size:14px; font-family:Microsoft JhengHei;padding:5px 7px;color:#ffffff; }
.login .btn { padding:20px 0 10px 0; text-align:center;}
.login .btn a { background:#2496a0;color:#ffffff; border:0; font-size:14px; padding:5px 10px;  border-radius:3px; }
.login .btn a:hover { background:#6a3939; } 

.btn { padding:10px; text-align:center; }
.btn a { background: #F4F4F4; color:#666666; display: inline-block; padding:5px 15px; border:2px #D4D4D4 solid;}
.btn a:hover { background:#D4D4D4; color:#ffffff;}

/* message */
.message-box { padding:50px 0;}
.message-box .table-box { background: url(../images/cart-bg.jpg); padding:10px 20px; max-width:500px; margin:0 auto; border:5px #E2E2E2 solid; }
.message-box .table-box h3 { font-weight:normal; margin:0 0 10px 0; padding-bottom:10px; font-size:16px; border-bottom:1px #CCCCCC dotted;}
.message-box .table-box h3 img { height:18px; opacity:0.5; padding:0 5px 2px 0;}
.message-box .table-box .content { font-size:14px; line-height:1.6em; min-height:100px;}
.message-box .table-box .content span { color:#C30;}
.message-box .table-box .forget { padding-top:10px; font-size:14px; line-height:1.6em; min-height:100px; color:#C30;}
 

/* bookmark */
.bookmark { text-align:center; font-size:16px; padding:10px 0; color: #666; margin:0px 0 5px 0;}
.bookmark a { background:#4f98f3; display:inline-block; border:0; padding:5px 10px; color: #ffffff; margin:5px; border-radius:3px;}
.bookmark a:hover { background: #339; color:#ffffff;}
.bookmark select { background:#4f98f3; border:0; padding:5px; color: #ffffff; margin:0 2px; border-radius:3px;}

/* 框架 */

.col-box { margin:0 -0.5%; }
.col-box:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}/* Hides from IE-mac \*/
* html .col-box {height: 1%;}/* End hide from IE-mac */

.content-box img { max-width:100%; width:auto; height:auto;}
.col-1 { width:8.33%; margin:0.5%; float:left;}
.col-2 { width:15.66%; margin:0.5%; float:left;}
.col-3 { width:23.99%; margin:0.5%; float:left;}
.col-4 { width:32.32%; margin:0.5%; float:left;}
.col-5 { width:40.65%; margin:0.5%; float:left;}
.col-6 { width:48.98%; margin:0.5%; float:left;}
.col-7 { width:57.31%; margin:0.5%; float:left;}
.col-8 { width:65.64%; margin:0.5%; float:left;}
.col-9 { width:73.97%; margin:0.5%; float:left;}
.col-10 { width:82.3%; margin:0.5%; float:left;}
.col-11 { width:90.63%; margin:0.5%; float:left;}
.col-12 { width:99%;margin:0.5%;}

/***** 表單預設文字顏色設定 *****/
/* 通用 */
::-webkit-input-placeholder { color:#836363; }
::-moz-placeholder { color:#836363; } /* firefox 19+ */
:-ms-input-placeholder { color:#836363; } /* ie */
input:-moz-placeholder { color:#836363; }

/* webkit专用 */
#field2::-webkit-input-placeholder { color:#836363; }
#field3::-webkit-input-placeholder { color:#836363; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#836363; }

/* mozilla专用 */
#field2::-moz-placeholder { color:#836363; }
#field3::-moz-placeholder { color:#836363; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#836363; }



/* Parallax base styles 滾動視差 */
      .parallax {
        height: 500px; /* fallback for older browsers */
        height: 100vh;
        overflow-x: hidden;
        overflow-y: scroll;
        -webkit-perspective: 300px;
        perspective: 300px;
      }
      .parallax__group {
        position: relative;
        height: 500px; /* fallback for older browsers */
        height: 100vh;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
      }
      .parallax__layer {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }
      .parallax__layer--fore {
        -webkit-transform: translateZ(90px) scale(.7);
        transform: translateZ(90px) scale(.7);
      }
      .parallax__layer--base {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
      }
      .parallax__layer--back {
        -webkit-transform: translateZ(-300px) scale(2);
        transform: translateZ(-300px) scale(2);
      }
      .parallax__layer--deep {
        -webkit-transform: translateZ(-600px) scale(3);
        transform: translateZ(-600px) scale(3);
      }
      .parallax__group {
        -webkit-transition: -webkit-transform 0.5s;
        transition: transform 0.5s;
      }
	  
	  /* ==========================================================================
   1. 照片等比例縮小在框內 (不變形、完整呈現)
   ========================================================================== */
.album-list ul li .photo {
    width: 100%;
    /* 確保父層格子有固定高度或比例 */
    aspect-ratio: 1 / 1; /* 或者是原先 CSS 內規定的高度，設定 1/1 會變正方形框 */
    overflow: hidden;
    position: relative;
    background: #f4f4f4; /* 圖片縮小後，框內留白處的背景顏色 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.album-list ul li .photo img {
    width: 100%;
    height: 100%;
    /* 關鍵核心：contain 確保整張圖等比例縮小在框內，不被裁切且不變形 */
    object-fit: contain; 
}

/* ==========================================================================
   2. 本頁點擊跳出窗框 (Lightbox) 樣式
   ========================================================================== */
.lightbox-overlay {
    display: none; /* 預設隱藏 */
    position: fixed;
    z-index: 10000; /* 確保在最上層 */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* 遮罩黑底 */
    align-items: center;
    justify-content: center;
}

/* 彈窗打開時的控制類別 */
.lightbox-overlay.active {
    display: flex;
}

/* 彈窗內放大後的大圖 */
.lightbox-content {
    max-width: 85%;
    max-height: 85%;
    object-fit: contain;
    border: 4px solid #fff;
    box-shadow: 0 0 20px rgba(0,0,0,0.6);
    animation: zoomIn 0.3s ease; /* 淡淡的放大動畫 */
}

/* 右上角關閉按鈕 */
.lightbox-close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}
.lightbox-close:hover {
    color: #ff6666;
}

/* 放大動畫 */
@keyframes zoomIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}