@charset "utf-8";

@media print {
:root{
	--page-inner-content-horizontal-padding: 0;
}
  * {
	-webkit-text-fill-color: initial!important;
    text-fill-color: initial!important;
    color: #000 !important;
    text-shadow: none !important;
    /* background: transparent !important; */
    box-shadow: none !important;
  }

  html {
    min-height: inherit !important;
  }

  body {
    font-size: 18px;
    font-family: "微軟正黑體", "Microsoft JhengHei", Arial, sans-serif;
    min-height: inherit !important;
  }

  * {
    box-shadow: none !important;
  }

  a {
    text-decoration: none !important;
  }

  ul,
  ol {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  table th,
  table td {
    vertical-align: top;
    padding: 10px !important;
  }
  :is(.popup-wrap, #content) table.vertical-table tbody th.no-content{
	padding: 0!important;
  }

  .container {
    width: 100%;
    padding: 0 !important;
    max-width: none !important;
  }

  #headerZone {
    position: relative !important;
	padding-inline: 0!important;
  }

  #wrapperInner {
    padding-top: 0 !important;
  }

  #mobileNavWrap,
  #tool-wrap,
  #nav-wrap,
  #footer-outer-wrap,
  #backtotop,
  #mainVisualWrap,
  #section-banner-container,
  #wrapper:not(.home):before,
  #breadcrumb,
  .photosWrap,
:is(.popup-wrap, #content) .keyframe-container .keyframe-deco,
.keyframe-container,
.campus-gallery,
:is(.popup-wrap, #content) .flexbox.type-url a:before,
:is(.popup-wrap, #content) .sticky-section .sticky-item,
:is(.popup-wrap, #content) .btn-back,
:is(.popup-wrap, #content) .event-gallery :is(.swiper-button-next, .swiper-button-prev),
.swiper-pagination,
.control-btn,
:is(.popup-wrap, #content) .marquee-wrap,
#notice-wrap, #wrapper.home:before,
#main-visual #main-visual-scroll,
#vision :is(.swiper-button-next, .swiper-button-prev),
#vision .swiper-slide-shadow,
#figure .bg #student-wrap, #content .card-gallery :is(.swiper-button-next, .swiper-button-prev), #figure .bg, #news .swiper .swiper-control {
    display: none !important;
  }
  
  #section-banner{
	background-image: none!important;
	aspect-ratio: auto!important;
  }
  
  #mainContent {
    width: 100% !important;
    padding: 0 !important;
  }

  #contentWrap {
    padding-top: 20px;
    border-top: 2px solid #000;
    margin-top: 20px;
  }

  hr {
    margin: 20px 0 !important;
  }
  #section-tittle{
	margin-bottom: 30px;
  }
  #section-tittle span{
	font-size: 36px!important;
  }
  
  h1#pageTitle {
    font-size: 28px !important;
    border: none !important;
    margin-bottom: 20px;
  }

  #content h2 {
    font-size: 26px !important;
  }
  
  :is(.popup-wrap, #content) .images-group .image-item .content .title{
	font-size: 22px!important;
  }
  :is(.popup-wrap, #content) .fullwidth.highlight-sec .desc, :is(.popup-wrap, #content) .fullwidth.highlight-sec .content>div{
		font-size: 18px!important;
	}

  .tab-container .tab-content {
    padding-bottom: 0;
  }
  .tab-container .tab-menu .tabCtrls .tab-item:not(.selected){
	  display: none !important;
  }
  /* .tab-container .tab-content .tabpanel {
    display: block !important;
    opacity: 1 !important;
    padding-bottom: 30px;
  } */

  .tab-container .tab-menu ul li.mobileSelected {
    display: none !important;
  }

  .accordion-item .accordion-content {
    display: block !important;
  }

  #content hr {
    margin: 20px 0;
  }

  dialog article {
    background-color: #fff !important
  }
  
  :is(.popup-wrap, #content) .fullwidth{
	width: 100%!important;
	margin-left: 0!important;
  }
  
  #prayer .container{
	padding-block: clamp(30px, calc(22.623px + 1.967vw), 60px)!important;
  }
  
  #section-tittle{
	width: 100%;
  }
  #wrapper:not(.home){
	background: transparent !important;
  }
  
  #logo-wrap{
	width: 100px!important;
	display: block!important;
  }
  #headerZone{
	padding-block: 16px!important;
  }
  #headerZone.header-hidden{
	  transform: none!important;
  }
  
  :is(.popup-wrap, #content) .images-group .image-item .content .title{
	width: auto;
	left: 0;
	top: 0;
	position: relative;
	display: inline-block;
  }
  :is(.popup-wrap, #content) .images-group .image-item:nth-child(even) .title{
	right: 0;
	left: auto;
  }
  :is(.popup-wrap, #content) .timeline-wrap .timeline-item{
	opacity: 1;
  }
  
  :is(.popup-wrap, #content) .accordion-wrap.milestone .accordion-item .accordion-title, .tab-container .tab-menu .tabCtrls .tab-item:not(.selected) a, :is(.popup-wrap, #content) .subsecImg .subsecTitle, :is(.popup-wrap, #content) .fullwidth.highlight-sec.only-img .title, :is(.popup-wrap, #content) .fullwidth.highlight-sec.only-img .title span, :is(.popup-wrap, #content) .event-list a>.date .year, :is(.popup-wrap, #content) .event-title-wrap .date .year, :is(.popup-wrap, #content) .subsecImg.normal-content .content, :is(.popup-wrap, #content) .subsecImg.normal-content .content h3, #content .subsecImg.normal-content .content p, :is(.popup-wrap, #content) .subsecImg.normal-content .content .btn-back, #news .swiper-slide a .slide-detail>div:not(.new-title) span.category, #news #news-list .news-list-item a>div.detail span.category{
	color: #fff!important;
  }
  
  #content .timeline-wrap .timeline-item {
    width: calc(100% - clamp(40px, calc(30.909px + 2.424vw), 60px));
    align-self: flex-end;
    grid-template-areas: "year content";
    grid-template-columns: clamp(70px, calc(56.364px + 3.636vw), 100px) 1fr !important;
  }

  #content .accordion-wrap.milestone:before {
    left: calc((clamp(40px, calc(30.909px + 2.424vw), 60px) / 2) - 2px);
    transform: translateX(0);
  }

  #content .accordion-wrap.milestone .accordion-item .accordion-title {
    margin-inline: 0;
  }

  #content .timeline-wrap .timeline-item:not(:first-child) {
    margin-block-start: clamp(30px, calc(20.909px + 2.424vw), 50px);
  }

  #content .timeline-wrap .timeline-item:before {
    right: auto;
    left: calc(-1 * clamp(40px, calc(30.909px + 2.424vw), 60px) / 2);
    transform: translate(-50%, -50%);
  }

  #content .timeline-wrap .timeline-item .timeline-year:before {
    right: auto;
    left: -12px;
    clip-path: polygon(100% 100%, 100% 0, 0 0);
  }

  #content .timeline-wrap .timeline-item .timeline-content {
    border-radius: 0 var(--border-radius-10) var(--border-radius-10) 0;
  }

  #content .timeline-wrap .timeline-item .timeline-year {
    border-radius: 0 0 0 var(--border-radius-10);
  }
  #content .fullwidth.with-outside-img>div.highlight-box {
    margin-bottom: 0;
    padding-bottom: 0;
    border-radius: var(--border-radius-10) var(--border-radius-10) 0 0;
    grid-row: 1/3;
  }

  #content .fullwidth.with-outside-img>div.highlight-box>div {
    width: 100%;
    padding-inline-end: 0;
  }

  #content .fullwidth.with-outside-img>div.outside-img {
    grid-row: 3/5;
    grid-column: 2/5;
    position: relative;
    padding-block-start: clamp(1.25rem, calc(0.097rem + 4.918vw), 5.938rem);
    padding-block-end: clamp(2.813rem, calc(2.198rem + 2.623vw), 5.313rem);
    border-radius: 0 0 var(--border-radius-10) var(--border-radius-10);
    overflow: hidden;
    text-align: right;
  }

  #content .fullwidth.with-outside-img>div.outside-img img {
    position: relative;
    z-index: 2;
    max-width: 500px;
  }

  #content .fullwidth.with-outside-img>div.outside-img:before {
    content: "";
    position: absolute;
    width: calc(100% - var(--page-inner-content-horizontal-padding) - var(--page-content-horizontal-padding));
    height: 100%;
    background-color: rgba(62, 152, 145, 0.1);
    left: 0;
    top: 0;
    border-radius: 0 0 var(--border-radius-10) var(--border-radius-10);
  }
  
  :is(.popup-wrap, #content) .timeline-wrap .timeline-item .timeline-content .timeline-desc {
	  flex: 0 0 100%;
	}

	:is(.popup-wrap, #content) .timeline-wrap .timeline-item .timeline-content .timeline-img {
	  flex: 0 0 100%;
	  max-width: 100%;
	}
  
  #content #campus-container .campus-main-content .box{
	max-height: 100%;
	}
	#content #campus-container .campus-main-content .box>div.text-2 {
		grid-row: 2 / 3;
	}
	#content #campus-container .campus-main-content{
		position: relative;
		height: auto;
	}
	:is(.popup-wrap, #content) #campus-container .campus-main-content .box>div>.box-bg{
		opacity: 0.95!important;
		transform: none!important;
	}
	:is(.popup-wrap, #content) #campus-container .campus-main-content .box>div p, :is(.popup-wrap, #content) #campus-container .campus-main-content .box .split-lines-inner{
		transform: none!important;
		opacity: 1!important;
	}
	.accordion-item .accordion-content .accordion-main{
		padding-block: 20px;
	}
	:is(.popup-wrap, #content) ul.col-2{
		grid-template-columns: 1fr;
	}
	:is(.popup-wrap, #content) .remarks-wrap{
		margin-top: 20px;
	}
	:is(.popup-wrap, #content) .sticky-section{
		grid-template-columns: 1fr;
		width: 100%;
		margin-left: 0;
	}
	:is(.popup-wrap, #content) .sticky-section .content {
		padding: clamp(25px, calc(11.475px + 3.607vw), 80px)!important;
	}
	:is(.popup-wrap, #content) .event-gallery .swiper-wrapper{
		max-height: initial;
		transform: none!important;
		flex-wrap: wrap;
	}
	:is(.popup-wrap, #content) .event-gallery div.swiper-slide{
		width: calc((100% - 30px) / 3)!important;
		margin-bottom: 10px;
	}
	:is(.popup-wrap, #content) .subsecImg.normal-content .content .btn-back{
		display: inline-flex!important;
	}
	:is(.popup-wrap, #content) .flexbox.logo-list {
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	}
	
	#main-visual{
		height: 800px!important;
	}
	#wrapper.home {
		background-image: none;
	}
	
	#vision .swiper-outer, #vision .swiper-wrapper, #vision .swiper-slide{
		transform: none!important;
	}
	
	#vision .swiper{
		width: 100%;
		max-width: 100%;
	}
	#vision .swiper-wrapper{
		flex-wrap: wrap;
		gap: 20px;
	}
	#vision .swiper-slide{
		width: calc((100% - 20px) / 2);
	}
	#vision .swiper .btn-wrap{
		opacity: 1;
		transform: none!important;
		right: 0;
		bottom: 0;
		top: auto;
	}
	#figure #bubbles-wrap .bubble{
		opacity: 1!important;
		transform: none!important;
		visibility: visible!important;
	}
	
	#vision .swiper-slide img{
		display: block!important;
	}
	
	:is(.popup-wrap, #content) .masonry-grid.stairs>.item a>div.txt-layer div, :is(.popup-wrap, #content) .pagination a:is(:hover, :focus-visible, .selected), :is(.popup-wrap, #content) .card-container:not(.light-color) .card .details *, :is(.popup-wrap, #content) .card-container .card .title, :is(#headerZone, #content, #mobileNav) .common-arrow-btn.color2{
		color: var(--white)!important;
	}
	:is(.popup-wrap, #content) .card-container:not(.light-color) .card .details h3 {
		color: var(--green5)!important;
	}
	
	:is(.popup-wrap, #content) .masonry-grid.stairs {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;                            
    grid-auto-rows: max-content !important;          
    align-items: start !important;                   
  }

  :is(.popup-wrap, #content) .masonry-grid.stairs .item {
    grid-row-end: auto !important;                   
    height: auto !important;
    page-break-inside: avoid;                        
    break-inside: avoid;
	margin-bottom: 20px!important;
  }

  :is(.popup-wrap, #content) .masonry-grid.stairs .item img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
  :is(.popup-wrap, #content) .masonry-grid.stairs>.item:nth-child(2) {
    padding-top: 0!important;
  }
  
  :is(.popup-wrap, #content) .flexbox.album-list {
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	}
	
  #figure #bubbles-wrap {
    margin-top: 0;
    aspect-ratio: 690 / 400;
    min-height: 0;
  }

  #figure #bubbles-wrap .bubble#b-1 {
    top: 0;
  }

  #figure #bubbles-wrap .bubble#b-3 {
    top: 0;
    left: calc(32.16% + var(--page-horizontal-padding) + 30px);
  }

  #figure #bubbles-wrap .bubble#b-2 {
    bottom: var(--border-width);
    left: auto;
    right: calc(32.16% + var(--page-horizontal-padding) + 30px);
  }

  #figure #bubbles-wrap .bubble#b-4 {
    bottom: var(--border-width);
  }
  
  #vision{
	break-after: page;
  }
  
  #figure #bubbles-wrap .bubble .bubble-inner .bubble-text.counter[data-target]{
	opacity: 1;
  }
  #news .grid-wrap{
	width: 100%;
	grid-template-columns: 20% calc(80% - 40px);
  }
  #news .swiper{
	overflow: hidden;
	width: 100%;
  }
  
  #news .swiper .swiper-slide{
	width: 100%!important;
  }
  
  :is(.popup-wrap, #content) #news .gradient-text{
	background: none!important;
  }
  
  #news .swiper-slide:not(.swiper-slide-active), dialog:not([open]){
	display: none!important;
  }
  #campus .campus-inner{
	padding: 50px;
  }
  #campus .campus-inner, #campus .campus-inner #campus-canvas-container{
	clip-path: none;
  }
  .overlap-container{
	height: auto!important;
	max-height: none!important;
  }
  #figure ~ .pin-spacer{
	height: auto!important;
	padding: 0!important;
  }
  
  /* #giving-quote {
    page-break-after: avoid;
    break-after: avoid;
  } */
}