:root{
  --font-family:Arial,"Microsoft JhengHei",sans-serif;
  --brand-color:#223344;
  --brand-light-color:#3388aa;
  --brand-light-color-alpha:rgba(51, 136, 170, 0.5);
  --brand-button-bg-color:#66bbee;
  --brand-button-bg-hover-color:#4499cc;
  --brand-highlight-color:#bf9000;
  --green-color:#00aa00;
  --red-color:#aa0000;
  --orange-color:#cc9900;
  --text-color:#333333;
  --text-white-color:#dddddd;
  --text-line-height:1.5rem;
  --text-large-line-height:1.75rem;
  --noraml-grey:#888888;
  --grey-9:#999999;
  --grey-a:#aaaaaa;
  --grey-b:#bbbbbb;
  --grey-c:#cccccc;
  --grey-d:#dddddd;
  --grey-e:#eeeeee;
}
body{
  font-family:var(--font-family);
  margin:0px;color:var(--text-color);
  font-size:15px;
}
figure{margin:0px;}
a{
  text-decoration:none;color:var(--text-color);
}
a.primary{
  text-decoration:none;color:var(--brand-light-color);
  transition:color 0.5s;
}
a.primary:hover, a.primary:active{
  color:var(--brand-color);
}
a.white{
  color:var(--text-white-color);
}
a.white:hover, a.white:active{
  color:white;
}
input{
  height:20px;border-radius:5px;border:1px solid var(--grey-c);padding:6px;
  color:#222222;font-size:15px;
}
input:focus{
  outline:none;border-color:var(--grey-9);
}
input[type="radio"], input[type="checkbox"]{
  height:auto;
}
a.button, button{
  border-width:0px;
  border-radius:5px;
  background-color:var(--brand-button-bg-color);
  color:var(--text-color);
  padding:10px 15px;
  cursor:pointer;
  transition:background-color 0.25s;
}
button.large{
  font-size:1.1rem;padding:10px 15px;
}
a.button:hover, button:hover,
a.button:active, button:active{
  background-color:var(--brand-button-bg-hover-color);
}
span.text-primary{
  color:var(--brand-light-color);
}
/* select */
select{
  font-family:var(--font-family);color:var(--text-color);
  padding:9px 15px;border-radius:5px;border:1px solid var(--grey-c);
}
/* ol li ol */
li>ol{
  counter-reset:o-counter 0;
  list-style-type:none;
}
li>ol>li{
  position:relative;
}
li>ol>li:before{
  content:'(' counter(o-counter) ')';
  counter-increment:o-counter;
  position:absolute;
  left:-25px;
}
/* table */
table{
  text-align:left;border-collapse:collapse;
  min-width:350px;width:100%;
}
table td,
table th{
  padding:10px;
}
table>thead>tr>th{
  border-bottom:2px solid var(--grey-c);
}
table>tbody>tr>td{
  border-bottom:1px solid var(--grey-d);
}
table>tbody>tr:nth-child(odd){
  background-color:var(--grey-e);
}
/* .view */
.view{
  width:1200px;max-width:100%;margin:0px auto;
}
.full-view{
  width:auto;
}
.view>.headline{
  font-size:1.5rem;margin-bottom:20px;font-weight:bold;
}
.view>summary{
  font-size:1.2rem;color:var(--noraml-grey);margin-bottom:20px;
}
.view>.content{
  word-break:break-all;
}
.view>.content img{
  width:100%
}
.view>.part{
  padding:20px 0px;border-bottom:1px solid var(--grey-c)
}
.view>.part:last-child{
  border-bottom-width:0px;
}
.view>.part>.title{
  font-size:1.25rem;margin-bottom:10px;
}
/* nav */
nav{
  z-index:10;
  display:grid;grid-template:auto / 250px auto;
  background-color:var(--brand-color);padding:10px;
  color:#dddddd;
  position:sticky;top:0px;left:0px;z-index:100;
  box-shadow:0px 0px 5px #222222;
}
nav>.logo{
  width:240px;height:40px;
}
nav>.menu{
  display:flex;align-items:center;
}
nav>.menu-trigger{
  justify-self:end;
  display:none;position:relative;width:40px;height:40px;
  cursor:pointer;z-index:102;
}
nav>.menu-trigger>.lines{
  position:absolute;top:50%;left:50%;
  width:30px;height:1px;background-color:white;
  transform:translate(-50%,-50%);
}
nav>.menu-trigger>.lines::before,
nav>.menu-trigger>.lines::after{
  position:absolute;content:'';
  width:30px;height:1px;
  background-color:white;
}
nav>.menu-trigger>.lines::before{
  transform:translateY(-8px);
  animation:menu-trigger-effect-1 250ms linear;
}
@keyframes menu-trigger-effect-1{
  0%   { transform: translateY(0); }
  50%  { transform: translateY(0); }
  100% { transform: translateY(-5px) rotate(0deg); }
}
nav>.menu-trigger>.lines::after{
  transform:translateY(8px);
  animation:menu-trigger-effect-2 250ms linear;
}
@keyframes menu-trigger-effect-2{
  0%   { transform: translateY(0); }
  50%  { transform: translateY(0); }
  100% { transform: translateY(5px) rotate(0deg); }
}
nav>.close{
  position:fixed;top:10px;right:10px;
}
nav>.close>.lines{
  visibility:hidden;
}
nav>.close>.lines::before,
nav>.close>.lines::after{
  visibility:visible;
  transform-origin:center center;
  transform:translateY(0);
  transition:all 250ms linear;
}
nav>.close>.lines::before{
  transform:rotate(-45deg);
  animation:menu-trigger-effect-3 250ms linear;
}
@keyframes menu-trigger-effect-3{
  0%   { transform: translateY(0); }
  50%  { transform: translateY(0); }
  100% { transform: translateY(0) rotate(-45deg); }
}
nav>.close>.lines::after{
  transform:rotate(45deg);
  animation:menu-trigger-effect-4 250ms linear;
}
@keyframes menu-trigger-effect-4{
  0%   { transform: translateY(0); }
  50%  { transform: translateY(0); }
  100% { transform: translateY(0) rotate(45deg); }
}
nav>.menu>.items{
  flex:auto;display:flex;align-items:center;
}
nav>.menu>.items>.item{
  padding:0px 8px;
}
nav>.menu>.search{
  flex:none;
}
nav>.menu>.search>input.keyword{
  width:100px;height:20px;border-radius:5px;border:none;padding:6px;
  color:#222222;font-size:15px;
}
nav>.menu>.search>button{
  box-sizing:content-box;font-size:20px;border-radius:5px;border:none;padding:6px 10px;
  color:#222222;font-size:15px;cursor:pointer;
  background-color:var(--brand-button-bg-color);transition:background-color 0.5s;
}
nav>.menu>.search>button:hover,
nav>.menu>.search>button:active{
  background-color:var(--brand-button-bg-hover-color);
}
@media (max-width:1100px){
  nav>.menu{
    display:block;height:0px;overflow-y:hidden;
  }
  nav>.menu-trigger{
    display:block;
  }
  nav>.close+.menu{
    height:360px;width:100%;padding:10px 0px;background-color:white;color:var(--text-color);text-align:left;
    position:fixed;top:60px;left:0px;box-shadow:0px 0px 5px black;
    transition:height 0.5s;
  }
  nav>.close+.menu>.items{
    display:block;line-height:var(--text-line-height);
  }
  nav>.close+.menu>.items>.item{
    padding:5px 10px;
  }
  nav>.menu>.items>.item>a.white{
    color:var(--text-color);
  }
  nav>.close+.menu>.search{
    padding:10px;
  }
  nav>.close+.menu>.search>input.keyword{
    width:150px;border-radius:0px;border-bottom:1px solid var(--brand-color);
  }
}



/* footer */
footer{
  z-index:10;position:relative;
  padding:30px 40px;line-height:var(--text-line-height);
  color:var(--text-white-color);background-color:var(--brand-color)
}
footer>.view{
  display:flex;justify-content:space-between;flex-wrap:wrap;
}
footer section.col{
  flex:none;width:23%;
}
@media (max-width:1000px){
  footer section.col{
    width:45%;
  }
}
@media (max-width:600px){
  footer section.col{
    width:90%;
  }
}
footer section.col>.title{
  font-size:1.2rem;font-weight:bold;margin-bottom:20px;
}
footer section.col>.address::before{
  content:"\f276";font-family:FontAwesome;margin-right:3px;
}
footer section.col>.phone::before{
  content:"\f095";font-family:FontAwesome;margin-right:3px;
}
footer section.col>.email::before{
  content:"\f0e0";font-family:FontAwesome;margin-right:3px;
}
footer section.col>.facebook::before{
  content:"\f09a";font-family:FontAwesome;margin-right:3px;
}
footer section.col>.part{
  font-size:0.9rem;margin-bottom:10px;
}
footer section.col>.course>.duration,
footer section.col>.news>.time{
  color:#888888;
}
/* footer.copyright */
footer.copyright{
  padding:10px 40px;
  filter:brightness(0.6);
}





section.subpage{
  min-height:500px;
}
/* section.subpage>.sidebar */
section.subpage>.sidebar{
  position:fixed;top:60px;width:180px;min-height:100vw;height:100%;z-index:5;
  background-color:#eeeeee;padding:15px;
}
section.subpage>.sidebar>.sidebar-trigger{
  position:absolute;top:5px;right:-50px;opacity:0.75;cursor:pointer;
  width:48px;height:48px;text-align:center;display:none;
}
section.subpage>.sidebar>.sidebar-trigger>img{
  width:100%;height:100%;
}
section.subpage>.sidebar>.sidebar-trigger:active,
section.subpage>.sidebar>.sidebar-trigger:hover{
  opacity:1
}
section.subpage>.sidebar>.sidebar-trigger-close{
  right:-25px;
}
section.subpage>.sidebar>.sidebar-trigger-close>img{
  transform:rotate(180deg);
}
section.subpage>.sidebar>.headline{
  font-size:1.2rem;font-weight:bold;margin:10px 0px;
}
section.subpage>.sidebar>.menu{
  margin-top:20px;margin-left:5px;
}
section.subpage>.sidebar>.menu>.item{
  display:block;
  padding:13px 0px;padding-left:13px;border-bottom:1px solid white;
  border-left:4px solid transparent;
}
section.subpage>.sidebar>.menu>.item:hover,
section.subpage>.sidebar>.menu>.item:active{
  border-left:4px solid var(--brand-color);
}
section.subpage>.sidebar>.menu>.current{
  border-left:4px solid var(--brand-color);color:var(--brand-light-color);
  background-image:url("/school/images/right-arrow.png");background-repeat:no-repeat;background-size:auto 100%;
  background-position:right center;
}
/* section.subpage>main */
section.subpage>main{
  margin-left:210px;
  line-height:var(--text-large-line-height)
}
section.subpage>main .view{
  width:1200px;max-width:100%;
}
section.subpage>main .flex{
  display:flex;align-items:center;
}
section.subpage>main>.highlights{
  padding:30px;
  font-size:1.05rem;background:linear-gradient(to bottom, var(--brand-light-color-alpha), white);
}
section.subpage>main>.highlights .highlight{
  margin-bottom:15px;
}
section.subpage>main>.highlights .highlight>.keyword{
  font-weight:bold;border-bottom:2px solid var(--brand-highlight-color);
}
@media (max-width:1200px){
  section.subpage>.sidebar{
    left:-210px;
  }
  section.subpage>.sidebar-show{
    left:auto;
  }
  section.subpage>.sidebar>.sidebar-trigger{
    display:flex;
  }
  section.subpage>main{
    margin-left:0px;
  }
}
/* section.subpage>main>.page */
section.subpage>main>.page{
  padding:50px 30px;
}
section.subpage>main>.grey{
  background-color:#f8f8f8;
}







.hidden{
  display:none !important;
}
.modal{
  display:none;
  overflow:hidden;
  position:fixed;
  top:0px;
  right:0px;
  bottom:0px;
  left:0px;
  z-index:1050;
  outline:0;
}