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

/* h1Box */
#h1Box { position: relative; }
#h1Box #banner { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
#h1Box #banner .sbanner { height: 100%; }
#h1Box .txt { position: relative; padding: 147px calc((100% - 1500px) / 2); margin: 0 auto; width: 1500px; background: rgba(255, 255, 255, .1); z-index: 2; }
#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 { margin-top: 10px; display: inline-block; line-height: 100%; color: #010101; vertical-align: text-bottom; }

/* wrap */
.wrap { position: relative; padding: 0 0 1vw; background: url(/images/35/img-bodyBg.jpg); z-index: 2; }
.wrap:before { position: absolute; width: 95vw; height: 100%; background: linear-gradient(to left, rgba(241,241,241,1) 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: 1vw 0 5vw; z-index: 2; }

/* waylink */
.waylink ol { font-size: 0; }
.waylink ol li { display: inline-block; font-size: 17px; font-weight: 300; color: #151429; }
.waylink ol li a { font-size: 17px; font-weight: 300; color: #d21a20; }
.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: 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 */
#content #newsBox .list { margin-bottom: 40px; }
#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: #d21a20; display: inline-block; color: #fff; vertical-align: middle; z-index: 2; }
#newsBox .list .info h3 font { height: 31px; display: -webkit-inline-box; font-weight: 400; font-size: 20px; color: #434343; -webkit-line-clamp: 1; }
#newsBox .list .info article { margin-top: 10px; height: 27px; font-weight: 300; font-size: 14px; color: #858585; -webkit-line-clamp: 1; }
#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 */
#album-info { -moz-column-count: 4; -moz-column-gap: 15px; -webkit-column-count: 4; -webkit-column-gap: 15px; column-count: 4; column-gap: 15px; }
#album-info .album_box { margin: 0 0 15px; }
#album-info .album_box a { display: block; }
#album-info .album_box a img { width: 100%; }

/* pagenav */
#pagenav { position: relative; overflow: hidden; padding: 20px 0; background: url(/images/35/img-bodyBg.jpg); 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 */
#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: #ff575f; }
#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 #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; }

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

@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.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){
	#h1Box .txt { padding: 159px 5%; width: 90%; }
	.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; }
	#album-info { -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; }
}
@media screen and (max-width: 980px){
	.wrap { padding: 8vw 0; }
	.wrap:before { width: 100%; top: 0; }
	#album-info { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; }
	#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; }
}
@media screen and (max-width: 640px){
	#h1Box .txt {background: rgba(0, 0, 0, .6);padding: 220px 5% 20px;}
	#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; }
	#form1 p.col-4 { width: calc(100% - 40px); }
	#h1Box .txt font{
    color: #ffffff;
    font-size: 30px;
}
#h1Box .txt h1{
    color: #d4d4d4;
    font-weight: normal;
    font-size: 20px;
    line-height: 150%;
}
}
@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 { -moz-column-count: 1; -webkit-column-count: 1; column-count: 1; }
}