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

/* BannerBox */
#BannerBox { position: relative; }
#BannerBox #sbanner { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; }
#BannerBox #sbanner a.photo {width: 100%;height: 100%;background-attachment: fixed;background-size: cover;background-position: 50% 80%;}
#BannerBox #sbanner a.photo img { max-height: 100%; }
#BannerBox .bar {position: relative;background: rgb(0 0 0 / 0.5);z-index: 2;}
#BannerBox .bar .waylink { padding: 10vw; text-align: center; }
#BannerBox .bar .waylink h1 { line-height: 130%; color: #fff; }
#BannerBox .bar .waylink ol { margin-top: 20px; font-size: 0; }
#BannerBox .bar .waylink ol li {display: inline-block;color: #ffffff;}
#BannerBox .bar .waylink ol li a { color: #fff; }
#BannerBox .bar .waylink ol li a:after { margin: 0 5px; display: inline-block; color: #fff; content: ">"; }
#BannerBox .bar .waylink ol li:last-child a {color: #ffffff;}
#BannerBox .bar .waylink ol li:last-child a:after { content: ""; }

/* wrap */
.wrap {margin: 60px 0;position: relative;}
.wrap:after {
    position: absolute;
    content: '';
    width: 25%;
    height: 603px;
    left: 0;
    bottom: calc(50% - 500px);
    background-image: url(/images/33/about-Bg1.png);
    background-repeat: no-repeat;
    background-position: 50% 100%;
    z-index: -3;
    animation-name: newsbg;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    zoom: 55%;
    opacity: .1;
}
@keyframes newsbg{
	0%{
		background-position: 200% 80%;
	}
	100%{
		background-position: 100% 0%;
	}
}
.wrap .img { overflow: hidden; }
.wrap .img a.photo { text-align: center; -webkit-transform: translate(0) scale(1); transform: translate(0) scale(1); }
.wrap #content .articlebar { margin-top: 20px; }
.wrap #content .articlebar a {padding: 2px 15px;background: #facd01;display: inline-block;color: #ffffff;}
.wrap #content .articlebar font { margin-left: 15px; font-family: 'Rubik', sans-serif; color: #656565; }
.wrap #content h2 {margin-top: 5px;font-size: 30px;color: #0c3666;}
.wrap .quoteBox font , .wrap .quoteBox a { display: inline-block; color: #6e6e6e; vertical-align: middle; }
.wrap .quoteBox a { color: #127e91; }
.wrap #describe {margin: 10px 0 20px;}
.wrap .workframe{
    overflow: hidden;
}

/* sideNav */
#sideNav {text-align: center;font-size: 0;float: left;width: 250px;}
#sideNav >li {margin: 10px;}
#sideNav >li h3 {position: relative;background-color: #0033a0;}
#sideNav >li h3 {padding: 10px 45px 10px 15px;display: block;font-size: 16px;color: #ffffff;}
#sideNav >li h3 a{display: block;font-size: 16px;color: #ffffff;}
#sideNav >li h3 b {position: absolute;padding: 5px 15px;font-size: 16px;color: #333;cursor: pointer;right: 0;bottom: 0;display: none;}
#sideNav >li h3 b i { font-size: 12px; color: #1b1c38; -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 h3 b i:before { content: "\f078" }
#sideNav >li .subUL li a {padding: 15px 15px 15px;display: block;color: #404040;}
#sideNav >li .subUL li b { display: none; }
#sideNav >li >.subUL >li.action >div >p a {color: #0033a0;}
#sideNav >li .sub2UL { background: rgba(0, 0, 0, .5); }
#sideNav >li .sub2UL >li >div >p a { color: #88899c; }
#sideNav >li .sub2UL >li >div >p a:before {  content: "- " }

/* content */
#content{
    float: right;
    width: calc(100% - 400px);
    background-color: #f6f6f6;
    padding: 50px;
    margin: 10px 0;
    position: relative;
}

/* listBox */
#listBox ul { text-align: center; font-size: 0; }
#listBox ul li { margin: 30px 15px; width: calc((100% / 3) - 32px); border: 1px #e7e7e7 solid; display: inline-block; }
#listBox ul li .info { padding: 30px; border-top: 1px #e7e7e7 solid; }
#listBox ul li .info h3 a { height: 30px; font-size: 20px; color: #292929; -webkit-line-clamp: 1; }
#listBox ul li .info article { margin-top: 15px; height: 55px; font-size: 15px; color: #7b7b7b; -webkit-line-clamp: 2; }

/* faqList */
#faqList li { margin-bottom: 20px; padding: 5px 40px; border: 1px #ccc solid; }
#faqList li a { position: relative; padding-right: 30px; display: block; }
#faqList li a font { padding: 25px 0; display: inline-block; font-weight: bold; font-size: 20px; color: #000; }
#faqList li a i { position: absolute; width: 25px; height: 25px; background: #cacacd; border-radius: 50%; display: inline-block; text-align: center; line-height: 25px; color: #16162e; font-size: 14px; top: calc((100% - 25px) / 2); right: 0; }
#faqList li .menu_body { overflow: hidden; margin: 0; height: 0; color: #636363; }

#faqList li.current .menu_body { margin: 0 0 25px; height: auto; }
#faqList li.current a i { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }

/* pagenav */
#pagenav {margin: 2vw auto;text-align: center;font-size: 0;}
#pagenav a , #pagenav strong { position: relative; margin: 0 2px; width: 40px; height: 40px; display: inline-block; text-align: center; line-height: 40px; color: #111; vertical-align: middle; }
#pagenav a { line-height: 34px; }
#pagenav strong {background: #0033a0;color: #fff;}

/* 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: 2px #d8d8d8 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: center;width: calc(100% - 40px);}
#form1 p.send a {padding: 10px 45px;background: #0033a0;display: inline-block;color: #fff;}

@media screen and (min-width:1281px) {
	.wrap ul li:hover .img a.photo { -webkit-transform: translate(0) scale(1.2); transform: translate(0) scale(1.2); }
	.wrap ul li:hover .img a.photo img { background: rgba(47, 47, 47, .8); }
	#sideNav >li .subUL li:hover >div >p a {color: #facd01;}
	#listBox ul li:hover .info { background: #fff; }
	#pagenav a:hover { background: #ff575f; color: #fff; }
}
@media screen and (max-width:1280px) {
	#BannerBox #sbanner a.photo { background-size: cover; }
	#listBox ul li { margin: 30px 10px; width: calc((100% / 3) - 22px); }
}
@media screen and (max-width:1024px) {
#content{
    float: none;
    width: calc(100% - 30px);
    padding: 15px;
}
#sideNav{
    float: none;
    width: 100%;
    margin-bottom: 20px;
    border-bottom: #c3c3c378 1px solid;
}
#sideNav >li{
    margin: 0;
}
}
@media screen and (max-width:980px) {
	#listBox ul li { width: calc(50% - 22px); }
	#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) {
	#listBox ul li { width: calc(80% - 22px); }
	#form1 p.col-4 { width: calc(100% - 40px); }
}
@media screen and (max-width:480px) {
	#listBox ul li { width: calc(100% - 22px); }
	input {
    -webkit-appearance: none;  /* Safari 和 Chrome，常用於iOS下移除內建樣式 */
    -moz-appearance: none;     /* FireFox */
    appearance: none;
}

}