@charset "UTF-8";
/* CSS Document */
@import url(https://fonts.googleapis.com/css?family=Quicksand:300,400,700|Open+Sans:300,400,600,700);
@import url(https://fonts.googleapis.com/css?family=Pontano+Sans);
@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url(https://fonts.googleapis.com/css?family=Fenix);

html{
    font-size: 62.5%;
}

body{
	font-family: 'Pontano Sans' , 'Noto Sans Tagalog', "Microsoft JhengHei",  "Lucida Grande", "微軟正黑體", Verdana, Helvetica, Arial, sans-serif;
	color:#696c71;
	font-size:1.5rem;
	line-height:160%;
	font-weight:400;
	padding:0;
	min-width:1100px;
	min-height:660px;
	}
h1, h2, h3, h4{
	color:#000000;
    font-style: normal;
    font-weight:400;
	font-family: 'Quicksand', 'Noto Sans Tagalog', sans-serif;
	letter-spacing: 0;
	}
	
::selection {
	background:#dddfe0;/*選取範圍的底色*/
	color: #000000;		/*選取範圍的文字色*/
	}
		
.specialfont{
	font-family: 'Quicksand', 'Noto Sans Tagalog', sans-serif;
	letter-spacing: 0;
	}
	
a {color:#696c71;
	}
	
a:hover{
	color:#000000;
	}
nav{
	letter-spacing: 1px;}
.logo{
	margin-bottom:64px;
	}
.indisebody .logo {
	width:52px;
	height:69px; 
}
.indisebody .logo .logobox{
	-webkit-transform: scale(0.75);
	-moz-transform: scale(0.75);
	-ms-transform: scale(0.75);
	-o-transform: scale(0.75);
	transform: scale(0.75);
	-moz-transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
	}
.logotext{
	background:url(../images/logo_type.svg);
	text-indent:-9999px;
	display:block;
	width:134px;
	height:43px;
	margin-left:-1px;
	margin-top:24px;
	}
.indisebody .logotext{
	display:none;
	}
aside{
	position:fixed;
	left:54px;
	top:40px;
	}
div.info{
	font-size:1.3rem;	text-align:right;
	position: absolute;
	height:50px;
	width:220px;
	right:54px;
	top:40px;
	letter-spacing: 1px;
	z-index:999;
	color:#696c71;
	}
.gotop{
	position: fixed;
	right:0;
	bottom: -6px;
	display: none;
	stroke: #323232;
}

.gotop:hover polyline{
	stroke: #000000;
}

.mobilemenu{
	display: none;
}

#menu a{
	color:#696c71;
	font-size:1.6rem;
	line-height:120%;
	margin-bottom:18px;
	}
#menu{
	margin-bottom:32px;
	}
#menu a:hover, #menu a.active{
	color:#000000;
	border-bottom:2px solid #323232;
	margin-bottom:16px;
	}
.secmenu{
	position:relative;
	}
.secmenu a{
	color:#696c71;
	font-size:1.2rem;
	line-height:130%;
	margin-bottom:8px;
	letter-spacing: 1px;
	}
.secmenu a.facebook, .secmenu a.search{
	font-size:1.4rem;
	}
.secmenu a:hover, .secmenu span.active{
	color:#000000;
	border-bottom:1px solid #323232;
	margin-bottom:7px;
	}

a.chin, .secmenu span.chin{
	font-size:1.1rem;
	}
a.facebook:before{
	content: "follow us";
	}	
a.facebook:hover:before{
	content: "facebook";
	}
.info a:hover{
	line-height:130%;
	text-decoration:underline;
	}
.copyright{
	font-size:1.3rem;
	padding:80px 0 46px 0;
	display:block;
	letter-spacing: 1px;
	}
.copyright.hide{
	display: none;
}
.indexcopy{
	position:absolute;
	bottom:0;
	left:50%;
	z-index: 30;
	margin-left:-470px;
	width:960px;
	}
.searchopen{
	position:absolute;
	left:-2px;
	top:-2px;
	width:80px;
	padding:10px;
	margin:-10px;
	cursor: pointer;
	z-index:200;
	}
.searchopen input{
	padding:5px 0;
	margin-top:-5px;
	width:0;
	font-size:1.4rem;
	}
.searchopen input.show{
	width:140px;
	border-bottom:1px solid #323232;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	background-color:#fff;
	}
.results{
	}
.searchagain{
	margin-top:60px;
	border-bottom:#dddfe0 1px solid;
	}
.searchagain .againput{
	width:70%;
	float:left;
	font-size:1.7rem;
	color:#696c71;
	letter-spacing:1px;
	line-height:34px;}
 .ssent{
	float:right;
	letter-spacing:1px;
	line-height:34px;
	height:50px;
	font-size:1.4rem;
	width:80px;
	}
 .ssent:hover{
	background:#323232;
	color:#fff;
	}
/*-----------------------index---------------------*/
#banner{
	position:absolute;
	top:160px;
	left:50%;
	width:960px;
	margin-left:-470px;
	z-index:100;
	}

#banners{
	width:960px;
	height: 576px;
	position: relative;
	overflow: hidden;
	}
#banners .banneritem{
	position: absolute;
	top: 0;
	width: 960px;
	height: 576px;
	}
.banneritem{
	display: none;
}
.desbanner{
	background:#ffffff;
	position:absolute;
	bottom:0;
	right:0;
	color:#000000;
	font-size:1.4rem;
	padding:13px 8px 2px 16px;
	letter-spacing:1px;
	}
.desbanner .title{
	font-size:16px;
	font-weight:400;
	display:block;
	letter-spacing:1px;
	}

.number{
	color:#000000;
	position:absolute;
	text-align:right;
	width:50px;
	height:24px;
	bottom:-36px;
	right:9px;
	font-size:1.7rem;
	}

.bannernext{
	position:absolute;
	right:-12%;
	top:50%;
	margin-top:-38px;
	}
	
/*-----------------------artist---------------------*/

article{
	margin: 0 0 0 240px;
	}
article.exhibition{
	margin:0 auto;
	}
.content{
	/*min-height: 600px;*/
	margin-top:184px;
	margin-right:54px;
	min-width:860px;
	}

article.exhibition .content{
	margin-left:54px;
	}
.articleh1{
	display: none;
}
.pagetitle, .newstitle, .exhibitiontitle{
	position:fixed;
	top:0;
	padding:39px 0 26px 0;
	width:100%;
	z-index:999;
	}
.bgwhite{
	background-color:#FFFFFF;}
.pagetitle h1{
	font-size:2rem;
	line-height:150%;
	position:absolute;
	top:34px;
	left:0;	
    max-width: 260px;
	}
.subnav{
	display:inline-block;
	margin-right:68px;}
.pagetitle .subnav{
	margin-left:280px;
	}
.subnav a{
	margin-right:30px;
	}
.subnav a:hover, .subnav a.active{
	color:#000000;
	border-bottom:1px solid #323232;
	line-height:130%;
	}
.summary{
	width: 230px;
    margin-right: 50px;
	float:left;
	font-size:1.9rem;
	color:#000000;
	line-height:160%;
	letter-spacing: 1px;
	margin-top:-7px;
	font-family: 'Fenix', 'Noto Sans Tagalog', serif;
	}
.bio .description h3{
	margin-top:1px;
	}
.bio .description h4{
	margin:1px 0 26px 0;
	}
.summary img{
	margin:6px 30px 20px 0;
	}
.description{
	width:580px;
	float:left;
	font-size:1.7rem;
	line-height: 186%;
	letter-spacing: 1px;
	}
.bio .description{
	margin-top:-7px;
	}
.description p img{
	margin: 10px 30px 30px 18px;
	float:left;
	}
.description p span{
	text-align:left;
	margin-top:0;
	letter-spacing: 1px;
	}
article.exhibition .description p img, article.news .description p img{
	max-width:460px;
	}
.description img{
	margin:50px auto;
	display:block;
	float:none;
	}
.description span{
	margin:-34px auto 30px auto;
	display:block;
	float:none;
	font-size:1.4rem;
	line-height: 190%;
	color:#000000;
	font-weight:400;
	text-align:center;
	}
.description p br{
	clear:none;
	}
.description br{
	height:0px;
	line-height:1px;
	visibility:hidden;
	clear:both;
	}
.description h3{
	margin:0 0 26px 0;
	font-size:2rem;
	}
.description h4{
	margin:0 0 14px 0;
	font-size:2rem;
	}
.description h5{
	margin:0 0 24px 0;
	font-size:2rem;
	color:#000000;
	display: inline-block;
	font-family: 'Fenix', 'Noto Sans Tagalog', serif;
	}
.about .description h5, .search .description h5{
	margin-top:-6px;
	line-height:160%;
	}
.search .description h5{
	font-family: 'Pontano Sans' , 'Noto Sans Tagalog', "Microsoft JhengHei",  "Lucida Grande", "微軟正黑體", Verdana, Helvetica, Arial, sans-serif;
	letter-spacing: 1px;
	}
.description p{
	margin-bottom:26px;
	text-align:left;
	}
.description a{
	text-decoration:underline;
	}
a.cvhover .cvdl{
	display:none;
	}
.pagetitle nav a.cvhover:hover{
	border:none;
	padding:0 30px 80px 30px;
	margin-right:0;
	margin-left:-30px;
	background:url(../images/icon.gif) no-repeat center 28px;
	}
a.cvhover:hover .cvdl{
	display:block;
	position:absolute;
	top:77px;
	background:#323232;
	color:#ffffff;
	padding:9px 12px 8px 12px;
	margin-left:-56px;
	}

.doenloadcv{
	display:block;
	background:#a7a7a7;
	color:#ffffff;
	padding:5px 0 4px 0;
	font-size:1.4rem;
	text-align:center;
	margin-top:26px;
	width:128px;
	font-family: 'Pontano Sans' ,'Noto Sans Tagalog', 'LiHeiPro', "微軟正黑體", "Lucida Grande", Helvetica, Arial, sans-serif;
	}
.doenloadcv:hover{
	background:#323232;
	color:#ffffff;
	}
.works a{
	float:left;
	width:13%;
	margin:0 80px 62px 0;
	opacity:0;
	filter:alpha(opacity=0);
	display: block;
	}
/*
.works a:hover{
	opacity:1;
	filter:alpha(opacity=100);
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	}*/
.press{
	color:#000000;
	display:table;
	margin-top:-28px;
	width:100%;
    max-width:1014px;
    min-width:860px;
	padding-right:54px;
	}
.press li{
	border-bottom:#dddfe0 1px solid;
	letter-spacing: 1px;
	}
.press li:hover{
	border-bottom:#323232 2px solid;
	margin-bottom:-1px;
	}

.press a{
	padding:26px 0;
	vertical-align:top;
	color:#000000;
	width:100%;
	}
.press a .date{
	width:240px;
	margin-right:20px;
	margin-bottom:8px;
	display:block;
	float:left;
	margin-top:-1px;
	}
	
.press a .presslist, .press a .fairslist{
	max-width:700px;
	display:block;
	float:left;
	font-size:1.3rem;
	font-weight:300;
	}
.press a .fairslist{
	padding-right:20px;
	}
.date{
	font-size:1.5rem;
	letter-spacing: 1px;
	}
.presslist h4, .public h4, .fairslist h4{
	font-size:2rem;
	margin-bottom:4px;
	margin-top:-4px;
	line-height:160%;
	}
.public h4{
	margin-bottom:4px;
	font-size:1.8rem;
	letter-spacing: -1px;
	}
.presslist h6, .public h6, .fairslist h6{
	font-size:1.5rem;
	line-height:180%;
	}
.openlink{
	display:none;
	opacity:0.3;
    filter: alpha(opacity=30);
	}
.press li:hover .openlink{
	display:block;
	}
.press li{
	position:relative;}
.press li:hover .openlink{
	position:absolute;
	top:50%;
	right:180px;
	margin-top:-34px;
	}
.vipdate{
	display:block;
	width:140px;
	float:right;
	font-size:1.3rem;
	line-height:170%;
	margin-top:1px;
	}

.public{
	color:#000000;
	letter-spacing: 1px;
	max-width:960px;
	}
.public .booktitle{
	margin:0 100px 36px 0;
	float:left;
	width:220px;
	height:370px;
	}
.public img{
	margin-bottom:20px;
	max-width:220px;
	max-height:220px;
	}
	
.public br, .artists br{
	height:0px;
	line-height:1px;
	visibility:hidden;
	clear:both;
	}	
	
.artists{
	min-width:860px;
	}
.artists img{
	max-width:100px;
	max-height:100px;
	position:absolute;
	opacity: 0.7;
	}
.artists a:hover img{
	/*max-width:160px;
	max-height:180px;
	z-index:1;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;*/
	opacity:1;
	}
.artists a{
	margin:0 50px 60px 0;
	float:left;
	width:266px;
	height:100px;
	display:none;
	position: relative;
	letter-spacing:-1px;
	}
.artists a:hover h4{
	color:#000000;
	}
.artists h4{
	font-size:2rem;
	width:146px;
	color:#696c71;
	position:absolute;
	top:-2px;
	right:0;
	}
	
#lightbox{
	position:fixed;
	min-width: 1120px;
	width:100%;
	height:100%;
	background-color:rgba(255,255,255,0.95);
	top:0;
	bottom:0;
	z-index:1000;
	-webkit-transform: translateZ(0);
	display: none; 
	}
.lbclose{
	display: none;
}
.control{
	display: none;
}
.prearrow, .nextarrow{
    vertical-align: middle;
	display: table-cell;
	text-align:center;
	padding:30px 20px 50px 20px;
	}
#lightbox div.printdata {
	display: table-cell; 
    vertical-align: middle;
	text-align:center;
    margin:auto;
	padding: 30px 0;
	width:56%;
	font-size:1.4rem;
	color:#000000;
	letter-spacing: 1px;
	line-height:160%;
	}
.prearrow img, .prearrow .svgImg{
	transform:rotate(180deg);
	-ms-transform:rotate(180deg); 	/* IE 9 */
	-moz-transform:rotate(180deg); 	/* Firefox */
	-webkit-transform:rotate(180deg); /* Safari 和 Chrome */
	}

#lightbox div.printdata h3{
	letter-spacing: 0;
	font-size:2rem;
	margin-bottom:7px;
	line-height:136%;
	}
#lightbox div.printdata span.pc{
	font-size:1.2rem;
	color:#696c71;
	}
#lightbox .artbox {
	display: none;
}
#lightbox .artbox.show {
	display: block;
}
#lightbox img.artprint {
    /* max-width:100%; */
    /* max-height:65%;
    height: 65vh; */
    margin:0;
    display: none;
	cursor: pointer;
	}
#lightbox .desc{
	text-align: left;
	padding-top: 24px;
	margin: 0 auto;
	display: block;
	font-family: 'Open Sans' , 'Noto Sans Tagalog', "Microsoft JhengHei",  "Lucida Grande", "微軟正黑體", Verdana, Helvetica, Arial, sans-serif;
}

/*-----------------------展覽 & 新聞-----------------------*/

.exhibitionslist{
	color:#000000;
	width:100%;
    min-width:914px;
	}
 .piclist{
	width:550px;
	height:240px;
	overflow:hidden;
	float:left;
	margin:0 30px 50px 0;
	}
.exlist{
	width:380px;
	height:240px;
	margin-top:-2px;
	float:left;
	}
.exhibitionslist li a:hover .exlist{
	border-bottom: 2px solid#323232;
	}
 .exhibitionslist h4{
	font-size:2.1rem;
	margin-bottom:8px;
	letter-spacing: 0;
	line-height:140%;
	text-transform:uppercase;
	}
 .exhibitionslist h6{
	font-size:1.5rem;
	line-height:170%;
	color:#000000;
	letter-spacing: 1px;
	}
.exhibition, .news, .about, .search{
	max-width:914px;
	}
.exhibitiontitle {
	text-align:center;
	padding-top: 35px;
	}
.exhibitiontitle h1{
	font-size:4.8rem;
	font-weight:700;
	font-family: 'Open Sans' , 'Noto Sans Tagalog', 'LiHeiPro', "微軟正黑體", "Lucida Grande", Helvetica, Arial, sans-serif;
	line-height:116%;
	max-width:932px;
	margin-right:-50px;
	text-transform:uppercase;
	color:#000000;
	letter-spacing: -1px;
	}
.calender img, .calender .svgImg{
	margin-right:7px;
	margin-bottom:-3px;
	}
.calender{
	color:#000000;
	line-height:30px;
	}
.exhibitioninfo a.calender:hover{	
	border:none;
	margin-bottom:0;
	}
.exhibitioninfo, .newsinfo{
	padding:20px 0 20px 0;
	border-bottom:#dddfe0 1px solid;
	letter-spacing: 1px;
	font-size:1.6rem;
	line-height:180%;
	color:#000000;
	}
.newsinfo{
	padding:0;
	margin-top:-9px;
	border-bottom:none;
	}
.newsbanner{
	position:relative;
	display:block;
	}
.newsbanner img{
	margin-top:30px;
	max-width:860px;
	}
.exhibitioninfo a, .newsinfo a{
	color:#000000;
	border-bottom:#323232 1px solid;
	line-height:120%;
	}
.exhibitioninfo a.calender{
	border-bottom:none;
	}
.exhibitioninfo h2, .newsinfo h2{
	font-size:2.3rem;
	min-height:38px;
	line-height:36px;
	margin-bottom:8px;
	}
.exhibitioninfo a:hover, .newsinfo a:hover{
	border-bottom:none;
	}

.exhibition .description, .news .description, .about .description, .search .description{
	width:100%;
	min-width:860px;
	margin-top:46px;
	padding-bottom:80px;
	}
.search .description{
	margin-top:-6px;
	padding-bottom:0;
	}
.news .description{
	margin-top:30px;
	}
.exhibition .content, .news .content{
	/*border-bottom:#dddfe0 1px solid; */
	}

.addto{
	font-size:1.5rem;
	color:#696c71;
	display:none;
	margin-left:8px;
	}
	
.exhibitioninfo h2 a:hover .addto{
	display: inline-block;
	}

.bannerturn{
	text-align:center;
	}	
.bannerturn a{
	padding:13px;
	line-height:30px;
	color:#696c71;
	}
.bannerturn .cycle{
	width:6px;
	height:6px;
	border-radius: 5px;
	background-color:#a7a7a7;
	text-indent: -9999px;
	display:block;
	}	
.bannerturn a:hover .cycle, .bannerturn a.active .cycle{
	background-color:#000000;
	}	
.flimg{
	float:left;
	margin:6px 30px 30px 0;
	}
.frimg{
	float:right;
	margin:6px 0 30px 30px;
	}	
.icons{
	margin-bottom:42px;
	}
.icons a{
	margin:0 10px;
	opacity:0.6;
	filter:alpha(opacity=60);
	cursor: pointer;
	}
.facebookicon{
	/* display:none; */
	}
.icons a:hover{
	opacity:1;
	filter:alpha(opacity=100);
	}

.player{
	width:55px;
	height:63px;
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-20px;
	margin-top:-33px;
	}
.player img, .player .svgImg{
	/*width:55px;
	height:63px;
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-20px;
	margin-top:-33px;*/
	}
.player:hover{
	border:none;
	}
.newsinfo a.player:hover	{
	border:none;
	}
.exhibitionbanner{
	position:relative;
	min-width: 860px;
	height: 530px;
	margin-top:-1px;
	}
.video{
	position: relative;
	height: 0;
}

.exhibitionbanner .video{
	padding-bottom: 60%; 
}

.newsbanner .video{
	padding-bottom: 56.25%; /* 16:9 */
}
.video iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.exhibitionbanner img{
	width: 860px;
	}
/*-----------------------about-----------------------*/
.team_pic{
	float:right;
	display:inline-block;
	}
.team_pic li{
	float:left;
	margin:0 0 20px 40px;
	}
.team_pic span.title{
	margin:12px 0 0 0;
    display: block;
    font-size: 1.4rem;
    line-height: 150%;
    color:#000000;
    text-align: left;
	font-weight:500;
	}
.about .description h4{
	margin-top:0;
	float:left;
	letter-spacing: -1px;
	}

.about .description{
	margin-top:-1px;
	}

.description .team_pic img{
	margin:0;
	}
.about .pagetitle h1{
	font-weight:700;
	font-size:2.4rem;
	letter-spacing: 1px;
	}
.team{
	line-height:150%;
	margin-bottom:16px;
	}
.team li{
	float:left;
	width:25%;
	margin-bottom:20px;
	}
lable.title{
	font-size:1.4rem;
	}
.yearlist{
	float:left;
	margin-bottom:20px;
	}
.charity h2{
	margin-top:-6px;
	line-height: 140%;
	text-transform:uppercase;
	}
.description .charity  div.fr{
	margin:0 0 0 34px;
	max-width: 400px;
	}
.description .charity img{
	margin:8px 30px 24px 0;
	}

.description .charity .fr img{
	margin:8px 0 20px 0;
	}
.description .charity p img.fr {
	float:right;
	margin:8px 0 20px 28px;
	}
.description .charity span.note{
	font-size:1.3rem;
	line-height: 180%;
	text-align:left;
	margin-top:0px;
	color:#000000;
	font-weight:lighter;
	font-weight: 400;
	/*font-family:  'SabonLTStd-Roman', "微軟正黑體", 'Hiragino Mincho ProN', 'MingLiU', "MS PMincho", "MS 明朝" ,'LiHeiPro', Helvetica, Arial, sans-serif;*/
	}
.note br{
	clear: none;
	}
.description .charity ul label{
	width:60px;
	display: inline-block;
	}
.imgtext{
	margin-right:-25px;
	}
.imgtext li{
	width:270px;
	float:left;
	margin-right:25px;
	}
.imgtext span{
	text-align:left;
	margin-top:-8px;
	color:#000;
	font-weight:lighter;
	font-size:1.3rem;
	font-weight:400;
	/*font-family:  'SabonLTStd-Roman', "微軟正黑體", 'Hiragino Mincho ProN', 'MingLiU', "MS PMincho", "MS 明朝" ,'LiHeiPro', Helvetica, Arial, sans-serif;*/
	}
/*-----------------------頁碼-----------------------*/
	
.pagenav {
	padding-top:30px;
	margin-right:54px;
	max-width:960px;
	font-size:1.4rem;
	font-weight:400;
	letter-spacing: 1px;
	}
.exhibition .pagenav{
	margin-left:50px;
	}
.pagenb a{
	padding:6px 0 2px 0;
	min-width: 22px;
    margin: 0 8px;
	text-align:center;
	}
.pagenav a:hover, .pagenav a.active{
	color:#000000;
	font-weight:400;
	border-bottom:1px solid #323232;
    margin-bottom:-1px;
	}
.pagenb{
	float:left;
	margin-left:-8px;
	}
.nextpg{
	float:right;
	}
.back{
	margin-left:2px;
	width:100px;
	float:left;}
.nextpg a, .back a{
	min-width:34px;
	text-align:center;
	}
/*-----------------------svgImg-----------------------*/

a .svgpath{
	stroke: #A7A7A7;
}

a:hover .svgpath{
	stroke: #323232;
}

a:hover .svgpath2{
	fill: #323232;
}

.item{
	display: none;
}

.view .artdesc{
	display: none;
}


/*-----------------------logo---------------------*/	
 .logobox{
	 width:68px;
	 height:97px;
	 position:relative;
	 }
.line1{
	position:absolute;
	top:0;
	left:0;
	width:10px;
	height:67px;
	background-color:#000000;
	display:block;
	}
.line2{
	position:absolute;
	top:58px;
	left:0;
	width:68px;
	height:10px;
	background-color:#000000;
	display:block;
	}
.line3{
	position:absolute;
	top:24px;
	left:0px;
	width:68px;
	height:10px;
	background-color:#000000;
	display:block;
	}
.line4{
	position:absolute;
	top:0;
	left:34px;
	width:10px;
	height:67px;
	background-color:#000000;
	display:block;
	}
.line5{
	position:absolute;
	top:80px;
	left:0;
	width:68px;
	height:10px;
	background-color:#000000;
	display:block;
	}

/*-----------------------logo animation-----------------------*/

.home .befinemove1, .logo:hover .befinemove1{
  height: 0px;
  -webkit-animation: animate1 0.3s;
  animation: animate1 0.3s;
}

.home .befinemove2, .logo:hover .befinemove2{
 width: 0;
  -webkit-animation: animate2 0.3s;
	animation: animate2 0.3s;
  -webkit-animation-delay: 0.18s;
  animation-delay: 0.18s;
}

.home .befinemove3, .logo:hover .befinemove3{
  width: 0;
  -webkit-animation: animate2 0.3s;
  animation: animate2 0.3s;
  -webkit-animation-delay: 0.27s;
  animation-delay: 0.27s;
}

.home .befinemove4, .logo:hover .befinemove4{
  height: 0px;
  -webkit-animation: animate1 0.4s;
  animation: animate1 0.4s;
  -webkit-animation-delay: 0.25s;
  animation-delay: 0.25s;
}

.home .befinemove5, .logo:hover .befinemove5{
  width: 0;
  -webkit-animation: animate2 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation: animate2 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -webkit-animation-delay: 0.45s;
  animation-delay: 0.45s;
}

.home .befinelogo, .logo:hover .befinelogo{
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@keyframes animate1 {
  0% {
  height: 0px;
  }
  100% {
  height: 68px;
  }
}

@-webkit-keyframes animate1 {
  0% {
  height: 0px;
  }
  100% {
  height: 68px;
  }
}


@keyframes animate2 {
  0% {
	width: 0px;
  }
  100% {
	width: 68px;
  }
}

@-webkit-keyframes animate2 {
	0% {
	width: 0px;
	}
	100% {
	width: 68px;
	}
	}

/* loading  */

.spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto 0 auto;
  background-color: #333;

  border-radius: 100%;  
  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
  animation: sk-scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes sk-scaleout {
  0% { -webkit-transform: scale(0) }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}

@keyframes sk-scaleout {
  0% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 100% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 0;
  }
}

/* end load */

@media only screen and (max-width: 1440px) {
	#banner{
	width:860px;
	margin-left:-370px;
	}
	#banners, #banners .banneritem{
		width:860px;
		height: 516px;
	}
	.indexcopy{
	width:860px;
	margin-left:-370px;
	}
	.exlist{
	width:280px;
	}
	.artists a {
    margin: 0 30px 60px 0;
	width:246px;
	}
	.artists h4{
	width:130px;
	}
	
	.press a .presslist{
	width:600px;
	}
	}
@media only screen and (max-width: 1280px) {
	.press li:hover .openlink{
	right:166px;
	}
	#banner{
	left: 600px;
	}
	.indexcopy{
	margin-left: 230px;
    position: absolute;
    top: 660px;
	left:0;}
	.press a .fairslist{
	max-width: 406px;
	}
	}
@media only screen and (max-width: 1024px) {
	.works a{
	margin:0 70px 40px 0;
	}
	aside{
	position: absolute;
	}
	}

@media only screen and (max-height: 700px) {
	aside {
	position: absolute;
	}
	.indexcopy{
    position: absolute;	
    top: 660px;}
	#banners, #banners .banneritem {
    width: 860px;
    height: 516px;
	}
	#banner{
	top: 130px;
	}
}	
@media only screen and (max-width: 1100px) and (min-width: 640px) {
	#banner{
	top: 160px;
	}
	.indexcopy{
    position: relative;
	padding: 40px 0 46px 0;
	}
	#banners, #banners .banneritem, #banner{
	width: 750px; height:450px;
	}
	aside{
	left: 48px;
	}
	.pagetitle.bgwhite{
	background:none;
	}
	.pagetitle, .newstitle, .exhibitiontitle, aside{
	position:absolute;
	}
	aside{
	top:41px;
	width:200px;
	}
	.bio .description{
	width: 526px;
	}
	div.info {
    width: 1046px;
    left: 0;
	z-index:1;
	}
	.replaced-svg{
	margin-right:5px;
	}
	.exhibition .description, .news .description, .about .description, .search .description{
	min-width:inherit;
	padding-right:54px;
	}
	.description .team_pic img{
	width:130px;
	}
	.team_pic li {
   	 margin: 0 0 20px 30px;
	}
	.press a .presslist{
	max-width: 546px;
	}
	.gotop{
	bottom:0;
	}
	.newsbanner img{
	max-width: 806px;
	}
	.piclist, .piclist img {
    width: 496px;
	}
	article.exhibition {
    margin: 0 0 0 240px;
	}
	article.exhibition .content {
    margin-left: 0;
	}
	.exhibitionslist{
	min-width:860px;
	}
	.exhibitionbanner img {
    width: 806px;
	}
	.exhibitiontitle h1 {
    font-size: 4.4rem;
    max-width: 80%;
    margin:0;
	text-align:left;
	}
	.exhibition, .news, .about, .exhibitioninfo, .newsinfo{
    width: 806px;
	}
	.pagetitle, .newstitle, .exhibitiontitle{
    width: 860px;
	}
	.exhibition .pagenav {
    margin-left: 0;
	}
	.pagetitle .subnav {
    margin-left: 260px;
	}
	.summary {
    margin-right: 30px;
	}
	.imgtext li, .description .charity .imgtext li img{
	width:252px;
	}
	}
/*-----------------------min-width-----------------------*/

@media only screen and (min-width: 1280px) {
	article{
	margin: 0 0 0 290px;
	}
	}	
@media only screen and (min-width: 1660px) {
	.works a{
	margin:0 90px 70px 0;
	}
	article{
	/*margin:auto;
	width:1024px;*/
	margin: 0 0 0 400px;
	}
	article.exhibition, article.news{
		margin:auto;
	}
	.artists a {
    margin: 0 30px 70px 0;
	}
	}
@media only screen and (min-width: 1800px) {
	.public, .artists{
	max-width:100%;
	}
}	

/*-----------------------mobile-----------------------*/

/* @media only screen and (max-width: 1024px) { */
@media all and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2){
	body{
		max-width: 460px;
		min-width: 320px;
		margin: 0 auto;
		position: relative;
	}

	*{
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box; 
	}

	aside{
		position: relative;
		left: 0;
		top: 0;
	}

	.logo, .indisebody .logo{
		width: 100%;
		/*height: auto;*/
		padding-top: 20px;
		margin-bottom:0;
		display: block;
		padding-left:8px;
	}
	.indisebody .logo{
		height:80px;
	}
	.logobox, .logotext{
		margin: 0 auto;
	}

	.logobox{
		width:52px;
		height:69px; 
		-webkit-transform: scale(0.75);
		-moz-transform: scale(0.75);
		-ms-transform: scale(0.75);
		-o-transform: scale(0.75);
		transform: scale(0.75);
		-moz-transform-origin: 0 0;
		-ms-transform-origin: 0 0;
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
	}

	.logotext{
		background: url(../images/logo_type2.svg);
    	width: 177px;
		margin-top:14px;
	}
	.mobilemenu{
		position: fixed;
		right: 0;
		top: 0;
		z-index: 999;
  		cursor: pointer;
  		padding: 19px 20px;
  		display: block;
  	}
  	
  	.mobilemenu span {
	    width: 23px;
	    height: 2px;
	    background: #000;
	    margin-bottom: 5px;
	    -webkit-transition: all 0.3s ease;
	    -moz-transition: all 0.3s ease;
	    -ms-transition: all 0.3s ease;
	    -o-transition: all 0.3s ease;
	    transition: all 0.3s ease;
	    display: block;
	}
  	
  	.mobilemenu.open span:nth-child(1) {
	    -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	    -webkit-transform: rotate(45deg);
	    transform: rotate(45deg);
	    -moz-transform-origin: 0px 5px;
	    -ms-transform-origin: 0px 5px;
	    -webkit-transform-origin: 0px 5px;
	    transform-origin: 0px 5px;
	}
  	
  	.mobilemenu.open span:nth-child(2) {
	    filter: alpha(opacity=0);
	    -moz-opacity: 0;
	    opacity: 0;
	}
  	
  	.mobilemenu.open span:nth-child(3) {
	    -moz-transform: rotate(-45deg);
	    -ms-transform: rotate(-45deg);
	    -webkit-transform: rotate(-45deg);
	    transform: rotate(-45deg);
	    -moz-transform-origin: 5px -1px;
	    -ms-transform-origin: 5px -1px;
	    -webkit-transform-origin: 5px -1px;
	    transform-origin: 5px -1px;
	}

	#nav{
		position: fixed;
		top:0;
		bottom:0;
		left:0;
		right:0;
		z-index: 998;
		padding-top:80px;
		background: rgba(255,255,255,0.96);
		overflow-scrolling: auto;
		-webkit-overflow-scrolling: touch;
		-moz-transform: translateZ(0); 
		-o-transform: translateZ(0); 
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
		display: none;
		margin-bottom:-30px;
	}

	#nav.show{
		display: block;
	}
	.searchopen input{
    margin-left: 20px;
	}
	.searchopen input.show{
    margin-left:24px;
	width:180px;
	}
	#menu{
		text-align: center;
		margin-bottom:22px;
	}

	#menu a{
		font-size: 2.9rem;
		line-height:140%;
		letter-spacing: 2px;
	}

	.secmenu{
		text-align: center;
		font-size: 1.8rem;
	}

	.secmenu a{
		font-size: 1.8rem;
		margin-bottom: 14px;
	}
	.secmenu a:hover, .secmenu span.active{
	margin-bottom:13px;
	}

	.secmenu a.facebook, .secmenu a.search{
		font-size: 2rem;
	}
	a.chin, .secmenu span.chin{
		font-size: 1.4rem;
	}
	.searchopen{
		width: 100%;
	}

	.content.hide{
		opacity: 0;
	}

	#banner{
		position: relative;
		top: 0;
		left: 0;
		right: 0;
		margin-left: 0;
	}

	#banner, #banners, #banners .banneritem{
		width: 100%;
	}
	#banners{
		margin-top:24px;
	}
	#banners .banneritem{
		height: auto;
	}

	.banneritem img{
		width: 100%;
		height: auto;
	}

	.desbanner{
		position: relative;
		top:0;
		left: 0;
		display: block;
		text-align:center;
	}

	.bannernext{
		display: none;
	}

	.number{
		width: 100%;
		text-align: center;
		position: relative;
		right: 0;
		bottom: -20px;
	}

	article{
		margin-left: 0;
		margin-top:40px;
	}

	.content{
		width: 100%;
		min-width: 260px;
		padding: 0 20px;
		margin-top: 0;
		margin-right: 0;
	}
	article.exhibition .content{
		margin: auto;
	}
	.exhibition .pagenav, .news .pagenav,  .pagenav{
		margin-left:20px;
		margin-right:20px;
	}
	.pagenav{
		padding-top:20px;
		margin-bottom:0;
	}
	.pagenb{
		margin-top:-6px;
	}
	.articleh1{
		font-size: 1.5rem;
		line-height: 100%;
		padding-bottom:10px;
		margin: 20px 20px 32px 20px;
		border-bottom: 1px solid #323232;
		color:#000000;
		text-transform:uppercase;
		/*text-transform: capitalize;*/
		display: block;
		letter-spacing: 1px;
		font-weight:400;
		font-family: 'Open Sans' ,'Noto Sans Tagalog', 'LiHeiPro', "微軟正黑體", "Lucida Grande", Helvetica, Arial, sans-serif;
	}
	.articleh1 a{
		color:#000000;
	}
	.artists{
		min-width: 260px;
		margin-top:8px;
	}

	.artists a{
		width: 50%;
		margin: 0 0 20px 0;
		overflow:hidden;
		max-height:100px;
	}

	.artists img{
		width: 36%;
		max-height:none;
		position: relative;
		float: left;
		margin-right:10px;
		margin-top:-2px;
		opacity:1;
	}
	.exhibitioninfo h2, .newsinfo h2, .presslist h4, .public h4, .fairslist h4, .exhibitionslist h4, #lightbox div.printdata h3, .charity h2{
		font-family: 'Open Sans' , 'Noto Sans Tagalog', "Microsoft JhengHei", "Lucida Grande", "微軟正黑體", Verdana, Helvetica, Arial, sans-serif;
		letter-spacing: 1px;
	}
	.exhibitioninfo h2{
		margin-bottom: 4px;
	}
	.presslist h4, .fairslist h4, .newsinfo h2, .exhibitionslist h4, .charity h2{
		font-size: 2.4rem;
	    line-height: 146%;
	}
	.presslist h4, .public h4, .fairslist h4, .newsinfo h2,{
		margin-bottom:8px;}
	.artists h4{
		line-height: 140%;
		width:54%;
		position: relative;
		left: 0;
		float: left;
		font-size:1.4rem;
		letter-spacing:1px;
		font-family: 'Pontano Sans' , 'Noto Sans Tagalog', "Microsoft JhengHei",  "Lucida Grande", "微軟正黑體", Verdana, Helvetica, Arial, sans-serif;
	}
	.charity h2{
		/*letter-spacing: 0;
		font-size:3.1rem;*/
	}
	.newsinfo{
		clear: both;
	}
	.press li:hover .openlink{
		left:50%;
		margin-left:-34px;
		opacity: 1;
   		filter: alpha(opacity=100);
	}
	.pagetitle, .newstitle, .exhibitiontitle{
		position: relative;
		z-index: 1;
		padding: 0;
	}
	 .newstitle{
		 margin-top:20px;
	}
	article.exhibition .description p img, article.news .description p img{
		width:100%;
	}
	.pagetitle h1{
		position: relative;
		top: 0;
		left: 0;
		padding: 0 20px;
		font-size:2.5rem;
	}

	.pagetitle .subnav, .subnav{
		margin: 8px 20px 8px 20px;
		line-height:190%;
	}

	.newstitle .subnav{
		margin-top: -2px;
	}

	.subnav{
		padding-bottom: 20px;
	}

	.subnav a{
		margin-right: 12px;
	}

	#isotope{
		margin:8px -10px 20px -10px;
	}

	.works a{
		width: 50%;
		margin: 0;
		padding: 0 10px;
	}
	.works a img{
		margin-bottom:14px;
	}
	.lbclose{
		color: #757B82;
		font-size: 1.5rem;
		line-height: 100%;
		letter-spacing: 1px;
		text-align: center;
		padding: 14px 22px 22px 22px ;
		display: block;
		position:absolute;
		top:0;
		width:100%;
	}

	.control{
		padding-top:14px;
		padding-bottom: 25px;
		display: block;
	}

	.control, .control a{
		color: #757B82;
		font-size: 1.4rem;
	}

	.spinner {
		margin-top: 26%;
		margin-bottom:10%;
	}

	#lightbox{
		min-width: 260px;
		height: 100%;	
		background-color: rgba(255,255,255,1);
	}

	#lightbox div.printdata{
		width: 100%;
		height: 120%;
		padding:41px 20px 30px 20px;
		overflow: scroll;
		display: block;
		position:relative;
		z-index:1;
		line-height:180%;
	}

	#lightbox .artbox{
		padding-bottom:160px;
		font-size: 1.6rem;
	}
	#lightbox div.printdata h3{
		font-size: 1.8rem;
	}
	#lightbox img.artprint{
		width: 100%;
		height: auto;
		max-width: 100%;
		max-height: 100%; 
	}

	#lightbox .desc{
		padding-top: 20px;
		text-align: center;
	}
	#lightbox div.printdata span.pc{
		font-size: 1.6rem;
    	color:#000000;		
	}
	.prearrow, .nextarrow{
		display: none;
	}

	.summary, .description{
		width: 100%;
	}

	.summary{
		padding-bottom: 24px;
	}

	.summary img{
		display: block;
	}

	.exhibitionslist, .press{
		min-width: 260px;
		padding-right:0;
	}

	.piclist{
		width: 100%;
		height: auto;
		float: none;
		margin-bottom: 15px;
	}

	.piclist img{
		width: 100%;
		height: auto;
	}

	.exlist{
		height: auto;
		padding-bottom: 40px;
		width:100%;
	}

	.exhibitiontitle{
		text-align: left;
	}

	.exhibitiontitle h1{
		font-size: 3.8rem;
    	margin: -8px 20px 16px 20px;
		letter-spacing: -1px;
	}
	.addto{
		color:#FF3300;
		margin-left:0;
	}
	.exhibitionbanner{
		height: auto;
		min-width: 260px;
		margin: 0 -20px;
	}
	.exhibitioninfo {
    	padding: 8px 0 30px 0;}
	.exhibitioninfo a.calender{
		font-size: 1.8rem;
	}
	.calender img, .calender .svgImg{
		margin-bottom:-5px;
	}
	.description{
		font-size:1.8rem;
	}
	.exhibition .description, .news .description, .about .description, .search .description{
		min-width: 260px;
		padding-bottom: 40px;
		margin-top:26px;
	}
	.about .description{
		margin-top:0;
	}
	.newsbanner img{
		width: 100%;
		height: auto;
	}

	.press a .fairslist, .press a .date, .vipdate{
		width: 100%;
		float: none;
		font-size:1.9rem;
	}
	.vipdate{
		padding-left:2px;
		font-size:1.5rem;
	}
	.vipdate br{
		display:none;
	}
	.indexcopy, .copyright{
		width: 100%;
		position: relative;
		left: 0;
		text-align: center;
		top:auto;
		margin:80px auto 0 auto;
		padding:0;
	}
	.indexcopy{
		margin-top:40px;
	}
	.gotop{
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 116px;
	}

	.gotop .svgImg{
		width: 60px;
		margin: 0 auto;
		display: block;
	}

	.nextpg{
		text-align: right;
		padding-top: 0;
		float: right;
		display:inline-block;
	}

	div.info{
		position: relative;
		width: 100%;
		height: auto;
		text-align: center;
		top:0;
		left:0;
		right:0;
		z-index: 99;
		padding-bottom:40px;
	}

	div.info.hide{
		display: none;

	}
	.description .charity div.fr{
		margin:0;
	}
	.description .charity ul lispan.note br{
		display:none;
	}
	.description span{
		margin-bottom: 16px;}
	.description p{
		margin-bottom:20px;
		font-size:1.8rem;
	}
	.description img, .description p img{
	width: 100%;
	height:auto;
	margin: 10px 0 30px 0;
	}
	.imgtext{
		margin:0;
	}
	.imgtext li{
		width: 100%;
	}
	.description h3, .description h4{
	margin-bottom:12px;}
	.description h3 br{
		display:none;
	}
	.about .description h5{
		line-height: 150%;
		font-size:2.1rem;
	}
	.about .description h5 br{
		display:none;
	}
	.team_pic li{
    margin: 0;
    width: 50%;
	}
	.team li{
    width: 50%;
	}
	.description .team_pic img{
    width: 90%;
	}
	.team_pic{
		margin-bottom:30px;
	}
	.public .booktitle{
		width:100%;
		height: auto;
	}
	.public img{
		width:70%;
		height: auto;
		max-height:none;
	}
	.description .charity .fr img, .description .charity p img.fr{
		margin-top:0;
	}
	.press a .presslist{
		width:100%;
	}
}

@media only screen and (max-width: 360px) {
	.artists h4{
		width: 50%;
	}
}

@media all and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2){
	#lightbox img.artprint {
	    width: auto;
	    height: 100vh;
	}
}