@charset "utf-8";
@import url("reset.css");
@import url("loading.css");
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> Main <<<------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; letter-spacing:1px; }
html { height:100% }
body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; -webkit-text-size-adjust:none; font-size:12px; overflow-y:scroll; overflow-x:hidden; }
body, select, input { font-size:12px; font-family: /*Arial,*/ "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "Microsoft JhengHei", "新細明體", "PMingLiU", sans-serif; color:#333333; }
/*簡易設定*/
.iframe_ch { display:none }
.middle { vertical-align:middle; }
.center { text-align:center; }
.w100 { width:100%; }
/*fix safari*/
input, select, textarea { -ms-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box; -webkit-box-sizing:content-box; }
input[type='text'], input[type='password'], input[type='button'], input[type='submit'] { -webkit-appearance: none; }
/*分頁*/
.pager { width:100%; overflow:hidden; margin:50px auto 50px auto; text-align:center; }
/*編輯器*/
.editor { padding:30px 0 20px 0; font-size:16px; line-height:30px; overflow:auto; }
/*連結*/
a { color:#000000; text-decoration:none; }
a:hover { color:#506267; }
/*表格*/
#css-table { display:table; width:100%; }
.css-tr { display: table-row; }
.css-td { display: table-cell; text-align:left; vertical-align:middle; padding: 0px 10px; box-sizing:border-box; letter-spacing:1px; font-size:14px; color:#121212; }
/*全營幕遮罩*/ 
.bg-overlay { display:block; position:fixed; left:0; top:0; background:rgba(0, 0, 0, 0.7); opacity:0; visibility:hidden; width:100%; height:100%; z-index:9999; transition: all 0.2s linear; }
.bg-overlay.visible { opacity:1; visibility:visible }
/*按鈕*/
.btn-1 { display:inline-block; color: #ffffff; background: #6f1d1e; padding: 12px 40px; margin: 0 5px; font-size: 16px; border: 1px solid #6f1d1e; cursor:pointer; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; }
.btn-1:hover { transition: all 0.5s linear; background: #6f1d1e; color:#ffffff; }
/*首頁大標題*/
.b-title { text-align:center; max-width: 530px; font-size:30px; color:#000000; letter-spacing: 3px; text-transform:uppercase; font-size: 1.5vw; letter-spacing: 5px; margin: 10px auto 2vw auto; padding: 10px 0 20px 0; font-family: 'Noto Sans TC', sans-serif; }
.b-title span { display:block; color:#a1a1a0; font-size:14px; padding: 20px 0 15px 0; letter-spacing:2px; }
.b-title .line { display:flex; width:100%; max-width:220px; height:3px; margin:30px auto 20px auto; }
.b-title .line .left { flex:1; height:3px; background:#f7b751; }
.b-title .line .right { flex:1; height:3px; background:#f7e251; }
/*banner大標題*/
.b-title2 {text-align: left;font-size: 40px !important;font-weight: bold;color:#ffffff;letter-spacing: 3px;text-transform:uppercase;font-size: 1.5vw;letter-spacing: 15px;text-shadow: 1px 1px 1px #000000;margin: 10px 0 2vw 0;padding: 10px 10px 20px 10px;font-family: 'Noto Sans TC', sans-serif;}
.b-title2 span { display:block; color:#a1a1a0; font-size:14px; padding: 20px 0 15px 0; letter-spacing:2px; }
.b-title2 .line { display:flex; width:100%; max-width:220px; height:3px; margin: 30px 0 20px 0; }
.b-title2 .line .left { flex:1; height:3px; background:#f7b751; }
.b-title2 .line .right { flex:1; height:3px; background:#f7e251; }
/*內頁標題*/
.s-title { width: 100%; font-size: 24px; text-shadow: 1px 1px 1px #CCCCCC; color:#000000; padding: 30px 0 10px 0; margin: 0 0 0px 0; border-bottom: 1px solid #dbdbdb; }
.s-title span { border-left:3px solid #fac32f; padding: 5px 0; display:inline-block; padding-left: 10px; }
/*麵包屑*/
#sitemap { width:100%; box-sizing: border-box; padding:15px; background:#eaeaea; }
#sitemap .wrap { width:100%; max-width:1400px; margin:0 auto; font-size:14px; letter-spacing:1px; }
#sitemap .wrap a { color:#757575; }
/*分頁*/
.pager {width:100%;overflow:hidden;margin: 30px auto 30px auto;text-align:center;}
/*回上頁*/
.gotop { position:absolute; top:20px; right:20px; z-index:99; opacity:.7 }
/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Common <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

#wrapper { width:100%; overflow:hidden; }
#header { z-index:9; width:100%; background:#ffffff; box-shadow: 5px -5px 8px -5px rgba(20%, 20%, 20%, 0.5) inset; }
#header .wrap { position:relative; max-width:1400px; height: 150px; margin:0 auto; }
#header .logo { position:absolute; top:20px; left:10px; }
#header nav { position:absolute; top:30px; right:10px; font-size:14px; }
#header nav a { margin:0 5px; color:#282828; text-decoration:none; }
#header nav a:hover { color:#a97b2f; }
#header nav a:before { content:url(../../images/nav-dot.png); vertical-align:15%; padding-right:6px; }
#menu { width:100%; max-width:1200px; height:60px; line-height: 60px; font-size: 14px; background:#6f1d1e; color: #ffffff; text-align: center; position:absolute; top: 120px; margin-left: auto; margin-right: auto; left: 0; right: 0; z-index:9; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; }
#menu span { position:relative; padding:20px 0; }
#menu span .menu-sub { display:none; position:absolute; top: 59px; left: -40px; width: 200px; line-height: 25px; background:#ffffff; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }
#menu span:hover .menu-sub { display:block; }
#menu span:hover { background:url(../../images/menu-bg.png) no-repeat center center; }
#menu span a { font-size:16px; color:#ffffff; padding:0 25px; border-left:1px solid #ffffff; }
#menu span div a { display:block; color:#000000; padding:10px 20px; text-align:left; border-bottom:1px solid #e7e7e7; }
#menu span div a:hover { background:#ebebeb; }
#menu span div a:before { content:url(../../images/nav-dot.png); padding-right:8px; }
#menu-bar { display: none; position:absolute; right: 15px; top: 50px; color: #000000; font-size: 30px; cursor:pointer; }
/*inner banner*/
#inner_banner { width:100%; height:450px; overflow: hidden; position: relative; margin:0px auto 0 auto; }
#inner_banner .wrap { position:relative; max-width:1400px; height: 450px; margin: 0 auto; display: flex; align-items: flex-end; justify-content: flex-start; }
/*左右欄的頁面*/
.container .layout-left { width: 25%; float:left; box-sizing: border-box; padding: 50px 30px 50px 10px; }
.container .layout-right { width: 75%; float:left; box-sizing: border-box; padding: 50px 10px; }
/*左邊選單*/
.layout-left .caption { color:#a97b2f; font-size: 20px; margin-bottom: 25px; letter-spacing: 2px; font-family: 'Noto Sans TC', sans-serif; }
.layout-left > ul { list-style:none; margin:0; padding:0; border-top:5px solid #721f6d; }
.layout-left > ul > li { width: 100%; font-size:16px; }
.layout-left > ul > li em { font-style:inherit; width:20px; display:inline-block; }
.layout-left > ul > li > a {position:relative;color:#000000;font-size: 18px;text-decoration:none;display: block;letter-spacing: 3px;padding: 17px 30px 17px 10px;border-bottom: 1px dashed #cccccc;text-shadow: 1px 1px 1px #CCCCCC;}
.layout-left > ul > li a:before { padding-right: 10px; vertical-align: 10%; content:url(../../images/nav-dot.png); }
.layout-left > ul > li:hover { /*background:#bbd2ed; transition: all 0.5s ease;*/ }
.layout-left > ul > li ul { display:block; list-style:none; margin:0; padding:0; }
.layout-left > ul > li ul li { width:100%; font-size:15px; }
.layout-left > ul > li ul li:hover { box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 0px 10px 0 rgba(0, 0, 0, 0.19); }
.layout-left > ul > li ul li:last-child { border-bottom:0; }
.layout-left > ul > li ul li:hover { /*background:#e1ebf2; transition: all 0.5s ease;*/ }
.layout-left > ul > li ul li a { color:#000000; text-decoration:none; display: block; padding: 15px 10px 15px 15px; }
.layout-left > ul > li ul li a:before { content:""; }
.layout-left > ul > li ul li.third { padding-left:20px; }
.layout-left > ul li:hover ul { /*display:block; height:inherit; transition: all 0.5s ease;*/ }
/*Footer*/
#footer { width:100%; overflow:hidden; background: #6f1d1e; padding:0 20px; box-sizing:border-box; }
#footer .footer_wrap { position:relative; max-width:1400px; overflow:hidden; margin:0 auto; padding: 30px 10px 0 10px; background: url(../../images/footer-bg.png) top right no-repeat; }
.footer_info { display:flex; position:relative; color: #ffffff; max-width:1400px; border-bottom: 1px solid #8f2c2e; text-align:left; margin:0 auto; overflow:hidden; padding:30px 0 20px 0; box-sizing:border-box; letter-spacing:1px;/*background:url(../../images/footer-bg.png) right top no-repeat;*/ }
.footer_info .left { flex: 1.5; }
.footer_info .right { flex:1; }
.contact-info { color: #ffffff; font-size:14px; display:flex; width: 100%; padding: 0 0; max-width: 500px; margin: 2vh 0; }
.contact-info .contact-left, .contact-info .contact-right { flex:1; padding: 0 0 0 0px; text-align: left; }
.contact-info .contact-items { display:flex; align-items: flex-start; color:#ffffff; }
.contact-info .contact-items:not(:last-child) {
padding-bottom: 15px;
}
.contact-info .contact-items .items-title { flex: 1; }
.contact-info .contact-items .items-content { flex: 5; color:#ffffff; }
#footer .logo { display:flex; cursor:pointer; }
#footer .logo img { padding-right:15px; }
#footer .logo div span { color: #ffffff; font-size: 24px; font-weight: bold; padding-bottom: 7px; margin-bottom: 5px; letter-spacing:2px; display:block; font-family: 'Noto Sans TC', sans-serif; }
#footer .logo > .word { color: #ffffff; font-size: 12px; display:flex; align-items:center; justify-content: center; }
#footer .logo > .word div { letter-spacing:0.5px; }
#footer .footer_order { float:left; max-width: 229px; padding: 0 0 0 2%; }
#footer .footer_menu { float:left; overflow:hidden; width:100%; padding:0 0 10px 10px; }
#footer .footer_menu_item { display:inline-block; vertical-align:top; width: 190px; min-height:100px; padding: 0 30px 30px 0; }
#footer .footer_menu_title {/* background:url(../../images/footer_icon.png) no-repeat; */ position:relative;/* color:#91ceeb; */ font-size:16px; letter-spacing:1px; padding: 3px 0px 15px 5px; margin-bottom: 15px; color: #ffde7a; font-weight:bold; }
#footer .footer_menu_item a { display:block; padding: 6px 5px; margin: 3px 0; line-height:18px; color: #fff4d6; text-decoration:none; font-size:14px; letter-spacing:1px; }
#footer .footer_menu_item a:before { padding-right:5px; content:url(../../images/footer-dot.png); }
#footer .footer_menu_item a:hover { color:#ffde7a; }
#footer .footer_order_wrap { float:left; max-width: 240px; overflow: hidden; width: 100%; color:#e8e8e8; letter-spacing:1px; line-height:24px; font-size:13px; }
#footer .footer_order_wrap > .title { color:#ffde7a; font-size:16px; letter-spacing:2px; margin:0 0 10px 0; }
#copyright { width:100%; overflow:hidden; background: #6f1d1e; color: #a63b3c; padding:10px 0; letter-spacing:1px; text-align:center; line-height:20px; }
#copyright a { color: #a63b3c; text-decoration:none; }
#copyright a:hover { text-decoration:underline; }
/*附加檔案*/
.attachment { display:flex; width:100%; overflow:hidden; font-size:14px; padding: 50px 0 20px 0; border-bottom:1px dashed #999999; }
.attachment .left {flex:1;display: flex;align-items:center;/* justify-content: center; */}
.attachment .left i { font-size:14px; color:#6f1d1e; padding-right:10px; }
.attachment .right {flex: 5;}
.attachment .right a { display:inline-block; border:1px solid #c0c0c0; padding:10px 20px; margin-bottom:10px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; }
 @media screen and (max-width : 1400px) {
 #inner_banner .wrap {
align-items:center;
justify-content:center;
}
 #footer .footer_wrap {
background:none;
}
}
@media screen and (max-width : 1000px) {
 #header .logo {
max-width:600px;
}
 #menu span a {
padding:0 10px;
font-size:13px;
}
 .footer_info {
display:block;
}
}
@media screen and (max-width : 900px) {
 #header .logo {
position:inherit;
width:80%;
margin:20px 10px;
}
 #header .wrap {
height:auto;
}
 #header nav {
display:none;
}
 #menu {
display:none;
}
 #menu-bar {
display:block;
top: 30%;
}
 #inner_banner {
height:250px;
}
 #inner_banner .wrap {
height:250px;
}
 #index-news .news-frame .news-list {
padding:20px !important;
}
 .container .layout-left {
display:none;
}
 .container .layout-right {
width:100%;
}
.none900{ display:none; }
}
 @media screen and (max-width : 480px) {
 .b-title { font-size:20px; }
 #footer .footer_menu_item a {
padding:5px 5px;
}
.none480{ display:none; }
}
/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Index <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

#index-news { width:100%; min-height: 500px; overflow:hidden; background:url(../../images/news-bg.png) no-repeat; padding:30px 20px; background-size:cover; background-color:#f9f5dd; }
#index-news .news-frame { width:100%; margin: 20px auto; max-width: 1100px; min-height:300px; background:#ffffff; box-shadow: 2px 2px 8px rgba(15%, 15%, 40%, 0.1); }
#index-news .news-frame .news-menu { width:100%; display:flex; }
#index-news .news-frame .news-menu div { flex:1; display: flex; align-items:center; justify-content: center; color:#000000; font-size:16px; background:#c19f68; padding:20px 10px; text-align:center; font-family: 'Noto Sans TC', sans-serif; cursor:pointer; }
#index-news .news-frame .news-menu div:hover { color:#ffffff; background:#a97b2f; }
#index-news .news-frame .news-menu div.on { color:#ffffff; background:#a97b2f; }
#index-news .news-frame .news-content { width:100%; overflow:hidden; }
#index-news .news-frame .news-list {border-bottom: 1px dashed #cccccc;padding: 20px 40px;border-left:5px solid #fac32f;}
#index-news .news-frame .news-list:hover { box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2), 0 0px 20px 0 rgba(0, 0, 0, 0); transition: all 0.5s ease; }
#index-news .news-frame .news-list .date { font-size:14px; color:#8e8e8e; padding: 0 0 10px 0; }
#index-news .news-frame .news-list .date span {display:inline-block;font-size:14px;color:#6f1d1e;margin:0 10px;border:1px solid #d0d0d0;padding: 0px 10px;}
#index-news .news-frame .news-list .title { font-size:16px; color:#000000; padding: 0 0 10px 0; }
#index-news .news-frame .news-list .title a { color:#000000; text-decoration:none; }
#index-news .news-frame .news-list .title a:hover { text-decoration:underline; }
#index-news .news-frame .news-list .content {font-size:14px;color:#b5b1b1;line-height: 25px;}

#index-event { width:100%; background:url(../../images/events-bg.jpg) left top no-repeat; }
#index-event .wrap { display:flex; position:relative; width:100%; max-width: 1200px; overflow:hidden; margin:0 auto; padding:40px 10px; background-color:rgba(255, 255, 255, 0.5);/* min-height:600px; */ }
#index-event .block-1 { flex:1; display:flex; justify-content: flex-end; }
#index-event .block-1 .b-title { text-align:left; margin: 10px 0 2vw 0; font-size: 20px; }
#index-event .block-1 .b-title .line { margin: 20px 0 20px 0; }
#index-event .block-2 {flex: 2;padding:0 50px;}
#index-event .block-3 {flex: 2;position: relative;}
#index-event .block-3 .title { border-left:4px solid #fac32f; padding: 0 0 0px 20px; margin-bottom: 20px; font-size:22px; line-height: 30px; color:#000000; font-family: 'Noto Sans TC', sans-serif; }
#index-event .block-3 .content {color: #5a5a5a;font-size: 16px;line-height: 26px;overflow: hidden; }
#index-event .block-3 .content .row { display: flex; color: #5a5a5a; font-size: 16px; padding: 10px 0; }
#index-event .block-3 .content .row .left { width: 80px; flex:1; }
#index-event .block-3 .content .row .right { flex:5; }
#index-event .block-3 .more {width:100%;overflow:hidden;padding: 20px 0;position: absolute;bottom: 0;}
#index-event .block-3 .more span { float:left; }
#index-event .block-3 .more .events-pager { float:right; margin: 50px 0 0 0; }
 @media screen and (max-width : 1000px) {
 #index-event .wrap {
display:block;
}
 #index-event .block-1 {
justify-content:center;
}
 #index-event .block-1 .b-title {
text-align:center;
}
 #index-event .block-2 {
text-align:center;
}
 #index-event .block-2 img {
width:100%;
max-width:349px;
}
 #index-event .block-3 {
max-width:600px;
margin:20px auto;
}
#index-event .block-3 .more{ position:inherit; }
}
@media screen and (max-width : 468px) {
 #index-event .block-3 .content .row .left {
flex:1.5;
}
}
/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 最新消息 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

/*list*/
#inner-news { width: 99%; min-height: 500px; overflow:hidden; padding: 0px 0px; background-size:cover; }
#inner-news .news-frame { width: 99%; max-width: 1100px; min-height:300px; background:#ffffff; }
#inner-news .news-frame .news-list { border-bottom: 1px dashed #cccccc; padding: 20px 40px; border-left: 3px solid #fac32f; }
#inner-news .news-frame .news-list:hover { box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2), 0 0px 20px 0 rgba(0, 0, 0, 0); transition: all 0.5s ease; }
#inner-news .news-frame .news-list .date { font-size:14px; color:#8e8e8e; padding: 0 0 10px 0; }
#inner-news .news-frame .news-list .date span { display:inline-block; font-size:14px; color:#6f1d1e; margin:0 10px; border:1px solid #d0d0d0; padding:5px 10px; }
#inner-news .news-frame .news-list .title { font-size:16px; color:#000000; padding: 0 0 10px 0; }
#inner-news .news-frame .news-list .title a { color:#000000; text-decoration:none; }
#inner-news .news-frame .news-list .title a:hover { text-decoration:underline; }
#inner-news .news-frame .news-list .content {font-size: 16px;color:#b5b1b1;line-height: 20px;}
/*detail*/
#inner-newsdetail { width: 99%; min-height: 500px; overflow:hidden; padding: 0px 0px; background-size:cover; }
#inner-newsdetail .news-frame { width: 99%; max-width: 1100px; min-height:300px; background:#ffffff; }
#inner-newsdetail .news-frame .news-list { border-bottom: 1px dashed #cccccc; padding: 20px 0 10px 0px; }
#inner-newsdetail .news-frame .news-list .date { font-size:14px; color:#8e8e8e; padding: 0 0 10px 0; }
#inner-newsdetail .news-frame .news-list .date span { display:inline-block; font-size:14px; color:#6f1d1e; margin:0 10px; border:1px solid #d0d0d0; padding:5px 10px; }
#inner-newsdetail .news-frame .news-list .title { font-size: 22px; color:#000000; text-shadow: 1px 1px 1px #CCCCCC; padding: 0 0 10px 0; }
/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 專任教師 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

/*活動圖片裁切*/
.img-teacher-cut {height:275px;overflow:hidden;/*border:1px solid #ccc;*//* line-height: 350px; *//* background: #ebebeb;display: flex;align-items: flex-start;justify-content: center;*/}
.img-teacher-cut img{ vertical-align:middle;}

/*list*/
#teacher-area { width:100%; overflow:hidden; padding: 30px 0; }
#teacher-area .teacher-itmes { float: left; width: 32%; margin: 30px 0.5%; border: 1px solid #cdcdcd; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; }
#teacher-area .teacher-itmes .content { position:relative; padding: 10px 15px; }
#teacher-area .teacher-itmes img { width:100%; -webkit-border-top-left-radius: 25px; -webkit-border-top-right-radius: 25px; -moz-border-radius-topleft: 25px; -moz-border-radius-topright: 25px; border-top-left-radius: 25px; border-top-right-radius: 25px; }
#teacher-area .teacher-itmes .content .more { position: absolute; top: -25px; right: 10px; padding: 20px 8px; font-size: 12px; color:#ffffff; background:#6f1d1e; cursor: pointer; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; }
#teacher-area .teacher-itmes .content .name { color: #1b1b1b; font-size: 20px; text-shadow: 1px 1px 1px #CCCCCC; margin: 5px 0 10px 0; }
#teacher-area .teacher-itmes .content .title { color: #8f8f8f; font-size: 14px; }
#teacher-area .teacher-itmes .content .line { width:100%; height:5px; background:url(../../images/teacher-line.png) left no-repeat; margin: 14px 0; }
#teacher-area .teacher-itmes .content .info { width: 100%; display: flex; font-size: 14px; padding: 5px 0; }
#teacher-area .teacher-itmes .content .info .left { flex: 1; }
#teacher-area .teacher-itmes .content .info .left i { color:#f7b751; padding-right: 5px; }
#teacher-area .teacher-itmes .content .info .right { flex: 2; word-break: break-all; font-size: 14px; }
/*detail*/
#teacher-detail1 { display:flex; width:100%; overflow:hidden; margin:30px 0 50px 0; }
#teacher-detail1 .left { flex:1; }
#teacher-detail1 .left img { width:100%; max-width:295px; }
#teacher-detail1 .right { position:relative; flex:2; padding:0 30px; }
#teacher-detail1 .right .website { position:absolute; right:10px; top:10px; }
#teacher-detail1 .right .name { font-size: 24px; color: #1b1b1b; margin-bottom: 20px; text-shadow: 1px 1px 1px #CCCCCC; }
#teacher-detail1 .right .title { color: #909090; font-size: 14px; margin-bottom: 20px; }
#teacher-detail1 .right .info { width: 100%; display: flex; font-size: 16px; line-height: 22px; color: #494949; border-bottom: 1px dashed #999999; }
#teacher-detail1 .right .info .lefter { flex: 1; background: #f9f5dd; padding:5px 0; display: flex; align-items:center; justify-content: center; font-weight: bold; }
#teacher-detail1 .right .info .righter { flex: 3; padding: 10px 10px; }

#teacher-menu{width:100%;overflow:hidden;display:flex;flex-wrap: wrap;border-top:1px solid #c4c4c4;}
#teacher-menu span{flex:1;display:flex;align-items:center;justify-content: center;border-right:1px solid #c4c4c4;cursor:pointer;font-weight:bold;font-size:16px;padding: 5px 10px;margin:20px 0;border-bottom:4px solid #ffffff;}
#teacher-menu span:hover{ border-bottom:4px solid #6f1d1e; }
#teacher-menu span:last-child{ border-right:0; }
.teacher-info{ background:#f9f5dd; padding:30px 20px; }

 @media screen and (max-width: 1000px) {
 #teacher-area .teacher-itmes {
width:45%;
margin: 30px 2%;
}
 #teacher-area .teacher-itmes .content .info {
display:block;
line-height:25px;
}
}
@media screen and (max-width: 768px) {
	#teacher-detail1{ display:block; }
	#teacher-detail1 .left{ text-align:center; margin-bottom:30px; }
	#teacher-detail1 .right{ padding:0 10px; }
}

@media screen and (max-width: 480px) {
 #teacher-area .teacher-itmes {
width:100%;
margin: 10px 0%;
}
#teacher-detail1 .right .info{ display:block; }
#teacher-menu span{ flex:1 50%; margin:0; background:#c4c4c4; color:#ffffff; }
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 學術活動 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.inner-event { width:100%; overflow:hidden; }
.inner-event .wrap { display:flex; position:relative; width:100%; max-width: 1200px; overflow:hidden; margin:0 auto; padding:40px 10px; background-color:rgba(255, 255, 255, 0.5);/* min-height:600px; */ }
.inner-event .block-1 { flex:1; display:flex; justify-content: flex-end; }
.inner-event .block-1 .b-title { text-align:left; margin: 10px 0 2vw 0; font-size: 20px; }
.inner-event .block-1 .b-title .line { margin: 20px 0 20px 0; }
.inner-event .block-2 {flex: 1;padding:0 50px;}
.inner-event .block-2 img{ width:100%; max-width:349px; }
.inner-event .block-3 { flex: 1.5; }
.inner-event .block-3 .title { border-left:4px solid #fac32f; padding: 0 0 0px 20px; margin-bottom: 20px; font-size:22px; line-height: 30px; color:#000000; font-family: 'Noto Sans TC', sans-serif; }
.inner-event .block-3 .content { color: #5a5a5a; font-size: 16px; line-height:24px; }
.inner-event .block-3 .content .row { display: flex; color: #5a5a5a; font-size: 16px; padding: 10px 0; }
.inner-event .block-3 .content .row .left { width: 80px; flex:1; }
.inner-event .block-3 .content .row .right { flex:5; }
.inner-event .block-3 .more { width:100%; overflow:hidden; padding: 20px 0; }
.inner-event .block-3 .more span { float:left; }
.inner-event .block-3 .more .events-pager { float:right; margin: 50px 0 0 0; }


@media screen and (max-width: 768px) {
	.inner-event .wrap{ display:block;}
	.inner-event .block-2{ text-align:center;}	
	.inner-event .block-3{ margin:30px 0;}
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 教學資源 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

#inner-links{
    margin: 30px 0;
}
#inner-links .links-list{
    display: flex;
    padding: 15px 0;
    font-size: 16px;
    border-bottom: 1px dashed #cccccc;
}
#inner-links .links-list:hover{box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 0px 10px 0 rgba(0, 0, 0, 0.19);}
#inner-links .links-list .left{
    color: #6f1d1e;
    padding:0 10px;
}
#inner-links .links-list .right{}
#inner-links .links-list .right a{ color:#6f1d1e; color:#000000; }

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 校友動態 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

#inner-job{
    margin: 30px 0;
}

#inner-job .job-map{ width:100%; overflow:hidden; background:#ebebeb; margin:30px 0; }
#inner-job table th{ padding:15px 5px; background:#ffde84; color:#693400; font-size:16px; font-weight:bold; }
#inner-job table td{ padding:15px 5px; color:#1b1b1b; font-size:16px; border-bottom:1px dashed #CCC; }
#inner-job table tr:nth-child(odd){ background-color:#f1f1f1; }

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 聯絡表單 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

#inner-contact .contact-method{ margin:30px 0 50px 0; }
#inner-contact .contact-list{
    display: flex;
    padding: 15px 0;
    font-size: 16px;
    border-bottom: 1px dashed #cccccc;
}
#inner-contact .contact-list .left{
    color: #282828;
    padding:0 10px;
	border-left:4px solid #fac32f;
}
#inner-contact .contact-list .right{}
.contact-title{ color:#6f1d1e; font-size:20px; font-weight:bold; margin-bottom:30px;}
.contact-title img{ vertical-align:middle; padding-right:10px; }

.contact_form{ width:100%; overflow:hidden; }
.contact_form .form_left{ float:left; width:50%; padding-right:20px; box-sizing:border-box; }
.contact_form .form_right{ float:right; width:50%; padding-left:20px; box-sizing:border-box; }

.input-item{width:100%;display: flex;align-items:center;justify-content: center;background:#ffffff;margin: 15px 0;padding: 15px 10px;border:1px solid #cecece;border-left: 5px solid #fac32f;transition: all 0.5s ease;}
.input-item:hover{border:1px solid #cb333e; border-left:5px solid #cb333e;}
.input-item .left{color: #000000;font-size: 16px;font-weight: bold;padding-right: 30px;letter-spacing: 1px;}
.input-item .left span{ color:#cb333e; width:13px; display:inline-block; }
.input-item .right{flex: 5;padding: 0 30px; border-left: 1px solid #d5d5d5; }
.input-item .right input{width:100%;font-size:16px;border:0;background:transparent;outline: 0;}
.input-item .right textarea{width:100%; font-size:16px; height:150px; border:0; background:transparent; resize:none; }
.input-item .right .rand-img{position:absolute;right: -35px;top: -10px; cursor:pointer}



@media screen and (max-width : 768px) {
	.input-item .right{ flex:3; }
}
@media screen and (max-width : 480px) {
	
	.contact_form .form_left{ float:none; width:100%; padding-right:0; }
	.contact_form .form_right{/* float:none; */width:100%;padding-left:0;}	
	
	.input-item .right{ flex:1.5; }
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 國際交流 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.slick-slider{ height:50px; line-height:50px; margin:50px 0; }
.slick-slider .line{position:absolute;top: 8px;display:block;width:100%;height:1px;background:#cccccc;z-index: 1;}
.slick-slider div{position:relative;text-align:center;line-height: 65px;font-size: 14px;}
.slick-slider div i{z-index: 9;cursor:pointer;position: absolute;margin-left: auto;margin-right: auto;left: 0;right: 0;}
.slick-slider div i.fas{ color:#fac32f; font-size:16px; display:block; }
.slick-slider div i.far{color:#fac32f;font-size:16px;display:block;}
.slick-pre{position:absolute;top: -30% !important;left:0 !important;display:block;z-index:9999;}
.slick-next{position:absolute;top: -15% !important;right: 35px !important;display:block;z-index:9999;}

.time-year{width:100%;overflow:hidden;margin:30px auto;text-align: center;}
.time-year span{display: inline-block;padding: 23px 10px;margin: 0 10px;font-size: 15px;cursor: pointer;background:#f1f1f1;color:#693400;font-weight: bold;-webkit-border-radius: 30px;-moz-border-radius: 30px;border-radius: 30px;}
.time-year span:hover{ background:#6f1d1e; color:#ffffff; }
.time-year span.on{ background:#6f1d1e; color:#ffffff; }

.time-content{position:relative;width:100%;overflow:hidden;margin:30px auto;text-align: center;padding-bottom: 300px;}
.time-content .img{ width:100%; }
.box-camera{position:relative;width: 100%;}
.box-camera img{position:absolute;top: -120px;z-index: 9;}
.time-content .box{position:absolute;top: -150px;margin-left:auto;margin-right:auto;padding-bottom: 50px;left:0;right:0;overflow:hidden;border:1px solid #cccccc;width:100%;max-width:700px;background:#eeeeee;}
.time-content .box .more{position:absolute;bottom:0;;color:#ffffff;width:100%;background:#6f1d1e;font-size:16px;}
.time-content .box .more span{padding: 10px 20px; display:block;cursor:pointer }
.time-content .box .title{ padding:30px 10px; font-size:18px; color:#6f1d1e; line-height:28px; }
.time-content .box .content{padding: 10px 10%;display:flex;color: #1b1b1b;font-size: 16px; text-align:left; }
.time-content .box .content .left{
    display: flex;
    flex: 1;
    align-items:center;
}
.time-content .box .content .right{text-align: left;line-height:25px;flex: 5;}

@media screen and (max-width : 768px) {
	.time-content .box{ position:initial; }
	.time-content .box .content{ display:block; text-align:left; padding:0 15px 5px 15px; }
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 相簿 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

/*活動圖片裁切*/
.img-demo {height:400px;overflow:hidden;/*border:1px solid #ccc;*//* line-height: 350px; *//* background: #ebebeb; */display: flex;align-items: flex-start;justify-content: center;}
.img-demo img{ vertical-align:middle; width:100%; }

/*活動花絮*/
.activity-square{/* float:left; */display: inline-block;width: 45.5%;margin:2%;vertical-align: top;}
.activity-square img{ width:100%; }
.activity-square .title{width:100%;overflow:hidden;padding: 10px 0;display: flex;}
.activity-square .title .left{width: 25%;float:left;line-height: 20px;border-right:1px solid #b9b9b9;padding: 0 10px;box-sizing:border-box;}
.activity-square .title .left table td{ color:#721f6d; text-align:center; height:20px; letter-spacing:1px; }
.activity-square .title .right{width: 75%;float:left;font-size:18px;line-height: 22px;color:#282828;font-weight:bold;letter-spacing:1px;padding: 0 0 0 15px;box-sizing:border-box;display: flex;align-items:center;/* justify-content: center; */}
.activity-square .title .right a{ color:#282828; text-decoration:none; }
.activity-square .content{cursor:hand;cursor:pointer;width:100%;position: relative;overflow:hidden;min-height: 70px;color: #5c5c5c;font-size: 15px;line-height: 24px;letter-spacing: 1px;}
.activity-square .content a{position:absolute;display:inline-block;right: 0px;bottom: 0px;color:#d67e01;font-size:12px;text-decoration:none;}
.activity-square .content a:before{ content:url(../../images/news-icon1.png); letter-spacing:2px; padding-right:5px; }

.news-content{font-size: 16px;padding: 0px 0 0px 0;overflow:hidden;clear:both;letter-spacing:1px;line-height:30px;/* border-bottom:1px solid #d3d3d3; */}


@media screen and (max-width : 768px) {
	.activity-square .title .left{ width:35%; }
	.activity-square .title .right{ width:65%; padding:0 8px;}
	.activity-square .content{ height:inherit; }
	.activity-square .content a{ display:block; position:inherit; }
}
@media screen and (max-width : 550px) {
	.activity-square{ width:96%; margin:2%; }	
	.img-demo{ height:auto; line-height:inherit; }
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 影片 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/


/*相關影片*/
#inner-video{margin: 20px 0;}
#index-video{display:flex;width:100%;margin: 0 auto;flex-wrap: wrap;}
#index-video .items{flex: 45%;margin: 10px 5px 10px 5px;cursor:pointer;}
#index-video .items .content{width:100%;margin: 0px 0 0px 0;padding: 5px 20px 5px 20px;text-align: center;color: #ffffff;background: #313131;}
#index-video .items .content .title{font-size:16px;line-height: 20px;padding: 10px 0 10px 0;}
#index-video .items .content .title a{ color:#ffffff; }
	
/*youtube*/
.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden; }
  .embed-responsive::before {
    display: block;
    content: ""; }
  .embed-responsive .embed-responsive-item,
  .embed-responsive iframe,
  .embed-responsive embed,
  .embed-responsive object,
  .embed-responsive video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0; }

.embed-responsive-21by9::before {
  padding-top: 42.85714%; }

.embed-responsive-16by9::before {
  padding-top: 56.25%; }

.embed-responsive-4by3::before {
  padding-top: 75%; }

.embed-responsive-1by1::before {
  padding-top: 100%; }



@media screen and (max-width : 480px) {
	#index-video .items{flex:100%;}
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Mobile Menu <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/


body { transition: background-color .2s;
}
#wrapper { transition: margin-left .2s;
}
.sidenav { height: 100%; overflow:hidden; width: 0; position: fixed; z-index: 9999; top: 0; right: 0; background-color: rgba(255, 255, 255, 1); overflow-x: hidden; transition: 0.2s; /*padding-top: 60px;*/ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }
.sidenav a:hover { color: #686868; }
.sidenav .closebtn { font-size: 36px; position: absolute; top: 25px; right: 10px; }
.sidenav .head { width:100%; position: relative; overflow:hidden; text-align: center; padding: 8px 0 8px 0; border-top:5px solid #6F1D1E; border-bottom: 1px solid #ebebeb; }
 @media screen and (max-height: 450px) {
 .sidenav {
padding-top: 15px;
}
 .sidenav a {
font-size: 18px;
}
}
/*選單 - 選項*/
#ajax-sidenav > div { position:relative; width: 100%; border-bottom: 1px solid #ebebeb; color:#181818; padding: 15px 20px; line-height:20px; box-sizing:border-box; cursor: pointer; cursor: hand; font-size: 16px; letter-spacing: 3px; }
#ajax-sidenav > div:before { font-family: FontAwesome; content: "\f111"; font-size: 12px; padding-right:10px; color:#6F1D1E; }
#ajax-sidenav > div i { position:absolute; right: 15px; top: 17px; }
#ajax-sidenav > div.title { background: #b19bb5; color: #ffffff; }
#ajax-sidenav > div:hover { /*color:#57708e;*/ }
#ajax-sidenav > div span { position:absolute; right:0; top: 0; display:block; padding: 15px 20px; border-left: 1px solid #ebebeb;/* border-right: 1px solid #ebebeb; */ }
#ajax-sidenav > div.nav { background:#ECECEC; border-bottom: 1px solid #CDCDCD; }
#ajax-sidenav > div.nav:before { content:""; padding-right:0px; }
#ajax-sidenav > div img { vertical-align:middle; padding-right:8px; }
.submenu-nav { width: 100%; overflow:hidden; display:none; background-color: #FFFFFF; }
.submenu-nav div { font-size:14px; background:#ECECEC; border-bottom: 1px dashed #A2A2A2!important; padding:15px 40px !important; cursor:pointer; }
.submenu-nav div:before {/*font-family: "Font Awesome 5 Free"; font-weight: 900;  content: "\f0da";font-size: 14px; padding-right:5px; */ }
 @media screen and (max-height: 450px) {
 .sidenav {
padding-top: 15px;
}
 .sidenav a {
font-size: 18px;
}
}
/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Bxslider <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

ul.bxslider { margin:0; padding:0; }
#home_banner { /*  display: inline-block;  會多一個空白*/ /*max-width: 1400px;*/
  width:100%; /*max-height: 750px;*/ overflow: hidden; position: relative; margin:0px auto 0 auto; }
#home_banner li { width: 100%; background-repeat: no-repeat; background-size: cover; background-position: center;   /*height: 1000px;*/ -webkit-transition:transform .5s ease;
 -moz-transition:transform .5s ease;
 -o-transition:transform .5s ease;
 -ms-transition:transform .5s ease;
 transition:transform .5s ease;
}
#home_banner img { display: block; }
#home_banner .bxslider { opacity: 0; }
#home_banner .bx-wrapper .bx-pager.bx-default-pager a:hover, #home_banner .bx-wrapper .bx-pager.bx-default-pager a.active { background: #fac32f; border:2px solid transparent; }
#home_banner .bx-wrapper .bx-pager.bx-default-pager a { background-color: #ffffff; border:2px solid white; width: 12px; height: 12px; margin: 0 8px; border-radius: 50%; -webkit-transition: all .5s ease;
 -moz-transition: all .5s ease;
 -o-transition: all .5s ease;
 -ms-transition: all .5s ease;
 transition: all .5s ease;
}
#home_banner .bx-wrapper .bx-pager { bottom: 5%; opacity: 0; }
#home_banner .bx-wrapper .bx-controls-direction { opacity: 0; }
#home_banner .word { font-size: 15px; position: absolute; margin-left: -187px; margin-top: -116px; left: 50%; top: 50%; color: #673D3A; letter-spacing: 25px; opacity: 0.2; }
#home_banner .word b { font-weight: bold; }
#home_banner .down { position: absolute; right: 30px; bottom: 32px; width: 34px; height: 28px; z-index: 99; cursor: pointer; opacity: 0; }
#home_banner .down img { display: block; }
#home_banner .bx-prev { left:5%; }
#home_banner .bx-next { right:5%; }
.container { width:100%; overflow:hidden; max-width:1200px; margin: 0 auto; }
.container-bg {background: url(../../images/container-bg.png) left top no-repeat;background-position: 0% 100px;}
 @media screen and (max-width : 768px) {
 #home_banner img { /*display: block; margin-top:80px;*/
}
 #home_banner .bx-controls-direction {
 display:none;
}
 #home_banner .bx-wrapper .bx-pager.bx-default-pager a {
 width: 15px;
 height: 15px;
}
}
/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Loadaction <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.Loadaction_Box { position:relative; height: 100%; width: 0%; position: fixed; overflow:auto; top: 0; left: 0; overflow:auto; background-color:rgba(0, 0, 0, 0.5); z-index:100000000 }
.Loadaction { width: 220px; height: 60px; top: 42%; position: absolute; margin-left: auto; margin-right: auto; padding-top: 10px; left: 0; right: 0; background-color:rgba(0, 0, 0, 0.5); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; }
.Actionupload_Text { font-size:13px; color:#FFFFFF; height: 25px; }
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> pagelink <<<--------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.pageselect { border:1px solid #CCCCCC; padding: 4px 5px; font-size:12px; }
.pageselect:hover { background:#ebebeb; }
a.pagelink_no { color:#333333; text-decoration:none; border: 1px solid #cccccc; padding: 7px 5px; display: inline-block; margin: 5px 0; }
a.pagelink_no:hover { background:#ebebeb; }
a.pagelink { color:#333333; text-decoration:none; border: 1px solid #CCCCCC; padding: 5px 10px; }
a.pagelink:hover { background:#ebebeb; }
a.pagelink_ch { color:#333333; padding: 5px 10px; border: 1px solid #cccccc; background: #ebebeb; text-decoration:none; }