@charset "utf-8";



/* 這是處理 android 表格的問題 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {-webkit-text-fill-color: #fff;}
/*select{-webkit-appearance:none;}*/
.fixfont{font-size:100%!important;}
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
	-webkit-text-fill-color: #444 !important;
}
img {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
/*
#########################################################
#  共 享 設 定
##########################################################
*/

/* ## page wrap ################## */
html,body{text-align:center;background:#fff;}
.show400{display:none!important;}
.hide400{display:block;}
.pagewrap{width:100%;max-width:1920px;margin:0 auto;}/* 頁面框  */
.centerwrap{position:relative;width:75%;margin:0 auto;z-index:1;}/* 內容框 */
.centerwrapb{position:relative;width:86%;margin:0 auto;z-index:1;}/* 新設計index框 */
.centerwrapin{position:relative;width:92%;margin:0 auto;z-index:1;}/* 內容內縮框(相對於內容框) */
.w100{width:100%;}
.w50{width:50%;}
.h100{height:100%;}
.inblock{display:inline-block;}

/* ## font size ################## */
/* base字體 中 19 1vw 4vw  小 15 0.85vw 3.4vw 大 23px 1.15vw 4.6vw */
html{font-size:1rem;line-height:1.6;}/* 等於中間的 1vw */
.fbold{font-weight:600!important;}
.fsize70{font-size:3.8rem;line-height:1.5;}
.fsize60{font-size:3.3rem;line-height:1.5;}
.fsize54{font-size:3.0rem;line-height:1.5;}
.fsize52{font-size:2.9rem;line-height:1.5;}
.fsize50{font-size:2.8rem;line-height:1.5;}
.fsize46{font-size:2.3rem;line-height:1.5;}
.fsize44{font-size:2.3rem;line-height:1.5;}
.fsize42{font-size:2.2rem;line-height:1.5;}
.fsize40{font-size:2.1rem;line-height:1.5;}
.fsize38{font-size:2rem;line-height:1.5;}
.fsize37{font-size:1.9rem;line-height:1.5;}
.fsize35{font-size:1.8rem;line-height:1.5;}
.fsize33{font-size:1.7rem;line-height:1.5;}
.fsize31{font-size:1.6rem;line-height:1.5;}
.fsize29{font-size:1.5rem;line-height:1.5;}
.fsize27{font-size:1.4rem;line-height:1.5;}
.fsize25{font-size:1.3rem;line-height:1.6;}
.fsize23{font-size:1.2rem;line-height:1.6;}
.fsize21{font-size:1.1rem;line-height:1.6;}
.fsize19{font-size:1rem;line-height:1.6;}
.fsize17{font-size:0.9rem;line-height:1.6;}
.fsize15{font-size:0.8rem;line-height:1.6;}

.mover{transition: all 1s;margin-top:100px;opacity:0;}
.moverleft{margin-top:0;margin-left:100px;opacity:0;}
.moverright{margin-top:0;margin-left:-100px;opacity:0;}
.mover.on{margin-top:0px;opacity:1;}
.moverleft.on{margin-left:0px;}
.moverright.on{margin-left:0px;}



/* ## line height change ################## */
.fonts{line-height:1!important;}
.fonts2{line-height:1.25!important;}
.fontl{line-height:1.75!important;}
.fontl2{line-height:2!important;}
.fontl3{line-height:2.4!important;}
/* ## color ################## */
.fcolorfff{color:#fff;}
.fcolor000{color:#000;}
.fcolor999{color:#999;}
.fcolor24{color:#242424;}
.fcolortag{color:#376eb2;}/* tag的顏色*/
.fcolorfef3cc{color:#fef3cc;}
.bgfff{background:#ffffff;}
.bgcolor1{background:#f8f8f8;} /*淺灰*/
.bgcolor2{background:#2c2c2c;} /*footer深灰*/
.bgcolor3{background:#d5e1df;} /*中灰 搜尋框*/

/* ## layer(z-index) ################## */
.z001{z-index: 1!important;}
.z002{z-index: 2!important;}
.z003{z-index: 3!important;}
.z004{z-index: 4!important;}
.z005{z-index: 5!important;}
.z006{z-index: 6!important;}
.z009{z-index: 9!important;}
/* padding */
.vpad10{padding:0.5rem 0;}
.vpadb10{padding:0 0 0.5rem 0;}
.vpad20{padding:1rem 0;}
.vpad30{padding:1.5rem 0;}
.vpad40{padding:2rem 0;}
.vpad50{padding:2.5rem 0;}
.vpad60{padding:3rem 0;}
.vpad70{padding:3.5rem 0;}
.vpad80{padding:4rem 0;}
.vpad90{padding:4.5rem 0;}
.vpad100{padding:5rem 0;}
.bmar10{margin:0 0 0.5rem 0!important;}
/*
#########################################################
#  頁 面 設 定 (框架)
##########################################################
*/
/* index header */
.iheaderbg{position:absolute;top:0;left:0;width:100%;height:100%;background:#2c2c2c;opacity:0;}
.iheaderbg.on{opacity:1!important;}


/* header  ################## */
header{position:fixed;top:0;left:50%;transform:translateX(-50%);height:105px;width:100%;max-width:1920px;}
.headerplaceholder{height:105px;}
/* header1 */
.header1{height:105px;}
.header1 .centerwrap{height:100%;}
.header1 span{display:inline-block;}
.header1in{padding-top:47px;height:44px;}
.header1in .h1block{float:left; margin:0 15px;height:100%;}

/* header2 menu */
.header2{height:0;visibility:hidden;overflow:hidden;opacity:0;transition:all 0.5s;}
.menublock{padding:30px 0;}
.navitem{min-width:170px;margin:0 15px;position:relative;display:inline-block;}
.navitem.on{}
.header2.on{height:6vw;visibility:visible;opacity:1;}
.header2.s2 .centerwrap{padding:1rem 0;}
.header2.s2 .centerwrap span{margin:0 0.5rem;}
/* footer   ################## */
/* footer1 */
/* footer2 */
.footer2{}
.footer21{padding:30px 0;}
.footer21:after{  content:'';  display:table;  clear:both;}
.footerlogo{height:107px;}
.footerline span{display:inline-block;vertical-align:top;}
.footerline:after{  content:'';  display:table;  clear:both;}
.footer22{padding:30px 0;}
.footer22 a{margin-right:10px;}
.footer22:after{  content:'';  display:table;  clear:both;}

/*
#########################################################
#  各 頁 設 定
##########################################################
*/
/* 內頁共用 */
form{padding:0;background:none;}
input,select,textarea{background:none;}
.pagesearchwrap input[type=text]{float:left;width:250px;border:1px solid #ccc;padding:0 5px;margin-right:5px;}
.pagesearchwrap input[type=image]{height:100%;}
/* scroll item */
.scrollinview{position:relative;}
.scrollinview:after{  content:'';  display:table;  clear:both;}
.scrollinview .scritem{height:2rem;transform: scaleY(0.3);opacity:0;transition:all 0.7s;}
.scrollinview .scritem.on{height:auto;transform: scaleY(1);opacity:1;}
.scrollinview .scritem.st1.on{height:32rem;}

/* typetag */
.typetag{padding:0.1rem 0.3rem;background:var(--tag-color, #d5e1df);border-radius:0.1rem;margin:0 0.2rem;}
/* 人物快連 tag */
.tagitem{margin:0 0.3rem;}
/*內頁切換顯示 */
.inpageswitchwrap{padding:0.6rem 0; border-bottom:2px solid #999;}
.inpageswitchwrap:after{  content:'';  display:table;  clear:both;}
.inpageswitchwrap.stay{position:fixed;top:105px;width:75%;max-width:1440px;left:50%;transform:translateX(-50%);z-index:99;}
/* 保留原本樣式 */
.inswitchselect {
    display: inline-block;
    padding: 0.3rem 1rem;
    margin-right: 0.3rem;
    position: relative; /* 確保不被浮層遮住 */
    z-index: 10;        /* 提高層級，避免點擊失效 */
    cursor: pointer;    /* 提示可點擊 */
}

.inswitchselect.on {
    background: #eee;
    font-weight: bold;
}

.exppagecontentbox{transition:all 1s;}
.exppagecontentblock{position:absolute;top:1.5rem;left:0;opacity:0;transform:scaleY(0.5);z-index:0;transition:all 1s;}
/*.exppagecontentblock.on{display:block;opacity:1;transition:all 3s;}*/
/*.exppagecontentblock.on{position:relative;;animation: tagshow 0.5s 1;opacity:1;}*/
.exppagecontentblock.on{position:relative;top:auto;left:auto;opacity:1;transform:scaleY(1);z-index:1;transition:all 1s;}
/* formwrap */
/* 相關網站8*/
.formwrap.type1 .formline{padding:0.5rem 0;border-bottom:1px solid #ccc; }
.formwrap.type1 .formline.th{border-bottom:2px solid #999; }
.formwrap.type1 .formline span{display:inline-block;width:50%;float:left;}
.formwrap.type1 .formline:after{  content:'';  display:table;  clear:both;}
/* 檔案紀錄 */
.formwrap.type2 .formline{padding:0.5rem 0;border-bottom:1px solid #ccc; }
.formwrap.type2 .formline.th{border-bottom:2px solid #999; }
.formwrap.type2 .formline span{display:inline-block;float:left;}
.formwrap.type2 .formline span:nth-child(1){width:19%;}
.formwrap.type2 .formline span:nth-child(2){width:40%;}
.formwrap.type2 .formline span:nth-child(3){width:12%;}
.formwrap.type2 .formline span:nth-child(4){width:12%;}
.formwrap.type2 .formline span:nth-child(5){width:12%;}
.formwrap.type2 .formline span:nth-child(6){width:5%;}
.formwrap.type2 .formline span:nth-child(6) img{width:50%;}
.formwrap.type2 .formline:after{  content:'';  display:table;  clear:both;}
/* 歷年展覽 */
.formwrap.type3 .formline{padding:0.5rem 0;}
.formwrap.type3 .formline span{display:inline-block;float:left;}
.formwrap.type3 .formline span:nth-child(1){width:70%;}
.formwrap.type3 .formline span:nth-child(2){width:30%;}
.formwrap.type3 .formline:after{  content:'';  display:table;  clear:both;}


/*serch box */
.pageserchbox{padding:0;}
.pageserchbox .serchboxleft{position:relative;width:88%;}
.pageserchbox .serchboxleft div{padding:1rem 0;}
.pageserchbox .serchboxleft div:nth-child(1){border-bottom:1px solid #999;}
.pageserchbox .serchboxleft .inbox span{display:inline-block;height:2.5rem;width:31%;margin-right:3.5%;float:left;margin-bottom:0.5rem;}
.pageserchbox .serchboxleft .inbox span:nth-child(3n){margin-right:0;}
.pageserchbox .serchboxleft .inbox:after{  content:'';  display:table;  clear:both;}
.pageserchbox .serchboxleft label{display:inline-block;width:28%;padding-right:2%;}
.pageserchbox .serchboxleft input,.pageserchbox .serchboxleft select{border:1px solid #999;}
.pageserchbox .serchboxleft span input{width:66%;}
.pageserchbox .serchboxleft span select{width:66%;padding:0 0.5rem;}
.pageserchbox .serchboxright{width:12%;position:absolute;top:0;right:0;transform:translateY(3rem);}
.pageserchbox .serchboxright span{display:inline-block;padding:0 0.5rem;}
.pageserchbox .serchboxright span:nth-child(1){border-right:2px solid #000;}



/*
.pagecenterblock{position:relative;}

.pagecrumb img{position:absolute;top:0;left:0;}
.pagetitle{position:relative;display:inline-block;margin:0 auto;padding:0 40px;}
.pagetitleline{position:absolute;top:50%;left:0;width:100%;border-top:2px solid #3b79be;}
.pageownerbox{padding:20px 0;}
.pagedate{border-left:5px solid #3b79be;padding-left:8px;}
.pagedate span{margin-right:40px;}
.inputblockwrap{padding-top:30px;}
.inputblockwrap.tp2{padding-top:0;}
.contentbox{padding:50px 0;}
.contentbox.tp2{border-top:1px solid #204981; }
*/
/*表格*/
/* 選單表格 共用  */
.submenu span{display:inline-block;vertical-align:bottom;margin-right:0.5rem;}
.submenu select{margin-left:10px;border:none;border-bottom:2px solid #000;}
.submenuswitchbox .switchitem{position:relative;display:inline-block;margin-right:0.5rem;border-right:2px solid #999;opacity: 0.7;}
.submenuswitchbox .switchitem.on{opacity: 1;}
.submenuswitchbox .switchitem img{position:absolute;height:55%;top:50%;left:0;transform:translateY(-50%);}
.submenuswitchbox .switchitem span{margin-left:1.5rem;}
.submenuswitchbox .switchitem:last-child{border-right:0;}
/* 年選單 共用  */
.yearmenu{padding:0.8rem 0;}
.yearmenu a{display:inline-block;padding:0 0.3rem;margin:0.3rem 0;border-right:2px solid #999;}


/* ############################################### */
/* index */
/*各block共用*/
.indextitle{height:100%;}
.blockarr.left{left:0;top:calc(50% - 30px);height:60px;}
.blockarr.right{right:0;top:calc(50% - 30px);height:60px;}
.blockarr img{height:100%;}
/*index banner*/
.indexbannernew{overflow:hidden;}
.ibannerlogobox{width:38%;right:-38%;opacity:0;top:0;height:100%;background:rgba(0,0,0,0.6);transition:all 1s;}
.ibannerlogobox.on{right:0;opacity:1;}
.ibannerlogo{position:absolute;width:100%;top:30%;left:0;}
#indexblock2new{height:51rem;overflow:hidden;}
#ib2ntitle{padding-top:10rem;padding-bottom:1.5rem;background:#2e5f8c;}
#ib2nintro{width:43%;height:25rem;overflow:hidden;}
.ib2ntext{position:absolute;top:0;left:100%;width:100%;opacity:0;transition:all 1s;}
.ib2ntext.on{left:0;opacity:1;}
.indexlogo{height:104px;padding-top:70px;}
#ib2nbannerbox{bottom:0;right:0;height:45rem;width:54%;overflow:hidden;margin-right:-100%;}
#ib2nbannerboxin{left:0;top:0;height:100%;width:400rem;transition:all 1s;}
.ibn2bitem{position:relative;height:100%;float:left;margin-right:1rem;}
.ibn2bitem img{height:100%;}
#ib2nselectbox{opacity:0;transition:all 2s;}
#ib2nselectbox.on{opacity:1;}
.ib2nclick{width:2rem;font-size:1.6rem!important;;height:2rem;line-height:2rem;display:inline-block;padding:0.7rem;border-radius:2rem;border:1px solid #000;text-align:center;}
.ib2nclick i.fa{width:2rem;font-size:1.6rem;height:2rem;line-height:2rem;text-align:center;}
.ib2nssb{margin:0 0.5rem;}
.ib2nssb span{margin:0.2rem;}
/*index black3n */
#indexblock3n{height:60rem;margin:5rem 0;overflow:hidden;}
#ib3ntextbox{padding-top:5rem;height:40rem;padding:10rem 0;width:45%;margin-right:0;margin-left:auto;}
#ib3ntextboxin{padding:2rem 0;}
.ib3ntexline{display: flex;padding:1.5rem 0;border-bottom:1px solid #999999;align-items: center; }
.ib3ntexline span{display:inline-block;margin:auto 0;vertical-align:middle;}
.ib3ntexline span:nth-child(2){width:60%;}
.ib3ntexline span:nth-child(3){width:30%;}
.ib3ntexline span:nth-child(4){width:2rem;}
.ib3ntexline span:nth-child(4) img{width:100%;}
.ib3ntexline:after{  content:'';  display:table;  clear:both;}
#ib3nimgbox{position:absolute;width:50%;height:100%;top:0;left:0;overflow:hidden;}
.ib3nimg{position:absolute;height:100%;top:50%;left:-60%;transform:translateY(-50%);transition:all 1s;z-index:1;opacity:0;}
.ib3nimg.on{left:40%;height:64%;z-index:2;opacity:1;}
.ib3nimg.nex{z-index:3;opacity:1;}
.ib3narr{transform-origin:50% 50%;transition:all 1s;transform:rotate(-40deg);}
.ib3ntexline.on .ib3narr{transform:rotate(0);}

/* indexblock4n */
#indexblock4n{height:40rem;padding:2rem 0;}
#indexblock4nbg{position:absolute;bottom:0;left:0;height:22rem;width:100%;z-index:1;background:#fef3cc;}
#ib4nvideobox{padding:2rem 0;}
.ib4nitem{position:relative;width:32%;margin-right:2%;float:left;}
.ib4nitem:nth-child(3){margin-right:0;}
#ib4nvideobox:after{  content:'';  display:table;  clear:both;}
.ib3nvideobox iframe{width:100%;height:100%;top:0;left:0;}
.ib3nvideobox  .bg{width:100%;}
.ib4nitem p{padding:1rem 0;}


#indexbannerwrap{overflow:hidden;margin-top:-120px;}
#indexbannerlinebox{width:200%;margin-left:-50%;margin-right:-50%;overflow:hidden;}
#indexbannerlinebox img{width:100%;}
#indexbannerlinebox .bg{opacity:0;}
#indexbannerlinebox .line{position:absolute;left:0;top:0;}
#indexbannerlinebox .line.l1{animation: line1 38s infinite;}
#indexbannerlinebox .line.l2{animation: line2 33s infinite;}
#indexbannerlinebox .line.l3{animation: line3 49s infinite;}
#indexbannerlinebox .line.l4{animation: line4 55s infinite;}
#indexbannerbox{left:0;bottom:0;width:100%;}
#indexbannerlist{height:360px;overflow:hidden;}
#indexbannerlistin{left:0;top:0;height:100%;transition:all 1s;}
#indexbannerlistin img{height:100%;display:inline-block;float:left;}

#indexbannerlist:after{  content:'';  display:table;  clear:both;}
#indexbannerselect{height:60px;}
#indexbannerselect a:nth-child(1){float:left;}
#indexbannerselect a:nth-child(2){float:right;}
#indexbannerselect img{height:60px}

/* 讓背景線條圖片不吃滑鼠事件 */
#indexbannerlinebox img.line,
#indexbannerlinebox img.bg {
    pointer-events: none;
}

/* 左右按鈕在最上層 */
#indexbannerselect {
    position: relative;
    z-index: 9999 !important; /* 父層拉高 */
    pointer-events: auto;
    visibility: visible !important; /* 確保顯示 */
}

#indexbannerselect .ibarr {
    position: relative;
    z-index: 1; /* 子元素只需小於父層最大值就好 */
    pointer-events: auto;
    cursor: pointer;
}




/* block2 yearbook */
#indexblock2{padding-top:120px;}
#indexblock2title{height:109px;}
#indexblock2list{padding:50px 0;}
#indexyearwrap{overflow:hidden;height: 35vw;}
#indexyearwrapin{margin-left:0;transition:all 1s;}
#indexyearwrapin:after{  content:'';  display:table;  clear:both;}
.indexyearblock{display:inline-block;float:left;margin-left:8px;}

.indexyeartitle{margin:0 2%;}
.indexyearbody{margin-left:-8px;border-left:8px solid #a3b6c5;height:600px;}
.indexyearbody:after{  content:'';  display:table;  clear:both;}
.indexyearbody .iyearcolumn{width:434px;padding-right:8px;float:left;}
.indexyearbody .iyearcolumn:nth-child(1){padding-right:0px;}

.iyearitem{width:410px;margin:0 0 10px 12px;}
.iyearitem:after{  content:'';  display:table;  clear:both;}

.iyitemblock{display:inline-block;float:left;}
.iyitemblock:nth-child(1){width:70px;text-align:center;margin:5px 10px 5px 0;}
.iyitemblock:nth-child(2){width:calc(100% - 80px);}
.iyearitem img{width:100%;margin-left:-20px;background:#fff; padding:15px 0;}
.iycolor0{background:#b7e4cd;}
.iycolor1{background:#d3d4e1;}
.iycolor2{background:#e4c3b7;}
.iycolor3{background:#bdcbe5;}
.iycolor4{background:#e4b7c4;}
.spacefill{margin-top:-10px;margin-left:-8px;background:#fff;}

/* block3 artist */
#indexblock3{padding-top:120px;}
#indexblock3title{height:49px;}
#indexblock3list{padding:70px 0;}
#indexartistwrap{overflow:hidden;height:700px;}
#indexartistwrapin{margin-left:0;transition:all 1s;display: flex; height: 100%;}
#indexartistwrapin:after{  content:'';  display:table;  clear:both;}
.iartitem{width:310px;margin-right:22px;  display: flex; flex-direction: column;flex-shrink: 0;}
.iartitem:nth-child(odd){align-self: flex-start;}
.iartitem:nth-child(even){align-self: flex-end;}
.iartname{display:inline-block;padding:0 10px;}
.iartnamebg{left:0;bottom:0;width:100%;height:50%;}
/* block4  video */
#indexblock4{padding-top:120px;}
#indexblock4title{height:49px;}
#indexblock4list{padding:70px 0;}
#indexvideowrap{overflow:hidden;height:430px;}

.ivideoitem{width:530px;padding:0 20px;top:50%;transform:translate(-50%,-50%) scale(0);transform-origin: center center;z-index:0;opacity:0;transition:all 1s;visibility:hidden;}
.ivideoitem.on0 {left:-10%;transform:translate(-50%,-50%) scale(0.5);visibility:hidden;}
.ivideoitem.on1 {left:14.5%;z-index:1;opacity:1;transform:translate(-50%,-50%) scale(0.71);visibility:visible;}
.ivideoitem.on2{left:50%;z-index:2;opacity:1;transform:translate(-50%,-50%) scale(1);visibility:visible;}
.ivideoitem.on3 {left:85.5%;z-index:1;opacity:1;transform:translate(-50%,-50%) scale(0.71);visibility:visible;}
.ivideoitem.on4 {left:110%;transform:translate(-50%,-50%) scale(0.5);visibility:hidden;}
.ivideoitem .bg{width:100%;}
.ivideoitem iframe{width:90%;height:85%;left:50%;top:50%;transform:translate(-50%,-50%);}
.ivideoitem p{padding:5px 0;}

/* ############# index end ##################### */
/* ################## 影像紀錄 ########### */
.videoitem{width:32%;margin-right:2%;margin-bottom:2rem;float:left;}
.videoitem img{width:100%;}
.videoitem:nth-child(3n){margin-right:0;}
.videoitem iframe{width:90%;height:85%;left:50%;top:50%;transform:translate(-50%,-50%);}
.videoitem p{height:4rem;padding:5px 0;}
.pagevideowrap:after{  content:'';  display:table;  clear:both;}

/* ################## 歷年展覽 ########### */
.pageexpwrap{position:relative;overflow:hidden;}
.yearbox{padding:2rem 0;border-bottom:1px solid #999;}
.yearbox.t2{padding:1rem 0;border-bottom:none;}
.yearbox.t3{padding:1rem 0;}
.yearbox .yearleft{width:13%;float:left;}
.yearbox .yearright{width:87%;float:left;}
.yearbox:after{  content:'';  display:table;  clear:both;}
/*圖片表*/
.expitem{width:18%;margin-right:2.25%;height:32rem;float:left;}
.expitem:nth-child(5n){margin-right:0;}
.expitem:nth-child(5n+2){margin-top:4rem;}
.expitem:nth-child(5n+4){margin-top:4rem;}
/*內頁*/
.exppageinblock.b1 img{width:42%;margin-right:3%;float:left;}
.exppageinblock.b1 .exppageinlist{width:55%;float:left;}
.exppageinblock.b1:after{  content:'';  display:table;  clear:both;}
.expintitle{display:inline-block;}
.expintitle h4{padding:0 0.2rem;}
.expintitle span{bottom:0;left:0;width:100%;height:50%;background:#ddd;}
.expinitemc{margin:1.5rem 0;}
.reportitem{padding:1rem 0;border-bottom:1px solid #000;}
.publishitem{width:18%;margin-right:2.25%;height:32rem;float:left;}
.publishitem:nth-child(5n){margin-right:0;}

/* ################## 藝術家 ########### */
.artistlistitem{width:19%;margin-right:1.25%;float:left;margin-bottom:1rem;}
.artistlistitem:nth-child(5n){margin-right:0;}
.artistimgwrap:after{  content:'';  display:table;  clear:both;}
.artistimgitem{width:18.4%;margin-right:2%;float:left;position:relative; }
.artistimgitem:nth-child(2){margin-top:6rem;}
.artistimgitem:nth-child(4){margin-top:6rem;}
.artistimgitem:nth-child(5){margin-right:0;}
.artistimgitem .ain{width:100%;height:4rem;overflow:hidden;padding-bottom:2rem;transform: scaleY(0.5);opacity:0;transition:all 0.7s;}
.artistimgitem .ain.on{height:auto;transform: scaleY(1);opacity:1;}
.artistbline{border-bottom:1px solid #999;padding-bottom:1rem;}
/*地圖*/
.mapbox{border:1px solid #999;overflow:hidden;}
.mapboxin{position:absolute;top:0;left:0;width:100%;height:100%;}
.graphintro{position:absolute;width:38%;height:100%;top:0;right:0;z-index:2;margin-right:-38%;background:#f6f6f6; -webkit-transition: all 0.4s ;   transition: all 0.4s;}
.graphintro .introbutton{display:block;position:absolute;top:50%;left:-2rem;height:3rem;padding:1.5rem 0;margin-top:-3rem;width:2rem;background:#f6f6f6;border-top-left-radius:0.5rem;border-bottom-left-radius:0.5rem;}
.graphintro .introbutton i{font-size:2rem;line-height:3rem!important;}
.graphintro.on{margin-right:0;}
.graphintro .graphintrocontent{position:absolute;z-index:2;top:0;left:0;width:calc(100% - 8rem);height:calc(100% - 4rem);padding:2rem 4rem;z-index:1;overflow-x: hidden;overflow-y: auto;}
.graphintrocontent h4{display:inline-block;}
.graphintrocontent h4 span.text{display:inline-block;padding:0 1rem;}
.graphintrocontent h4 span.bg{position:absolute;z-index:0;bottom:0;left:0;width:100%;height:50%;background:#ddd;}
.graphintrocontent h4 .marker{position:absolute;z-index:1;bottom:0;left:-2.5rem;height:80%;}
.graphintrocontent .listwrap{position:relative;}
.graphintrocontent .listwrap:after{  content:'';  display:table;  clear:both;}
.graphintrocontent .listitem{position:relative;width:45%;margin-right:10%;float:left;height:6.5rem;}
.graphintrocontent .listitem:nth-child(2n){margin-right:0;}




/* ################################################################################## */
@media screen and (max-width: 1920px) {
	html{font-size:0.982vw;}
	.mover{margin-top:calc(100vw / 19.2);}
	.moverright{margin-top:0;margin-right:calc(100vw / 19.2);}
	.moverleft{margin-top:0;margin-left:calc(100vw / 19.2);}


	/* header  ################## */
	header{height:calc(105vw / 19.2);}
	.headerplaceholder{height:calc(105vw / 19.2);}
	/* header1 */
	.header1{height:calc(105vw / 19.2);}
	.header1in{padding-top:calc(47vw / 19.2);height:calc(44vw / 19.2);}
	.header1in .h1block{ margin:0 calc(15vw / 19.2);}
	/* header2 menu */
	.menublock{padding:calc(30vw / 19.2) 0;}
	.navitem{min-width:calc(170vw / 19.2);margin:0 calc(15vw / 19.2);}
	/* footer   ################## */
	/* footer1 */
	/* footer2 */
	.footer21{padding:calc(30vw / 19.2) 0;}
	.footerlogo{height:calc(107vw / 19.2)}
	.footer22{padding:calc(30vw / 19.2) 0;}
	.footer22 a{margin-right:calc(10vw / 19.2);}
	/*
	#########################################################
	#  各 頁 設 定
	##########################################################
	*/
	/* 內頁共用 */
	.inpageswitchwrap.stay{top:calc(105vw / 19.2);}

	/*表格*/
	/* 選單表格 共用  */
	.submenu select{margin-left:calc(10vw / 19.2);}


	/* ############################################### */
	/* index */
	/*各block共用*/
	.blockarr.left{left:0;top:calc(50% - calc(30vw / 19.2));height:calc(60vw / 19.2);}
	.blockarr.right{right:0;top:calc(50% - calc(30vw / 19.2));height:calc(60vw / 19.2);}
	/*banner*/
	.indexlogo{height:calc(104vw / 19.2);padding-top:calc(70vw / 19.2);}
	#indexbannerwrap{overflow:hidden;margin-top:calc(-120vw / 19.2);}
	#indexbannerlinebox{width:200%;margin-left:-50%;margin-right:-50%;overflow:hidden;}
	#indexbannerlist{height:calc(360vw / 19.2);}
	#indexbannerselect{height:calc(60vw / 19.2);}
	#indexbannerselect img{height:calc(60vw / 19.2);}
	/* block2 */
	#indexblock2{padding-top:calc(120vw / 19.2);}
	#indexblock2title{height:calc(109vw / 19.2);}
	#indexblock2list{padding:calc(50vw / 19.2) 0;}
	.indexyearblock{margin-left:calc(8vw / 19.2);}
	.indexyearbody{margin-left:calc(-8vw / 19.2);border-left:calc(8vw / 19.2) solid #a3b6c5;height:calc(600vw / 19.2);}
	.indexyearbody .iyearcolumn{width:calc(434vw / 19.2);padding-right:calc(8vw / 19.2);}
	.iyearitem{width:calc(410vw / 19.2);margin:0 0 calc(10vw / 19.2) calc(12vw / 19.2);}
	.iyitemblock:nth-child(1){width:calc(70vw / 19.2);margin:calc(5vw / 19.2) calc(10vw / 19.2) calc(5vw / 19.2) 0;}
	.iyitemblock:nth-child(2){width:calc(100% - calc(80vw / 19.2));}
	.iyearitem img{margin-left:calc(-20vw / 19.2); padding:calc(15vw / 19.2) 0;}
	.spacefill{margin-top:calc(-10vw / 19.2);margin-left:calc(-8vw / 19.2);}
	/* block3 */
	#indexblock3{padding-top:calc(120vw / 19.2);}
	#indexblock3title{height:calc(49vw / 19.2);}
	#indexblock3list{padding:calc(70vw / 19.2) 0;}
	#indexartistwrap{height:calc(700vw / 19.2);}
	.iartitem{width:calc(310vw / 19.2);margin-right:calc(22vw / 19.2);}
	.iartname{padding:0 calc(10vw / 19.2);}
	/* block4 */
	#indexblock4{padding-top:calc(120vw / 19.2);}
	#indexblock4title{height:calc(49vw / 19.2);}
	#indexblock4list{padding:calc(70vw / 19.2) 0;}
	#indexvideowrap{height:calc(430vw / 19.2);}

	.ivideoitem{width:calc(530vw / 19.2);padding:0 calc(20vw / 19.2);}
	.ivideoitem p{padding:calc(5vw / 19.2) 0;}
}

@media screen and (max-width: 700px) {
	html{font-size:3.6vw;}
	body{transform:none;overflow-x:auto;}
	.show400{display:block!important;}
	.hide400{display:none!important;}
	.centerwrap{position:relative;width:94%;margin:0 auto;z-index:1;}/* 內容框 */
	.centerwrapb{position:relative;width:94%;margin:0 auto;z-index:1;}/* index內容框 */
	.centerwrapin{position:relative;width:86%;margin:0 auto;z-index:1;}/* 內容內縮框(相對於內容框) */
	.contentblock{padding:calc(40vw / 6) 0;}
	.mover{margin-top:calc(100vw / 6);}
	.moverright{margin-top:0;margin-right:calc(100vw / 6);}
	.moverleft{margin-top:0;margin-left:calc(100vw / 6);}
	.ibannerlogobox{width:50%;right:-50%;}
	/* header  ################## */
	header{height:12vw;}
	.headerplaceholder{height:12vw;}
	/* header1 */
	.header1{position:relative;height:12vw;z-index:2;}
	.header1in{padding-top:2.5vw;height:8vw;}
	.header1in .h1block{ margin:0 1vw;}
	/* header2 menu */
	.header2{z-index:1;position:fixed;left:100%;top:0;height:100%;width:100%;visibility:visible;overflow:hidden;opacity:0;transition:all 0.5s;}
 .header2.s2 .centerwrap{padding:15vw 5vw;}
 .header2.s2 .centerwrap span{display:block;margin:1rem 2rem;}
	.menublock{padding:15vw 5vw;}
	.navitem{min-width:auto;width:100%;margin:8vw 0;position:relative;display:block;}
	.navitem.on{}
	.header2.on{height: 110vw;left:0;opacity:1;}
	.header2.menusearch.on{height: 40vw;left:0;opacity:1;}
	
	/* footer   ################## */
	/* footer1 */
	/* footer2 */
	.footer2{padding:5vw 0;}
	.footer21{padding:5vw 0;}
	.footerlogo{height:25vw;padding-bottom:8vw;}
	.footer22{padding:5vw 0;}
	.footer21 .w50{width:100%;}
	.footer22 .w50{width:100%;}
	.footer22 .w50:nth-child(1){padding-bottom:3vw;}
	.footer22 a{margin-right:2vw;}
	/*
	#########################################################
	#  各 頁 設 定
	##########################################################
	*/
	/* 內頁共用 */
	.inpageswitchwrap.stay{top:12vw;width:95%;}
	.inswitchselect{display:inline-block;padding:0.3rem 1rem;min-width:calc(33.3% - 2rem);margin-right: 0;text-align:center; float:left;}

	/* 年選單 共用  */
	.yearmenu{padding:1rem 0;}
	.yearmenu a{padding:0 0.5rem;margin:0.5rem 0;border-right:2px solid #999;}

	/*表格*/
	.formwrap.type1 .formline span{display:block;width:100%;float:none;}
	/* 檔案紀錄 */
	.formwrap.type2 .formline span{margin-bottom:0.2rem;}
	.formwrap.type2 .formline span:nth-child(1){width:30%;}
	.formwrap.type2 .formline span:nth-child(2){width:70%;}
	.formwrap.type2 .formline span:nth-child(3){width:30%;}
	.formwrap.type2 .formline span:nth-child(4){width:30%;}
	.formwrap.type2 .formline span:nth-child(5){width:25%;}
	.formwrap.type2 .formline span:nth-child(6){width:15%;}
	.formwrap.type2 .formline span:nth-child(6) img{width:35%;}

	/*serch box */
	.pageserchbox .serchboxleft{position:relative;width:100%;}
	.pageserchbox .serchboxleft div{padding:1rem 0;}
	.pageserchbox .serchboxleft span{margin-right:0;}
	.pageserchbox .serchboxleft label{width:25%;padding-right:1%;display:inline-block;}
	.pageserchbox .serchboxleft .inbox span{display:block;width:100%;margin-right:0;}
	.pageserchbox .serchboxleft span{}
	.pageserchbox .serchboxleft .inbox span  input{width:72%;}
	.pageserchbox .serchboxleft .inbox span  select{width:72%;}
	.pageserchbox .serchboxright{width:100%;position:relative;top:0;right:0;transform:none;padding-bottom:1rem;}




	/* 選單表格 共用  */
	.submenu select{margin-left:calc(10vw / 6);}
	.submenu .submenuswitchbox{width:100%;margin-bottom:0.3rem;}
	/* ############################################### */
	/* index */
	/*各block共用*/
	.blockarr.left{left:0;top:calc(50% - 4vw);height:8vw;}
	.blockarr.right{right:0;top:calc(50% - 4vw);height:8vw;}
	/*index banner*/
	.indexlogo{height:15vw;padding-top:15vw;}
	#indexbannerwrap{overflow:hidden;margin-top:-13vw;}
	#indexbannerlinebox{width:300%;height:70vw;margin-left:-100%;margin-right:-100%;overflow:hidden;}
	#indexbannerlinebox img{width:100%;height:100%;}
	#indexbannerbox{left:0;bottom:0;width:100%;}
	#indexbannerlist{height:37.4vw;overflow:hidden;}
	#indexbannerselect{height:8vw;}
	#indexbannerselect img{height:8vw;}
	
	#indexblock2new{height:auto;overflow:hidden;}
	#ib2ntitle{padding-top:5rem;padding-bottom:1rem;background:#2e5f8c;}
	#ib2nintro{width:100%;height:43rem;overflow:hidden;}
	#ib2nintroin{height:100%;}
	.ib2ntext{position:absolute;top:0;left:100%;width:100%;opacity:0;transition:all 1s;}
	.ib2ntext.on{left:0;opacity:1;}
	.ib2nclick{background:rgba(255,255,255,0.5);}
	.ib2nclick i.fa{font-size:2rem!important;;height:2rem;line-height:2rem;text-align:center;}
	.ib2nclick.left{position:absolute;top:40%;left:-2%;}
	.ib2nclick.right{position:absolute;top:40%;right:-2%;}
	
	/*index black3n */
	.ibntitlebg{position:absolute;height:11rem;top:0;left:0;width:100%;background:#2e5f8c;}
	.ibntitle{padding-top:3rem;}
	#indexblock3n{height:auto;margin:2rem 0;overflow:hidden;}
	#ib3ntextbox{padding-top:5rem;height:auto;padding:0;width:100%;margin-right:0;margin-left:0;}
	#ib3ntextboxin{padding:2rem 0;}
	.ib3ntexline{display: block;padding:0.5rem 0;margin-top:3rem;border-bottom:1px solid #999999;align-items: center; }
	.ib3ntexline span{display:block;margin:0.5rem 0;}
	.ib3ntexline span:nth-child(1){width:100%;}
	.ib3ntexline span:nth-child(2){width:100%;}
	.ib3ntexline span:nth-child(3){width:100%;}
	.ib3nimg{position:absolute;height:100%;top:50%;left:-60%;transform:translateY(-50%);transition:all 1s;z-index:1;opacity:0;}
	.ib3nimg.on{left:40%;height:64%;z-index:2;opacity:1;}
	.ib3nimg.nex{z-index:3;opacity:1;}
	.ib3narr{display:none;}
	.ib3ntexline.on .ib3narr{transform:rotate(0);}	

	/* indexblock4n */
	#indexblock4n{height:auto;padding:2rem 0;}
	#indexblock4nbg{height:22rem;}
	#ib4nvideobox{padding:2rem 0;}
	.ib4nitem{position:relative;width:100%;margin-right:0%;float:none;padding-top:3rem;border-bottom:1px solid #000;}

	
	.ib4nitem p{padding:1rem 0;}
	.ibnmore{padding:2rem 0;}
	.ibnmore.tleft{text-align:center!important;}




	/* block2 yearbook */
	#indexblock2{padding-top:20vw;}
	#indexblock2title{height:15vw;}
	
	#indexblock2list{padding:5vw 0;}
	#indexyearwrap{overflow:hidden;height: 135vw;}
	.indexyearblock{margin-left:2vw;}
	.indexyeartitle{margin:0 2%;}
	.indexyearbody{margin-left:-2vw;border-left:2vw solid #a3b6c5;height:120vw;}
	.indexyearbody .iyearcolumn{width:79vw;padding-right:2vw;float:left;}
	.iyearitem{width:76vw;margin:0 0 2vw 3vw;}
	.iyitemblock:nth-child(1){width:12vw;text-align:center;margin:1vw 2vw 1vw 0;}
	.iyitemblock:nth-child(2){width:calc(100% - 14vw);}
	.iyearitem img{width:100%;margin-left:-5vw;background:#fff; padding:3vw 0;}
	.spacefill{margin-top:-2vw;margin-left:-2vw;background:#fff;}
	/* block3 artist */
	#indexblock3{padding-top:15vw;}
	#indexblock3title{height:6.5vw;}
	#indexblock3list{padding:8vw 0;}
	#indexartistwrap{overflow:hidden;height:80vw;}
	#indexartistwrapin{margin-left:0;transition:all 1s;display: flex; height: 100%;}
	#indexartistwrapin:after{  content:'';  display:table;  clear:both;}
	.iartitem{width:39vw;margin-right:3.5vw;  display: flex; flex-direction: column;flex-shrink: 0;}
	.iartitem:nth-child(odd){align-self: flex-start;}
	.iartitem:nth-child(even){align-self: flex-end;}
	.iartname{display:inline-block;padding:0 10px;}
	.iartnamebg{left:0;bottom:0;width:100%;height:50%;}
	
	
	/* block4  video */
	#indexblock4{padding-top:15vw;}
	#indexblock4title{height:6.5vw;}
	#indexblock4list{padding:5vw 0;}
	#indexvideowrap{height:70vw;}

	.ivideoitem{width:60vw;padding:0 2vw;}
	.ivideoitem.on0 {left:-40%;transform:translate(-50%,-50%) scale(0.2);visibility:hidden;}
	.ivideoitem.on1 {left:-15%;z-index:1;opacity:1;transform:translate(-50%,-50%) scale(0.7);visibility:visible;}
	.ivideoitem.on2{left:50%;z-index:2;opacity:1;transform:translate(-50%,-50%) scale(1);visibility:visible;}
	.ivideoitem.on3 {left:115%;z-index:1;opacity:1;transform:translate(-50%,-50%) scale(0.7);visibility:visible;}
	.ivideoitem.on4 {left:140%;transform:translate(-50%,-50%) scale(0.2);visibility:hidden;}
	.ivideoitem p{padding:1vw 0;}

	/* ################## 影像紀錄 ########### */
	.videoitem{width:100%;margin-right:0;margin-bottom:2rem;float:left;}
	.videoitem p{height:auto;padding:0.5rem 0;}
	/* ################## 歷年展覽 ########### */
	.pageexpwrap{}
	.yearbox .yearleft{width:100%;float:none;}
	.yearbox .yearright{width:100%;float:none;}
	.yearbox:after{  content:'';  display:table;  clear:both;}
	/*圖片表*/
	.expitem{width:48%;margin-right:4%;height:30rem;}
	.expitem:nth-child(5n){margin-right:4%;}
	.expitem:nth-child(2n){margin-right:0;}
	.expitem:nth-child(5n+2){margin-top:0;}
	.expitem:nth-child(5n+4){margin-top:0;}
	/*內頁*/
	.exppageinblock.b1 img{width:100%;margin-right:0%;float:none;}
	.exppageinblock.b1 .exppageinlist{margin-top:3rem;width:100%;float:none;}
	.exppageinblock.b2{margin-top:3rem;}
	.expintitle{display:inline-block;}
	.expintitle h4{padding:0 0.2rem;}
	.expintitle span{bottom:0;left:0;width:100%;height:50%;background:#ddd;}
	.expinitemc{margin:1.5rem 0;}
	.publishitem{width:48%;margin-right:4%;height:28rem;}
	.publishitem:nth-child(5n){margin-right:4%;}
	.publishitem:nth-child(2n){margin-right:0;}
	/* ################## 藝術家 ########### */
	.artistlistitem{width:30%;margin-right:5%;float:left;margin-top:1.5rem;height:6rem;}
	.artistlistitem:nth-child(5n){margin-right:5%;}
	.artistlistitem:nth-child(3n){margin-right:0;}
	.artistimgitem{width:48%;margin-right:4%;}
	.artistimgitem:nth-child(2){margin-top:0;margin-right:0;}
	.graphintro{width:80%;margin-right:-80%;}
	.graphintro .graphintrocontent{width:calc(100% - 5rem);height:calc(100% - 4rem);padding:2rem 2.5rem;}
	.graphintrocontent h4{display:inline-block;}
	.graphintrocontent h4 .marker{left:-1.8rem;}

}
/* ########################################### */
/* keyframes */
@keyframes line1 {
	0%{		margin-left:-25%;  }  
	65%{	margin-left:10%;  }  
	70%{	margin-left:10%;  }  
	95%{	margin-left:-25%;  }
	100%{	margin-left:-25%;  }
}
@keyframes line2 {
	0%{		margin-left:-10%;  }  
	30%{	margin-left:20%;  }  
	35%{	margin-left:20%;  }  
	95%{	margin-left:-10%;;  }
	100%{	margin-left:-10%;;  }
}
@keyframes line3 {
	0%{		margin-left:10%;  }  
	40%{	margin-left:-20%;  }  
	45%{	margin-left:-20%;  }  
	95%{	margin-left:10%;;  }
	100%{	margin-left:10%;;  }
}
@keyframes line4 {
	0%{		margin-left:20%;  }  
	60%{	margin-left:-25%;  }  
	65%{	margin-left:-25%;  }  
	95%{	margin-left:20%; }
	100%{	margin-left:20%; }
}
@keyframes tagshow{ 
  from {
    opacity: 0;
    transform: translateY(3rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }

}