/* ==========================================================================
   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:#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: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:#18acac; /* Old browsers */
	background: -moz-linear-gradient(top,  #b2cbcb 18%, #18acac 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #b2cbcb 18%,#18acac 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #b2cbcb 18%,#18acac 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

nav a { color:#FFF; text-shadow:#1d8c8c 0.1em 0.1em 0.1em; padding:0 2vw; }
nav a:hover { color:#ffd0be; }

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; }
	.no_1000 { 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; }

.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; }
}

section .area { float:left; width:50%; padding:1vw; }

section h3 {
	width:100%;
	background:#555;
	color:#FFF;
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif;
	text-align:center;
	padding:0.5vw 1vw;
}
section table { width:100%; }
section th, section td { border:#555 1px solid; padding:0.5vw; text-align:center; vertical-align:middle; }
section th { color:#FFF; background:var(--bgc); }

.table3 td { padding:1vw 0.5vw; }
.table3 a { display:inline-block; font-size:80%; padding:0.5vw 1vw; color:#FFF; background:var(--bgc); border-radius:3px; margin-left:5px; }
.table3 a i { padding-right:3px; color:#ffde00; }
.table3 a:hover { background:#d85827; }
.table4 td { text-align:center!important; }
.table4 td:nth-child(4) { text-align:left!important; }

.table_bookcar br { display:none; }


@media screen and (max-width:1000px) {
	.table4 th, .table4 td { border:none; }
	.table4 td { text-align:left!important; }
	.table4 td br { display:none; }
}

@media screen and (max-width:860px) {
	section .area { float:none; width:100%; padding:10px 0; }
	section th, section td { padding:10px 5px; }
	.table1 td:nth-child(1) { width:100px; font-size:90%; letter-spacing:0; }
	.table1 td:nth-child(3) { width:100px; }
	.table2 { font-size:90%; }
	.table2 td:nth-child(1) { width:100px; letter-spacing:0; }
	.table3 td { padding:15px 5px; }
	.table3 a { padding:8px 10px ;}	
}

@media screen and (max-width:640px) {
	.table_bookcar br { display:block; }
}





.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; }
}



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


/* gallery
--------------------------------------------------------------------------------------------------------------------------------*/
.projects-wrapper {
	text-align:center;
	min-height:100vh;
}

.projects-list {
	margin:auto;
	left:7px;
}


.project-item {
	width:20%;
	margin-bottom:15px;
	position:relative;
}

.project-item img {
	width:100%;
	height:auto;
	vertical-align:top;
	border-radius:4px;
	border:#ddd 1px solid;
	padding:0!important;
}




/* video
------------------------------------------------------------------------------ */
#video {
	position:relative;
	display:inline-flex;
	flex-wrap:wrap;
	width:100%;
	padding-left:2.5%;
}

#video .box {
	position:relative;
	align-items:stretch;
	align-content:stretch;
	width:50%;
	padding:2%;
}

#video .box h2 {
	color:#FFF;
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif;padding:1.2vw 2vw;
	background:var(--bgc);
	padding:1vw;
}

@media screen and (max-width:1000px) {
	#video { margin-left:5%; width:90%; padding:0;  }
	#video .box { width:100%; padding:3% 0; }
	#video .box h2 { padding:15px 20px; }
}





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





/* 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:#104949; padding:10px 0; }
address span { background:#ecb758; color:#178282; font-size:12px; padding:2px 5px; border-radius:2px; margin-right:3px; vertical-align:middle; }
address p {
	color:#6df0e3;
	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%; }
}






/* 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:#18acac;
}