/* ==========================================================================
   Public
============================================================================= */
@import url("https://use.fontawesome.com/releases/v5.15.4/css/all.css");
@import url('https://fonts.googleapis.com/earlyaccess/notosanstc.css'); /* 思源黑體 */

body, html { width:100%; height:100%; }

body { 
	font:1vw/1.6 Arial, Meiryo, "Meiryo UI", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif;
	letter-spacing:0.06em;
	color:#353535;
	background-color:#f4f5f5;
}
@media screen and (max-width:860px) {
	body { font-size:16px; }
}

img {
	border:none;
	vertical-align:middle;
	
	backface-visibility:hidden;
	-webkit-backface-visibility:hidden;	/* Chrome 和 Safari */
    -moz-backface-visibility:hidden; 	/* Firefox */
    -ms-backface-visibility:hidden; 	/* Internet Explorer */
	
	image-rendering:-moz-crisp-edges;          /* Firefox        */
    image-rendering:-o-crisp-edges;            /* Opera          */
    image-rendering:-webkit-optimize-contrast; /* Safari         */
    image-rendering:optimize-contrast;         /* CSS3 Proposed  */
	image-rendering:crisp-edges;
	
	filter:blur(0);
	-webkit-filter:blur(0);
	-moz-filter:blur(0);
	transform:translateZ(0);
	-webkit-transform:translateZ(0);
	-ms-transform:translateZ(0);
}


*, *:after, *:before {
  -webkit-box-sizing:border-box;
     -moz-box-sizing:border-box;
          box-sizing:border-box;
}


a {
	color:#545454;
	text-decoration:none;
	-webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
a:hover { color:#dd5b6a; }


.clearfix {
    clear: both;
    display: table;
}





/* mobile nav
-----------------------------------------------------------------------------*/
.sp_logo { position:fixed; left:1rem; top:5px; z-index:100; }
/*.sp_logo img { width:100%; height:auto; }*/
.sp_nav_btn { width:100%!important; text-align:center; font-size:120%!important; padding:10px 0!important; border:#999 1px solid; }




/* go top
------------------------------------------------------------------------------ */
.bck {
	position:fixed;
	bottom:1rem;
	right:0;
	visibility:hidden;
	width:80px;
	height:80px;
	transition-property:all;
	z-index:2;
}
.bck img { width:100%; }

.bck.bck-on {visibility:visible;}
.fade{opacity: 0;}
.bck-on.fade{opacity: 1;}
.rightToLeft {right : -80px;}
.bck-on.rightToLeft{right:0;}
.bottomToTop {bottom: -100px;}
.bck-on.bottomToTop {bottom:1rem;}
.bck-leftToRight {left: -80px;}
.bck-on.leftToRight {left:0;}
.topToBottom {top: -100px;}
.bck-on.topToBottom {top:1rem;}




/* top
------------------------------------------------------------------------------ */
#top {
	position:fixed;
	width:100%;
	height:4vw;
	border-bottom:var(--bgc) 1px solid;
	background-color:#f4f5f5;
	z-index:5;
}

#top .top_TYlogo {
	float:left;
	width:4vw;
	background:var(--bgc);
	text-align:center;
	line-height:4vw;
}
#top .top_TYlogo img { width:80%; }

#top .top_unit {
	float:right;
	font-size:120%;
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif;
	padding-right:3vw;
	padding-top:1vw;
}
#top .top_unit span {
	background:var(--bgc);
	color:#FFF;
	font-size:70%;
	padding:0 0.5vw 0.1vw;
	margin-right:0.5vw;
	border-radius:2px;
}
#top .top_unit i { color:var(--bgc); padding:0 0.3vw; }


#left {
	position:fixed;
	width:4vw;
	height:100vh;
	border-right:var(--bgc) 1px solid;
}
#left .copyright {
	position:absolute;
	left:calc((3vw - 25px) / 2);
	bottom:0;
	color:#0bbdab;
	font-size:9px;
	-webkit-transform:scale(0.75);
	-webkit-writing-mode:vertical-rl;
	writing-mode: vertical-rl;
}

@media screen and (max-width:1000px) {
	#top, #left { display:none; }
}



/* main
------------------------------------------------------------------------------ */
main {
	position:relative;
	top:4vw;
	left:4vw;
	width:calc(100% - 4vw);
}

header { padding-top:2px; padding-left:2px; margin-bottom:3vw; }
header img { width:100%; }


#home_right {
	float:left;
	width:28%;
	padding-left:3.5%;
	padding-top:2vw;
}

#home_left {
	float:left;
	width:68%;
	margin-bottom:3vw;
}


@media screen and (max-width:1000px) {
	main { top:56px; left:0; width:100%; }
	header { padding:0; }
}
@media screen and (max-width:860px) {
	#home_left { float:none; width:96%; padding-top:20px; }
	#home_right { float:none; width:96%; padding:20px 0 50px 5%; }
}


.breadcrumb {
	width:100%;
	font-size:70%;
	color:#d85826;
	text-align:right;
	padding-right:3vw;
	padding-left:50%;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.breadcrumb i { font-size:120%; vertical-align:middle; }
.breadcrumb a { color:#4d4d4d; text-decoration:underline; }
.breadcrumb a:hover { text-decoration:#d85826 wavy underline; }


h1 {
	margin:0 0 2vw 4.2vw;
	border-bottom:var(--bgc) 1px solid;
}
h1 img { width:28vw; max-width:535px; }

@media screen and (max-width:860px) {
	h1 { margin:20px auto; width:90%; }
	h1 img { width:70vw; }
}




/* news
------------------------------------------------------------------------------ */
#news {
	width:100%;
	padding-left:4%;
	margin-bottom:3vw;
}

#news h2 {
	width:100%;
	border-bottom:var(--bgc) 1px solid;
	text-align:right;
	padding-right:4%;
}
#news h2 img { width:18.5%; max-width:197px; }

#news h3 a {
	position:relative;
	display:block;
	width:18vw;
	background:var(--bgc);
	color:#FFF;
	font-size:80%;
	border-radius:99em;
	padding:0.3vw 0 0.2vw;
	text-align:center;
	margin-top:1vw;
}
#news h3 a:hover { background:#e39000; }
#news h3 a:after {
	position:absolute;
	right:0.5vw;
	font-family: "Font Awesome 5 Free";
	content:"\f0a9";
	font-weight:600;
	display:inline-block;
}

#news ul { margin-bottom:2vw; }

#news li a {
	position:relative;
	display:block;
	padding:1vw 0 1vw 0.6vw;
	border-bottom:var(--bgc) 1px dashed;
}
#news li:nth-last-child(1) a { border-bottom:var(--bgc) 1px solid; }

#news .day {
	font-family:"Impact";
	color:#0bbdab;
	font-size:80%;
	padding-left:0.1vw;
	padding-bottom:0.2vw;
}


#news li a:hover { color:var(--bgc); background:#555; }
#news li a:hover .day { color:#f6b758; }


@media screen and (max-width:860px) {
	#news { float:none; width:100%; padding:0 0 0 5%; }
	#news h2 img { width:45%; }
	#news h3 a { width:250px; padding:6px 5px; text-align:center; margin-top:15px; }
	#news h3 a:after { right:10px; }
	#news ul { margin-bottom:35px; }
	#news li a { padding:15px 0; }
}





/* project
------------------------------------------------------------------------------ */
#project {
	position:relative;
	display:inline-flex;
	flex-wrap:wrap;
	width:100%;
}
#project a {
	position:relative;
	align-items:stretch;
	align-content:stretch;
	width:46%;
	border-right:var(--bgc) 1px solid;
	border-bottom:var(--bgc) 1px solid;
	margin:0 0 5% 4%;
	padding:1vw 2vw 2vw;
}

#project h2 { width:100%; text-align:right; }
#project h2 img { width:25vw; max-width:470px; }

#project .photo {
	width:100%;
	padding:1.5vw 0;
	border-bottom:var(--bgc) 1px solid;
	aspect-ratio: 4 / 3;
	margin-bottom:1.5vw;
}
#project .photo img {
	width:100%;
	height:100%;
	object-fit:cover;
}

#project .info {
	position:relative;
	width:100%;
	padding-left:6vw;
}
#project .info img {
	position:absolute;
	left:0;
	bottom:0.4vw;
	width:4.5vw;
	max-width:90px;
}

#project .photo2 {
	position:absolute;
	width:41%;
	top:1vw;
	left:2vw;
}
#project .photo2 img {
	width:100%;
	height:100%;
	object-fit:cover;
}

#project .info2 {
	position:relative;
	width:50%;
	left:50%;
	padding-top:1.2vw;
	padding-left:6vw;
	border-top:var(--bgc) 1px solid;
	margin:3.5vw 0 0;
}
#project .info2 img {
	position:absolute;
	left:0;
	bottom:0.4vw;
	width:4.5vw;
	max-width:90px;
}


#project a:hover { color:#dfeaa4; background:var(--bgc); border-color:#FFF; border-top-left-radius:2vw; }
#project a:hover h2 img { filter:brightness(100); }
#project a:hover .photo { border-color:#bbfdfd; }
#project a:hover .info2 { border-color:#bbfdfd; }


@media screen and (max-width:1000px) {
	#project .info, #project .info2 { padding-left:0; }
	#project .info img, #project .info2 img { display:none; }
}


@media screen and (max-width:860px) {
	#project a { padding:20px; }
	#project a:hover { border-top-left-radius:25px; }
	#project h2 img { width:35vw; max-width:470px; }
	#project .photo2 { top:15px; }
}

@media screen and (max-width:640px) {
	#project a { width:100%; margin-left:5%; }
	#project h2 img { width:70vw; max-width:470px; }
	#project .photo { padding:25px 0; margin-bottom:20px; }
	#project .photo2 { position:static; width:100%; margin:25px 0; }
	#project .info2 { width:100%; left:0; padding-top:25px; }
}




/* banner
------------------------------------------------------------------------------ */
.home_banner { padding:0 0 2vw; }
.home_banner img { width:100%; border:var(--bgc) 1px solid; margin-bottom:2vw; }
.home_banner a:hover img { opacity:0.7; border-style:dashed; }





/* book
------------------------------------------------------------------------------ */
#book {
	margin:0 0 5vw 4.2vw;
	min-height:30vh;
}
#book ul { width:100%; }
#book li {
	border-bottom:var(--bgc) 1px solid;
	margin-bottom:1.2vw;
}
#book li a {
	display:block;
	color:#353535;
	font-size:130%;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	padding-right:2vw;
}
#book li .no {
	display:inline-block;
	width:5%;
	color:#da957a;
	text-align:center;
	border-right:var(--bgc) 1px solid;
	padding:1vw 0;
	vertical-align:middle;
}
#book li .publish {
	display:inline-block;
	width:14%;
	text-align:center;
	border-right:var(--bgc) 1px solid;
	padding:1vw 0;
	margin-right:2vw;
	vertical-align:middle;
}
#book li a:hover {
	background:#e8e8e8; color:var(--bgc);
}

#book li br { display:none; }

@media screen and (max-width:860px) {
	#book { margin:0 auto; width:90%; }
	#book li a { font-size:100%; text-overflow:normal; white-space:normal; padding:15px 0; }
	#book li .no { width:auto; padding:0 6px; background:var(--bgc); color:#FFF; margin-bottom:8px; margin-right:5px; }
	#book li .publish { width:auto; border:none; padding:0; color:var(--bgc); margin-bottom:8px; }
	#book li br { display:block; }
}






/* footer
------------------------------------------------------------------------------ */
footer {
	width:100%;
	height:0.5vw;
	background-color:var(--bgc);
}

address {
	display:none;
	width:100%;
	text-align:center;
}
address h2 { color:#FFF; font-weight:600; }
address h2 i { color:#ecb758; padding:0 5px; }
address p {
	color:#6df0e3;
	font-size:9px;
	-webkit-transform:scale(0.75);
}

@media screen and (max-width:1000px) {
	footer { height:auto; padding:5%; }
	address { display:block; }
}


/* btn
------------------------------------------------------------------------------ */
.btn {
	width:100%;
	padding:2vw;
	margin-top:2vw;
	border-top:var(--bgc) 1px dashed;
	text-align:center;
}
.btn i { padding-right:3px; }

.btn a {
	color:#FFF;
	font-size:150%;
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif;padding:1.2vw 2vw;
	border-radius:0.6vw;
	border:#FFF 3px solid;
	-webkit-box-shadow: 2px 1px 2px 5px rgba(0,0,0,0.02);
	-moz-box-shadow: 2px 1px 2px 5px rgba(0,0,0,0.02);
	box-shadow: 2px 1px 2px 5px rgba(0,0,0,0.02);
}

.btn a:hover { background:#555; }

.btn_1 a {
	margin:0 auto;
	display:block;
	width:30%;
	background:var(--bgc);
}


@media screen and (max-width:860px) {
	.btn { padding:40px 0; }
	.btn a { padding:15px; border-radius:10px; }
	.btn_1 a { width:80%; }
}




/* color
------------------------------------------------------------------------------ */
:root {
	--bgc:#18acac;
}