@import url('/css/community.css');
.wow {animation-name: fadeInDown;-webkit-animation-name: fadeInDown;animation-duration: 1.5s;-webkit-animation-duration: 1.5s;animation-fill-mode: both;-webkit-animation-fill-mode: both;animation-duration: 1s;-webkit-animation-duration: 1s;	}
#community{display: none;}

/* sbanner */
#sbanner {position: relative;z-index: 1;}
#sbanner a {position: relative;height: 60vh;z-index: 1;}
#sbanner:before , #sbanner:after {position: absolute;width: 100%;height: 100%;background: #ffffff;top: 0;left: 0;z-index: 1;content: "";opacity: .6;}
#sbanner:after {background: -webkit-linear-gradient(bottom,rgb(255 255 255 / 44%), rgb(255 255 255 / 0%));opacity: 1;}

/* wrap */
.wrap  {position: relative;margin-bottom: 6vh;margin-top: -350px;z-index: 2;width: 82%;}
.wrap h1 { line-height: 150%; }
.webBox .wrapper{background-color: #f8f8f8;background-image: url(/images/00/img-bg-circle.svg);background-repeat: no-repeat;background-size: cover;background-position: center;}
.subtitle{margin: 3vh 0 11vh 0;}
.bgTxt.title{z-index: 10;display: flex;flex-direction: column;align-items: flex-start;}
.bgTxt.title img{width: 190px;}
.bgTxt.title h3{display: flex;flex-direction: column;align-items: flex-start;margin: 10px 0 0;color: rgb(56 54 54);font-size: 30px;font-weight: 600;line-height: 140%;}
.bgTxt.title h3 span{font-size: 26px;font-weight: 400;}

/* waylink */
.waylink {display: inline-block;width: 100%;z-index: 3;}
.waylink ol {font-size: 0;text-align: right;padding: 8px 0;}
.waylink ol li {display: inline-block;color: #717171;font-size: 14px;}
.waylink ol li a {color: #8e8e8e;font-size: 14px;}
.waylink ol li:after {margin: 0 5px;display: inline-block;color: #8e8e8e;content: "/";}
.waylink ol li:last-child {color: #616161;}
.waylink ol li:last-child:after { content: ""; }

/* contentMain */
.contentMain {position: relative;margin-top: 20px;}

#artlsit{margin: 20px auto;width: 90%;}
.pageTop{position: relative;margin-bottom: 30px;}
.pageTop h2{text-align: center;font-size: 28px;font-weight: 500;letter-spacing: 0.5px;color: #525252;}
.pageTop .line {width: 1px;height: 40px;margin: auto;background-color: #e4e4e4;-webkit-animation-delay: 1s;animation-delay: 1s;margin-bottom: 10px;}
.pageTop p{text-align: center;}
.pageTop p img{width: 45px;}


/* sideNav */
#sideNav ul.Cate{text-align: start;}
#sideNav ul.Cate::before {content: "";position: absolute;top: -5px;left: 0;transform: translate(-2%, 0);width: 160%;height: 80px;background: #ffffff;padding: 0px 0;box-shadow: 0px 0px 30px 0.4px rgb(149 149 149 / 12%);-webkit-border-top-left-radius: 50px;-moz-border-radius-topleft: 50px;border-top-left-radius: 50px;}
#sideNav #sideMenu {width: 95%;margin: 0 auto;margin-top: 28px;padding: 8px 20px;display: none;font-size: 18px;color: #fff;background: #ffffff;border-radius: 7px;box-shadow: 0px 0px 30px 0.4px rgb(149 149 149 / 12%);}
#sideNav #sideMenu font , #sideNav #sideMenu span {margin-right: 15px;display: inline-block;vertical-align: middle;}
#sideNav #sideMenu span i {margin: 2px 0;width: 3px;height: 3px;background: #bfbfbf;border-radius: 50%;display: block;-webkit-transition: all 0.5s ease;transition: all 0.5s ease;}
#sideNav #sideMenu span.open i:nth-child(2) { margin: 2px 5px; }
.catBox {position: relative;z-index: 2;}
.fixTop { position: fixed; width: 1420px; top: -15px; }
.fixTop.showheader { top: 50px; }
#sideNav >ul >li {position: relative;display: inline-block;}
#sideNav >ul >li.action >h3 a:after{width: 100%;}
#sideNav >ul >li.action >h3 a{color: #ff8f43;}
#sideNav >ul >li >h3 {display: block;}
#sideNav >ul >li >h3 a {display: inline-block;color: #000000;padding: 20px 25px;font-weight: 400;}
#sideNav >ul >li >h3 a:after {content: '';position: absolute;bottom: -6px;left: 0;right: 0;margin: auto;width: 0;height: 3px;background-color: #ff8f43;-webkit-transition: all .5s;-o-transition: all .5s;transition: all .5s;}
#sideNav >ul >li:hover >h3 a{ color: #ff8f43;}
#sideNav >ul >li:hover >h3 a:after{width: 100%;}
#sideNav >ul >li b[data-action="sideOpen"] { display: none; }
#sideNav >ul >li >ul.subUL {position: absolute;left: calc(0% - 0px);width: 170px;height: 0;background: #ffffff;opacity: 0;top: 73px;box-shadow: 0px 0px 30px 0.4px rgb(99 99 99 / 12%);text-align: right;overflow: visible;}
#sideNav >ul >li:hover >ul.subUL {height: auto;opacity: 1;}
#sideNav >ul >li >ul.subUL li a {display: block;text-align: left;padding: 10px 20px;color: #3a3a3a;}
#sideNav >ul >li >ul.subUL li a:hover, #sideNav >ul >li:hover >ul.subUL .action a {background: #ff8f43;color: #ffffff;}
#sideNav >ul >li >ul.subUL li ul.sub2UL {background: #ff8f43; }
#sideNav >ul >li:hover >ul.subUL .action{}


/* content */
#content .articlebar {margin: 13px 0 0px;}
#content .articlebar font{font-size: 16px;color: #a3a3a3;}
#content .articlebar font i{vertical-align: initial;color: #a3a3a3;margin-right: 10px;}
#content h1{text-align: left;border-bottom: 1px solid #d6d6d6;color: #303030;-webkit-line-clamp: 1;margin-bottom: 2vw;font-weight: 400;padding-bottom: 10px;font-size: 24px;}
#content #describe{ width: 90%; margin: 0 auto}

/* faqList */
#faqList li {margin-bottom: 10px;}
#faqList li .title {position: relative;padding: 5px 65px 15px 25px;display: block;}
#faqList li .title font {color: #686868;}
#faqList li .title span {position: absolute;width: 17px;height: 17px;display: block;top: calc((100% - 30px) / 2);right: 25px;background: #f1b993;border-radius: 5px;padding: 2px 0px 3px 6px;}
#faqList li .title span:before , #faqList li .title span:after {width: 12px;height: 1px;background: #ffffff;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: 0px 50px 20px;color: #686868;font-size: 14px;line-height: 1.8;-webkit-transition: none;-moz-transition: none;-ms-transition: none;-o-transition: none;transition: none;}
#faqList li.current .title span:after { -webkit-transition-duration: .2s; transition-duration: .2s; -webkit-transform: translateY(8px) rotate(180deg); transform: translateY(180deg) rotate(0); }

/* page-control */
#page-control{padding: 8vh 0 0;display: flex;justify-content: space-between;}
#page-control a {position: initial;bottom: 58px;font-size: 14px;color: #f59555;border: 1px solid #f1b993;padding: 5px 15px;vertical-align: middle;border-radius: 5px;}
#page-control a.page-prev{left: 0;}
#page-control a.page-next{right: 0;}
#page-control a font{color: #645043;font-size: 12px;vertical-align: top;vertical-align: baseline;}
#page-control a:hover {background: hsl(25deg 67% 84% / 32%);color: #645043;}

/* pagenav */
#pagenav { margin: 30px 0 0; text-align: center; }
#pagenav a , #pagenav strong {width: 35px;height: 35px;display: inline-block;text-align: center;line-height: 31px;font-size: 15px;color: #808080;vertical-align: middle;border: 1px solid #d8d8d8;margin-left: 10px;}
#pagenav a { opacity: .5; }

/* community */
#community li { margin-right: 5px; }
#community li , #community li * { line-height: 100%; }
#community li .fb_iframe_widget { display: block !important; }


/* form1 */
#form1 {font-size: 0;display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;}
#form1 p {margin: 10px 8px;width: calc(100% - 20px);display: inline-block;vertical-align: text-bottom;}
#form1 p.col-2 {width: calc(50% - 20px);}
#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: #6d6d6d;}
#form1 p label b { margin-left: 5px; color: #ff8f43; }
#form1 p input , #form1 select , #form1 textarea {padding: 5px 15px;border: 1px #e4e4e4 solid;display: block;}
#form1 p select { padding: 10px 15px; width: 100%; }
#form1 p input#Checknum {margin-right: 10px;width: 120px;display: inline-block;}
#form1 p.send {display: flex;width: 210px;height: 50px;border: 1px solid #e7a06f;background: #f1b993;padding: 2px 13px;align-items: center;justify-content: flex-start;}
#form1 p.send a{color: #fff;}
a.dance.orange{transition: all linear .3s;display: flex;padding: 10px 10px;background-color: #ea8e4f;font-size: 12pt;color: #ffffff;position: relative;z-index: 1;justify-content: center;width: 250px;align-items: center;flex-direction: row;}
a.dance.orange:before {content: "";position: absolute;top: 0;width: 0%;height: 100%;background-color: #827267;z-index: -1;-webkit-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;overflow: hidden;}
a.dance.orange b img{width: 30px;margin-right: 10px;}
ul.process_m{margin: 30px 0 0px;text-align: center;}
ul.process_m .btn {width: 210px;line-height: 50px;font-size: 14px;font-weight: 400;color: #261714;padding: 0;display: inline-block;}
ul.process_m .btn a{color: #242424;font-size: 14px;display: block;text-align: center;padding: 10px 0px;-webkit-animation-delay: .7s;animation-delay: .7s;-webkit-animation: fsUp .8s ease-out both;animation: fsUp .8s ease-out both;position: relative;border: 1px solid #d0d0d0;}ul.process_m .btn a i{font-size: 15px;margin-right: 17px;color: #242424;}

ul.process_m .btn:hover a::before {height: 100%;top: auto;bottom: 0;}
ul.process_m .btn a::before {content: '';position: absolute;top: 0;right: 0;z-index: -1;width: 100%;height: 0;background-color: #569855;transition-duration: .3s;}
ul.process_m .btn:hover a,ul.process_m .btn:hover a i{color: #ffffff;}

@media screen and (max-width: 1580px) {
	.wrap{width: 78%;}
}
@media screen and (min-width: 1281px) {	
	.webBox .wrapper{background-attachment: fixed;}
	#sideNav >ul >li:before {content: '';position: absolute;left: -2px;top: 50%;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);width: 1px;height: 16px;background-color: #dfdfdf;}
	#sideNav >ul >li:first-child:before{display: none;}
	a.dance.orange:hover:before {width: 100%;}
}
@media screen and (max-width: 1280px) {
	.waylink {top: 95px;}
	.wrap {margin-top: -32vh;width: 82%;}
}
@media screen and (max-width: 1140px) {
	.wrap {margin-top: -40vh;width: 90%;margin-bottom: 1vh;}
	.bgTxt.title h3{font-size: 29px;}
	.bgTxt.title h3 span{font-size: 21px;}
	.subtitle {margin: 0vh 0 8vh 0;}
}
@media screen and (max-width: 980px) {
	#sideNav #sideMenu { display: block; }
	#sideNav >ul.open>li >h3 a{width: 80%;padding: 12px 12px 12px 50px;border: none;color: #505050;}
	#sideNav >ul {position: relative;overflow: hidden;width: 95%;margin: 0 auto;height: 0;background: #ffffff;box-shadow: 0 7px 15px rgb(232 232 232 / 44%);opacity: 0;left: 0;}
	#sideNav >ul.open {height: auto;opacity: 1;z-index: 1;}
	#sideNav >ul >li {display: block;border: 0.5px solid rgb(144 144 144 / 23%);border-radius: 5px;}
	#sideNav >ul >li.action{background: rgb(197 197 197 / 20%);}
	#sideNav >ul >li >h3 a:hover{ background: none; color: #f1b993;}
	#sideNav >ul >li >ul.subUL {position: relative;width: 100%;left: 30px; padding: 2vh 0 3vh; background: none;-webkit-transition: none;transition: none; height: auto; display: none;}
	#sideNav >ul >li.action >ul.subUL {height: auto;opacity: 1;transition: none;}
	#sideNav >ul >li >ul.subUL li a {text-align: left;color: #f1b993;}
	#sideNav >ul >li >ul.subUL li .subULHead p {display: inline-block; }
	#sideNav >ul >li b[data-action="sideOpen"] {padding: 9px 16px 9px 0;display: inline-block;color: #f1b993;float: right;}
	#sideNav >ul >li >ul.subUL li ul.sub2UL { overflow: hidden; height: 0; border-bottom: 0; opacity: 0; }
	#sideNav >ul >li >ul.subUL li.action ul.sub2UL {height: auto;opacity: 1;background: none;margin-left: 30px;}
	#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; }
	.pageTop{margin-top: 10px;margin-bottom: 10px;}
	.pageTop h2{font-size: 22px;}
	.pageTop .line{height: 30px;}
	#sideNav >ul >li >h3 a:after{bottom: 0;}
}
@media screen and (max-width: 768px) {
    #page-control a {position: relative;width: 90%;display: inline-block;margin-bottom: 20px;max-height: initial;overflow: hidden;-webkit-line-clamp: 1;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;}
    #page-control a.page-prev{ text-align: left}
    #page-control a.page-next{text-align: right}
	.bgTxt.title h3{font-size: 18px;}
	.bgTxt.title h3 span{font-size: 16px;}
	#artlsit{margin: 0px auto;width: 100%;}
	#sbanner a{background-size: cover;background-position: 10% 50%;}
}
@media screen and (max-width: 640px) {
	#form1 p.col-4 { width: calc(100% - 40px); }
	#community { margin-top: 10px; }
	ul.process_m .btn{width: 210px;}
	.subtitle {margin: 0vh 0 4vh 0;}
	.waylink ol li a,.waylink ol li{font-size: 13px;}
	.waylink ol{padding: 4px 0;}
	.pageTop .line{display: none;}
	ul.process_m {margin: 10px 0 0px;}
	.wrap {margin-top: -45vh;}
}