@charset "utf-8";

/**reset css**/

/*html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
caption, tbody, tfoot, thead,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}


article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}


blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/**reset css**/
hr {
    margin: 8px 0;
    border-top: 1px solid black;
}
blockquote{
    margin: 0;
}

.contentMarginTop{
    margin-top: 124px;
}

.bigGTitle {
    font-family: 蘋果儷中黑,儷黑pro,LiHeiPro,LiGothicMed,Hiragino Kaku Gothic,微軟正黑體,Microsoft JhengHei,simhei,Microsoft YaHei,DF-Hei,DroidSans,Arial,Helvetica Neue,Helvetica,sans-serif;
    font-size: 20px;
    line-height: 36px;
    color: #999;
}

a:link {
    color: #C33;
    text-decoration: none;
}

a:visited {
	color: #66F;
	text-decoration: none;
}

a:hover {
	color: #C33;
	text-decoration: none;
}

a:active {
	color: #000;
	text-decoration: none;
}

.bigTitle {
	font-family: 蘋果儷中黑,儷黑pro,LiHeiPro,LiGothicMed,Hiragino Kaku Gothic,微軟正黑體,Microsoft JhengHei,simhei,Microsoft YaHei,DF-Hei,DroidSans,Arial,Helvetica Neue,Helvetica,sans-serif;
	font-size: 32px;
	line-height: 36px;
}
.mBody {
	color: #000;
	font-size: 14px;
	font-family: 蘋果儷中黑,儷黑pro,LiHeiPro,LiGothicMed,Hiragino Kaku Gothic,微軟正黑體,Microsoft JhengHei,simhei,Microsoft YaHei,DF-Hei,DroidSans,Arial,Helvetica Neue,Helvetica,sans-serif;
	line-height: 24px;
	text-align: left;
}

.mBody.w3-hide-small {
    font-weight: 900;
}

tr.border-bottom td {
    border-bottom: 1px solid black;
}

.mBodyCenter {
	color: #000;
	font-size: 14px;
	font-family: 蘋果儷中黑,儷黑pro,LiHeiPro,LiGothicMed,Hiragino Kaku Gothic,微軟正黑體,Microsoft JhengHei,simhei,Microsoft YaHei,DF-Hei,DroidSans,Arial,Helvetica Neue,Helvetica,sans-serif;
	line-height: 24px;
	text-align: center;
}
.sBody {
	text-align: left;
	font-family: 蘋果儷中黑,儷黑pro,LiHeiPro,LiGothicMed,Hiragino Kaku Gothic,微軟正黑體,Microsoft JhengHei,simhei,Microsoft YaHei,DF-Hei,DroidSans,Arial,Helvetica Neue,Helvetica,sans-serif;
	font-size: 12px;
	color: #555;
	line-height: 18px;
	text-decoration: none;
}
.sDesc {
	font-family: 蘋果儷中黑,儷黑pro,LiHeiPro,LiGothicMed,Hiragino Kaku Gothic,微軟正黑體,Microsoft JhengHei,simhei,Microsoft YaHei,DF-Hei,DroidSans,Arial,Helvetica Neue,Helvetica,sans-serif;
	font-size: 12px;
	color: #999;
}
.sTitle {
	font-family: 蘋果儷中黑,儷黑pro,LiHeiPro,LiGothicMed,Hiragino Kaku Gothic,微軟正黑體,Microsoft JhengHei,simhei,Microsoft YaHei,DF-Hei,DroidSans,Arial,Helvetica Neue,Helvetica,sans-serif;
	font-size: 18px;
	text-align: left;
	color: #000;
}
.gTitle {
	font-family: 蘋果儷中黑,儷黑pro,LiHeiPro,LiGothicMed,Hiragino Kaku Gothic,微軟正黑體,Microsoft JhengHei,simhei,Microsoft YaHei,DF-Hei,DroidSans,Arial,Helvetica Neue,Helvetica,sans-serif;
	font-size: 18px;
	text-align: left;
	color: #AAA;
	font-weight: bold;
}

.blackTitle, .blackContent {
    font-family: 蘋果儷中黑,儷黑pro,LiHeiPro,LiGothicMed,Hiragino Kaku Gothic,微軟正黑體,Microsoft JhengHei,simhei,Microsoft YaHei,DF-Hei,DroidSans,Arial,Helvetica Neue,Helvetica,sans-serif;
    font-size: 18px;
    text-align: left;
    color: #000;
    font-weight: bold;
    line-height: 64px;
}

.clearBoth {
    clear: both;
}

.pix {
    text-align: center;
}

.pix img, img.pix {
    width: 100%;
}

.subText {
	line-height: 30px;
}
.smallLink {
	font-family: 蘋果儷中黑,儷黑pro,LiHeiPro,LiGothicMed,Hiragino Kaku Gothic,微軟正黑體,Microsoft JhengHei,simhei,Microsoft YaHei,DF-Hei,DroidSans,Arial,Helvetica Neue,Helvetica,sans-serif;
	font-size: 12px;
}

.smallLink .link{
    max-width: 160px;
    line-height: 14px;
}

#Table_ tr .mBody p {
	color: #000;
	text-align: left;
}
#Table_ tr .mBody p .blackTitle {
	text-align: left;
}

body, td, th {
    font-family: 蘋果儷中黑,儷黑pro,LiHeiPro,LiGothicMed,Hiragino Kaku Gothic,微軟正黑體,Microsoft JhengHei,simhei,Microsoft YaHei,DF-Hei,DroidSans,Arial,Helvetica Neue,Helvetica,sans-serif;
}


.topnav {
    overflow: hidden;
    background-color: #ffffff;
}

.topnav a, .topnav span {
    display: inline-block;
    color: #000;
    text-align: center;
    padding: 5px 32px;
    text-decoration: none;
    font-size: 17px;
    -webkit-transition: background 0.3s linear;
    -moz-transition: background 0.3s linear;
    -ms-transition: background 0.3s linear;
    -o-transition: background 0.3s linear;
    transition: background 0.3s linear;
    z-index: 9;
    font-weight: bolder;
}

.topnav span {
    font-weight: normal;
}

.topnav a:hover {
    background-color: #ffffff;
    color: red;
}

.active {
    background-color: #ffffff;
    color: black;
}

.topnav .icon {
    display: none;
}

.lang-bar {
    /*margin: 32px 0 16px;*/
}


.dotted-spaced {
    background-image: linear-gradient(to right, #333 10%, rgba(255, 255, 255, 0) 0%, #333 10%, rgba(255, 255, 255, 0) 0%);
    background-position: top;
    background-size: 10px 1px;
    background-repeat: repeat-x;
    margin: 0;
    padding: 0;
}

.aboutTitle {
    height: 200px;
}

.aboutDetail p {
    font-size: 14px;
    line-height: 24px;
    overflow-wrap: break-word;
}

.timelineDetail{
    margin-right: 32px;
}

table.timeline{
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    width: 100%;
    table-layout: fixed;
}
table.timeline tr:nth-child(2n) {
    background: #fff;
}
table.timeline tr:nth-child(2n + 1) {
    background: #FAFAFA;
}

.timeline table caption {
    /*font-size: 1.5em;
    margin: .5em 0 .75em;*/
}

.timeline table tr {
    /*background-color: #f8f8f8;
    border: 1px solid #ddd;
    padding: .35em;*/
}

.timeline table th,
.timeline table td {
    /*padding: .625em;
    text-align: center;*/
}

.timeline table th {
    /*font-size: .85em;
    letter-spacing: .1em;
    text-transform: uppercase;*/
}

.thought .gTitle {
    color: black;
    margin: 16px 0;
}

.thought .gLink {
    padding: 16px;
    margin-left: 16px;
}

.thought a{
    width: 100%;
    overflow-wrap:break-word;
}

.thought .bookStore{
    margin: 16px 0;
}

.iframeContainer {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}


.project{

}

.project img{
	width: 280px;
}

.projectContent iframe, .newsContent iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/*override w3css*/
.w3-button:hover{
    background: none !important;
}

@media screen and (max-width: 960px) {
    /*menu-ch*/
    .branding {
        padding-left: 16px;
    }

    .topnav a {
        padding: 5px 24px;
    }
}

@media screen and (max-width: 800px) {
    .blackContent {
        font-size: 16px;
    }

    .aboutTitle {
        height: 200px;
    }


    /*menu-ch*/
    .topnav a {
        font-size: 16px;
        padding: 5px 16px;
    }

    .menu-en a {
        font-size: 16px;
        padding: 5px 12px;
    }

    .project img {
        /*width: 100%;
        min-width: 280px;*/
    }

    .project .bigTitle, .project .bigGTitle {
        font-size: 24px;
        line-height: 28px;
    }
}

@media screen and (max-width: 700px) {
    .aboutTitle {
        height: 160px;
    }

}

@media screen and (max-width: 600px) {

    .contentMarginTop {
        margin-top: 96px;
    }

    .blackTitle, .blackContent {
        padding-left: 16px;
        line-height: 8px;
    }
    .newsTitle {
        padding: 16px 0;
    }

    .aboutDetail blockquote img{
        width: 100%;
    }

    .timeline table {
        /*border: 0;*/
    }

    .timeline table caption {
        /*font-size: 1.3em;*/
    }

    table.timeline thead {
        border: none;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }

    table.timeline tr.tableCard {
        border: 1px solid #ddd;
        /*border-bottom: 3px solid #ddd;*/
        display: block;
        margin-bottom: .625em;
    }

    table.timeline td {
        border-bottom: 1px solid #ddd;
        display: block;
        /*font-size: .8em;*/
        text-align: right;
    }

    table.timeline td::before {
        content: attr(data-label);
        float: left;
        /*font-weight: bold;*/
        /*text-transform: uppercase;*/
    }

    table.timeline td:last-child {
        /*border-bottom: 0;*/
    }

    table.timeline tr {
        background: none;
    }

    table.timeline td:nth-child(2n) {
        background: #fff;
    }

    table.timeline td:nth-child(2n + 1) {
        background: #FAFAFA;
    }

	
	.project img {
        width: 100%;
        min-width: 280px;
    }

    .thought .gTitle {
        font-size: 16px;
        margin: 4px 0;
    }

    .thought .gLink{
        padding: 8px;
        margin-left: 8px;
    }

    .thought a {
        font-size: 14px;
        line-height: 1.5em;
    }

    .thought .bookStore {
        font-size: 14px;
        margin: 8px 0;
    }

    .policy{
        font-size: 12px;
    }

    .w3-table th:first-child, .w3-table td:first-child, .w3-table-all th:first-child, .w3-table-all td:first-child {
        padding-left: 16px;
        padding-right: 16px;
    }

    .w3-dropdown-content {
        width: 100%;
    }
}


@media screen and (max-width: 400px) {
    .tableCard .mBody {
        padding-left: 16px;
        padding-right: 16px;
    }

}
@charset "utf-8";
.newsList .newsGrid {
    position: relative;
    text-align: left;
    padding: 2px;
}

.newsList .newsGrid img {
    width: 100%;
}

.newsList .newsGrid hr {
    padding: 2px 0px 4px 0px;
}

.newsList .newsGrid .text-block {
    /*position: absolute;
bottom: 4%;
left: 50%;
transform: translate(-50%, 0%);
width: 100%;*/
    height: 72px;

}

.newsTitle {
    padding: 12px 0 12px 32px;
}

.newsHeader img {
    min-width: 280px;
    width: 100%;
}

.newsHeader .newsTitle, .newsHeader .newsImage {
    /*min-height: 280px;
    height: 200px;*/
}

.newsContent img, .projectContent img {
    width: 100%;
}

.newsContent p {
    overflow-wrap: break-word;
    margin: 14px 0;
}
.newsList a:link {
    /*color: black;*/
    text-decoration: none;
}
.newsList a:visited {
    color: #66F;
    text-decoration: none;
}
.newsList a:hover {
    color: #C33;
    text-decoration: none;
}
.newsList a:active {
    color: #ff6b6b;
    text-decoration: none;
}
.newsList .myTitle {
    font-size: 18px;
    font-family: 蘋果儷中黑,儷黑pro,LiHeiPro,LiGothicMed,Hiragino Kaku Gothic,微軟正黑體,Microsoft JhengHei,simhei,Microsoft YaHei,DF-Hei,DroidSans,Arial,Helvetica Neue,Helvetica,sans-serif;
    font-style: normal;
    font-weight: 900;
    line-height: 20px;
    margin-top: 0px;
    margin-bottom: 4px;
}
.newsList .myDate {
    font-size: 13px;
    font-family: 蘋果儷中黑,儷黑pro,LiHeiPro,LiGothicMed,Hiragino Kaku Gothic,微軟正黑體,Microsoft JhengHei,simhei,Microsoft YaHei,DF-Hei,DroidSans,Arial,Helvetica Neue,Helvetica,sans-serif;

    font-style: normal;
    font-weight: 0;
    line-height: 20px;
    margin-top: 3px;
    margin-bottom: 4px;
}
.topMenu{background-color:rgba(255,255,255,0.7)}.topMenu.darkTheme{background-color:rgba(0,0,0,0.7)}.w3-dropdown-hover:hover>.w3-button:first-child,.w3-dropdown-click:hover>.w3-button:first-child{background:none !important}.topMenuContainer{padding:24px 8px 24px 8px}.langMenu{padding-right:40px}.langMenu .lang{padding:0 4px;font-size:14px;text-decoration:none;color:black;letter-spacing:1px;line-height:20px}.langMenu a.lang:hover{color:red}a.menu-button,a.menu-button:visited,a.menu-button:link{padding:18px 12px 0px 0px;color:black}#mobile-menu{width:100%;padding-top:44px}#mobile-menu a,#mobile-menu a:visited{display:block;width:100%;padding:12px 16px;text-align:right}#mobile-artworks-menu,#mobile-artworks-short-menu{display:block;position:fixed;width:100%;height:100%;top:0;background-color:#efefef;opacity:0.98;z-index:3}#mobile-artworks-menu .w3-bar-block,#mobile-artworks-short-menu .w3-bar-block{margin-top:16px}#mobile-artworks-menu a,#mobile-artworks-short-menu a{text-align:center;padding:16px 16px;color:black}#mobile-artworks-short-menu.en{font-size:14px}.branding{padding-left:32px}.branding.english span{letter-spacing:0px}.branding.english q{letter-spacing:0px}.branding span{color:black;font-size:44px;letter-spacing:22px}.branding q{color:black;font-size:18px;line-height:32px;letter-spacing:5px}.mainMenu{position:absolute;right:0;bottom:-24px;padding:0px 32px 48px 0px;width:auto;overflow:visible}.mainMenu.english .mainMenuBtn{letter-spacing:0px}.mainMenu a{background:none;color:black}.mainMenu .mainMenuBtn{font-size:18px;padding:0px 0px 0px 24px;letter-spacing:4px}.mainMenu .mainMenuBtn.short{display:none}.mainMenu .mainMenuBtn .w3-button:hover{color:#C33 !important;background:none !important}.mainMenu .mainMenuBtn .artworksDropdown{background-color:rgba(255,255,255,0.5);padding:16px 8px}.mainMenu .mainMenuBtn .artworksDropdown .w3-button:hover{color:#C33 !important;background:none !important}.mainMenu .mainMenuBtn .artworksDropdownShort{display:none;position:fixed;width:80%;height:auto;top:20%;left:10%;right:10%}.mainMenu.english .mainMenuBtn{letter-spacing:0px}.darkTheme,.darkTheme:hover{color:white !important}.darkTheme.slideBtn:hover,.darkTheme:hover.slideBtn:hover{color:#C33 !important}.darkTheme a,.darkTheme q,.darkTheme span,.darkTheme:hover a,.darkTheme:hover q,.darkTheme:hover span{color:white}.darkTheme .w3-button,.darkTheme:hover .w3-button{color:white !important;background:none !important}.darkTheme .w3-button:hover,.darkTheme:hover .w3-button:hover{color:#C33 !important;background:none !important}.darkTheme .lang,.darkTheme:hover .lang{color:white}.darkTheme .mainMenu .mainMenuBtn .artworksDropdown,.darkTheme:hover .mainMenu .mainMenuBtn .artworksDropdown{background-color:rgba(0,0,0,0.5)}.darkTheme .mainMenu .mainMenuBtn .artworksDropdown hr,.darkTheme:hover .mainMenu .mainMenuBtn .artworksDropdown hr{border-top:1px solid white}@media screen and (max-height: 600px){.mainMenu .mainMenuBtn.full{display:none}.mainMenu .mainMenuBtn.short{display:block}}@media screen and (max-width: 960px){.branding.english span{font-size:32px}.branding.english q{font-size:14px}.langMenu{padding-right:32px}.mainMenu .mainMenuBtn{padding:0px 0px 0px 8px;font-size:14px;letter-spacing:1px}}@media screen and (max-width: 800px){.branding.english span{font-size:24px}.branding.english q{font-size:12px}.branding span{letter-spacing:8px;font-size:44px}.branding q{font-size:14px}.langMenu{padding-right:24px}.mainMenu .mainMenuBtn{padding:0px 0px 0px 8px;font-size:14px;letter-spacing:1px}.mainMenu .mainMenuBtn .w3-button{padding:8px 8px !important}}@media screen and (max-width: 600px){.topMenuContainer{padding:16px}.branding{padding-left:0px}.branding span{font-size:44px;letter-spacing:4px}.branding q{font-size:16px;letter-spacing:2px}.langMenu{padding:0px 24px}.langMenu .lang{bottom:8px;font-size:12px}.topnav.responsive{position:relative}.topnav.responsive .icon{position:absolute;right:0;top:0}.topnav.responsive a{float:none;display:block;text-align:left}}@media screen and (max-width: 400px){.branding{padding-left:0px}.branding span{font-size:32px;letter-spacing:6px}.branding q{font-size:12px;letter-spacing:2px;line-height:24px}.branding.english>a{font-size:24px}.branding.english>q{font-size:12px;letter-spacing:0px;line-height:24px}.langMenu{padding:0px 14px 0px 0px}.langMenu .lang{padding:0px 2px;bottom:8px}#mobile-artworks-menu .w3-bar-block{margin-top:16px}#mobile-artworks-menu a{text-align:center;padding:12px 16px;color:black}}