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

/* h1Box */
#h1Box {position: relative;padding-top: 40px;}
#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;text-align: center;}
#h1Box .txt font {display: inline-block;line-height: 100%;font-weight: 600;font-size: 36px;color: #ffffff;vertical-align: text-bottom;text-shadow: 2px 3px 8px #4d4d4df2;}
#h1Box .txt h1 {margin-top: 10px;display: inline-block;line-height: 100%;color: #ffffff;vertical-align: text-bottom;}

/* wrap */
.wrap {position: relative;padding: 0 0 4vw;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 a:hover{
    color: #fff;
}
#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; }

.contentMain{
    margin-top: 15px;
}
/* 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; }


footer2{
    margin-top: 60px;
}

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

ul.ac_ul {
    list-style-type: none;
    padding: 0;
    margin-left: 100px;
  }
  ul.ac_ul li {
    position: relative;
    font-size: 25px;
    margin-bottom: 8px;
    padding-left: 40px;
  }
  ul.ac_ul li::before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #000;
    position: absolute;
    left: 0;
    top: 15px;
  }

  ul.po_ul {
    list-style-type: none;
    padding: 0;
    
  }
  ul.po_ul li {
    position: relative;
    font-size: 16px;
    margin-bottom: 8px;
    padding-left: 22px;
  }
  ul.po_ul li::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #000;
    position: absolute;
    left: 0;
    top: 9px;
  }

@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: 135px 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{padding-top:0;}
	#h1Box .txt {padding-top: 160px;padding-bottom: 100px;}
	#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); }
	ul.ac_ul {
        margin-left: 30px;
    }
}
@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 {display: flex;position: relative;margin-bottom: 5px;align-items: center;}
	#newsBox .list .time font:first-child {position: relative;order: 2;}
	#newsBox .list .time font{
	    display: flex;
	    order: 1;
	    letter-spacing: 0.05em;
	}
	#newsBox .list .time font:first-child:before { content: ","; padding-right: 5px;}
	#album-info { -moz-column-count: 1; -webkit-column-count: 1; column-count: 1; }
		.waylink ol li a{font-size:13px}
		.waylink ol li{font-size:13px}
	#newsBox .list .info h3 a.cat{
	    margin-bottom: 7px;
	    padding: 3px 25px;
	}
	#newsBox .list .info article{
	    display: none;
	}
	#newsBox .list .info h3 font{
    -webkit-line-clamp: unset;
    height: auto;
}
	}