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

#content { position: relative; background: #fbfbfb; }

#menubar #main-menu>ul>li>a p { color: currentColor; }

.inner-article { position: relative; z-index: 2; }

#innerPageStyle #translate h3 { display: block; position: fixed; bottom: 120px; right: 20px; z-index: 8; width: 40px; height: 40px; text-align: center; line-height: 20px; border-radius: 7px; color: #fff; cursor: pointer; padding: 5px 2px; }
#innerPageStyle #translate h3 i { display: none; }
#innerPageStyle #translate form { display: none; position: fixed; bottom: 122px; right: 75px; z-index: 8; text-align: center; line-height: 40px; color: #fff; border-radius: 7px; padding: 8px 10px; width: 250px; }
#innerPageStyle #translate form p { width: calc(100% - 100px); }
#innerPageStyle #translate #goSearch { text-align: center; height: 25px; padding: 3px 10px; color: #fff; line-height: 20px; float: right; font-size: 12px; letter-spacing: .1em; line-height: 25px; }
#innerPageStyle #translate #goSearch:hover { background: #e1224e; }
#innerPageStyle #translate form input { height: 27px; padding: 1px 5px; display: inline-block; float: left; line-height: 52px; width: calc(100% - 10px); line-height: 27px; }

#translate form h4 a i { font-size: 16px; }

#sub-banner img { width: 100%; }

.circleStyle, #essayList>div { background: -webkit-gradient(linear, left top, right top, color-stop(20%, #f93), color-stop(80%, #ff7166)); background: -webkit-linear-gradient(left, #f93 20%, #ff7166 80%); background: linear-gradient(90deg, #f93 20%, #ff7166 80%); }

#prolay .pro-list h4, #prolay .pro-list .p-border:hover .p-info h3, #bookBox .topic b, #NewsBox .topic .topic-title h2, #news li .readmore a { background-color: #f93; background: -webkit-gradient(linear, left top, right top, color-stop(20%, #f93), color-stop(80%, #ff7166)); background: -webkit-linear-gradient(left, #f93 20%, #ff7166 80%); background: linear-gradient(90deg, #f93 20%, #ff7166 80%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.topic { text-align: center; position: relative; padding: 70px 0; }
.topic .topic-title { display: inline-block; position: relative; z-index: 3; color: #333; }
.topic .topic-title h1, .topic .topic-title h2 { font-family: 'Rubik', sans-serif; text-align: center; line-height: 110%; }
.topic .topic-title p { text-align: center; font-size: 14px; line-height: 110%; margin-top: 7px; }
.topic b { font-family: 'Marck Script', cursive; position: absolute; z-index: 2; left: 0; width: 100%; height: 100%; display: block; top: 0; font-size: 170px; color: #eaeaea; line-height: 197px; text-align: center; font-style: italic; transform: rotate(-5deg); font-weight: 400; }

.circleStyle { position: absolute; display: block; z-index: 1; border-radius: 50%; }

.bobC.circleStyle { width: 50%; height: 90%; right: 0; top: 0; background-image: url(/images/18/dots.png); background-position: 50% 50%; z-index: 1; border-radius: 0; }

.same-btn { text-align: center; margin-top: 40px; }
.same-btn a { display: inline-block; background: #384250; color: #fff; font-size: 11pt; font-weight: 700; padding: 15px 45px; border-radius: 25px; transition: all linear .2s; }
.same-btn a:hover { opacity: .8; }

.content-wrraper { position: relative; }

.waylink ol { margin: 0; padding: 15px 10%; max-width: 30%; background: #37414f; text-align: left; display: inline-block; overflow: hidden; transform: translateY(-52px); }
.waylink ol li { display: inline-block; color: #a3a3a3; vertical-align: top; font-size: 12px; position: relative; padding-left: 13px; }
.waylink ol li:after { content: '>'; position: absolute; color: #d3d3d3; top: 0; left: 0; }
.waylink ol li:first-child { padding-left: 0; }
.waylink ol li:first-child:after { display: none; }
.waylink ol li a { color: #a3a3a3; font-weight: 400; font-size: 12px; }

.main-article .pagetitle { line-height: 100%; color: #4f4f4f; margin: 50px 0; border-left: 3px solid #ef6919; padding-left: 15px; }
.main-article #describe { color: #535353; font-size: 15px; }

#ssbanner-list .bxslider { overflow: hidden; }

#side-nav .side-title h2, #contact-nav h3, #ssbanner-list h3, #contact-extra h3 { font-size: 16px; line-height: 110%; color: #f1ccb7; margin-bottom: 20px; }
#side-nav .side-title h2 b { font-weight: 400; margin-left: 10px; color: #ef6919; }
#side-nav .Cate>li h3, #side-nav .Cate>li .subUL li .subULHead, #contact-nav ul li, #contact-extra ul li { overflow: hidden; position: relative; border-bottom: 1px solid #efefef; }
#contact-extra ul li { padding: 15px 0; text-align: left; }
#side-nav .Cate>li h3, #side-nav .Cate>li .subUL li .subULHead p { width: calc(100% - 25px); }
#side-nav .Cate>li>h3 { width: 100%; }
#side-nav .Cate>li h3 span { color: #adadad; margin-right: 8px; vertical-align: bottom; font-weight: 700; font-size: 20px; }
#side-nav .Cate>li h3 b, #side-nav .Cate>li .subUL li .subULHead b { color: #fa7b73; font-weight: 700; font-size: 20px; position: absolute; right: 0; top: 0; cursor: pointer; display: block; width: 50px; height: 53px; text-align: center; line-height: 53px; }
#side-nav .Cate>li h3 a, #side-nav .Cate>li .subUL li .subULHead p a, #side-nav .Cate>li .subUL li .sub2UL li .sub2ULHead p a, #contact-nav ul li a { padding: 15px 0; }
#side-nav .Cate li a, #contact-nav ul li a { font-size: 15px; display: block; color: #6e6e6e; transition: all linear .2s; }
#side-nav .Cate li a:hover, #side-nav .Cate li.action a, #contact-nav ul li a:hover { color: #ef6919; }
#side-nav .Cate li ul { overflow: hidden; display: none; }
#side-nav .Cate li.action>ul { display: block; }
#side-nav .Cate>li .subUL li .subULHead p a { padding-left: 20px; color: #6e6e6e; }
#side-nav .Cate>li .subUL li.action .subULHead p a { color: #f38060; }
#side-nav .Cate>li .subUL li .subULHead b { color: #d3d3d3; }
#side-nav .Cate>li .subUL li .sub2UL li .sub2ULHead p a { padding-left: 35px; border-bottom: 1px solid #efefef; color: #6e6e6e; }
#side-nav .Cate>li .subUL li .sub2UL li.action .sub2ULHead p a { background: #ededed; }

#ssbanner-list .bxslider div a { background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; background-color: #f6fcfd; display: block; transition: all ease-in-out .3s; width: 100%; height: 100%; }
#ssbanner-list .bxslider div a img { width: 100%; }
#ssbanner-list, #side-nav #fb-wrap, #side-nav #g-map, #side-nav #youtube, #side-nav #contact-nav, #side-nav #contact-extra { margin-top: 50px; text-align: center; }

#side-nav #youtube { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
#side-nav #youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#side-nav #contact-nav ul li a { text-align: left; }
#side-nav #contact-nav ul li a i { margin-right: 5px; }

#g-map iframe { width: 100%; height: 450px; }

#community { margin: 50px 0; }
#community li { float: left; margin: 0 5px 5px 0; line-height: 0; }

#innerPageStyle #pagenav { margin: 55px 0; position: relative; z-index: 2; }

@media screen and (max-width: 1366px) {
	.inside { width: 90%; }
}
@media screen and (min-width: 1281px) {
	#innerPageStyle header { background: #fff; padding: 40px 50px; }
	#innerPageStyle header #cis { overflow: hidden; }
	#innerPageStyle header #cis img { height: 50px; width: auto; }
	#innerPageStyle header #rightTool, #innerPageStyle header #rightTool .toolboxer { height: auto; }
	#innerPageStyle header #rightTool { position: initial; border: 0; float: right; margin-top: 13px; }
	#innerPageStyle header #rightTool .toolboxer p { width: auto; padding: 0; display: inline-block; vertical-align: top; margin-left: 15px; }
	#innerPageStyle header #rightTool .toolboxer p:last-child { position: initial; }
	#innerPageStyle header #rightTool .toolboxer p a { color: #000; font-size: 16px; }
}
@media screen and (min-width: 1025px) {
	#ssbanner-list .bxslider>div:nth-child(2n) a { background-color: #f7f4f8; }
	#album li:nth-child(2n), #prolay .pro-list>div:nth-child(3n-1) .p-box, #newslist li:nth-child(2n) { animation-duration: .5s; }
}
@media screen and (max-width: 1024px) {
	.main-article { width: 100%; }
	#ssbanner-list .bxslider div { width: 50%; float: left; }
	#ssbanner-list .bxslider>div:nth-child(2) a, #ssbanner-list .bxslider>div:nth-child(3) a { background-color: #f0f0f0; }
	#content { background: rgba(255, 255, 255, 0.7); }
	#sub-banner { margin-top: 107px; }
}
@media screen and (max-width: 980px) {
	.topic b { font-size: 120px; }
}
@media screen and (max-width: 768px) {
	.topic b { font-size: 100px; }
}
@media screen and (min-width: 641px) {
	#side-nav { transition: all linear .3s; position: fixed; right: 25px; bottom: 190px; z-index: 3; text-align: right; width: 40px; height: 40px; }
	#side-nav.over { width: 400px; height: 385px; }
	#sideController { transition: all linear .3s; display: inline-block; vertical-align: top; font-size: 17px; background: #ef6919; color: #fff; font-weight: 700; border-radius: 7px; width: 40px; height: 40px; text-align: center; line-height: 20px; padding: 5px 2px; cursor: pointer; }
	.over #sideController { background: none; color: #ef6919; border-bottom: 1px solid #efdf19; border-radius: 0; width: auto; height: auto; padding: 7px 10px; }
	#side-nav .bob { transition: all linear .3s; opacity: 0; height: calc(100% - 60px); overflow-y: auto; padding: 30px; background: #fff; box-shadow: -1px 2px 5px rgba(0, 0, 0, 0.12); transform: translateX(100%); overflow-x: hidden; width: calc(100% - 60px); }
	#side-nav .bob ::selection { background: #8f8f8f; color: #fff; }
	#side-nav .bob::-webkit-scrollbar { width: 5px; }
	#side-nav .bob::-webkit-scrollbar-track { background: #ffe5b8; }
	#side-nav .bob::-webkit-scrollbar-thumb { background: #ef6919; }
	#side-nav .bob::-webkit-scrollbar-thumb:hover { background: #ae4405; }
	#side-nav.over .bob { opacity: 1; transform: translateX(0); }
}
@media screen and (max-width: 640px) {
	.inside { margin: 20px auto; }
	.main-article .pagetitle { font-size: 30px; }
	.waylink ol li, .waylink ol li a, .waylink ol li .h3, .waylink ol li:after { font-size: 8pt; }
	#innerPageStyle #translate h3 { right: 10px; }
	#innerPageStyle #translate form { right: 65px; }
	#sideController { display: none; }
	#side-nav { position: relative; z-index: 1; }
	.waylink ol { padding: 10px 10%; max-width: 80%; transform: none; display: block; z-index: 2; position: relative; }
}
@media screen and (max-width: 480px) {
	.main-article .pagetitle { margin-bottom: 20px; }
	.topic b { font-size: 70px; }
}