@import url('/css/community.css');
@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');

.webBox .wrapper { background: #eff1f5; }

/* serchBox */
#serchBox { margin: 5vw 0 2vw; }

/* topBanner */
#topBanner { position: relative; }
#topBanner #sbanner a.photo { background: no-repeat 50% 0 / 100% auto; background-attachment: fixed; }
#topBanner #sbanner a.photo img { background: rgba(30, 29, 36, .75); }
#topBanner .bar { position: absolute; width: 100%; left: 0; bottom: 0; }
#topBanner .bar h1 { line-height: 140%; text-align: center; font-weight: 400; color: #fff; }
#topBanner .bar .waylink ol { margin: 15px 15px 45px; text-align: center; }
#topBanner .bar .waylink ol li { display: inline-block; color: #fff; }
#topBanner .bar .waylink ol li a { color: #fff; }
#topBanner .bar .waylink ol li:after { margin: 0 10px; content: ">"; }
#topBanner .bar .waylink ol li:last-child { color: #ffae8c; }
#topBanner .bar .waylink ol li:last-child:after { margin: 0; content: ""; }

/* sideNav */
#sideNav { margin: 50px 0 30px; text-align: center; font-size: 0; }
#sideNav >li { margin: 10px; min-width: 250px; display: inline-block; }
#sideNav >li h3 { position: relative; background: rgba(255, 255, 255, .4); border: 1px #c1c1c1 solid; }
#sideNav >li h3 a { padding: 5px 45px 5px 15px; display: block; font-size: 16px; color: #333; }
#sideNav >li h3 b { position: absolute; padding: 5px 15px; font-size: 16px; color: #333; cursor: pointer; right: 0; bottom: 0; }
#sideNav >li h3 b i { font-size: 12px; color: #505050; -moz-transform: rotate(0); -webkit-transform: rotate(0); -o-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -ms-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; }
#sideNav >li.openlist h3 b i { -moz-transform: rotate(-180deg); -webkit-transform: rotate(-180deg); -o-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); }
#sideNav >li h3 b i:before { content: "\f078" }
#sideNav >li .subUL { position: absolute; margin-top: 4px; width: 250px; background: #1e1d24; box-shadow: 0 0 0 1px rgba(68, 68, 68, .5); z-index: -1; opacity: 0; -webkit-transform-origin: 50% 0; -ms-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: scale(0.75) translateY(-21px); -ms-transform: scale(0.75) translateY(-21px); transform: scale(0.75) translateY(-21px); -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; }
#sideNav >li.openlist .subUL { z-index: 10; opacity: 1; -webkit-transform: scale(1) translateY(0); -ms-transform: scale(1) translateY(0); transform: scale(1) translateY(0); }
#sideNav >li .subUL li a { padding: 5px 15px; display: block; color: #777; }
#sideNav >li .subUL li b { display: none; }
#sideNav >li >.subUL >li.action >div >p a { color: #f8b295; }
#sideNav >li .sub2UL { background: rgba(0, 0, 0, .3); }
#sideNav >li .sub2UL >li >div >p a { color: #817c98; }
#sideNav >li .sub2UL >li >div >p a:before {  content: "- " }

/* content */
#content { margin: 3vw auto 5vw; }
#content .articlebar { margin: 0 0 20px; }
#content .articlebar p { color: #6a6a6a; }

/* faqList */
#faqList li { margin: 15px 0; padding: 20px 30px; background: #fefefe; -webkit-box-shadow: 0 0 80px rgba(38, 38, 38, 0.1); box-shadow: 0 0 80px rgba(38, 38, 38, 0.1); }
#faqList li .menu_head { padding: 10px 0; display: block; font-size: 18px; color: #000; }
#faqList li .menu_body { position: absolute; margin-top: 4px; z-index: -1; opacity: 0; -webkit-transform-origin: 50% 0; -ms-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: scale(0.75) translateY(-21px); -ms-transform: scale(0.75) translateY(-21px); transform: scale(0.75) translateY(-21px); -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; }
#faqList li.current .menu_body { position: relative; z-index: 10; opacity: 1; -webkit-transform: scale(1) translateY(0); -ms-transform: scale(1) translateY(0); transform: scale(1) translateY(0); }

/* contactBox */
#contactBox article { margin: 15px 0; }
#contactBox form { font-size: 0; }
#contactBox form >div { margin: 10px; width: calc(50% - 20px); display: inline-block; }
#contactBox form .message { width: calc(100% - 20px); }
#contactBox form .send { text-align: right; }
#contactBox form label { min-height: 25px; display: block; }
#contactBox form label b { color: #ED0B0F; }
#contactBox form input ,
#contactBox form textarea { padding: 10px 15px; width: calc(100% - 32px); border: 1px #ccc solid; }
#contactBox form select { padding: 12px 15px 13px; width: 100%; border: 1px #ccc solid; }
#contactBox form input[type="radio"] , #contactBox form input[type="checkbox"] { width: auto; }
#contactBox form input#Checknum { width: auto; }
#contactBox form a#btnOK , #order .button a { padding: 10px 65px; background: #111; display: inline-block; color: #fff; opacity: 1; }

/* order */
#order .button { text-align: right; }
#order .button a { padding: 10px 30px; background: #bd9672; }
#order .button a.backP { background: #CB0404; }

/* pagenav */
#pagenav , #pagenav2 { margin: 2vw auto 5vw; text-align: center; font-size: 0; }
#pagenav a , #pagenav strong { position: relative; margin: 0 2px; width: 40px; height: 40px; border-radius: 50%; display: inline-block; text-align: center; line-height: 40px; color: #111; vertical-align: bottom; }
#pagenav a:first-child , #pagenav a:last-child { line-height: 36px; }
#pagenav a i ,
#pagenav a i:before ,
#pagenav a i:after { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }
#pagenav strong { text-decoration: underline; }

/* pagenav2 */
#pagenav2 { overflow: hidden; margin: 2vw auto 5vw; }
#pagenav2 p { float: left; width: 50%; }
#pagenav2 p a { position: relative; margin: 0 5px; width: 30px; height: 20px; }
#pagenav2 p a:before { position: absolute; width: 60px; height: 1px; background: #494848; display: block; left: 0; top: 10px; content: ""; }
#pagenav2 p a b { padding: 0 0 0 70px; font-size: 16px; color: #131315; }
#pagenav2 p a:after { position: absolute; margin-top: -5px; width: 10px; height: 10px; border: #494848 solid; border-width: 1px 0 0 1px; top: 50%; left: 2px; content: ""; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
#pagenav2 p.page-next { float: right; text-align: right; }
#pagenav2 p.page-next a b { padding: 0 70px 0 0; }
#pagenav2 p.page-next a:before { left: auto; right: 0; }
#pagenav2 p.page-next a:after { left: auto; right: 2px; -webkit-transform: rotate(135deg); transform: rotate(135deg); }

/* sPictureBox */
#sPictureBox { padding: 20px 0 4vw; background-image: linear-gradient(180deg,#eff1f5 0,#eff1f5 240px,#bd9672 0,#bd9672); background-size: 100% auto; background-position: 0 0; background-repeat: no-repeat; }
#sPictureBox h3 { margin-bottom: 50px; font-weight: 400; text-align: center; font-size: 35px; }
#sPictureBox .box { position: relative; margin: 0 auto; width: 1200px; }
#sPictureBox .box .bxslider .list font.num { position: absolute; font-family: 'Lato', sans-serif; font-size: 16px; top: 45px; right: 110px; }
#sPictureBox .box .bxslider .list .img { position: relative; width: 672px; background: #fff; z-index: 1; }
#sPictureBox .box .bxslider .list .info { position: absolute; padding: 70px 50px 70px 100px; width: 480px; min-height: 210px; background: #fff; box-shadow: 0 0 15px rgba(0, 0, 0, .2); bottom: 20px; right: 20px; z-index: 1; }
#sPictureBox .box .bxslider .list .info h3 a { height: 51px; font-weight: 400; font-size: 30px; color: #1e1e1e; -webkit-line-clamp: 1; }
#sPictureBox .box .arrowbtn { position: absolute; top: 45px; right: 30px; }
#sPictureBox .box .arrowbtn a { position: relative; margin: 0 5px; width: 30px; height: 20px; display: inline-block; vertical-align: middle; }
#sPictureBox .box .arrowbtn a:before { position: absolute; width: 100%; height: 1px; background: #494848; display: block; top: 10px; content: ""; }
#sPictureBox .box .arrowbtn a:after { position: absolute; margin-top: -5px; width: 10px; height: 10px; border: #494848 solid; border-width: 1px 0 0 1px; top: 50%; left: 2px; content: ""; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
#sPictureBox .box .arrowbtn font { margin: 0 0 0 22px; display: inline-block; font-family: 'Lato', sans-serif; font-size: 16px; }
#sPictureBox .box .arrowbtn font:before { margin: 0 5px; content: "/"; }
#sPictureBox .box .arrowbtn a#nArrow:after { left: auto; right: 2px; -webkit-transform: rotate(135deg); transform: rotate(135deg); }

/* Sitemap */
#Sitemap .wrap ul li p.title a { font-weight: 400; font-size: 18px; }

@media screen and (min-width: 1281px) {
	#sideNav >li .subUL li:hover >div >p a {  color: #f8b295; }
	#contactBox form a#btnOK:hover { opacity: .8; }
	#pagenav a:hover { background: #111; color: #fff; }
	#pagenav a:hover i { color: #fff; }
	#sPictureBox .box .arrowbtn a:hover:before { background: #b98c62; }
	#sPictureBox .box .arrowbtn a:hover:after { border-color: #b98c62; }
}
@media screen and (max-width: 1280px) {
	#sPictureBox .box { width: 90%; }
}
@media screen and (max-width: 1024px) {
	#topBanner #sbanner a.photo { background-size: cover; background-attachment: inherit; }
	#topBanner #sbanner a.photo img { height: 300px; }
	#sPictureBox .box .bxslider .list .info { width: 270px; }
}
@media screen and (max-width: 768px) {
	#topBanner .bar h1 { font-size: 30px; }
	#sPictureBox .slick-list { overflow: visible; }
	#sPictureBox .box .bxslider .list font.num , #sPictureBox .box .arrowbtn { top: -30px; }
	#sPictureBox .box .bxslider .list .img { width: 100%; }
	#sPictureBox .box .bxslider .list .info { padding: 20px; width: calc(100% - 80px); min-height: auto; background: rgba(255, 255, 255, .7); }
}
@media screen and (max-width: 640px) {
	#contactBox form >div { width: calc(100% - 20px); }
	#contactBox form label { min-height: inherit; }
	#contactBox form .send { margin: 20px 0; text-align: center; }
	#pagenav a , #pagenav strong { width: 30px; height: 30px; line-height: 30px; }
	#pagenav a:first-child , #pagenav a:last-child { line-height: 27px; }
}
@media screen and (max-width: 480px) {
	#pagenav a , #pagenav strong { margin: 0; width: 24px; }
}