/* ==========================================================================
   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:var(--bgc);
	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:#d85827; }


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

.font-block { font-family:"Noto Sans TC", "Meiryo UI", sans-serif; }

/* 長寬比 ＊/
.aspect-ratio {
  aspect-ratio: 4 / 3;
}



/* 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 .left_unit {
	position:absolute;
	left:1.3vw;
	bottom:calc(280px + 1vw);
	font-size:85%;
	-webkit-writing-mode:vertical-rl;
	writing-mode: vertical-rl;
}
#left .left_unit span {
	background:var(--bgc);
	color:#FFF;
	font-size:70%;
	padding:0.2vw 0.2vw 0.2vw 0.25vw;
	border-radius:2px;
	margin-bottom:0.3vw;
}

#left .copyright {
	position:absolute;
	left:calc((3vw - 25px) / 2);
	bottom:0;
	color:#58ceeb;
	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:2vw; }
header img { width:100%; }

nav {
	position:relative;
	width:100%;
	font-size:120%;
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif;
	padding:1vw;
	text-align:center;
	margin-top:2px;
	background:#19a1c2; /* Old browsers */
	background: -moz-linear-gradient(top,  #87becb 18%, #19a1c2 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #87becb 18%,#19a1c2 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #87becb 18%,#19a1c2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

nav a { color:#FFF; text-shadow:#3f90a4 0.1em 0.1em 0.1em; padding:0 2vw; }
nav a:hover { color:#81f8ff; text-shadow:#56825d 0.1em 0.1em 0.1em; }

nav .gohome { position:absolute; top:0.9vw; right:4vw; }
nav .gohome img { width:1vw; }
nav .gohome img:hover { opacity:0.7; }

.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:1000px) {
	main { top:56px; left:0; width:100%; }
	header { padding:0; }
	nav, .breadcrumb { display:none; }
}
@media screen and (max-width:860px) {
	h1 { margin:20px auto; width:90%; }
	h1 img { width:70vw; }
}



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

.news_title {
	margin:0 0 2vw 4.2vw;
	font-size:150%;
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif;
	font-weight:600;
	color:#555;
	text-align:center;
	background:#FFF;
	padding:1vw;
}
.news_title span { font-size:70%; color:var(--bgc); font-weight:normal; font-family:"Arial"; }




@media screen and (max-width:860px) {
	#news { margin:0 auto; width:90%; }
	#news li a { font-size:100%; text-overflow:normal; white-space:normal; padding:15px 0; }
	#news li a span { display:block; border:none; font-size:90%; padding:0; text-align:left; }
	.news_title { margin:0 auto 30px; width:90%; padding:15px; font-size:130%; }
}



/* content
------------------------------------------------------------------------------ */
section { width:100%; padding:0 4vw; min-height:30vh; }

.subject {
	margin:0 0 2vw 4.2vw;
	font-size:150%;
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif;
	font-weight:600;
	color:var(--bgc);
	text-align:center;
	background:#FFF;
	padding:1vw;
}
.subject span { font-size:80%; color:#888; }

section h2 {
	color:var(--bgc);
	font-size:120%;
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif;
	font-weight:600;
	margin-bottom:1vw;
}
section h2 img { width:2.5vw; padding-right:0.3vw; vertical-align:middle; }
	
section p { padding-bottom:1vw; }

section ul { list-style:decimal; padding-left:2em; }
section li { padding-bottom:1vw; }

section img { max-width:100%; padding:1.5vw 0; }

.p_line {
	width:100%;
	height:1px;
	margin:1vw 0 2vw;
	border-bottom:var(--bgc) 1px dashed;
}


@media screen and (max-width:860px) {
	section { margin:0 auto; width:90%; padding:0; }
	section h2 { margin-bottom:10px; }
	section h2 img { width:40px; padding-right:5px; }
	section p { padding-bottom:15px; }
	section li { padding-bottom:10px; }
	section img { padding:20px 0; }
	.p_line { margin:15px 0 30px; }
	.subject { margin:0 auto 30px; width:90%; padding:15px 5px; font-size:130%; }
	.subject span { font-size:16x; }
}

.table1 td:nth-child(1) { text-align:center; }

@media screen and (max-width:1000px) {
	.table1 td:nth-child(1) { text-align:left; }
}


.download {	width:100%; }
.download ul { width:100%; list-style:none; padding-left:0; }
.download li { display:inline-block; }
.download li a {
	display:block;
	border:var(--bgc) 1px solid;
	border-radius:99em;
	margin-right:2vw;
	margin-bottom:0.5vw;
	padding:0.5vw 1vw;
}
.download li a:hover { color:#FFF; background:var(--bgc); }
.download li i { padding-right:3px; font-size:120%; vertical-align:middle; }

@media screen and (max-width:860px) {
	.download { margin-bottom:30px; }
	.download li a { padding:10px 15px; margin-right:10px; }
}




/* register
------------------------------------------------------------------------------ */
input, select, textarea {
	width:100%;
	padding:0.8vw;
	border:var(--bgc) 1px solid;
	background:#FFF;
	border-radius:6px;
	vertical-align:middle;
}

label {
	display:block;
	color:var(--bgc);
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif;
	font-weight:600;
}

#login {
	margin:0 auto;
	width:85%;
	max-width:500px;
}
#login p img { height:2.5vw; padding:0; padding-left:5px; }


@media screen and (max-width:1000px) {
	#login { padding-top:15px; }
	input, select, textarea { padding:15px; }
	#login p img { height:auto; width:45%; }
}

#register { width:100%; }
#register .box { float:left; width:30%; margin:1.5%; }
#register .box textarea { height:8.5vw; }
#register .box table { width:100%; }
#register .box th { background:var(--bgc); color:#FFF; border:#FFF 1px solid; padding:0.4vw; }
#register .box td:nth-last-child(1) { width:4vw; text-align:center; } 
#register .box td { border:#bbb 1px solid; padding:0.5vw; }

@media screen and (max-width:1000px) {
	#register { width:85%; }
	#register .box { float:none; width:100%; margin:15px 0; }
	#register .box textarea { height:30vh; }
	#register .box th, #register .box td { padding:6px; vertical-align:middle; }
	#register .box td:nth-last-child(1) { width:50px; } 
}

.register_list {
	position:relative;
	display:inline-flex;
	flex-wrap:wrap;
	width:100%;
}
.register_list .box {
	position:relative;
	align-items:stretch;
	align-content:stretch;
	width:30%;
	border:var(--bgc) 1px solid;
	border-radius:6px;
	margin:0 1.5% 2%;
	padding-bottom:4vw;
	background:#eee;
}

.register_list .box h3 {
	width:100%;
	color:#FFF;
	text-align:center;
	background:var(--bgc);
	padding:0.5vw;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
	margin-bottom:1vw;
}

.register_list .box p { padding:0.5vw 1vw 0; }
.register_list .box span { color:var(--bgc); }
.register_list .box .p_line { margin:1vw 0; }
.register_list .box p i { color:#d85826; padding-right:5px; font-size:120%; }

.register_list .box .dele {
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
}
.register_list .box .dele a {
	display:block;
	width:100%;
	border:0;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
	background:#555;
	text-align:center;
	color:#FFF;
	padding:0.6vw;
}
.register_list .box .dele a:hover { background:#d85826; }


@media screen and (max-width:1000px) {
	.register_list .box { width:47%; margin:0 1.5% 3%; padding-bottom:60px; }
	.register_list .box h3 { padding:10px; margin-bottom:15px; }
	.register_list .box p { padding:5px 10px 0; }
	.register_list .box .p_line { margin:15px 0; }
	.register_list .box .dele a { padding:10px; }
}
@media screen and (max-width:680px) {
	.register_list .box { width:100%; margin:0 0 5%; }
}







/* visit
------------------------------------------------------------------------------ */
#visit {
	position:relative;
	display:inline-flex;
	flex-wrap:wrap;
	width:100%;
	padding:0 4vw;
	min-height:30vh;
	margin-top:1%;
}

#visit a {
	position:relative;
	align-items:stretch;
	align-content:stretch;
	width:21%;
	text-align:center;
	margin:0 2% 3%;
	padding:1vw;
	border-radius:1vw;
	background:#FFF;
	-webkit-box-shadow: 1px 2px 4px 2px rgba(0,0,0,0.1);
	-moz-box-shadow: 1px 2px 4px 2px rgba(0,0,0,0.1);
	box-shadow: 1px 2px 4px 2px rgba(0,0,0,0.1);
}
#visit a:hover {
	border:#47dcff 1px solid;
	-webkit-box-shadow: 0 0 0 0 rgba(0,0,0,0);
	-moz-box-shadow: 0 0 0 0 rgba(0,0,0,0);
	box-shadow: 0 0 0 0 rgba(0,0,0,0);
}

#visit .photo {
	width:100%;
	aspect-ratio: 4 / 3;
	margin-bottom:0.6vw;
}
#visit .photo img {
	width:100%;
	height:100%;
	object-fit:cover;
}

#visit h2 {
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif;
	text-align:center;
}

#visit a span { font-size:80%; color:#888; letter-spacing:0; }


@media screen and (max-width:1200px) {
	#visit a { width:30%; margin:0 1.6% 4%; }
}
@media screen and (max-width:860px) {
	#visit a { width:45%; margin:0 2.5% 5%; padding:15px; border-radius:8px; }
	#visit .photo { margin-bottom:15px; }
}
@media screen and (max-width:640px) {
	#visit a { width:100%; margin:0 0 8%; }
}




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

address {
	display:none;
	width:100%;
	text-align:center;
}
address h2 { color:#FFF; font-weight:600; }
address h2 i { color:#ecb758; padding:0 5px; }
address div { font-size:13px; color:#276371; padding:10px 0; }
address span { background:#ecb758; color:#FFF; font-size:12px; padding:2px 5px; border-radius:2px; margin-right:3px; vertical-align:middle; }
address p {
	color:#58ceeb;
	font-size:9px;
	-webkit-transform:scale(0.75);
}

@media screen and (max-width:1000px) {
	footer { height:auto; padding:5%; margin-top:50px; }
	address { display:block; }
	address span { font-size:9px; -webkit-transform:scale(0.75); }
}



/* 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%; }
}




/* gallery
--------------------------------------------------------------------------------------------------------------------------------*/
.projects-list {
	margin:0 auto 50px;
	left:7px;
}

.waterfall {
	width:100%;
	margin:0px auto;
	column-count:4;/*欄數*/
	column-gap:0.8vw;/*每欄間隔*/
}

.waterfall .item {
	background-color:lightgrey;
	text-align:center;
	/*padding:5px;*/
	box-sizing:border-box;
	margin: 0 auto 0.8vw;
	break-inside:avoid; /*定義頁面、列或是區域發生中斷時的元素表現方式。 auto->元素中斷、acoid->元素不中斷*/
}

.waterfall .item img {
	width: 100%;
	object-fit:cover;
	object-position:50% 50%;
	padding:0;
}
.waterfall .item img:hover { opacity:0.7; }


@media screen and (max-width:1000px) {
	.waterfall { column-count:3; column-gap:10px; }
	.waterfall .item { margin: 0 auto 10px; }
}

@media screen and (max-width:740px) {
	.waterfall { column-count:2; column-gap:10px; }
	.waterfall .item { margin: 0 auto 10px; }
}





/* youtube size
-------------------------------------------------------------------------- */
.iframe-16x9 {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}

.iframe-16x9 iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}



/* color
------------------------------------------------------------------------------ */
:root {
	--bgc:#19a1c2;
}