@charset "utf-8";
/* CSS Document */

html,body { 

   font-weight:300; font-size: 21px ; line-height:34px;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  background-color: #FFF;
}

:root { 
	--main-color:#014099 ; /*深藍1*/
	--main2-color:#4abbf7; /*深藍2*/
	--main3-color:#92c8e4; /*橙色*/
	--main4-color:#ffd200; /*淺色*/
	
	
}
.yaqOZd { display:none !important}

.region > * { margin:0; }
.editingAdd{ position: absolute;top: -35px; }
.home-add{ top: 35px !important; z-index:2 }
#add_normal{ position: relative;top: 0; padding:10px; }

.editingAdd a{ background-color: #ffd800; padding:3px 15px ; border-radius:15px; color:#000;}
.editingAdd a:hover{ background-color: #cbff0f;color:#000;}

.view-content{ clear:both}

.swiper-slide .editing a{ display:block  !important; }
#banner_editing{ position:absolute;left:45px; z-index:2 }
.topBanner_editing{ bottom:50px !important; top: auto !important}

.editing{
  position: absolute;
  z-index: 2;
  top: 5px;
  left: 5px;
}
.editing a{ 
  /* Override the .focusable height: auto */
  width: 30px !important; font-size: 0 ;  border-radius: 50%;
  /* Override the .focusable height: auto */
  height: 30px !important;
	background-color: #ffd800;
  text-indent: -9999px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23000000' d='M14.545 3.042l-1.586-1.585c-.389-.389-1.025-.389-1.414 0l-1.293 1.293 3 3 1.293-1.293c.389-.389.389-1.026 0-1.415z'/%3e%3crect fill='%23000000' x='5.129' y='3.8' transform='matrix(-.707 -.707 .707 -.707 6.189 20.064)' width='4.243' height='9.899'/%3e%3cpath fill='%23000000' d='M.908 14.775c-.087.262.055.397.316.312l2.001-.667-1.65-1.646-.667 2.001z'/%3e%3c/g%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 20px 20px ;
}
.editing a:hover{ background-color: #cbff0f;}
li .editing a{ display:none !important;}
li:hover .editing a{ display:block  !important;}
.slick-slide:hover .editing a{ display:block  !important;}

a:link { text-decoration: none;}

#main_content a:link {color: #00266e; text-decoration: none;}
#main_content a:hover {color: #ffa800 ; text-decoration: underline; }

#block-olivero-eclass{position: absolute; right: 0; top: 0;}

/* .login_icon{ padding:5px 5px 0 10px;} */
.login_icon{    transform: translateY(-2px);flex: 1;text-align: center;  font-size: 30px;}
.login_icon a{font-weight: normal;  color: #fff;}
.login_icon img { border-radius:0 !important}
#login_area{ background:var(--main2-color); padding: 14px; border-radius: 18px; display: inline-flex;    align-items: center; width: 100%;margin-bottom: 20px;}
.bg_eclass{ float:right;flex: 2;}
.bg_eclass ul { list-style:none; margin: 0; padding: 0;}
.bg_eclass ul li{ float: left;margin-bottom: 10px;  margin-right: 10px;}

.bg_eclass input{ float: left; width:100%; background:#fff; border:0px solid #ddd; padding:2px; height:30px; min-height:30px; box-shadow:inset 2px 2px 4px rgba(0,0,0,.2); font-size:12px; color:#666 }

.bg_eclass  #sumbit{font-family: 'Noto Sans TC', sans-serif; background:#ffb400; border-radius:4px; box-shadow:inset 0px 0px 0px rgba(0,0,0,0); color:#fff; text-transform:uppercase; height:30px; width:64px; font-size:16px; cursor:pointer}
.bg_eclass  #sumbit:hover{ background:#666; color:#fff}

#vr_screen {max-width: 853px !important;}


.clear{clear:both}
img {border:0;}
div, ul li{ margin:0px auto; padding:0px;}

.pager { display: inline-block}
#page img{ max-width:100% ; margin: 0 auto;}

#page .term-tree-list { position: relative; margin-top:15px; }
#page .term-tree-list .term{ list-style:none; margin: 0; padding: 5px 0 5px 30px;}
#page .term-tree-list .term::before{ content: ""; position: absolute; left: 0; top: 5px; 	
	background-color: var(--main-color);
    -webkit-mask-image: url(../images/tag1.svg) ; 
    mask-image: url(../images/tag1.svg) ; 	
	background-size: cover; width: 20px; height: 26px; } 
#page .term-tree-list .selected { font-weight: normal; text-decoration: underline}

#banner_title::before , .banner_title::before  {background:url(../images/web/inner_top.png) no-repeat center bottom; content:""; height: 87px; width: 100%; background-size: cover !important; pointer-events: none;
position: absolute; bottom: 0; z-index: 1;}

.screen{ position:relative; padding:0px 30px; max-width:1800px; margin:0 auto}
.container{max-width:100%  }
.wide-content { width:auto; margin:0}

@media (max-width:960px){
  .breadcrumb{ font-size:15px !important; } 
}
.breadcrumb{ font-size:23px; padding:0 15px;  } 


.breadcrumb a{ 
color:var(--main-color);
}
.block-views-blockslideshow-block-1{ position: relative;} 

h1, h2, h3 { font-weight: 600; margin: 0;}
h4, h5, h6 { font-weight: 400; margin: 0;}

.node_title{
  color:#000;
}

h1{ font-size:38px; line-height:42px;color:var(--main-color); text-transform:uppercase; padding-bottom:20px; }
h2{ font-size:34px; line-height:38px;color:var(--main2-color);  padding-bottom:20px;}
h3{ font-size:26px; line-height:32px;color:var(--main3-color); margin-bottom:20px ; padding:5px 0; border-bottom:1px solid var(--main2-color) }

h4{ font-size:23px; margin:0px; color:var(--main4-color); line-height:33px; padding:5px 0; }
h5{ font-size:23px; margin:0px; color:var(--main2-color); line-height:33px; padding:5px 0; }
h6{ font-size:23px; margin:0px; color:var(--main3-color); line-height:33px; padding:5px 0; }


.title , .blocktitle , .sch_highlights b , #banner_title h1, .banner_title h1 , h6{ 
  font-optical-sizing: auto;
  font-weight: 350;
  font-style: normal;
  margin:15px 0; padding:5px 0; font-size:40px; line-height:46px; letter-spacing:3px; position:relative; color:var(--main-color); }

.current-subject{margin: 0;
padding: 15px 0 0 0;}

p{ margin:0px; padding:0px}
.blocktitle  { text-align: center; font-size:36px; text-align: center; margin-bottom:60px;  color:var(--main-color); line-height:42px;  }
.block__title {}

.region--secondary-menu , .region--secondary-menu{ margin:0;}
.menu--sidebar  .is-active , #block-olivero-main-menu   .is-active{ font-weight:600;color:var(--main-color) !important}

#header_top{  }
#header{  background: linear-gradient(to bottom, rgba(46, 80, 159, 0.95), rgba(46, 80, 159, 0)) !important; min-height:140px; z-index: 10;
width: 100%;  position:absolute}
#header .screen { display: flex;padding: 0;align-items: center;    max-width: 1800px;}
#header .logo { margin-left:0}

.sticky { z-index:10; -webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; opacity: 1; }
.sticky #header{ position:fixed; top:0px; z-index:100; width:100%;  /*box-shadow:  0 0 3px rgba(0,0,0,.2) ; */ min-height: auto; max-width:100%; /*background:rgba(255, 255, 255, 0.85)*/ /*background:rgb(46, 80, 159, 0.85) !important;*/

  /* background:linear-gradient(to bottom, rgba(46, 80, 159, 0.95), rgba(46, 80, 159, 0.55)) !important; */
  background: linear-gradient(to right, rgba(46, 80, 159, 0.95), rgba(46, 80, 159, 0.55)) !important;
} 
.sticky ul#main-menu > li > a {
  color: #fff !important;
}

ul#main-menu > li > a {
  color: #fff !important;
}

@media (min-width:961px){
  /* .sticky #logo{
    height: 120px;}
    .sticky .site-branding{
      min-height: auto !important;
    } */
    .sticky .site-branding__logo img { max-height:90px }
}
.sticky .right_top a{
  color:#fff;
}

.sticky .main-menu-btn{
  background:#fff !important;
}

.sticky .main-menu-btn-icon,.sticky  .main-menu-btn-icon:before,.sticky  .main-menu-btn-icon:after{
  background:#014099 !important;
}

.sticky ul#main-menu li a { margin:0}

.site-branding__logo img ,.sticky #block-olivero-eclass  , .top_area ul li a , a {-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; opacity: 1; }


.sticky .right_top { margin-top:0;}

.sticky #block-olivero-eclass { top: 0px; position: relative;float: right;  width: 33%;}


.site-branding { margin-left:0 ; width:28% }
.right_top{display: inline-flex; margin-right: 0; margin-left: 15px ;width:70%}

#lang { margin: 10px 0; padding: 0; float: right }
#lang ul { list-style: none; display:  flex;  margin: 0; padding: 0;}
#lang ul li { margin: auto 5px;} 
#lang ul li a{ background: #ddd; color: #000; padding: 5px 10px; border-radius: 12px; font-size: .9em; }
#lang ul li a:hover{ background: var(--main2-color); color: #fff; }
#lang ul li a.is-active{ background: var(--main-color); color: #fff; }

#page-wrapper{ background:#FFF; }
#page img{ max-width:100% ; }

.home_zoneA{ background:url(../images/web/bg_news.png)  top center; background-size: auto auto;
margin-top: -150px;
z-index: 1;
position: relative;
padding: 50px 0 0 0; }
.home_zoneB {    }
.home_zoneC{  padding:60px 0;
  background: url(../images/web/bg_sch.png) no-repeat center top;
  background-position-y: top;
  background-attachment: scroll;
  background-size: auto;
background-size: cover;



}
.home_zoneD{  min-height:250px;  }

.view-more , .view-more2{ margin: 0 auto; padding: 0; text-align:  center; position:absolute; right:0; top:15px; z-index:1}


.more-link { position: relative; }
.more-link a{ font-size: 18.5px; line-height: 26px; padding: 10px 80px 10px 30px; background:#ffffff; border-radius:18px; box-shadow: 0 3px 3px rgba(0,0,0,.3) }
.more-link a:hover{   }

.view-more a {transition:all 0.3s ease-in-out; background:url(../images/web/i_more.png) no-repeat #fff; background-position: 90% 50%;  }


.view-more a:hover {background:url(../images/web/i_more.png) no-repeat #4abbf7; color:#fff; background-position: 90% 50%;  }



.view-more2 a {
  position: relative; display: inline-block; padding: 10px 35px;
}


.old_album{ margin:50px 0; display: flex;  }

.old_album a{ color:#fff; padding:30px ; font-size:28px; line-height:35px; margin:0 auto;
background-size: 200% 100%;
background-position: 100% 0; 
    background-image: linear-gradient(to right, #ffd200 50%, #014099 50%); border-bottom:3px solid #ffd200   }
	
.old_album a:hover {background-position: 0% 0; }


	
	
.one-time .box:hover::after {background-position: 0% 0; }

.view-more2 a::before, .view-more2 a::after {
  content: ''; 
  position: absolute; 
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-style: solid; border-radius: 8px;
  border-color: var(--main3-color); 
  transition: transform 0.3s ease;
}

.view-more2 a::before {
  border-width: 2px 0 2px 0;
  transform: scaleX(0);
}

.view-more2 a::after {
  border-width: 0 2px 0 2px;
  transform: scaleY(0);
}

.view-more2 a:hover::before, .view-more2 a:hover::after {
  transform: scale(1, 1);
}

.region--breadcrumb{  margin:-20px 0 50px 0; padding:10px 0 0 0; position:relative ; z-index:1 ;

}
/* breadcrumb bg link */
.breadcrumb__content {/*background: url(../images/web/bg_links_top.png) repeat-x bottom; background-size:auto 12px; padding-bottom:30px;*/}


.news_tag { position: absolute; left: -5px; top: -5px; background-image: url(../images/icon/i_news.png); width: 90px; height: 44px; background-size: cover; z-index: 1; pointer-events: none;  }
.news_tag2 { position: absolute; left: 0; top: 0; background-image: url(../images/icon/i_news2.png); width: 90px; height: 28px; background-size: cover; z-index: 1; pointer-events: none;  }

#logo{ }

.sch_highlights{  padding:50px 0; }
.sch_highlights .title { padding: 5px 0 5px 5%;}
.sch_highlights .title::before { z-index:0; position:absolute; pointer-events: none;  content:""; left:-46%; width:50%; height:3px; background:#313cae; top:28px;    }
.sch_highlights b { color:#fff; font-size:28px; line-height:34px; padding:0; margin:0;}

#history_area ul li { display:block; text-align: center; margin-bottom:50px;}
#history_area ul li img{ height:210px; margin:0 auto; margin-bottom:30px; }
.sch_highlights ul{  
display: grid; padding:50px 0;
grid-template-columns: repeat(3, 1fr);
gap: 20px; margin:0;
}

.sch_highlights ul li{  
width: calc(100% - 0px); 
padding: 0px;
display: flex;
align-items: center;
text-align: center; position:relative;
}

.block__title{
  font-optical-sizing: auto;
  font-weight: 350;
  font-style: normal;
  margin: 15px 0;
  padding: 5px 0;
  font-size: 40px;
  line-height: 46px;
  letter-spacing: 3px;
  position: relative;
  color: var(--main-color);
}

.boxing .title , h6,.block__title  , h1.node_label {display: inline-block;
  position: relative;padding: 5px 0 15px 20px;border-left: 5px solid #0374b8;font-size: 32px;
line-height: 42px;}
.boxing .title::before  , h6::before,.block__title::before  , h1.node_label::before  {position: absolute;     content: ' \25C8';  background-position: 0;  padding-left: 0;  font-size: 19px;  color: #ffd200;  bottom: -21px;  right: -11px;}
.boxing .title::after  , h6::after,.block__title::after  , h1.node_label::after  {position: absolute;     content: ' ';  background-position: 0;  padding-left: 0;  font-size: 19px;  color: #ffd200; bottom: -2px;left: -5px;  border-bottom: 2px solid #ffd200;
  width: 100%;}

#block-sidebar-nav h2::before{ display:none}

.sch_highlights  .news-card { border-radius:24px; overflow:hidden;    max-height: 363px;
  aspect-ratio: 15 / 10; }

.sch_highlights ul li img{   border-radius:24px;   }

.sch_highlights ul li figure:hover img{
  transform: scale(1.2) rotate(2deg) !important;
}

.box_promo{ background: url(../images/web/bg_home_s.png) no-repeat top left #fff ; padding:25px;border-radius: 20px;
max-width: 90%; display: flex ; align-items: center; }

.box_promo .content{ float:left; width:38%;    font-size: 24px;
  line-height: 46px;} 
.box_promo .cover{ float:right; width:60%; position: relative}
.box_promo a{ position: relative; }

.box_promo  h3 {/* color:	#0073b9; text-align: center ; border-bottom:0; font-size:33px; line-height:40px;*/

text-align: center;
  border-bottom: 0;
  font-size: 33px;
  line-height: 40px;
  position: absolute;
  left: -20px;
  bottom: 20px;
  background: #0073b9de;
  padding: 10px;
  color: #fff;
  font-weight: 500;
  text-transform: uppercase;
}

.sch_highlights ul li span, .sch_highlights .boxing { position:absolute; bottom:0; width:100%; left:0; color:#fff; font-size:21.5px; padding:30px 0; 
background: linear-gradient(0deg,rgb(46, 80, 159) 20%, rgba(79,174,231,0) 100%); margin:0 }  

.bg_god_msg { background: url(../images/web/students.png) no-repeat left center #2f3563;  padding:50px 0; 
justify-content: center;
align-items: center; }

.bg_god_msg .screen { background: url(../images/web/sch_logo.png) no-repeat right center   ;  background-size: auto 75%}

.bg_god_msg .title { color:#fff; text-shadow: 0 0 5px rgba(0,0,0,.2)}
.bg_god_msg .contents{ float:right; width:45% ; color:#fff; background: rgba(47,53,99,.7) ; margin:90px 0; padding:15px; }

.bg_whystcc { background: url(../images/web/stcc_intro.png) no-repeat #21110b; background-position: 100% 0%; 
    background-size: auto 100%; padding:50px 0; 
justify-content: center;
align-items: center; }
.bg_whystcc .title { color:#fff; text-shadow: 0 0 5px rgba(0,0,0,.2)}
.bg_whystcc ul { list-style: none; margin:0  0 0 -3.3% ; padding:20px 0; }
.bg_whystcc ul li{ float:left; width:30%; margin: 0 0 30px 3.3% ; background: rgba(0,0,0,.2) ; text-align: center; padding:0px 0; color:#fff; font-size:42px; line-height:50px; }
.bg_whystcc ul li .box_why{ border:1px solid rgba(255,255,255,.3) ; padding:50px 0; }


.bg_whystcc .contents { width:65%; float:left;}

.node__content{ clear:both;}
.node__content time{ display: block !important; margin-bottom:10px;}


#banner_title, .banner_title , #nonbanner_title { background-image: url(../images/web/inner_banner.jpg); background-repeat: no-repeat; background-size: cover !important ; position:relative; point-events:none;}
#banner_title h1, .banner_title h1, #nonbanner_title h1{ color:#fff;  text-shadow:  0px 1px 3px rgba(0, 0, 0, 0.4); padding:280px 0 110px 5% ; margin:0; z-index:1 } 
#banner_title::after,   .banner_title::after , #nonbanner_title::after{ pointer-events: none;  content:"";background: url(../images/web/sub_title.png) no-repeat left bottom; position:absolute; bottom:25px; left:0; width:100%; height:100%; z-index:0}
@media (max-width:1200px) and (min-width:961px){
  #banner_title::after,   .banner_title::after , #nonbanner_title::after{ 
    bottom: 15px;
  }
}


#nonbanner_title { background: url(../images/web/bg_news.png) no-repeat bottom center; }
#nonbanner_title h1{  padding:220px 0 40px 5% ; color:var(--main-color) ; text-shadow: 0 0 0; } 
#nonbanner_title::after{ display: none}
#nonbanner_title h1::before {background: var(--main2-color); bottom:58px;}

#block_latest-news{ padding:100px 0 }
#block_latest-news .blocktitle { position: relative;z-index: 1;}
#block_latest-news .blocktitle span {  padding:10px 30px 10px 80px; display: inline; background-image: url(../images/web/i_news.png); background-repeat: no-repeat;
background-position: left center;  }

#block_latest-news  .news-card a:hover b { color: #2e509f}


@media (max-width:960px){
  .i_awards ,.i_activity{
    font-size:24px;
  }
  .sch_highlights ul li span, .sch_highlights .boxing{
    background:linear-gradient(0deg, rgba(79,174,231,1) 0.1%, rgba(79,174,231,0) 100%) !important;
    padding:15px 0;
  }


}

.i_awards {  /*padding:10px 30px 10px 60px;*/ display: inline; /*background-image: url(../images/web/i_awards.png); background-repeat: no-repeat; background-position: left center;*/  }
.i_activity {  /*padding:10px 30px 10px 85px; */display: inline; /*background-image: url(../images/web/i_album.png); background-repeat: no-repeat; background-position: left center; */ }

.video_theme{ max-width:80%; margin:50px auto ;}

.slider-slogan{ position: absolute; bottom: 15%; }
.slider-slogan .slogan_text{ font-size: 2.5em;
  padding: 0.55em;
  line-height: 1.85em;
  color: #fff; background: #086cc2a1 ; }

.slogan_left{ left:0;}
.slogan_right{ right:0;}
.view-empty{ clear:both}

footer{ background: rgb(46, 80, 159);  color: #fff; padding: 50px 0 ; font-size:14px; }
footer a {color: #fff !important;}
footer .text-content, footer a{ color: #333; font-size: 14px} 
 
 
footer .power { float:right;  }
footer .copyright { float:left}
footer .copyright a , footer .power a { color:#2f3563; text-decoration: underline}

#main_content{  min-height: 500px;float: left; width: 72%;background: #ffffffcf;
  padding: 20px; }

#main_content_full{  min-height: 500px;float: none;padding: 30px 5%;}

#sidebar-nav{float:right; width:24%; }

#block_usefullinks{ float: left; width: 65% ; position: relative; background:url(../images/web/bg_links_top.png) repeat-x top; padding: 20px 0; }
#block_usefullinks .blocktitle{ text-align: left; margin-bottom: 30px;  }
/* #block_usefullinks .blocktitle span {  padding:10px 30px 10px 60px; display: inline; background-image: url(../images/web/i_links.png); background-repeat: no-repeat;
background-position: left center;  } */

#block_usefullinks .blocktitle span {
  padding: 10px 30px 10px 60px;
  display: inline-block; 
  position: relative; 
}

#block_usefullinks .blocktitle span::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 0;
  transform: translateY(-50%);
  width: 40px;
  height: 100%;
  background-image: url(../images/web/i_links.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  animation: rotateAnimation 6s linear infinite;
}

@keyframes rotateAnimation {
  0%{
     transform: rotate(0deg);
    }
 100%{
     transform: rotate(360deg);
    }
 }
 
 


#block_usefullinks .view-more{ top:45px;}

.main_box{ text-align: center; padding: 50px; display: flex;}

#block_calendar{ float: right; width: 33% ; position: relative; background:url(../images/web/bg_calendar.png) no-repeat right top #0073b9 ; padding: 20px 0; border-radius: 16px; }
#block_calendar .area{ padding:20px; margin: 15px;border-radius: 16px; background: #fff; }
#block_calendar  .blocktitle { position: relative;z-index: 1 ; color: #fff; text-align : left ; margin-bottom: 20px;}
#block_calendar .blocktitle span {  padding:10px 30px 10px 80px; display: inline; background-image: url(../images/web/i_news.png); background-repeat: no-repeat;background-size: 60px auto;
  background-position: 10px center; }


.useful-links ul{
  display: grid; list-style:none; padding:0; margin:0;
  grid-template-columns: repeat(4, 1fr); column-gap:
  gap: 20px;
} 

.useful-links ul li{ 
  width:100% ; position:relative;  
  border:3px solid #fff; margin-bottom:20px;
}

.useful-links ul li:hover{
  border:3px solid #FFD200;
  }

.view-header{ margin:0 ; padding:0; }
#ctd-fliters .form--inline .form-actions { margin:auto }

#ctd-fliters label{ display:none}
#ctd-fliters {
margin-block-end: var(--sp0); text-align:  right;  float: right;


}

.contextual-region .view-header{
margin-block-end: var(--sp1) !important;
}


/* Table */
#main_content table{border-collapse: inherit; width:100%;  line-height:33px; border:1px solid var(--main-color);   }
#main_content tr:nth-child(even) td { background:#f2f2f2; color:#333; padding:5px; }
#main_content tr:nth-child(odd) td { background:#fff; color:#333; padding:5px; }
#main_content table ul, table ol{ margin:0; }


.location {
  width: 100%;
  margin: 20px 0;
  box-shadow: 0 0 3px rgba(0,0,0,.2);
}
iframe{ width:100%; min-height: 350px;}
.text-content iframe{ width:100%; min-height: 550px;}
/* Template */
.tpl-info time, .block-info time, .node__content time , .sch-album1 time { position: relative; display: inline-block; padding: 5px 0 5px 40px ; background: url(../images/web/i_date.png) no-repeat left center; }
.news-card time::before{  background-color: #fff !important }

.index_block { background: none}
.index_block b { display: block}
#page time::before{ display:none; content: ""; position: absolute; left: 0; top: 13px; 	
	background-color: var(--main-color);
    -webkit-mask-image: url(../images/date.svg) ; 
    mask-image: url(../images/date.svg) ; 	
	background-size: cover; width: 20px; height: 21px; }

	
.block-info{ list-style: none; margin: 0; padding: 0 ; background:  none}
.block-info li{position: relative;  }


.tpl-info{ list-style: none; margin: 0; padding: 0;}
.tpl-info li{position: relative; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; }
.tpl-info li:hover{  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px }
.tpl-info li a{ color: #333; display: block; width: 100%}
.tpl-info li a:hover{ color: #333;}
.tpl-info li b, .block-info li b{ display: block}
.tpl-info figure img , .block-info figure img {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	opacity:1;
}
.tpl-info  figure:hover img ,.block-info  figure:hover img {
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
	opacity:.8;
}
.tpl-info figure  ,.block-info figure {
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	background: #fff;
	overflow: hidden;
}
.template-A ul{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
} 

.template-A ul li{ 
  width:calc(100% - 30px) ; background: #fff;
  padding:15px;display: flex; margin-bottom:20px;
  align-items: center;
	text-align: center;
}

.template-B ul{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
} 

.template-B ul li{ 
  width:calc(100% - 30px) ; background: #fff;
  padding:15px;display: flex;margin-bottom:20px;
  align-items: center;
	text-align: center;
}

.template-C ul{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
} 

.template-C ul li{ 
  width:calc(100% - 30px) ; 
  padding:15px;display: flex;
  align-items: center;
	text-align: center;
}


.Block_A ul{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5%;
} 
.Block_A ul li{ position:relative; width: 100%;}

.Block_B ul{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5%;
} 
.Block_B ul li{ position:relative; width: 100%; background: #fff;}

.news-card .cover{ border-radius:16px; overflow:hidden; border:3px solid #4c78dd; position:relative;}

.news-card:hover .cover{ border:3px solid #ffd200; }

.news-card {

  margin: 1px;
  position: relative;
  overflow: hidden; 
  flex: 1;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
}
.news-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
    }
.news-card__image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 1s ease;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: relative;
    z-index: -1;
  }

.news-card__text-wrapper {
    position: relative;
    padding: 5px 10px 15px 10px; width:calc(100%);
    color: var(--main-color); text-align: center;
    transition: background-color 1.5s ease;
  }
.news-card__title {
    transition: color 1s ease;
    margin-bottom: .5rem;
  }
.news-card__details-wrapper {
    max-height: 0;
    opacity: 0;
    transition: max-height 1.5s ease, opacity 1s ease;
  }
.news-card:hover b { color:#ffd200; text-decoration: underline; } 
 
  @media (min-width: 900px) {
    .news-card:hover .news-card__details-wrapper {
      max-height: 20rem;
      opacity: 1; padding:15px 0 0 0;
    }
    .news-card:hover .news-card__text-wrapper {

    }
    .news-card:hover .news-card__title {
      color: yellow;
    }

  }


.articles{ padding:1em;}
.articles:hover:before {
  width: 100%;
}
.articles::before {
  content: "";
  position: absolute;
  bottom: 0px;
  height: 2px;
  width: 0%;
  background: var(--main-color);
  right: 0px;
  transition: width 0.4s; 
}



/* End Template */

/* Category */
.category {
float: left;
 background:#ebeff2;
padding: 8px 10px;
border-radius: 8px; margin-bottom:30px;
z-index: 1;
position: relative;}

.category ul {  list-style: none; margin:0; padding:0}
.category ul li {  display: inline-block;}
.category ul li a {
  display: block;
  padding: 5px 20px; font-size:1.3em;
  text-decoration: none;
  color: #333333;
  font-weight: 400;
  margin: 0 10px;
}
.category ul li+li  { border-left:1px dotted #666;}
	
.category ul li a,
.category ul li a:after,
.category ul li a:before {  transition: all .5s;}
.category ul li a:hover {  color: var(--main-color);}

#ctd-fliters .button{ background: var(--main-color); }
#ctd-fliters select{ color: var(--main-color);  }
#ctd-fliters .button , #ctd-fliters select {font-size:16px; line-height: 24px; height:50px;}


/* stroke */
.category.stroke ul li a,
.category.fill ul li a {  position: relative;}
.category.stroke ul li a:after,
.category.fill ul li a:after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 0%;
  content: '.';
  color: transparent;
  background: var(--main-color);;
  height: 2px;
}
.category.stroke ul li a:hover:after {
  width: 100%;
}

.category.fill ul li a {  transition: all 2s;}
.category.fill ul li a:after {
  text-align: left;
  content: '.';
  margin: 0;
  opacity: 0;
}
.category.fill ul li a:hover {
  color: #fff;
  z-index: 1;
}
.category.fill ul li a:hover:after {
  z-index: -10;
  animation: fill 1s forwards;
  -webkit-animation: fill 1s forwards;
  -moz-animation: fill 1s forwards;
  opacity: 1;
}

/* SHIFT */
.category.shift ul li a {
  position:relative;
  z-index: 1;
}
.category.shift ul li a:hover {
  color: #91640F;
}
.category.shift ul li a:after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 1px;
  content: '.';
  color: transparent;
  background: var(--main-color);
  visibility: none;
  opacity: 0;
  z-index: -1;
}
.category.shift ul li a:hover:after {
  opacity: 1;
  visibility: visible;
  height: 100%;
}


.category .current a , .category .current a:hover {
  color: #fff; 
  background: var(--main-color);
}


/* Keyframes */
@-webkit-keyframes fill {
  0% {
    width: 0%;
    height: 1px;
  }
  50% {
    width: 100%;
    height: 1px;
  }
  100% {
    width: 100%;
    height: 100%;
    background: var(--main-color);;
  }
}

/* Keyframes */
@-webkit-keyframes circle {
  0% {
    width: 1px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    height: 1px;
    z-index: -1;
    background: var(--main-color);;
    border-radius: 100%;
  }
  100% {
    background: var(--main-color);;
    height: 1000%;
    width: 1000%;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 0;
  }
}
/* End Category */

.sitemap-item {  margin: 0px auto;  padding: 0 ;}

.sitemap-item ul {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
list-style-type: none;    padding: 0;    margin: 0;
}
.sitemap-item ul ul{grid-template-columns: repeat(1, 1fr); gap: 5px; margin:10px; padding:0 25px; list-style-type: initial;  }
.sitemap-item ul li { width:100%; margin:0 ; padding:0 }

.sitemap-item ul li a, .sitemap-item ul li span {  
    padding: 10px 15px ; display:block;
    border-bottom: 1px solid #ddd;
    transition: background 0.3s ease;  }

.sitemap-item ul li a {  color: var(--main-color);}
.sitemap-item ul li span{     color: #555; }

.sitemap-item ul li a:hover {
    background: var(--main2-color) ; color:#fff; 
}

.sitemap-item ul li ul li a , .sitemap-item ul li ul li span {
	padding: 5px 0 5px 0px ; display:block; border-bottom:0; font-size:1em; font-weight:300
}
.sitemap-item ul li ul li a:hover { background:none; color:var(--main2-color) }

.sidebar-nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    background: #b6daf461;
	border-radius:16px;
	
}
.sidebar-nav ul li ul {
    background: #fff;}
	
.sidebar-nav .metismenu {
    padding: 15px; font-size: 1.15em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.sidebar-nav .metismenu a.current { color:var(--main-color);  }

.sidebar-nav .metismenu li + li {
  margin-top: 5px;
}
.sidebar-nav .metismenu li:first-child {
  margin-top: 5px;
}
.sidebar-nav .metismenu li:last-child {
  margin-bottom: 5px;
}
.sidebar-nav .metismenu > li {
    /*-webkit-box-flex: 1;
    -ms-flex: 1 1 0%;
    flex: 1 1 0%;*/
	width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
}
.sidebar-nav .metismenu a {
    position: relative;
    display: block;
    padding: 5px 35px 5px 15px;
    color: #333333;
    outline-width: 0;
    transition: all .3s ease-out;
}

.sidebar-nav .metismenu ul a {
    padding: 5px 35px 5px 30px;
}
.sidebar-nav .metismenu ul ul a {
    padding: 5px 35px 5px 45px;
}
.sidebar-nav .mm-active { color: var(--main-color);  !important; }
.sidebar-nav .metismenu a:hover,
.sidebar-nav .metismenu a:focus,
.sidebar-nav .metismenu a:active,
.sidebar-nav .metismenu .mm-active > a {
    color:var(--main-color); 
    text-decoration: none;
}




.subjectlists {
	position: relative;
	margin: 0 auto;
	padding: 0 !important;
	max-width: 1000px;
	list-style: none;
	text-align: center;
}

.subjectlists figure figcaption {
	padding: 2em;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.subjectlists figure figcaption::before,
.subjectlists figure figcaption::after {
	pointer-events: none;
}
.subjectlists a {background:#fff; color:#014099; padding:15px; display:block ;border:1px solid #014099 }
.subjectlists a:hover {background:#014099; color:#fff; }


.subjectlists figure figcaption,
.subjectlists figure figcaption > a {
	position: absolute; background:#fff; color:#014099;
	top: 0;	left: 0; width: 100%; height: 100%;
}
/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.subjectlists figure figcaption > a {
	z-index: 1;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}


.subjectlists figure h2,
.subjectlists figure p {
	margin: 0; font-size:18.5px; white-space: nowrap;
}
.subjectlists figure p {
	letter-spacing: 1px;
	font-size: 68.5%;
}
figure.effect-honey {
	background: #4a3753; min-height: 180px;
}
figure.effect-honey img {
	opacity: 0.9; max-width:125%:
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;	
	transition: all 0.3s ease-in-out; opacity: 1;
}

figure.effect-honey:hover img {
	opacity: 0.5;
}
figure.effect-honey figcaption::before {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 10px;
	background: var(--main2-color);
	content: '';
	-webkit-transform: translate3d(0,10px,0);
	transform: translate3d(0,10px,0);
}
figure.effect-honey h2 {
	position: absolute; font-style: normal;
	bottom: 0;
	left: 0;
	padding: 0.5em 1.5em; color: #fff; text-shadow: 0 0 8px #000000a1;
	width: 100%;
	text-align: left;
	-webkit-transform: translate3d(0,-30px,0);
	transform: translate3d(0,-30px,0);
}
 

figure.effect-honey figcaption::before,
figure.effect-honey h2 {
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

figure.effect-honey:hover figcaption::before,
figure.effect-honey:hover h2,
figure.effect-honey:hover h2 i {
	opacity: 1; 
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

#block-sidebar-nav { background: var(--main4-color); border-radius:16px; overflow: hidden }
#block-sidebar-nav h2{ padding: 20px 15px; border-left:0;
  background: var(--main-color); 
  color: #fff; margin:0;
  text-align: center;border-bottom-right-radius: 16px;}
#block-sidebar-nav ul { list-style:  none; margin: 0; padding: 15px; }
#block-sidebar-nav ul li{ float: none; border-bottom: 1px solid #ddd; position:  relative}
#block-sidebar-nav ul li a{ padding:15px; display:  block; border-radius: 10px;}
#block-sidebar-nav ul li a:hover, #block-sidebar-nav ul li a.active {
  background: #fff;
}

.view-subject-activity .view-header{ margin:15px 0}
.subject-add { top: -50px; right:0 }

	
.subjectlist ul{ list-style:  none; margin: 0; padding: 15px; }
.subjectlist ul li{ float: none;  border-bottom: 1px solid var(--main3-color); position:  relative}
.subjectlist ul li a{ padding:15px 15px 15px 30px; display:  block; font-size: 21px; line-height: 27px;  }

.subjectlist ul li a::before {
  content: "\2022";
  font-family: Arial;
  position: absolute;
  color: var(--main2-color);
  left: 0;
  top: 19px;
  font-size: 50px;
  font-weight: 400;
}

.contact_area{ padding:170px 0 40px 0; overflow: hidden; position: relative ; background-image: url(../images/web/bg_footer.png) ; background-size: no-repeat; background-position: top center;}

.contact_info{ color:#fff; position: relative; z-index:1; float: left; max-width:70%}
.contact_info ul{ list-style: none; margin:0; padding:0; }
.contact_info ul li { float: left; width:100%; margin:5px 0; }
.contact_info ul li + li{  width:50%; }

.contact_info ul li span { background: url(../images/web/i_address.png)  no-repeat left center; padding:5px 0 5px 35px; min-width:115px; display: inline-block;   }
.contact_info ul li+li span {background: url(../images/web/i_tel.png)  no-repeat left center;  }
.contact_info ul li+li+li span {background: url(../images/web/i_fax.png)  no-repeat left center;  }
.contact_info ul li+li +li+li span {background: url(../images/web/i_email.png)  no-repeat left center;  }
.contact_info ul li+li +li+li +li span {background: url(../images/web/i_web.png)  no-repeat left center;  }

.contact_info ul ul li{  width: auto; margin: 5px 5px 0px 5px;}
.contact_info ul ul li img{ width:30px;  }

.contact_info ul li a{ color:#fff; text-decoration: underline;}

/* .menu_arrow ul::before {  
background-color: white; 
    -webkit-mask: url(../images/triangle-up.svg) no-repeat center;
    mask: url(../images/triangle-up.svg) no-repeat center;
    mask-size: cover;
background-size: cover;
content: "";
position: absolute;
pointer-events: none;
width: 50px;
height: 15px;
top: -14px;
z-index: 111;
left: 15px;} */

.menu_arrow ul::before {  
  background: url(../images/triangle-up2.png) no-repeat center;
  background-size: auto;
background-size: contain;
content: "";
position: absolute;
pointer-events: none;
width: 50px;
height: 50px;
top: -31.3px;
z-index: 111;
left: 15px;
}


.menu_arrow ul ul::before { display:none;} 

.logo_footer{ float: left; width:30%; padding-top:20px;padding-right: 20px; }
.logo_footer img { max-height: 90px;}
.cd-top {
  display: inline-block;  position: fixed;  opacity: 0; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  height: 50px;  width: 50px;  bottom: 50px;  right: 50px; z-index:10; border-radius:50%;
  overflow: hidden;  text-indent: 100%;  white-space: nowrap; border:1px solid #fff; box-shadow:0px 0px 5px #999;
  background: #ffd200  url(../images/web/cd-top-arrow.svg) no-repeat center center;

}
.cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;-moz-transition: opacity .3s 0s, visibility 0s 0s;transition: opacity .3s 0s, visibility 0s 0s;
  background: #0073b9 url(../images/web/cd-top-arrow.svg) no-repeat center center;
}
.cd-top.cd-is-visible { visibility: visible; opacity: 1;}
.cd-top.cd-fade-out { opacity: .9;}
.no-touch .cd-top:hover { background-color: #40498a; opacity: 1;} 


.Videobanner {
  clip-path: polygon(100% 0%, 0% 0% , 0.00% 89.06%, 1.00% 88.76%, 2.00% 88.47%, 3.00% 88.20%, 4.00% 87.94%, 5.00% 87.71%, 6.00% 87.49%, 7.00% 87.29%, 8.00% 87.12%, 9.00% 86.96%, 10.00% 86.83%, 11.00% 86.72%, 12.00% 86.63%, 13.00% 86.56%, 14.00% 86.52%, 15.00% 86.50%, 16.00% 86.51%, 17.00% 86.54%, 18.00% 86.59%, 19.00% 86.66%, 20.00% 86.76%, 21.00% 86.88%, 22.00% 87.03%, 23.00% 87.19%, 24.00% 87.38%, 25.00% 87.59%, 26.00% 87.81%, 27.00% 88.06%, 28.00% 88.32%, 29.00% 88.60%, 30.00% 88.89%, 31.00% 89.20%, 32.00% 89.52%, 33.00% 89.85%, 34.00% 90.19%, 35.00% 90.55%, 36.00% 90.91%, 37.00% 91.27%, 38.00% 91.64%, 39.00% 92.02%, 40.00% 92.40%, 41.00% 92.77%, 42.00% 93.15%, 43.00% 93.52%, 44.00% 93.89%, 45.00% 94.25%, 46.00% 94.61%, 47.00% 94.96%, 48.00% 95.30%, 49.00% 95.63%, 50.00% 95.94%, 51.00% 96.24%, 52.00% 96.53%, 53.00% 96.80%, 54.00% 97.06%, 55.00% 97.29%, 56.00% 97.51%, 57.00% 97.71%, 58.00% 97.88%, 59.00% 98.04%, 60.00% 98.17%, 61.00% 98.28%, 62.00% 98.37%, 63.00% 98.44%, 64.00% 98.48%, 65.00% 98.50%, 66.00% 98.49%, 67.00% 98.46%, 68.00% 98.41%, 69.00% 98.34%, 70.00% 98.24%, 71.00% 98.12%, 72.00% 97.97%, 73.00% 97.81%, 74.00% 97.62%, 75.00% 97.41%, 76.00% 97.19%, 77.00% 96.94%, 78.00% 96.68%, 79.00% 96.40%, 80.00% 96.11%, 81.00% 95.80%, 82.00% 95.48%, 83.00% 95.15%, 84.00% 94.81%, 85.00% 94.45%, 86.00% 94.09%, 87.00% 93.73%, 88.00% 93.36%, 89.00% 92.98%, 90.00% 92.60%, 91.00% 92.23%, 92.00% 91.85%, 93.00% 91.48%, 94.00% 91.11%, 95.00% 90.75%, 96.00% 90.39%, 97.00% 90.04%, 98.00% 89.70%, 99.00% 89.37%, 100.00% 89.06%);
  overflow: hidden;
  z-index: 2;
  position: relative;
}

.Videobanner article{
min-height: 700px;
height: 100vh;
max-height: 100vh; position:relative;
}
.Videobanner article::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0; pointer-events:none;
    left: 0;

    opacity: .4;
    transform: matrix(-1,0,0,1,0,0);
    z-index: 10; pointer-events;
}
.fsTypeVideo video {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    object-fit: cover;
}
.fsTypeVideo video {
min-height: 700px;
height: 100vh;
max-height: 100vh;
}
.video_content{ position:absolute; bottom:50px; z-index:2; left:50px;}
.video_content button {
    border: 0;
    background: #fff;
    margin: 0;
    padding: 0;
    width: 40px;
    height: 40px;
    cursor: pointer;
}
  .video_content {
      position: absolute;
      bottom: 20px;
      left: 20px;
    }
    #myBtn {
      font-size: 24px;
      cursor: pointer;
      background: rgba(0, 0, 0, 0.5);
      color: white;
      padding: 10px;
      border-radius: 5px;
    }

/* subject activity */
.sch-album ul{  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;    margin: 0;
  padding: 0;}
  @media screen and (max-width: 960px) {
    .sch-album ul{
        grid-template-columns: repeat(1, 1fr) !important;
    }
}
.sch-album ul li {  width: calc(100% - 30px);
  background: #fff;
  padding: 15px;
  display: flex;
  margin-bottom: 20px;
  align-items: center;
  text-align: center;
  flex-direction: column;
  position: relative;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.sch-album ul li:hover {
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.sch-album ul li a:hover{
  text-decoration: none !important;
}
.sch-album time{
  position: relative;
  display: inline-block;
  padding: 5px 0 5px 40px;
  background: url(../images/web/i_date.png) no-repeat left center;
}
.sch-album figure{
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  background: #fff;
  overflow: hidden;    border-radius: 18px;
}
.sch-album figure img{
  transition: transform 0.3s ease-in-out; 
}
.sch-album figure:hover img,.sch-album figure:hover img {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  opacity: .8;
}
.sch-album ul li .content a{ display:inline}
.sch-album ul li .title { font-size:25px; line-height:29px; padding:0 0 5px 0; color:#0143b0;}
.sch-album ul li .more { margin-top:10px; }
.sch-album ul li .more a{ padding:8px 20px; line-height:18px; display:inline-block; background:#0143b0; color:#fff;
font-size:14px; }
.sch-album ul li .more a:hover { background: #F90;color:#000 !important; }
.sch-album ul li b{
  display: block;
  color:#333;
}
.boxing{ margin:15px 0;}

/* subject awards */
.sch-album1{display: flex;}
.sch-album1 ul{ list-style:none; padding:5px 0;    width: 100%; position:relative; margin:0}
.sch-album1 ul li { margin: 10px 0; display: flex;
  width: 100%; padding:10px 0; position:relative ; border-radius:16px; border:2px solid #dfedf6;}
  .sch-album1 ul li:hover {border:2px solid #014099 ; background:#f1f1f1; }

.sch-album1 ul li .cover{ float:left; width:33%; padding:0 10px; }
.sch-album1 ul li .cover img{ border-radius:12px; }
.sch-album1 ul li .content{ float:right; width:100%; font-size:17px; line-height:23px; padding:10px; }

.sch-album1 ul li  a{ display:inline ; width:100% }
.sch-album1 ul li .title { font-size:23px; line-height:29px; color:#0143b0; border-left:2px solid #0143b0; padding-left:15px; border-bottom:1px solid #ddd ; margin:5px 0;}
.sch-album1 ul li .tag_icon{ background:#e2f5ff; color: #014099; padding:10px; margin:5px  0 ; border-radius: 8px;display: inline-block; }

.template-A .tag_icon{ position:absolute; z-index:1; right:0; top:0; background:#e2f5ff; color: #014099; padding:0 10px; margin:5px  0 ; border-radius: 8px;display: inline-block; font-size:15px; }

.sch-album1 ul li  a{ display: flex   }

/* filpbook */
.Block_C ul {
  margin: 0;
  padding: 0
}

.Block_C ul li {
  position: relative;
  width: 100%;
  background: #fff;
  margin: 0 0 30px 0;
}
.Block_C ul li:hover {
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.Block_C ul li .cover {
  float: left;
  width: 38%
}

.Block_C ul li .content {
  float: right;
  width: 60%;
  padding: 15px;
    padding-left:0;
}

.Block_C ul li b {
  font-size: 28px;
  line-height: 42px;
  color: var(--main-color);
  border-bottom: 2px solid var(--main-color);
  margin-bottom: 15px;
}

.Block_C ul li time{
    background:none;
    padding: 0;
}


.public_add {
  top: -98px;
}

.flip_btn,
.pdf_btn {
  display: inline-block;
  margin-top: 15px;
}

.pdf_btn {
  margin-left: 15px;
}

.flip_btn a {
  background: var(--main-color);
  color: #fff !important;
  padding: 10px 20px;
}

.pdf_btn a {
  background: var(--main2-color);
  color: #fff !important;
  padding: 10px 20px;
}

.Block_C a:hover {
  color: #ffa800;
  text-decoration: underline;
}

/* ------------------------------ new -------------------------------- */
/* subject title */
div.view-content:nth-child(2) > div:nth-child(1) > h1:nth-child(1) {
  display: none;
  }

/* subjects works */
.template-B .content{
  position: relative;
}

.template-B ul li .content .subject_awards_cat{
  position: absolute;
    display: inline-block;
    right: 0;
    top: 0;
    background: #4ABBF7;
    border-radius: 10px;
    padding: 0px 10px;
    color: #fff;
}

/* .template-B ul li:nth-child(odd) .content .subject_awards_cat{
  background: #4ABBF7;
}

.template-B ul li:nth-child(even) .content .subject_awards_cat{
  background: #FFC600;
} */

/* admin toolbar */
#toolbar-item-administration-tray {
  margin: 0;
}

/* footer */
@media (min-width:961px){
  .contact_info ul li{
    white-space: nowrap;
  }
}



@media (max-width:1260px){
  .contact_info ul li span{
    min-width: 80px;
  }
  .contact_info ul li{
    font-size: 17px;
  }
}


@media (max-width:960px){

/* menu */

ul#main-menu{
  background:#014099 !important;
}
#main-menu::before{
  display:none !important;
}

ul#main-menu ul{
  border: 0px !important;
  box-shadow: none !important;
}

ul#main-menu li a{
  border-top: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
}


/* header */

.right_top {
  margin: 0;
  }

	.sticky #block-olivero-eclass {width:80%;  margin: auto 10%;}
	#login_area {max-width: none;}


.main-menu-btn-icon {
  left: 50%;
  transform: translateX(-50%);
  top: 46%;
  }

.main-menu-btn{
  background:#014099;width: 40px;
  height: 40px;
}



  #block_usefullinks .view-more{
    top:0 !important;
  }


  /* home-zoneA */
  #block_latest-news{
    padding-top:100px;
    padding-bottom: 0;
  }


  /* usefullinks */
#block_usefullinks {
  width: 100%;
}

/* calendar */
#block_calendar {
  width: 100%;
}

  /* footer */


  
.logo_footer {
  width: 100%;
  padding-bottom: 20px;
}

 .logo_footer > img:nth-child(1) {
  max-width: 46% !important;
  margin: 0 !important;
} 
.contact_info {
  max-width: 100%;
}

}


@media (max-width:576px){
  .logo_footer > img:nth-child(1) {
    max-width: 68% !important ;
  } 
  .sch_highlights ul{
    grid-template-columns: repeat(1, 1fr) !important;
  }
}

.publication-list a { display: inline-flex !important }
.publication-list .content{
display: flex;
justify-content: center;
align-items: center;
}
.book_flips{ float: left; text-align: center; width:25%;  position:relative; z-index:0}
.book_flips span{ font-size:15px; display: inline-block; text-align: center; padding-top:15px;}
.book_flips .book a, .book_flips  .book{ margin:0px auto !important; } 
.book img { margin-left:-9px;}

.book{padding:15px 0 0;margin:auto}

.book,.contact-detail address,.contact-detail p{ }.book ul,.home-wrapper-alt,.video-btn i{vertical-align:middle}
.back-to-top i{color:#fff;font-size:22px;display:block;line-height:30px}
.book,.book img,.book::after,.book::before{border-top-right-radius:5px;border-bottom-right-radius:5px}
.book ul{display:table-cell}.list-inline{padding-left:0;list-style:none}
.list-inline>li{display:inline-block;margin-left:3em;padding-left:0!important}
.book,.book a{margin:0;padding:0;display:block}.list-inline>li:first-child{margin-left:0}
.book{height:auto !important;cursor:pointer;position:relative;background:#fff;z-index:1;box-shadow:0 2px 4px 0 rgba(0,0,0,.1),0 9px 20px 0 rgba(0,0,0,.25);-webkit-transition:box-shadow .3s linear;transition:box-shadow .3s linear}
.book::after,.book::before,.glow::after{content:'';position:absolute}
.book img{width:inherit;height:inherit;-webkit-transform-origin:0 50%;transform-origin:0 50%;-webkit-transform:rotateY(0);transform:rotateY(0);-webkit-transition:all .45s ease;transition:all .45s ease}
.book:hover{box-shadow:0 2px 4px 0 rgba(0,0,0,.25),0 9px 20px 0 rgba(0,0,0,.45)}.book:hover img{-webkit-transform:rotateY(-25deg);transform:rotateY(-25deg);box-shadow:1px 1px 5px 5px rgba(0,0,0,.2)}
.book::after,.book::before{display:block;width:inherit;height:inherit;z-index:-1;top:0;background:#fff;border:1px solid #d9d9d9}.book::before{left:-3px}.book::after{left:-6px}
.glow::after{background-image:-webkit-linear-gradient(right,transparent 4%,hsla(0,0%,100%,.4) 61%,hsla(0,0%,100%,.4) 85%,hsla(0,0%,74%,0) 96%);background-image:linear-gradient(-90deg,transparent 4%,hsla(0,0%,100%,.3) 61%,hsla(0,0%,100%,.5) 85%,hsla(0,0%,74%,0) 96%);bottom:0;height:100%;left:0;opacity:.77;pointer-events:none;-webkit-transition:opacity .15s;transition:opacity .15s;width:100%}
.publication-list ul li  ,  .publication-list ul li:hover { box-shadow: 0 0 0 rgba(0,0,0,0); }
.publication-list img { width:240px;}


@media screen and (max-width: 1400px) {.publication-list img { width:150px;}}

@media screen and (max-width: 1024px) {.book_flips{  width:33%; }}
@media screen and (max-width: 820px) {.book_flips{  width:50%; }}
@media screen and (max-width: 420px) {.book_flips{  width:100%; }}





.cover_bg { display: flex;
  justify-content: center;
  align-items: normal;
  padding: 50px 0px;
  width: 100%;
  position: relative;
  min-height: 350px;
  background: url(../images/web/purpose_bg.png) no-repeat center top;
    background-position-y: top;
    background-attachment: scroll;
    background-size: auto;
  background-attachment: fixed;
  background-blend-mode: multiply;
  background-size: 100%;
  background-position-y: 30%;}
.purpose_title {text-align: center;  color: #fff;  font-size: 2em;  font-weight: bold;line-height: 2em;}
.purpose {color: #fff;text-align: center; font-size: 25px;}
.cover_bg .contact {    position: relative;
  z-index: 1;
  top: 50%;
  left: 0%;
  transform: translateY(-56%);
  text-shadow: #010101a1 1px 0 10px;}
.purpose strong { font-size: 35px;  font-weight: bold;    text-shadow: 0 0 ;}
#block_purpose .Block_B ul {	display: block;}

#block_homebox {margin: 0 0 0px 0;
}




.icon-play2:before {
  content: "\ea15";
  font-size: 1.625rem;
}

.icon-pause:before {
  content: "\ea16";
  font-size: 1.625rem;
}

.icon-play3:before {
  content: "\ea1c";
  font-size: 21px;
font-weight: inherit;
}

.icon-pause2:before {
  content: "\ea1d";
  font-size: 21px;
font-weight: inherit;
}

/* focus */
.mission_home #toggle {
  position: relative;
  z-index: 1;
}

.icon-arrow-right2:before {
  content: "\ea3c";
  font-size: 1.625rem;
}
.icon-arrow-left2:before {
  content: "\ea40";
  font-size: 1.625rem;
}

.tabledrag-cell-content > * ,.tabledrag-handle {
  display: table-cell !important;
  vertical-align: middle;
}

/* animation */
.purpose {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 60px;
  grid-row-gap: 10px;    padding: 10px 0;
}

.purpose>* {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.modest,
.conscientious {
  text-align: right;
}

.trustworthy,
.sympathetic {
  text-align: left;
}

/* .modest:after,
.trustworthy:after,
.conscientious:after,
.sympathetic:after {
  content: '';
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background:rgb(255,255,255,1);
} */

.animate:after {
  animation: block 0.5s 0.25s both;
}

@keyframes block {
  0% {
      transform: translate(-110%, 0);
  }

  45%,
  55% {
      transform: translate(0, 0);
  }

  100% {
      transform: translate(110%, 0);
  }
}

/* #block_purpose .screen{
  height: 100%;
} */

@media (max-width:576px){

  .purpose{
    grid-template-columns: repeat(1, 1fr);
  }
  .purpose > *{
    text-align: center;
  }
  #block_homebox .slider{
    width:100%;        margin: 0;
  }
  #block_homebox .slider .slick-slide{
    max-width: 100%;
  }
  .cover_bg{
    background-size: cover !important;
    background-attachment: unset !important;
  }
}

.sch-album ul li .content{
  margin-top: 10px;
}

#slogan_left {  
  position: absolute;
  left: 5%;
  color: #fff;
  font-size: 36px;
  line-height: 68px;
  letter-spacing: 1px;
  text-shadow: 0 0 3px rgba(0, 0, 0, .2);
  bottom: 150px;
  background: linear-gradient(to right, #a7d13100, rgb(46, 80, 159));
  padding: 2px 55px;
  border-top-right-radius: 100px;
  border-bottom-right-radius: 100px;
  z-index: 2;
}

@media (max-width:960px){
  #slogan_left { 
    left: 0;
    line-height: 20px;
    font-size: 20px;
    padding: 6px 10px;
    bottom: 86px;
}
}

@media screen and (max-width: 960px) {
  .top_area_m {
    display: none!important;
    justify-content: center;
    align-items: center; 
	  
  }
}
.top_area_m {
  display: none;
}

/* 2024/08/23 */
#banner_title::after, .banner_title::after, #nonbanner_title::after{
  display:none;
} 

/* .box_promo {
  align-items: flex-end !important;
} */



.modest > strong:nth-child(1) {
  color: rgb(255,8,0,0.4);
}

.trustworthy > strong:nth-child(1) {
  color: rgb(151, 0, 255);
}

.conscientious > strong:nth-child(1) {
  color: rgb(15,255,0,0.4);
}

.sympathetic > strong:nth-child(1) {
  color: rgb(255,255,0,0.5);
} 

@media (min-width:1201px){
  #block_usefullinks img {
    max-width: 168px;
  } 
}

@media (max-width:1200px) and (min-width:961px){
  .useful-links ul{
    gap: 10px;
  }
}



@media (min-width:961px){
  .box_promo .content {
    margin-top: 12%;
  }
}
#block_latest-news {
  padding-bottom: 50px;
} 

.box_promo .content {
  font-size: 21px;
  width: 40% ;
}

.box_promo .cover{
    width: 54% ;
}

@media (min-width:961px){
  ul#main-menu li ul li a{
    font-size:19px;
  }
}

#block_latest-news .news-card__text-wrapper b {
  display: -webkit-box;
  -webkit-line-clamp: 2;   
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; 
  max-width: 100%;        
}

.slick-disabled::before{
  background:rgba(255, 255, 255, 0.5) !important;
}

/* .slick-disabled {
  display: none !important;
} */

 @media (max-width:960px){
  #block_latest-news,.home_zoneA,.home_zoneB,.home_zoneD,.home_zoneC{
    overflow-x:hidden;
  }
 }


.btn_back{ margin:0px auto; text-align: center; margin-top:50px; margin-bottom:50px;}
.btn_back a{ display: inline-block; padding:10px 50px; color:#fff !important;  background: linear-gradient(to left, #ffc945 50%, #215cac 50%); background-size: 200% 100%; background-position: right bottom;  transition: all .5s ease-out;  }
.btn_back a:hover { background-position: left bottom; color:#fff !important; }

#block-olivero-views-block-subject-awards-block-1 {background: #faffef;  border: 3px solid #7ec49d;  box-shadow: 0 0 0 4px #e3eeca;  border-radius: 16px;  padding: 20px;  margin-top: 20px;    min-height: 400px;}
#block-olivero-views-block-subject-awards-block-1 .sch-album1 ul li:hover {border: 2px solid #539f75;
  background: #f0fbd6;}
#block-olivero-views-block-subject-awards-block-1 .sch-album1 ul li {border: 2px solid #e3eeca;}


#page {
	
	background: url(../images/inner_bg.png) no-repeat ;background-size: 100%;
background-repeat: no-repeat;
background-position: 0px 300px;
}
.node__content table { width:100% ; background:var(--main-color);}
.node__content tr th{ background:var(--main-color); color:#fff; padding:5px; }
.node__content tr:nth-child(even) td { background:#ebf9fe; color:#333; padding:5px; }
.node__content tr:nth-child(odd) td { background:#fff; color:#333; padding:5px; }
.node__content table ul, table ol{ }
.node__content tr th { background:var(--main-color); color:#fff; padding:5px; }



.top_area { }
.top_area ul { list-style: none;  margin: 0;  padding: 0; display: flex;gap: 15px;}

.top_area ul li img { height: 35px; max-width: none !important;  width: auto;}
#block-olivero-top-area { order: 3;}