@charset "utf-8";
/*內頁共用*/
main{ padding:106px 0 120px 0;}
.PageTitle{ font-size:3.125rem; color:#333; font-weight:700;}
.SubTitle{ font-size:2rem; color:#333; padding-bottom:30px; display:flex; align-items:center;}
.SubTitle::before{ content:""; display:inline-block; height:20px; border-left:5px solid #25a2a2; padding-right:10px;}
.PageInfo{ padding:80px 0 50px 0;}
.PageInfo .BreadCrumbs{ color:#333; font-size:1rem;}
.PageInfo .BreadCrumbs a{ color:#333; font-size:1rem; padding-right:20px; margin-right:20px; background:url(../images/icon-bread_crumbs_arrow.png) no-repeat center right; background-size:7px 11px;}
.PageInfo .PageTitle{ font-size:3.125rem; color:#333; font-weight:700;}
.PageInfo .SubTitle{ font-size:1rem; color:#333; padding-top:20px;}
.BackBlur{ position:relative; height:480px; background:center no-repeat; background-size:cover; background-attachment: fixed; overflow:hidden;}
.BackBlur::before{ content:""; display:block; position:absolute; top:0; left:0; right:0; bottom:0; background-color:rgba(255,255,255,.4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);}
.BackBlur::after{ content:""; display:block; position:absolute; top:0; left:0; right:0; bottom:0; background-color:rgba(255,255,255,.4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);}
.BackBlur *{ position:relative; z-index:1;}
.BackBlur + div{ margin-top:-480px;}
.BackBlur ~ div{ position:relative; z-index:1;}
.Button{ font-size:1.125rem; color:#fff; background-color:#25a2a2; padding:10px 30px; border-radius:50px; display:inline-block; font-weight:700;}
.Button.Open{ color:#fff; background-color:#efbc9d;}
.Button.Close{ color:#fff; background-color:#25a2a2;}
.Button.Finish{ color:#777; background-color:#ddd;}
.PageBtn{ text-align:center; padding:30px 0 100px 0;}
.PageBtn .Button{ font-size:1.5rem; margin:0 10px 10px 10px}
.PageBtn .Button.SubStyle{ background-color:#ccc; color:#fff;}

/*列表-卡片*/
.CardListBox{ display:flex; gap:50px 2%; flex-wrap: wrap;}
.CardListBox .Item{ width:32%; display:flex; flex-direction: column; flex-shrink:0; -webkit-transform-style:preserve-3d; transform-style:preserve-3d; perspective:1000px; transition:.3s;}
.CardListBox .Item .photoArea{ background:#fff no-repeat center; background-size:cover; padding-top:100%; position:relative; -webkit-transform-style:preserve-3d; transform-style:preserve-3d; transition:.5s;}
.CardListBox .Item .photoArea::after{ content:""; display:block; position:absolute; top:50px; left:50px; right:50px; bottom:50px; border-radius:40px 40px 0 40px; background-color:rgba(37,162,162,.3); transform:translateZ(-100px); -webkit-transform-style:preserve-3d; transform-style:preserve-3d; backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); z-index:-1;}
.CardListBox .Item .photoArea::before{ content:"View All"; display:block; font-size:0.75rem; font-weight:900; color:#fff; text-align:center; padding-top:50px; background:url(../images/logo.png) no-repeat top center; background-size:30%; position:absolute; top:45%; left:0; right:0; transform:translateZ(-200px)rotateY(-180deg); -webkit-transform-style:preserve-3d; transform-style:preserve-3d; z-index:-1;}
.CardListBox .Item .NoteArea{ padding:15px 30px 65px 30px; position:relative; flex:auto;}
.CardListBox .Item .Name{ font-size:1.75rem; color:#333;}
.CardListBox .Item .Directions{ font-size:1.125rem; color:#555; margin:10px 0 15px 0; -webkit-line-clamp:2; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical;}
.CardListBox .Item .Button{ position:absolute; left:30px; bottom:15px;}
.CardListBox .Item.Open .Button{ color:#fff; background-color:#efbc9d;}
.CardListBox .Item.Closed .Button{ color:#fff; background-color:#25a2a2;}
.CardListBox .Item.Finish .Button{ color:#777; background-color:#ddd;}
.CardListBox .Item.Open .photoArea::before{ content:"前往報名"; font-size:1rem;}
.CardListBox .Item.Closed .photoArea::before{ content:"尚未開放報名"; font-size:1rem;}
.CardListBox .Item.Finish .photoArea::before{ content:"報名截止"; font-size:1rem;}
.CardListBox .Item.Open .photoArea::after{ background-color:rgba(233,159,115,.5)}
.CardListBox .Item.Closed .photoArea::after{ background-color:rgba(37,162,162,.3)}
.CardListBox .Item.Finish .photoArea::after{ background-color:rgba(42,59,82,.5)}

.CardListBox .Item.FullStyle{ width:100%;}
.CardListBox .Item.FullStyle .photoArea{ padding-top:0; height:450px;}
.CardListBox .Item.FullStyle .photoArea::before{ display:none;}
.CardListBox .Item.FullStyle .photoArea::after{ display:none;}

/*詳細*/
.DetailBox .Information{ display:flex; margin-bottom:50px;}
.DetailBox .Information .PhotoArea{ flex:1;}
.DetailBox .Information .NoteArea{ flex:1; padding-left:80px;}
.DetailBox .Information .Row{ display:flex; padding-bottom:20px; gap:10px; flex-wrap: wrap; color:#333;}
.DetailBox .Information .Row .Title{ font-size:1rem; width:80px; flex-shrink:0; color:#333;}
.DetailBox .Information .Item{ display:flex; gap:10px; align-items: center;}
.DetailBox .Information .Share .Item{ background-color:#fff; font-size:0.875rem; padding:10px 20px; color:#333; text-decoration:none; width:auto;}
.DetailBox .Information .Share .Title{ padding-top:5px;}
.DetailBox .Information .Share .Item img{ width:20px; height:20px; flex-shrink:0;}
.DetailBox .Information .HashTag .Item{ background-color:#90bfbf; font-size:1rem; padding:10px 20px;} 
.DetailBox .Information .HashTag .Title{ padding-top:5px;}
.DetailBox .Information .Add a{ display:block; font-size:1rem; color:#333; padding-left:24px; background:url(../images/icon-map_point.png) center left no-repeat; background-size:20px;}
.DetailBox .Information .Btn{ padding-bottom:30px; }
.DetailBox .Information .Btn .Button{ font-size:1.5rem;}
.DetailBox .Information .Introduce{ padding:10px 0 30px 0;}
.DetailBox .Information .Introduce p{ font-size:1.125rem; color:#333; line-height:1.8;}
.Content{ color:#333; font-size:1rem; line-height:1.8; padding-bottom:30px}
.Content h3{ font-size:1.25rem; padding-bottom:10px; font-weight:700;}
.Content h3::before{ content:""; display:inline-block; height:20px; border-left:5px solid #25a2a2; padding-right:10px;}
.Content h3.Name{ font-size:1.75rem; font-weight:500;}
.Content h3::before{ display:none;}
.Content p{ padding-bottom:20px;}
.Content ul, .Content ol{ padding-left:25px;}
/*.Content img{ margin-bottom:20px;}*/
.Content a{ color:#25a2a2; text-decoration:underline; font-weight:600;}
.Content *{ font:inherit; color:inherit; line-height:inherit;}
.Content .Button{ color:#fff;}
.Content .HashTag{ display:flex; padding:50px 0 20px 0; gap:10px; flex-wrap: wrap;}
.Content .HashTag .Item{ display:flex; gap:10px; align-items: center; background-color:#90bfbf; color:#fff; font-size:1rem; padding:10px 20px; text-decoration:none;}
.Content .HashTag .Title{ padding-top:5px;}

.TableList{ white-space:nowrap; overflow-x:auto;}
.TableList table{ width:100%; border-collapse:collapse;}
.TableList thead{ width:100%;}
.TableList th{ background-color:#25a2a2; color:#fff; font-weight:700; text-align:left; padding:10px 20px;}
.TableList td{ border-top:1px solid #ccc; text-align:left; padding:10px 20px; font-size:1.125rem;}

.DetailBox .ArtistLayout .PhotoArea{ width:350px; flex:none; flex-shrink:0;}
.DetailBox .ArtistLayout .Name{ gap:0;}
.DetailBox .ArtistLayout .Name p{ font-size:1.75rem;}
.DetailBox .ArtistLayout .Row{ padding:10px 0;}
.DetailBox .ArtistLayout .Row .Title{ width:100%; font-weight:700;}
.DetailBox .ArtistLayout .NoteArea{ padding-left:0; padding-right:80px;}
.DetailBox .ArtistLayout .Btn .Button{ display:block; text-align:center;}

.DetailBox .ArtistLayout .PhotoSlide{ position:relative; overflow:hidden; margin-bottom:20px;}
.DetailBox .ArtistLayout .WorksArea{ display:flex;}
.DetailBox .ArtistLayout .LeftMask{ display:flex; align-items: center; justify-content: flex-start; position:absolute; top:0; left:0; bottom:0; width:200px; padding-left:30px; cursor:pointer;}
.DetailBox .ArtistLayout .LeftMask img{ width:38px; background:#fff; padding:9px 13px; border-radius: 50%;}
.DetailBox .ArtistLayout .RightMask{ display:flex; align-items: center; justify-content: flex-end; position:absolute; top:0; right:0; bottom:0; width:200px; padding-right:30px; cursor:pointer;}
.DetailBox .ArtistLayout .RightMask img{ width:38px; background:#fff; padding:9px 13px; border-radius: 50%;}
.DetailBox .ArtistLayout .Item{ width:100%; flex-shrink:0;}

/*頁面附加區塊*/
.PageSubArea{ padding-top:50px; border-top:1px solid #ccc; margin-top:50px;}
.PageSubArea .Title{ font-size:2.25rem; font-weight:700; padding-bottom:30px;}

/*Map*/
.PermanentMap{ padding-right:550px; position:relative; box-shadow:0 10px 30px 0 rgba(0,0,0,.1);}
.PermanentMap .Map{ position:relative; flex:auto; font-size:0;}
.PermanentMap .Map .MapPoint{ width:9%; position:absolute;}
.PermanentMap .Map .MapPoint::after{ content:""; display:block; width:30px; height:10px; background-color:rgba(0,0,0,0); border-radius:50%; position:absolute; left:0; right:0; margin:auto; bottom:28%;}
.PermanentMap .Map .MapPoint img{ position:relative; z-index:1;}
.PermanentMap .Map .MapPoint p{ position:absolute; left:50%; top:-20%; background-color:#fff; color:#333; font-weight:700; padding:5px 10px; border-radius:5px; transform: translateX(-50%); white-space:nowrap; display:none;}
.PermanentMap .Map .p04 img{ transform: rotate(24deg);}
.PermanentMap .Map .p05 img{ transform: rotate(18deg);}
.PermanentMap .Map .p01{ top:78.5%; left:56.3%; z-index:2;}
.PermanentMap .Map .p01-2{ top:83.7%; left:52.3%;}
.PermanentMap .Map .p02{ top:60.6%; left:46.6%;}
.PermanentMap .Map .p03{ top:30.6%; left:48%;}
.PermanentMap .Map .p03-2{ top:54.6%; left:72%;}
.PermanentMap .Map .p04{ top:48.2%; left:34.4%;}
.PermanentMap .Map .p05{ top:40.6%; left:40.6%;}
.PermanentMap .Map .p06{ top:44.3%; left:25.3%;}
.PermanentMap .Map .p06-2{ top:57%; left:12.3%;}
.PermanentMap .MapPhotoT{ display:block;}
.PermanentMap .MapPhotoM{ display:none}
.PermanentMap .List{ width:550px; background-color:#fff; padding:30px; position:absolute; top:0; right:0; bottom:0;}
.PermanentMap .List .Slide{ height:100%; overflow-y:auto;}
.PermanentMap .List .Item{ display:block; position:relative; padding:10px 10px 10px 60px; margin-bottom:10px; background-color:#fff; border-radius:5px;}
.PermanentMap .List .Item .Icon{ width:50px; position:absolute; top:0; left:0;}
.PermanentMap .List .Item .Title{ font-size:1.25rem; color:#333; font-weight:700;}
.PermanentMap .List .Item .Location{ font-size:1rem; color:#333; font-weight:700;}
.PermanentMap .List .Item .Location a{ padding:0; display:block; color:inherit; font:inherit; margin:0; background:none;}

/*光箱*/
.LightBox{ display:block; position:fixed; top:0; left:0; right:0; bottom:0; background-color:rgba(0,0,0,.7); padding:50px; z-index:10;}
.LightBox .ContentArea{ background-color:#fff; border-radius:10px; max-width:1200px; width:100%; height:100%; margin:auto; padding:50px;}
.LightBox .Overflow{ overflow-y:auto; height:100%;}
.LightBox .Artist{ width:100%; display:flex; flex-wrap: wrap;}
.LightBox .Artist .ArtistName{ width:100%; font-size:2rem; font-weight:700; padding-bottom:20px; display:flex; justify-content: space-between; align-items: flex-end;}
.LightBox .Artist .ArtistName .Close{ cursor:pointer; font-size:0.875rem; width:100px; text-align:center;}
.LightBox .Artist .PhotoArea{ width:50%; flex-shrink:0;}
.LightBox .Artist .NoteArea{ width:50%; flex-shrink:0; padding-left:50px;}

@media screen and ( min-width: 768px) {
/*內頁共用*/
.PageInfo .BreadCrumbs a:hover{ text-decoration:underline;}
.Button:hover{ box-shadow:0 5px 20px rgba(0,0,0,.1);}

/*列表-卡片*/
.CardListBox .Item:hover{ -webkit-transform:translateZ(0.1px); transform:translateZ(0.1px); transition:.3s;}
.CardListBox .Item:hover .photoArea{ -webkit-transform:rotateX(0) rotateY(-180deg); transform:rotateX(0) rotateY(-180deg); transition:.5s;}
.CardListBox .Item.NoHover:hover{ -webkit-transform:none; transform:none;}
.CardListBox .Item.NoHover:hover .photoArea{ -webkit-transform:none; transform:none;}

.CardListBox .Item.FullStyle:hover{ -webkit-transform:none; transform:none; transition:0;}
.CardListBox .Item.FullStyle:hover .photoArea{transform:none; transition:0;}

.TableList tr:hover td{ background-color:rgba(0,0,0,.08);}

/*Map*/
.PermanentMap .Map .MapPoint:hover,
.PermanentMap .Map .MapPoint.hover{ animation:MapPoint .5s infinite alternate;}
@keyframes MapPoint{from{margin-top:0%}to{margin-top:-2%}}
.PermanentMap .Map .MapPoint:hover::after,
.PermanentMap .Map .MapPoint.hover::after{ animation:MapPointShadow .5s infinite alternate;}
@keyframes MapPointShadow{from{width:10px;height:2px;bottom:28%;background-color:rgba(0,0,0,0);}to{width:30px;height:10px;bottom:0%;background-color:rgba(0,0,0,.2);}}
.PermanentMap .Map .MapPoint:hover p,
.PermanentMap .Map .MapPoint.hover p{ display:block; z-index:2;}
/*@media screen and ( max-width: 1200px) {.PermanentMap .Map .MapPoint:hover p{ display:none;}}*/
.PermanentMap .List .Item:hover,
.PermanentMap .List .Item.hover{ background-color:#eee;}

}

@media screen and ( max-width: 1200px) and ( min-width: 769px) {
/*內頁共用*/
main{ padding:68px 0 120px 0;}
.PageInfo{ padding:40px 0 20px 0;}
.PageInfo .PageTitle{ font-size:2.5rem;}
.PageInfo .SubTitle{}
.BackBlur{ height:460px;}
.BackBlur + div{ margin-top:-460px;}

/*列表-卡片*/
.CardListBox .Item{ width:49%;}
.CardListBox .Item .photoArea::after{ border-radius:20px 20px 0 20px;}
.CardListBox .Item .NoteArea{ padding:10px 20px 65px 20px}
.CardListBox .Item .Name{ font-size:1.5rem;}
.CardListBox .Item .Directions{ font-size:0.875rem;}
.CardListBox .Item .Button{ left:20px;}

/*詳細*/
.DetailBox .Information .NoteArea{ padding-left:40px;}
.DetailBox .Information .Row{ gap:6px;}
.DetailBox .Information .Item{ gap:6px;}
.DetailBox .Information .Share .Title{ width:100%; padding:0;}
.DetailBox .Information .Share .Item{ font-size:0.75rem; padding:6px 15px;}
.DetailBox .Information .Share .Item img{ width:16px; height:16px;}
.DetailBox .Information .HashTag .Title{ width:100%; padding:0;}
.DetailBox .Information .HashTag .Item{ font-size:0.75rem; padding:6px 15px;}
.DetailBox .Information .HashTag .Item img{ width:16px; height:16px;}
.DetailBox .Information .Btn .Button{ font-size:1.25rem;}

/*Map*/
.PermanentMap{ padding-right:360px; margin:0 20px;}
.PermanentMap .List{ width:360px; padding:15px 10px;}
.PermanentMap .Map .MapPoint p{ top:-40%;}

/*光箱*/
.LightBox{ padding:30px;}
.LightBox .ContentArea{ padding:30px;}
.LightBox .Artist .NoteArea{ padding-left:30px;}

}

@media screen and ( max-width: 768px) {
/*內頁共用*/
main{ padding:70px 0 60px 0;}
.PageInfo{ padding:30px 0 20px 0;}
.PageInfo .PageTitle{ font-size:2rem;}
.PageInfo .SubTitle{ padding:20px 0 0 0;}
.PageBtn .Button{ display:block; text-align:center; margin:0 0 15px 0;}
.BackBlur{ height:300px; background-attachment: inherit;}
.BackBlur + div{ margin-top:-300px;}
.PageBtn{ padding:15px 0 40px 0;}

/*列表-卡片*/
.CardListBox{ flex-direction: column;}
.CardListBox .Item{ width:100%; display:block;}
.CardListBox .Item .NoteArea{ padding:10px 0 0 0;}
.CardListBox .Item .Name{ font-size:1.5rem;}
.CardListBox .Item .Directions{ font-size:1rem;}
.CardListBox .Item .Button{ position:static;}
.CardListBox .Item .photoArea::before,
.CardListBox .Item .photoArea::after{ display:none;}
/*.CardListBox .Item::after{ content:"View All"; display:inline-block; font-size:0.75rem; font-weight:900; color:#fff; text-align:center; padding:5px 15px; border-radius:50px;}
.CardListBox .Item.Open::after{ content:"前往報名"; font-size:1rem; background-color:rgba(233,159,115,.5)}
.CardListBox .Item.Closed::after{ content:"尚未開放報名"; font-size:1rem; background-color:rgba(37,162,162,.3)}
.CardListBox .Item.Finish::after{ content:"報名截止"; font-size:1rem; background-color:rgba(42,59,82,.5)}*/

/*詳細*/
.DetailBox .Information{ flex-direction: column; align-items: center; margin-bottom:20px;}
.DetailBox .Information .NoteArea{ padding:0;}
.DetailBox .Information .Row{ gap:6px;}
.DetailBox .Information .Row.Share{ padding:10px 0;}
.DetailBox .Information .Item{ gap:6px;}
.DetailBox .Information .Share .Title{ width:100%; padding:0;}
.DetailBox .Information .Share .Item{ font-size:0.75rem; padding:6px 15px;}
.DetailBox .Information .Share .Item img{ width:16px; height:16px;}
.DetailBox .Information .HashTag .Title{ width:100%; padding:0;}
.DetailBox .Information .HashTag .Item{ font-size:0.75rem; padding:6px 15px;}
.DetailBox .Information .HashTag .Item img{ width:16px; height:16px;}
.DetailBox .Information .Btn{ text-align:center;}
.DetailBox .Content .HashTag .Item{ font-size:0.75rem; padding: 6px 15px;}

.DetailBox .ArtistLayout .PhotoSlide{ padding:10px 0px;}
.DetailBox .ArtistLayout .Item{ width:100%;}
.DetailBox .ArtistLayout .NoteArea{ justify-content: center; position:relative; z-index:2;}
.DetailBox .ArtistLayout .PhotoArea{ width:100%;}
.DetailBox .ArtistLayout .LeftMask,
.DetailBox .ArtistLayout .RightMask{ width:60px; padding:0;}
.DetailBox .ArtistLayout .WorksArea{gap:0;}

.PageSubArea{ margin-top:20px; padding-top:30px;}
.PageSubArea .Title{ font-size:1.75rem;}

.DetailBox .ArtistLayout .PhotoArea{ width:100%;}
.DetailBox .ArtistLayout .Artist{ width:90%; border: 1px solid #ccc; padding: 10px; border-radius: 10px; margin:10px auto;}
.DetailBox .ArtistLayout .Artist img{ border-radius: 4px;}
.DetailBox .ArtistLayout .Row{ flex-wrap: wrap; padding:10px;}
.DetailBox .ArtistLayout .NoteArea .Name{ flex-wrap: wrap;}
.DetailBox .ArtistLayout .Btn{ padding:10px;}
.DetailBox .ArtistLayout .Btn .Button{ font-size:1.125rem;}

.TableList table{ display:block;}
.TableList thead{ display:none;}
.TableList tbody,
.TableList tr,
.TableList td{ display:block;}
.TableList tr{ border-top:1px solid #ccc; padding:10px 0;}
.TableList td{ border:0; padding:5px 0; font-size:1rem;}
.TableList td::before{ content:attr(data-title); display:inline-block; font-size:1rem; color:#333;}
/*.TableList{ margin-bottom:40px;}
.TableList th,
.TableList td{ padding:10px 10px;}
.TableList:after{ content:"橫向拖拉檢視詳細資訊"; display:block; text-align:center; font:0.75rem; color:#777; position:absolute; margin:auto; left:0; right:0;}*/

/*Map*/
.PermanentMap{ padding:0; margin:0 -10px;}
.PermanentMap .Map{ overflow-x:auto;}
.PermanentMap .Map .MapPoint{ width:16%;}
.PermanentMap .Map .p01{ top:79.5%; left:99.9%;}
.PermanentMap .Map .p01-2{ top:84.7%; left:93%;}
.PermanentMap .Map .p02{ top:61%; left:84.5%;}
.PermanentMap .Map .p03{ top:29.6%; left:90%;}
.PermanentMap .Map .p03-2{ top:52.6%; left:126%;}
.PermanentMap .Map .p04{ top:48.8%; left:62.3%;}
.PermanentMap .Map .p05{ top:40.4%; left:74.6%;}
.PermanentMap .Map .p06{ top:44.5%; left:45%;}
.PermanentMap .Map .p06-2{ top:57.2%; left:22%;}
.PermanentMap .MapPhotoT{ display:none;}
.PermanentMap .MapPhotoM{ display:block; width:180%; max-width:none;}
.PermanentMap .List{ position:static; width:100%; padding:15px 10px;}
.PermanentMap .List .Item .Location{ font-size:0.875rem;}
.PermanentMap .Map .MapPoint{ animation:MapPoint .5s infinite alternate;}
@keyframes MapPoint{from{margin-top:0%}to{margin-top:-2%}}
.PermanentMap .Map .MapPoint::after{ animation:MapPointShadow .5s infinite alternate;}
@keyframes MapPointShadow{from{width:10px;height:2px;bottom:28%;background-color:rgba(0,0,0,0);}to{width:30px;height:10px;bottom:0%;background-color:rgba(0,0,0,.2);}}

/*光箱*/
.LightBox{ padding:10px;}
.LightBox .ContentArea{ padding:20px;}
.LightBox .Artist{ flex-direction: column; padding-bottom:50px;}
.LightBox .Artist .ArtistName{ font-size:1.5rem; padding-bottom:15px}
.LightBox .Artist .ArtistName .Close{ position:fixed; bottom:50px; left:50%; transform: translateX(-50%);}
.LightBox .Artist .PhotoArea{ width:100%; padding-bottom:15px}
.LightBox .Artist .NoteArea{ width:100%; padding-left:0px;}

}