@import url('/css/community.css');

/* h1Box */
#h1Box {position: relative;display: flex;justify-content: center;align-items: center;}
#h1Box #banner {position: relative;width: 100%;height: 450px;top: 0;left: 0;}
#h1Box #banner:after{content:'';position: absolute;width: 100%;height: 100%;background: rgb(0 0 0 / 35%);top: 0;z-index: 2;}
#h1Box #banner .sbanner {height: 100%;position: absolute;width: 100%;}
#h1Box .txt {position: absolute;width: min(90%, 1280px);z-index: 2;bottom: 15%;}
#h1Box .txt font { margin-right: 40px; display: inline-block; line-height: 100%; font-weight: 600; font-size: 56px; color: #252359; vertical-align: text-bottom; }
#h1Box .txt h1 {display: inline-block;line-height: 100%;color: white;vertical-align: text-bottom;font-weight: 600;letter-spacing: 2px;font-size: 40px;font-family: "Playfair Display", serif;}

#layoutnav{background:#ddd;padding: 15px 0;}
#MenuContainer{display:flex;width: min(90%, 1280px);margin: 0 auto;gap: 50px;}
#MenuContainer li{display:block;}
#MenuContainer li a{font-size: 15px;font-weight: 700;letter-spacing: 0.25px;font-family: 'Arimo';}

/* wrap */
.wrap {position: relative;padding: 0 0 1vw;z-index: 2;}
.wrap .workframe {padding: 2vw 0 5vw;z-index: 2;width: min(90%, 1280px);}

/* waylink */
.waylink{margin-bottom:5vw;}
.waylink ol { font-size: 0; }
.waylink ol li {display: inline-block;font-size: 14px;font-weight: 300;color: #8d8d8d;}
.waylink ol li a {font-size: 14px;font-weight: 300;color: #8d8d8d;}
.waylink ol li a:after {margin: 0 10px;display: inline-block;color: #8d8d8d;content: "‧";}
.waylink ol li:last-child a { color: #222; }
.waylink ol li:last-child a:after { content: ""; }

/* describe */
#describe *, .tab_content * {vertical-align: bottom;color: currentcolor;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}

/* sideNav */
#sideNav { position: relative; margin: 20px 0 30px; text-align: right; z-index: 2; }
#sideNav #sideBtn { position: relative; overflow: hidden; padding: 10px 20px; width: 240px; background: #151429; border: 1px #151429 solid; display: inline-block; color: #fff; z-index: 2; }
#sideNav #sideBtn:before { position: absolute; width: 0; height: 100%; background: #151429; top: 0; left: 0; content: ""; }
#sideNav #sideBtn font { position: relative; z-index: 1; }
#sideNav #sideBtn i { position: absolute; top: calc((100% - 8px) / 2); right: 20px; z-index: 2; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; -webkit-transform: rotate(0); transform: rotate(0); }
#sideNav #sideBtn[data-type="2"]:before { width: 100%; }
#sideNav #sideBtn[data-type="2"] font { color: #fff; }
#sideNav #sideBtn[data-type="2"] i { color: #fff; -webkit-transform: rotate(180deg); transform: rotate(180deg); }
#sideNav >ul { overflow: hidden; position: absolute; width: 280px; height: 0; background: url(/images/35/img-news1Bg.jpg); border: 1px #393842 solid; top: 0; right: 0; z-index: 1; }
#sideNav >ul.open { padding: 5px 0; height: auto; top: 52px; }
#sideNav >ul >li { position: relative; overflow: hidden; }
#sideNav >ul >li h3 { position: relative;background: url(/images/35/img-news1Bg.jpg); z-index: 2; }
#sideNav ul li b[data-action="sideOpen"] { position: absolute; padding: 5px 20px; display: block; color: #828282; right: 0; top: 0; cursor: pointer; }
#sideNav ul li b[data-action="sideOpen"] i:before { content: "\f067"; }
#sideNav ul a { padding: 7px 53px 7px 20px; display: block; font-weight: 400; color: #828282; }
#sideNav >ul >li >ul.subUL { position: absolute; width: 100%; background: url(/images/35/img-news2Bg.jpg); border: #242323 solid; border-width: 1px 0; bottom: 100%; -webkit-transition-duration: .3s; transition-duration: .3s; opacity: 0; z-index: 1; }
#sideNav ul .subULHead b[data-action="sideOpen"] { display: none; }
#sideNav ul .subULHead a { padding: 2px 20px; color: #817db9; }
#sideNav ul .sub2ULHead a { padding: 2px 37px; color: #7184ac; }
#sideNav >ul >li.action { opacity: 1; }
#sideNav >ul >li.openlist { border-bottom: 1px #3b3b3b solid; }
#sideNav >ul >li.openlist h3 a { border-bottom: 1px #251e1e solid; color: #fff; }
#sideNav >ul >li.openlist h3 b { color: #fff; }
#sideNav >ul >li.openlist h3 b i:before { content: "\f068"; }
#sideNav >ul >li.openlist >ul.subUL { position: relative; padding: 5px 0; bottom: 0; opacity: 1; }
#sideNav >ul >li.action h3 a , #sideNav >ul >li.action h3 b { color: #fff; }

/* listPage */
#listPage ul { font-size: 0; }
#listPage ul li { position: relative; overflow: hidden; margin: 30px; width: 450px; display: inline-block; }
#listPage ul li h3 { position: absolute; padding: 20px; width: calc(65% - 20px); background: #fff; right: 0; bottom: 0; }
#listPage ul li h3 a { height: 70px; font-weight: 400; font-size: 20px; color: #434343; -webkit-line-clamp: 2; }

/* newsBox */
#newsBox ul{display:grid;grid-template-columns: repeat(3, 1fr);margin-top: 3vw;gap: 40px;}
#newsBox li {position: relative;border: 0;}
#newsBox li >a {position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 1;}
#newsBox li .img_box img{aspect-ratio: 3/2;object-fit: cover;}
#newsBox li .time{position:absolute;display: flex;flex-direction: column;align-items: center;right: 20px;top: -20px;background: linear-gradient(135deg, var(--primary), var(--triadic2) 120%);color: white;line-height: 1;aspect-ratio: 1/1;font-size: 14px;gap: 3px;width: 80px;justify-content: center;}
#newsBox li .time *{color:white;line-height: 1;font-size: 36px;}
#newsBox li .text{display: grid;justify-items: start;gap: 12px;margin-top: 30px;}
#newsBox li .text .more_btn{position:relative;z-index:5}
#newsBox li .text .h3tit{position:relative;z-index:6;display: block;height: 88px;overflow: hidden;}
#newsBox li .text .h3tit span{-webkit-line-clamp: 3;color: var(--info);font-weight: 500;background-image: linear-gradient(currentColor 1px, transparent 1px);background-repeat: no-repeat;background-size: 0% 1px;background-position: 0 100%;transition: background-size .3s cubic-bezier(.32,.72,0,1);font-size: 21px;line-height: 1.4;font-family: "Lora", serif;}
#newsBox li .text article{height: auto;color: #555;margin-bottom: 50px;-webkit-line-clamp: 6;letter-spacing: .15px;font-size: 14px;}
#newsBox .h2tit{text-align:center;color: var(--primary);font-size: 50px;width: min(90%, 950px);margin: 0 auto;letter-spacing: .5px;font-weight: 100;line-height: 1.4;font-family: "DM Serif Display", serif;}
#newsBox .list .time {text-align: center;color: #999;margin-top: 20px;margin-bottom: 5vw;}

/* faqList */
#faqList li { margin-bottom: 10px; }
#faqList li .title { position: relative; padding: 10px 65px 10px 25px; background: url(/images/35/img-bodyBg.jpg); display: block; }
#faqList li .title font { color: #181818; }
#faqList li .title span { position: absolute; width: 16px; height: 16px; display: block; top: calc((100% - 16px) / 2); right: 25px; }
#faqList li .title span:before , #faqList li .title span:after { width: 16px; height: 1px; background: #696969; display: block; content: ""; -webkit-transform: translateY(9px); transform: translateY(9px); }
#faqList li .title span:after { -webkit-transform: translateY(8px) rotate(90deg); transform: translateY(8px) rotate(90deg); }
#faqList li .info { padding: 15px 25px; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }
#faqList li.current .title { background: url(/images/35/img-newsHBg.jpg); }
#faqList li.current .title font { color: #fff; }
#faqList li.current .title span:after { -webkit-transition-duration: .2s; transition-duration: .2s; -webkit-transform: translateY(8px) rotate(180deg); transform: translateY(180deg) rotate(0); }

#booklist ul{display:grid;grid-template-columns: repeat(3, 1fr);gap: 50px;margin-top: 80px;}
#booklist .people_item {outline: none;position: relative;}
#booklist .people_item >a.people_card{position:absolute;width: 100%;height: 100%;top: 0;z-index: 1;}
#booklist .people_item .time{position:absolute;display: flex;flex-direction: column;align-items: center;right: 20px;top: -20px;background: linear-gradient(135deg, var(--primary), var(--triadic2) 120%);color: white;line-height: 1;aspect-ratio: 1/1;font-size: 14px;gap: 3px;width: 80px;justify-content: center;}
#booklist .people_item .time *{color:white;line-height: 1;font-size: 36px;}
#booklist .people_item .h3tit{position:relative;z-index:6;display: block;}
#booklist .people_item .h3tit span{-webkit-line-clamp: 2;color: var(--info);font-weight: 500;background-image: linear-gradient(currentColor 1px, transparent 1px);background-repeat: no-repeat;background-size: 0% 1px;background-position: 0 100%;transition: background-size .3s cubic-bezier(.32,.72,0,1);font-size: 20px;line-height: 1.8;font-family: "Lora", serif;}
#booklist .people_item article{height:auto;color: #555;margin-top: 7px;-webkit-line-clamp: 1;letter-spacing: .15px;font-size: 14px;}
#booklist .people_item .people_img{margin-bottom:15px;}
#booklist .people_item .people_img img{aspect-ratio:4/3;object-fit: cover;width: 100%;}

/* album-info */
#album-info { display: flex; flex-wrap: wrap; }
#album-info >div { margin: 0 1px 1px 0; height: 300px; flex-grow: 1; }
#album-info >div a { display: block; }
#album-info >div img { width: auto; min-width: 100%; height: 300px; }

/* pagenav */
#pagenav {position: relative;overflow: hidden;margin-top: 40px;text-align: center;font-size: 0;}
#pagenav b, #pagenav a, #pagenav strong {margin: 0 10px;display: inline-block;font-weight: 400;font-size: 18px;color: #ababab;vertical-align: middle;}
#pagenav b, #pagenav a:hover{color:black}
#pagenav a i { position: relative; width: 70px; height: 1px; background: #1a191f; }
#pagenav a i:before { position: absolute; width: 0; height: 0; border-style: solid; border-width: 0 0 7px 13px; border-color: transparent transparent #16151b transparent; left: -1px; bottom: 50%; content: ""; }
#pagenav a:last-child i:before { border-width: 7px 0 0 13px; border-color: transparent transparent transparent #16151b; left: auto; right: -1px }
#pagenav a:first-child { padding: 0 0 0 10px; }
#pagenav a:last-child { padding: 0 10px 0 0; }
#pagenav a[class^="page-"] { float: left; width: calc(50% - 30px); }
#pagenav a[class^="page-"] i { margin: 0 5px; width: 45px; }
#pagenav a.page-next { float: right; text-align: right; }

/* newpagenav */
#newpagenav{margin-top: 70px;display: grid;grid-template-columns: repeat(2, 1fr);gap: 50px;position: relative;}
#newpagenav:before{content:'';position: absolute;left: 50%;width: 1px;height: 100%;background: #e3e3e3;}
#newpagenav p{margin:0;width: auto;}
#newpagenav a{margin:0;padding: 0;}
#newpagenav p a {margin: 15px 0 0;padding: 0;width: auto;height: auto;line-height: initial;font-size: 0;display: inline-flex;align-items: center;gap: 15px;}
#newpagenav p:last-child {text-align: end;}
#newpagenav i{width: 15px;font: normal normal normal 26px / 1 FontAwesome;color: var(--primary);}
#newpagenav font{-webkit-line-clamp:2;height: auto;font-size: 16px;max-width: max-content;font-weight: 400;}
#newpagenav a:hover font, #newpagenav a:hover i{color: #8f8c89;}
#newpagenav p:last-child font, #newpagenav p:last-child font span{text-align:end}
#newpagenav span{display:block;font-size: 15px;font-family: "Unbounded", sans-serif;color: var(--primary);}

/* form1 */
.searchbox{display:flex;flex-direction: row;align-items: center;gap: 20px;margin-bottom: 100px;flex-wrap: wrap;}
#form1, #form2 {display: flex;gap: 1.5em .5em;flex-direction: row;align-items: center;}
#form1 .tit{margin-right: 13px;font-weight: 600;font-size: 15px;color: #333;font-family: "Inter", sans-serif;}
#form1 p label { margin-bottom: 5px; display: block; color: #252647; }
#form1 p label b { margin-left: 5px; color: #ff575f; }
#form1 p input {padding: 5px 15px;border: 1px var(--info) solid;display: block;border-radius: 8px;font-size: 14px;background: var(--info);color: white;cursor: pointer;}
#form2 p input {padding: 5px 15px;display: block;border-radius: 8px;font-size: 14px;background: transparent;}
#form1 p select {padding: 10px 45px 10px 15px;width: 100%;-webkit-appearance: none;background: url(/images/35/arrow.png) no-repeat scroll 98% center #f9f9f9;background-repeat:no-repeat;background-position:98% 50%;border-radius: 8px;border: 1px var(--info) solid;color: var(--info);}
#form1 p input#Checknum { margin-right: 10px; width: 60px; display: inline-block; }
#form1 p.send { text-align: right; }
#form1 p.send a#btnOK { position: relative; padding: 15px 0; width: 150px; border: 1px #d20320 solid; display: inline-block; text-align: center; }
#form1 p.send a#btnOK font { position: relative; font-size: 18px; color: #0c0b19; z-index: 2; -webkit-transition-duration: .3s; transition-duration: .3s; }
#form1 p.send a#btnOK span { position: absolute; width: 60px; height: 1px; background: #000; display: block; right: -30px; top: calc((100% - 1px) / 2); z-index: 3; -webkit-transition-duration: .2s; transition-duration: .2s; }
#form1 p.send a#btnOK span:before { position: absolute; width: 0; height: 0; border-style: solid; border-width: 0 16px 7px 0; border-color: transparent transparent #0c0b19 transparent; right: -1px; bottom: 50%; content: ""; }
#form1 p.send a#btnOK:after { position: absolute; width: 0; height: 100%; background: #d20320; display: block; top: 0; left: 0; content: ""; z-index: 1; -webkit-transition-duration: .2s; transition-duration: .2s; }
#form2{border: 1px var(--info) solid;border-radius: 8px;padding-right: 10px;}
#form2 button{background:none;border: 0;cursor: pointer;}
#form2 svg{width: 18px;height: 18px;fill: #444;}

/* Sitemap */
#Sitemap .wrap { width: 100%; }

@media not (pointer:coarse){
	#newsBox li .text .h3tit:hover span, #booklist .people_item:hover .h3tit span{background-size: 100% 1px;}
}
@media screen and (min-width: 1281px){
	#listPage ul li:hover a.photo { -webkit-transform: translate(0) scale(1.2); transform: translate(0) scale(1.2); }
	#faqList li:hover .title { background: url(/images/35/img-newsHBg.jpg); }
	#faqList li:hover .title font , #form1 p.send a#btnOK:hover font { color: #fff; }
	#pagenav a:hover:first-child { padding: 0 10px 0 0; }
	#pagenav a:hover:last-child { padding: 0 0 0 10px; }
	#form1 p.send a#btnOK:hover span { right: -20px; }
	#form1 p.send a#btnOK:hover:after { width: 100%; }
}
@media screen and (max-width: 1280px){
	.wrap:before { width: 98vw; }
	#listPage ul li { margin: 15px 15px 15px 0; width: calc(50% - 17px); border: 1px #e8e8e8 solid; }
	#listPage ul li:nth-child(2n) { margin: 15px 0 15px 15px; }
	#listPage ul li h3 { position: relative; padding: 10px 20px; width: calc(100% - 40px); border-top: 1px #e8e8e8 solid; }
	#listPage ul li h3 a { height: 30px; text-align: center; -webkit-line-clamp: 1; }
}
@media screen and (max-width: 980px){
    #newsBox ul, #booklist ul{grid-template-columns: repeat(2, 1fr);}
	.wrap { padding: 8vw 0; }
	.wrap:before { width: 100%; top: 0; }
	#album-info >div , #album-info >div img { height: 40vw; }
	#pagenav { padding: 25px 0 20px; }
	#form1 p.send { text-align: center; }
}
@media screen and (min-width: 769px){
	#form1 p.large { grid-column: 1/3; }
	#form1 p.send { justify-content: flex-end; }
}
@media screen and (max-width: 640px){
    #newsBox .h2tit{font-size: 22px;letter-spacing: .5px;width: 100%;}
    #newsBox li .text article{margin-bottom: 20px;}
    .searchbox{gap:10px;}
    #form1 p select{padding: 10px 25px 10px 10px;}
    #form1{flex-wrap: wrap;gap: .5em;}
    #form1 .tit{width:100%;}
    #layoutnav{display:none;}
    #MenuContainer{gap: 15px;}
    #h1Box .txt h1{font-size:30px;}
    #h1Box #banner{height:300px;}
    #newsBox ul, #booklist ul{grid-template-columns: 1fr;}
	#listPage ul { text-align: center; }
	#listPage ul li , #listPage ul li:nth-child(2n) { margin: 15px 0; width: 90%; }
	#pagenav a , #pagenav strong { margin: 0 6px; font-size: 16px; }
	#pagenav a i { width: 30px; }
	#pagenav a i:before { border-width: 0 0 5px 10px; }
	#pagenav a:last-child i:before { border-width: 5px 0 0 10px; }
	#pagenav a:first-child , #pagenav a:last-child { padding: 0; }
}
@media screen and (max-width: 500px){
	#newsBox .list .time {font-size: 14px;}
	#newsBox .list .time font:first-child { position: absolute; padding-left: 66px; top: 2px; }
	#newsBox .list .time font:first-child:before { content: ","; }
	#album-info >div , #album-info >div img { height: 50vw; }
}