@import url('/css/community.css');
input, button, textarea{padding: 15px 20px;width: calc(100% - 42px);}

/* h1Box */
#h1Box {position: relative;z-index: 0;}
#h1Box #banner { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
#h1Box #banner:after {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    content: "";
    opacity: .6;
    background-color: rgb(0 0 0 / 40%);
}
#h1Box #banner .sbanner {height: 100%;background-position: 50% 60%;}
#h1Box .txt {position: relative;padding: 240px calc((100% - 1400px) / 2) 190px;margin: 0 auto;width: 1400px;background: rgb(41 41 41 / 10%);z-index: 2;text-align: center;}
#h1Box .txt font {text-align: center;line-height: 100%;font-size: 35px;color: #ffffff;margin-bottom: 2px;font-weight: 500;letter-spacing: 3px;position: relative;}
#h1Box .txt font::after {
    content: "";
    width: 30px;
    height: 2px;
    display: block;
    background-color: #ffffff;
    position: absolute;
    bottom: -20px;
    right: calc(50% - 13px);
}
#h1Box .txt h1 {margin-top: 10px;display: inline-block;line-height: 100%;color: #010101;vertical-align: text-bottom;display: none;}

/* wrap */
.wrap {position: relative;padding: 0 0 1vw;background: #fff;z-index: 0;}
.wrap:before {position: absolute;width: 95vw;height: 100%;background: linear-gradient(to left, rgb(255 255 255) 0%,rgba(255,255,255,1) 100%);box-shadow: -4px 4px 15px rgba(26, 26, 51, 0.2);top: -45px;right: 0;content: "";z-index: 1;}
.wrap .workframe {padding: 0vw 0px 3vw;z-index: 2;}

/* waylink */
.waylink ol {font-size: 0;text-align: center;}
.waylink ol li {display: inline-block;font-size: 17px;font-weight: 500;color: #151429;}
.waylink ol li a {font-size: 17px;color: #ababab;font-weight: 500;}
.waylink ol li a:after { margin: 0 15px; display: inline-block; color: #151429; content: ">"; }
.waylink ol li:last-child a { color: #222; }
.waylink ol li:last-child a:after { content: ""; }

/* sideNav */
#sideNav {position: relative;margin: 10px 0 10px;text-align: right;z-index: 2;}
#sideNav #sideBtn {position: relative;overflow: hidden;padding: 10px 20px;width: 240px;background: #2f2f31;border: 1px #2f2f31 solid;display: inline-block;color: #fff;z-index: 2;display: none;}
#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;display: block;padding: 0;position: relative;text-align: center;z-index: 4;}
#sideNav >ul.open { padding: 5px 0; height: auto; top: 52px; }
#sideNav >ul >li {overflow: hidden;display: inline-block;position: relative;padding: 0;}
#sideNav >ul >li h3 {position: relative;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 {background: #f6f6f6;color: #0e0e0e;height: 35px;line-height: 35px;border-color: #eee;position: relative;top: 0;z-index: 1;display: inline-block;width: 140px;padding-top: 10px;padding-bottom: 10px;outline: none;text-align: center;text-transform: uppercase;letter-spacing: 0.2px;overflow: hidden;font-weight: 500;font-size: 15px;}
#sideNav ul a:hover{color: #fff;}
#sideNav ul a:hover::before {height: 100%;top: auto;bottom: 0;color: #fff;}
#sideNav ul a::before {content: '';position: absolute;top: 0;right: 0;z-index: -1;width: 100%;height: 0;background-color: #fe7921;transition-duration: .3s;}
#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: #ffffff;background: #1c1e21;}
.moreBtn:hover::before {height: 100%;top: auto;bottom: 0;}


.contentMain{
    padding: 30px 0 40px;
}
/* listPage */
#listPage ul {font-size: 0;flex-wrap: wrap;}
#listPage ul li {position: relative;overflow: hidden;margin: 30px 10px;width: 440px;display: inline-block;}
#listPage ul li h3 {width: calc(100% - 0px);background: #f0f0f0;right: 0;bottom: 0;}
#listPage ul li h3 a {height: 40px;font-weight: 400;font-size: 18px;color: #434343;-webkit-line-clamp: 2;padding: 20px 10px;text-align: center;vertical-align: super;display: flex;align-items: center;justify-content: center;}



.bookList #listPage{
    background-color: #f6f6f6;
    padding: 30px 50px;
}
.bookList #listPage ul{
    display: flex;
    flex-wrap: wrap;
}
.bookList #listPage ul li{
    width: calc((100% / 3) - 22px);
    margin: 20px 10px;
    border: 1px #e8e8e8 solid;
}
.bookList #listPage ul li h3{
    background: #ffffff;
}

/* newsBox */
#content #newsBox .list {margin-bottom: 40px;padding: 15px 0;}
#newsBox .list { position: relative; padding: 15px; border-bottom: 1px solid #E4E2E2; font-size: 0; }
#newsBox .list a.link { position: absolute; width: 100%; height: 100%; display: block; top: 0; left: 0; }
#newsBox .list .time font { text-align: center; color: #151429; }
#newsBox .list .info h3 { font-weight: 300; }
#newsBox .list .info h3 a.cat { position: relative; margin-right: 10px; padding: 2px 10px; background: #fe7921; display: inline-block; color: #fff; vertical-align: middle; z-index: 2; }
#newsBox .list .info h3 font {height: auto;display: -webkit-inline-box;font-weight: 400;font-size: 19px;color: #434343;-webkit-line-clamp: 2;}
#newsBox .list .info article {margin-top: 10px;height: 27px;font-weight: 300;font-size: 14px;color: #858585;-webkit-line-clamp: 1;margin: 10px 0px;}
#newsBox .list .info article * { font-weight: 300; font-size: 14px; color: #858585; }
#newsBox ul li:last-child { border-bottom: 0; }

/* 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); }

/* album-info */
#content{position: relative;overflow: hidden;display: block;z-index: 1;padding: 0px 0;}
#album-info {margin: 10px;vertical-align: top;overflow: hidden;position: relative;box-sizing: border-box;}
#album-info .album_box {margin: 10px;display: inline-block;vertical-align: top;overflow: hidden;}
#album-info .album_box a {display: block;}
#album-info .album_box a img { width: 100%; }
#album-info .album_box a p{color: #000;padding: 10px 0;}
#album-info {flex-wrap: wrap;display: grid;grid-template-columns: repeat(4, 1fr);margin-bottom: 30px;}

/* pagenav */
#pagenav {position: relative;overflow: hidden;padding: 40px 0 20px 0;text-align: center;font-size: 0;}
#pagenav a , #pagenav strong { margin: 0 10px; display: inline-block; font-weight: 400; font-size: 18px; color: #1a191f; vertical-align: middle; }
#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; }

/* form1 */
.wrap .workframe .contentMain article{margin: 10px 20px;}
#form1 { font-size: 0; }
#form1 p { margin: 10px 20px; width: calc(100% - 40px); display: inline-block; vertical-align: text-bottom; }
#form1 p.col-2 { width: calc(50% - 40px); }
#form1 p.col-3 { width: calc((100% / 3) - 40px); }
#form1 p.col-4 { width: calc(25% - 40px); }
#form1 p label { margin-bottom: 5px; display: block; color: #252647; }
#form1 p label b { margin-left: 5px; color: #fe7921; }
#form1 p input , #form1 select , #form1 textarea { padding: 5px 15px; width: calc(100% - 34px); border: 1px #adadad solid; display: block; }
#form1 p select { padding: 10px 15px; width: 100%; }
#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 #cacaca 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: #fe7921;display: block;top: 0;left: 0;content: "";z-index: 1;-webkit-transition-duration: .2s;transition-duration: .2s;}

/* form_box */
.form_box p {margin-bottom: 25px;}
.form_box p.note { margin-bottom: 50px; }
.form_box p #btnOK { width: 150px; }
select{padding: 20px;-webkit-appearance: none;background: url(/images/35/arrow.png) no-repeat scroll 99% center transparent;background-repeat: no-repeat;background-position: 97% 50%;}
input, button, textarea{padding: 15px 20px;width: calc(100% - 42px);}
input#Checknum { width: 170px;}

/* video */
.video-container{position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden;}
.video-container iframe,.video-container object,.video-container embed{position:absolute;top:0;left:0;width:100%;height:100%;}



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

/* gmap */
#gmap iframe{width:100%;height:350px;padding: 20px 0;}

@media screen and (max-width: 1680px){
	#h1Box .txt { padding: 159px calc((100% - 1300px) / 2); width: 1300px; }
}
@media screen and (max-width: 1440px){
	#h1Box .txt { padding: 159px calc((100% - 1100px) / 2); width: 1100px; }
}
@media screen and (min-width: 1281px){
	#listPage ul li:hover a.photo {-webkit-transform: translate(0) scale(1.1);transform: translate(0) scale(1.1);}
	#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){
	#h1Box .txt { padding: 159px 5%; width: 90%; }
	.wrap:before {width: 98vw;z-index: 0;}
	#listPage ul li { margin: 15px 15px 15px 0; width: calc(50% - 17px); border: 1px #e8e8e8 solid; }
	.bookList #listPage ul li {width: calc((100% / 2) - 22px);}
	#listPage ul li h3 {position: relative;border-top: 1px #e8e8e8 solid;}
	#listPage ul li h3 a {text-align: center;padding: 10px;height: 50px;font-size: 16px;}
	#album-info {
    grid-template-columns: repeat(3, 1fr);
}
	.bookList #listPage{
    padding: 20px 20px;
}
}
@media screen and (max-width: 980px){
	.wrap {padding: 2vw 0;}
	.wrap:before { width: 100%; top: 0; }
	.contentMain {
    padding: 50px 0 10px;
}
	#album-info {
    grid-template-columns: repeat(2, 1fr);
}
	#pagenav { padding: 25px 0 20px; }
	#form1 p.col-2 , #form1 p.col-3 { width: calc(100% - 40px); }
	#form1 p.col-4 { width: calc(50% - 40px); }
	#form1 p.send { text-align: center; }
	#sideNav {position: relative;margin: 0px 0 10px;text-align: right;z-index: 22;}
	#sideNav #sideBtn {position: relative;overflow: hidden;padding: 10px 20px;width: 240px;background: #2f2f31;border: 1px #2f2f31 solid;display: inline-block;color: #fff;z-index: 2;}
	#sideNav #sideBtn:before {position: absolute;width: 0;height: 100%;background: #2f2f31;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-color: #2f2f31;border: 1px #393842 solid;top: 0;right: 0;z-index: 8;}
	#sideNav >ul.open { padding: 5px 0; height: auto; top: 52px; }
	#sideNav >ul >li {position: relative;overflow: hidden;display: block;}
	#sideNav >ul >li h3 {position: relative;z-index: 2;}
	#sideNav ul li b[data-action="sideOpen"] {position: absolute;padding: 5px 20px;display: block;color: #2f2f31;right: 0;top: 0;cursor: pointer;}
	#sideNav ul li b[data-action="sideOpen"] i:before { content: "\f067"; }
	#sideNav ul a {display: block;font-weight: 400;color: #828282;width: 100%;background: rgb(255 255 255 / 0%);border-color: rgb(255 255 255 / 0%);text-align: left;padding: 2px 20px;border: 0px solid currentColor;}
	#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;width: 100%;border: 0px solid currentColor;background: rgb(255 255 255 / 0%);text-align: left;padding: 5px 20px;}
	#h1Box .txt font{font-size: 20px;}

	#content{
    padding: 0px 0 20px 0;
}
}
@media screen and (max-width: 640px){
	#h1Box .txt {background: rgba(0, 0, 0, .6);padding: 90px 5%;}
	#listPage ul { text-align: center; }
	.bookList #listPage ul li {
    width: calc((100% / 1) - 2px);
    margin: 20px 0px;
}
	#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; }
	#form1 p.col-4 { width: calc(100% - 40px); }
.contentMain{
    padding: 30px 0 0;
}
}
@media screen and (min-width: 501px){
	#newsBox .list .row { width: calc(100% - 132px); display: inline-block; }
	#newsBox .list .time { margin-right: 30px; padding: 5px 10px; width: 80px; border: 1px #e6e6e6 solid; }
	#newsBox .list .time font { display: block; }
	#newsBox .list .time font:first-child { line-height: 130%; font-size: 30px; }
}
@media screen and (max-width: 500px){
	#newsBox .list .time { position: relative; margin-bottom: 5px; }
	#newsBox .list .time font:first-child { position: absolute; padding-left: 66px; top: 2px; }
	#newsBox .list .time font:first-child:before { content: ","; }
	#album-info {
    grid-template-columns: repeat(1, 1fr);
    margin-bottom: 0px;
}
}