@import url('https://fonts.googleapis.com/css?family=Karla&display=swap');
@import url('../vendor/bootstrap/css/bootstrap.min.css');
@import url('../css/fonts/line-awesome-1.1.0/css/line-awesome.css');
@import url('../vendor/fontawesome-free/css/all.min.css');
@import url('../vendor/animate/animate.min.css');
@import url('../vendor/simple-line-icons/css/simple-line-icons.min.css');
@import url('../vendor/owl.carousel/assets/owl.carousel.min.css');
@import url('../vendor/owl.carousel/assets/owl.theme.default.min.css');
@import url('../vendor/magnific-popup/magnific-popup.min.css');
/*<!-- Theme CSS -->*/
@import url('../css/theme.css');
@import url('../css/theme-elements.css');
@import url('../css/theme-blog.css');
@import url('../css/theme-shop.css');
* {
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important; /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}
html,body {
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    /*-webkit-user-select: none;   */               /* prevent copy paste, to allow, change 'none' to 'text' */
    font-family: var(--font);
}
:root{
    --font:'Karla',"微軟正黑體","Microsoft JhengHei",-apple-system,"Noto Sans", "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", 
    "Source Han Sans CN",  "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", 'SimHei', "WenQuanYi Zen Hei Sharp", sans-serif;
    --maincolor:#5aa84c !important;
}
.vh50{min-height: 50vh;}
a.text-primary:focus, a.text-primary:hover {
    color: #18ab27!important;
}
.coverimg{
    padding-bottom: 65%;
    background-size: cover;
    background-position: center;
    display: block;
}
.coverimg.bigger{
    padding-bottom: 75%;
    display: block;
}
.coverimg.pd100{  
    padding-bottom: 100%;
}
.coverimg.pd150{  
    padding-bottom: 150%;
}
.portfolio-list .coverimg{background-image: url('../img/poster.jpg')}
.simple-post-list .coverimg{width: 70px;}
.activityCover{
    /* padding-bottom: 142%; */
    padding-bottom: 128%;
    background-size: cover;
    background-position: center;
    /* -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease; */
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.thumb-info:hover .activityCover{
    /* -webkit-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1); */
    -webkit-transform: scale(1.06, 1.06);
    transform: scale(1.06, 1.06);
    -webkit-transform-style: unset;
    transform-style: unset;
}
.index2 #header .header-top{height: 35px;}
.bg-primary-2{background-color: #3aaa5a !important;}
.index2 #header .header-nav-top .nav > li > a:hover,.index2  #header .header-nav-top .nav > li > a a:focus{color: #4dbb6d !important;}
.index1 #header .header-nav.header-nav-force-light-text .header-nav-main nav > ul > li > a,
.index1  #header .header-nav.header-nav-force-light-text .header-nav-main nav > ul > li .wrapper-items-cloned > a{color: #fff !important;}
.index1 #footer a:not(.btn){color: #fff;opacity: .6}
.index2 .section-background  a{color: #ccc;}


.pagination > li > a:hover{
    background-color: #eef4f2 !important;
}
.sidebar .card-body{padding: 1rem}
.history_list{height: 670px;overflow-y: auto}
html #header .header-nav .header-nav-main nav > ul > li.dropdown-full-color.dropdown-light .dropdown-menu li a.active{background-color: #f1f6f4;color: #2ba04d;}
.table th{background-color:#7fce96;color: #fff;}
/*table.paper tr td:first-child{width: 25%}*/
/*table.paper tr td:last-child{width: 75%}*/
table {width:100%;}
table.paper tr td{border-bottom: 3px solid #c1c1d4;padding: 0;}
table.paper a{color: #4dbb6d !important}
table.paper tr td table{width: 100%;margin: 10px 0;}
table.paper tr td table tr td{padding: 2px 2px 2px 6px;;font-weight: 600;border:none;}
table.paper tr td table tr td:last-child{width: 85%;font-weight: 400;}
table.paper tr td table tr:nth-child(even){background-color: #f1f1f7;}

.carousel-logo-item {
  position: relative;
  height: 128px;
  margin: 20px 0;
  overflow: hidden;
  -webkit-box-shadow: 0px 23px 32px 0px transparent;
          box-shadow: 0px 23px 32px 0px transparent;
  will-change: border-color;
  border: 1px solid transparent;
  -webkit-transition: border-color .4s ease, -webkit-box-shadow .4s ease;
  transition: border-color .4s ease, -webkit-box-shadow .4s ease;
  transition: border-color .4s ease, box-shadow .4s ease;
  transition: border-color .4s ease, box-shadow .4s ease, -webkit-box-shadow .4s ease;
}
.carousel-logo-item:hover {
  -webkit-box-shadow: 0px 23px 32px 0px #e5e8eb;
          box-shadow: 0px 23px 32px 0px #e5e8eb;
  border-color: #d4d4d4;
  bottom:10px;
  border-radius: 8px;
}
.carousel-logo-item:hover .carousel-logo-pannel {
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}
.carousel-logo-item .carousel-logo-pannel {
  width: 100%;
  height: 100%;
  -webkit-transition: -webkit-transform .4s ease;
  transition: -webkit-transform .4s ease;
  transition: transform .4s ease;
  transition: transform .4s ease, -webkit-transform .4s ease;
}
.carousel-logo-item .carousel-logo-hover {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.carousel-logo-item .carousel-logo-hover img {
  width: 138px;
  max-height: 65px;
}
.carousel-logo-item .carousel-logo-hover .carousel-logo-description {
  max-height: 45px;
  overflow-y: hidden;
}
.carousel-logo-item .carousel-logo-pb::before {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}
.carousel-logo-item .carousel-logo-pb img {
  display: inline-block;
  vertical-align: middle;
  width: 230px;
}
.highschool .featured-box .box-content.box-content-border-0{border-top:none !important;}
.highschool .featured-box{min-height: 50px;margin: 5px 0}
.highschool .featured-boxes-flat .featured-box .box-content{margin-top: 40px;}
.highschool .parallax{min-height: 420px;}
.page-header ul.breadcrumb li {color: #ececec}
.page-header ul.breadcrumb li a{color: #fff}
blockquote.with-borders{position: relative;padding-top: 35px;margin-bottom: 35px;}
blockquote.with-borders:after{
    content: '備 註:';
    font-weight: 600;
    position: absolute;
    top: 10px;
}
blockquote.with-borders p{
    margin-bottom: 5px;
}
.teacher-list a{color:#777}
.teacher-list .isotope-item>.row{min-height: 228px;}
._65wk{height: 242px !important;}
.left_menu{position: fixed;top:calc((100% - 270px) / 2);left:0;z-index: 999;box-shadow: 0px 0px 80px 0px rgba(62, 62, 62, 0.3);width: 150px;background:url(../img/left_bg.jpg);border-radius: 0 10px 10px 0;overflow:hidden}
.left_menu li{list-style: none;width: 100%;min-height: 58px;border-bottom: 1px solid #517d80;}
.left_menu li:last-child{border:none;}
.left_menu li a{padding: 15px 5px 15px 20px;transition: all 0.3s ease;color: #fff;font-weight: 600}
.left_menu li a i{font-size: 28px;display: none;vertical-align: sub;}
.left_menu li a:hover{background-color:rgba(60, 122, 81, 0.6);padding: 15px 20px}
.left_menu li a.active,.left_menu li:hover a.active{background-color: rgba(77, 155, 94, 0.7);}
.left_menu li a.active i,.left_menu li a:hover i{display: inline-block;}
.p_res{position: relative;}
#point,#news,#activity,#honor,#qna{padding-top: 100px;margin-top: -50px !important;}
.teacher-list .isotope-item .col-md-8{min-height: 239px}
/* 20200805 */
.left_menu  .la-bullhorn{transform: rotate(-15deg);margin-right: 3px;font-size: 24px}
.custom-step-item {position: relative;}
.custom-step-item .step-content{margin-left: 90px;}

/* 20211001 */
.news-item {
    display: flex;
    justify-content: space-between;
    padding: 16px 12px;
    transition: all 0.3s;
    border-bottom: 1px dashed rgb(199, 199, 199);
}

.news-item .news-title {
    flex: 8;
    transition: all 0.3s;
    letter-spacing: 0px;
    font-weight: 500 !important;
    /* font-family: 微軟正黑體; */
    font-size: 18px;
}
.news-item .news-title h4 {
    letter-spacing: 0px;
    font-weight: 500 !important;
    /* font-family: 微軟正黑體; */
    font-size: 18px;
}
.news-item .post-infos {
    flex: 1;
    /* font-size: 18px; */
}
.news-item:hover {
    background-color: rgba(243, 243, 243, 0.74);
}
/* .news-item .news-type-badge {
    flex: 1;
} */
.news-item .blog-post-date {
    padding: 0 8px;
    font-weight: 700;
    font-size: 16px;
    min-width: 100px;
    display: inline-block;
    text-align: center;
    margin-right: 16px;
}
.icon-megaphone {
    display: inline-block;
    padding-right: 12px;
    color: #b3b3b3;
}
.slide-link {
    display: block;
    
}
@media (max-width: 430px) {
    .news-item {
        flex-wrap: wrap;
        padding: 10px 8px;
    }
    .news-item .news-title {
        flex: 0 0 100%;
    }
    .news-item .post-infos {
        flex: 0 0 100%;
        /* font-size: 18px; */
    }
}
/* 20211013 */

.video-wrapper__inner {
    width: 100%;
    padding-top: 56.25%;
    position: relative;
}
.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.looking-for-box {
    padding: 42px 0;
    display: block;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-size 0.5s;
}
.looking-for-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.2;
    transition: all 0.5s;
}
.looking-for-box:hover {
    background-size: 104%;
}
.looking-for-box:hover .btn {
    background-color: #e2fdea;
    border-color: #e2fdea;
    color: #777;
}
.looking-for-box:hover::before {
    opacity: 0;
}
/* ------------------------------------------------------------
    Sitemap Styles
------------------------------------------------------------ */

.sitemap {
    display: inline-block;
    min-width: 100%;
    padding: 40px 0;
}

.sitemap li a,
.sitemap li a.multi:after {
    position: relative;
    display: block;
    margin: 0;
    padding: 15px;
    font-size: 15px;
    font-weight: bold;
    line-height: 16px;
    white-space: normal;
    color: #fff !important;
    background-color: white;
    /*border: 1px solid #f5f5f5;*/
    /*border-top: 4px solid #95a5a6;*/
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    z-index: 1;
}

.sitemap li a {
    -webkit-box-shadow: 1px 1px 2px rgba(106,113,127,0.2);
    -moz-box-shadow: 1px 1px 2px rgba(106,113,127,0.2);
    box-shadow: 1px 1px 2px rgba(106,113,127,0.2); 
}

.sitemap li a.multi:after {
    content: " ";
    position: absolute;
    left: 6px;
    top: 6px;
    width: 100%;
    height: 100%;
    border-width: 2px;
    border-color: #eee;
    border-top-width: 0 !important;
    border-left-width: 0 !important;
    background-color: transparent;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-bottom-right-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
    z-index: -1;
}

.sitemap li a:before {
    /*content: attr(href);*/
    display: block;
    font-size: 10px;
    margin-bottom: 10px;
    font-weight: bold;
    word-wrap: break-word;
    color: #95a5a6;
}

.sitemap li a small {
    display: block;
    font-weight: normal;
    font-size: 12px;
    margin-top: 10px;
}

.sitemap .fa {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 16px;
    vertical-align: middle;
}

/* --- Root --- */
.sitemap ul ul ul{padding-left: 0}
.sitemap ul, .sitemap li {
    width: calc(100%);
    position: relative;
    display: inline-block;
}

.sitemap ul li:before,
.sitemap ul li:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border-color: #ddd;
    border-width: 1px;
    z-index: 0;
}

.sitemap ul li a { background-color: #00964e; width: auto; }
.sitemap ul li a:before, .sitemap ul li .fa { color: var(--primary); }

/* --- Level 1 --- */
.sitemap ul ul {
    white-space: nowrap;
}

.sitemap ul ul li {
    position: relative;
    vertical-align: top;
    padding-top: 20px;
    margin-right: 20px;
    white-space: normal;
    width: 100%;
}

.sitemap ul ul li:last-child {
    padding-right: 0;
}

.sitemap ul ul li:before {
    border-top-style: solid;
    width: 30px;
    top: 50px;
    margin: 0 0 0 -30px;
}

.sitemap ul ul li:first-child:before {
    border-top-style: none;
    border-left-style: solid;
    width: 0;
    height: 30px;
    top: 0;
    left: 45px;
    margin: 0 0 0 -30px;
}

.sitemap ul ul li a { border-top-color: var(--secondary); width: auto; background-color: #1e9600}
.sitemap ul ul li a:before, .sitemap ul ul li .fa { color: var(--secondary); }

/* --- Level 2 --- */
.sitemap ul ul ul {
    display: block;
    white-space: normal;
}

.sitemap ul ul ul li {
    display: block;
    position: relative;
    width: 100%;
    padding-left: 30px;
    margin-right: 0;
}

.sitemap ul ul ul li:before,
.sitemap ul ul ul li:first-child:before  {
    border-top-style: none;
    border-left-style: solid;
    height: 100%;
    top: 0;
    left: 45px;
}

.sitemap ul ul ul li:last-child:before  {
    height: 50px;
}

.sitemap ul ul ul li:after  {
    border-top-style: solid;
    top: 50px;
    left: 15px;
    width: 15px;
}

.sitemap ul ul ul li a { border-top-color: var(--third); width: auto; background-color: #72bd20}
.sitemap ul ul ul li a:before, .sitemap ul ul ul li .fa { color: var(--third); }

/* --- Level 3 --- */
.sitemap ul ul ul ul li a { border-top-color: #a0cf51;background-color: #a0cf51;}
.sitemap ul ul ul ul li a:before, .sitemap ul ul ul ul li .fa { color: #e67e22; }

/* --- Level 4 --- */
.sitemap ul ul ul ul ul li a { border-top-color: #9b59b6; }
.sitemap ul ul ul ul ul li a:before, .sitemap ul ul ul ul ul li .fa { color: #9b59b6; }

/* --- Secondary --- */
.sitemap-2 {
    display: block;
    margin-top: 20px;
    padding-top: 20px;
    border-top: dotted 2px #eee;
}

.sitemap-2 ul {
    white-space: nowrap;
}

.sitemap-2 ul li {
    display: inline-block;
    white-space: normal;
    padding: 0 20px 0 0;
}

.sitemap-2 ul li:before,
.sitemap-2 ul li:after {
    display: none;
}

.sitemap-2 ul li:last-child {
    padding: 0;
}

/* --- Widths --- */
.sitemap > ul > li > a,
.sitemap > ul > li > ul > li,
.sitemap-2 li a {
    width:calc((100% - 100px) / 8.5);
}
::-webkit-scrollbar {
    -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
    width: 5px;
}

::-webkit-scrollbar:horizontal {
    height: 5px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 10px;
    border: 2px solid transparent;
}

::-webkit-scrollbar-track {
    background-color: transparent; 
}

/*
| ----------------------------------------------------
| responsive
| ----------------------------------------------------
*/
@media (min-width: 1500px){
    .container {
        max-width: 75vw;
    }
     #header .header-nav.header-nav-links nav > ul > li > a{padding: 0 .5rem}
    #header .header-nav-main nav > ul > li > a{font-size: 15.5px;}
}
@media (max-width: 1499px){
    .container {
        max-width: 80vw;
    }
    #header .header-nav.header-nav-links nav > ul > li > a{padding: 0 .4rem}
    #header .header-nav-main nav > ul > li > a{font-size: 14px;}
}
@media (max-width: 1367px){
    .container {
        max-width: 86vw;
    }
}


@media (max-width: 1025px) {
    .container { max-width: 100vw;}
    .header-logo,.header-logo img{width: 200px!important;height: 35px !important}
    #header .header-nav.header-nav-links nav > ul > li > a{padding: 0 .4rem}
    #header .header-nav-main nav > ul > li > a{font-size: 14px;}
}


@media (max-width: 769px) {
    .sitemap ul ul li{margin-right: 15px;}
    .sitemap ul ul ul li{padding-left: 20px;}
    .sitemap li a, .sitemap li a.multi:after{padding: 10px;}
    /* .slider-container .slider,.slider-container {height: 35vh !important;} */
    .teacher-list .isotope-item .col-md-8{min-height: 100px;}    
    .header-logo,.header-logo img{width: 345px!important;height: 50px !important}
    #header .header-nav-main nav{max-height: 70vh;}
    #header .header-nav.header-nav-links nav > ul > li > a{padding: 10px 8px}
}


 /*iphone plus*/
@media (max-width: 415px) {
    .sitemap > ul > li > a, .sitemap > ul > li > ul > li, .sitemap-2 li a{width: 100%}
    .sitemap ul, .sitemap li{display: block}
    .sitemap ul ul li:before{width: 0}
    #header.header-effect-shrink .header-logo,#header .header-logo img{
        width: 280px !important;
        height: 40px !important;
    }
    #header .header-top.header-top-borders .nav-item-borders{padding-right: 6px;}
     /*凍結第一列*/
    .fixth{    
        max-height: 600px;
        overflow: auto;
    }
    .fixth table th {
        position: sticky;
        background-color: #fff;
        top: -1px;
    }
    /*凍結左側*/
    .scrolling table {
        table-layout: inherit;
        *margin-left: -182px;/*ie7*/
    }
    .scrolling tr:first-child{  background-color: #eaeef7;  }
    .scrolling td, th {
        vertical-align: top;
        padding: 10px;
        min-width: 100px;
    }
    .scrolling th:first-child,.scrolling td:first-child {
        position: absolute;
        *position: relative; /*ie7*/
        left: 0;
        width: 100px;
    }
    .scrolling th:nth-child(2),.scrolling td:nth-child(2){
        position: absolute;
        *position: relative; /*ie7*/
        left: 100px;
        min-width: 82px;
        width: 82px;
        /**/
    }   
    .scrolling table.gradient th:first-child,.scrolling table.gradient td:first-child,
    .scrolling table.gradient th:nth-child(2),.scrolling table.gradient td:nth-child(2){
        min-height: 69px;
    }
    .scrolling .red th:first-child,.scrolling .red td:first-child,
    .scrolling .red th:nth-child(2),.scrolling .red td:nth-child(2){
        background-color: #fffaf2;
    }
    .outer {
        position: relative
    }
    .inner {
        overflow-x: auto;
        overflow-y: visible;
        margin-left: 182px;
        border-left: 2px solid #ddd;
    }
    .col-md-6.border-left{border-left:none !important;border-top:1px solid #DADADA !important;padding-top: 20px;}
    .history_list{height: 400px;}
    .table {min-width:500px; }
    .table td, .table th{border:1px solid #e8e9ea;padding: 0.6rem 8px;}
    table.paper tr>td>table tr td:last-child{width: 75%}
    .tabs-vertical .nav-tabs > li{display: inline-block;width: 49%;}
    .honor .post img{width: 100%;}
    .isotope-item{text-align: left}
    .header-top >.container.h-100{padding:0;}
    .header-nav-top{ width: 100% }
    .header-nav-top >.nav-pills{justify-content: space-between;width: 100%;}
    .teacher-list .isotope-item>.row{min-height: 128px}
    .page-header{margin:0 0 15px 0;}
    select.form-control{height: calc(1.5em + .75rem + 10px)}

    .index2 #header .header-top {
        height: 88px;
    }
}


/*iphone: 7px*/
@media (max-width: 376px) {}



/*iphone 5*/
@media (max-width: 321px) {
    #header.header-effect-shrink .header-logo,#header .header-logo img{
        width: 245px !important;
        height: 35px !important;
    }
    #header .header-nav-top .nav > li > a, #header .header-nav-top .nav > li > span{padding: 6px 7px} 
}


/*iPhone XR*/
@media only screen 
    and (device-width : 414px) 
    and (device-height : 896px) 
    and (-webkit-device-pixel-ratio : 2) { 



}

/*iPhone XS*/
@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) { 

}

/*iPhone XS Max*/
@media only screen 
    and (device-width : 414px) 
    and (device-height : 896px) 
    and (-webkit-device-pixel-ratio : 3) { 


}
/*橫拿*/
@media screen and  (orientation:landscape) {}
/*縱拿*/
@media screen and (orientation:portrait) {}
/*設備寬高比*/
@media screen and (device-aspect-ratio: 16/9) {}