/* header ----------------------------------------------------------*/
	html, body {
	  padding: 0;
	  margin: 0;
	}
	a{
		color: inherit;
		text-decoration: none;
	}
	a:hover{
		color: inherit;
		text-decoration: none;
	}
	.errorDiv {
		display:none;
	}
	.required:after {
		content: '*';
		color: #f13a5a;
	}
/*menu ---------------------------------------------------------- */
.active{
	z-index: 99999;	
}
.menu {
  width: 30px;
  height: 30px;
  margin: 15px;
  cursor: pointer;
  transition: 0.3s;
}
@media screen and (min-width: 1200px) {
  .menu {
    display: none;
  }
}
.menu.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.menu.active span:nth-child(2) {
  transform: scale(0);
}
.menu.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
.menu span {
  width: 100%;
  height: 2px;
  display: block;
  background-color: #ff9600;/*手機展開顏色*/
  transition: 0.3s;
}
.menu span:nth-child(2) {
  margin: 5px 0;
}
.menu-block{
	font-size: 14px;
}
nav {
  width: 300px;
  height: 100%;
  position: fixed;
  top: 0;
  left: -310px;
  background-color: #f13a5a;/*背景顏色*/
  box-shadow: 0 0 10px 0 #888;
  transition: 0.3s;
  overflow-y: auto;
  /* The emerging W3C standard
    that is currently Firefox-only */
  scrollbar-width: thin;
  scrollbar-color:#5e3800 #444;
  /* Works on Chrome/Edge/Safari */
}
nav ul li:hover{
	background-color: #ffffff;/*背景顏色*/
	color:#646464;
}
nav::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
nav::-webkit-scrollbar-track {
  background: #f13a5a;
}
nav::-webkit-scrollbar-thumb {
  background-color:#f13a5a;
  border-radius: 20px;
  border: 3px solid #444;
}
nav.active {
  left: 0;
}
@media screen and (min-width: 1200px) {
  nav {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: unset;
    overflow: unset;
  }
}

header {
  color: black;/*手機標題文字顏色*/
  text-align: center;
  padding: 15px;
}
@media screen and (min-width: 1200px) {
  header {
    display: none;
  }
}

ul {
  width:100%;
  z-index: 9;
  list-style-type: none;
  padding: 0;
  margin: 0;
  transition: 0.3s max-height;
}
ul ul {
  max-height: 0;
  overflow: hidden;
}
ul ul li{
  background-color: #ffffff;/*第一層背景顏色*/
}
ul ul li:hover{
  background-color: #e5e5e5;/*第一層背景顏色*/	
}
ul ul li p {
  padding-left: 30px;
}
ul ul ul {
  background-color: #a5a5a5;/*第二層背景顏色*/
}
ul ul ul li p {
  padding-left: 45px;
}
@media screen and (min-width: 1200px) {
  ul {
	z-index: 9;
    width: 100%;
    display: flex;
  }
  ul ul {
    width: 200%;
    max-height: unset;
    display: unset;
    position: absolute;
    top: 100%;
    left: 0;
    overflow: unset;
    opacity: 0;
    visibility: hidden;
  }
  ul ul li p {
    padding-left: 0;
  }
  ul ul ul {
    top: 0;
    left: 100%;
  }
  ul ul ul li p {
    padding-left: 0;
  }
}

li {
  color: #ffffff;/*menu文字顏色*/
  cursor: pointer;
  position: relative;
}
li li{
  color: #646464;/*內層文字顏色*/
  cursor: pointer;
  position: relative;
}
li.active > span::before {
  transform: translate(-50%, -50%) rotate(180deg);
}
li.active > span::after {
  transform: translate(-50%, -50%) rotate(180deg);
}
li p {
  padding: 12px 0;
  margin: 0;
  transition: 0.3s;
}
li p:hover {
 /* opacity: 0.5;*//*字體觸發後透明度變化*/
}
li span {
  width: 15px;
  height: 15px;
  display: block;
  position: absolute;
  top: 22px;
  transform: translateY(-50%);
  right: 15px;
}
li span::before, li span::after {
  width: 100%;
  height: 2px;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #141414;/*手機+選轉顏色*/
  transition: 0.3s;
}
li span::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
@media screen and (min-width: 1200px) {
  li {
	z-index: 9;
    width: 100%;
    text-align: center;
    position: relative;
	border: 1px solid rgba(0, 0, 0, 0.2);
  }
  li li{
	border-bottom: solid #e5e5e5 1px;
	border-top: solid #ffffff 1px;
	border-right: solid #ffffff 1px;
	border-left: solid #ffffff 1px;
  }
  li:hover > ul {
    opacity: 1;
    visibility: visible;
  }
  li span {
    width: 1px;
    height: 1px;
    border: solid #646464;/*電腦版箭號顏色*/
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 2px;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
    display: none;
  }
  li span::before, li span::after {
    display: none;
  }
  li li span {
    display: block;
  }
}
@media (min-width: 1200px){
		.mb-logo{
			display: none;
		}
	}
@media (min-width: 451px) and (max-width: 1199px) {
		.computer-header{
			display: none;
		}
		.menu.active {
		  margin-left: 315px;
		}
		.mb-logo{
			text-align: center;
		}
		.mb-logo img{
			z-index: 1;
			width:40%;
			height: auto;
			margin-top: -50px;
		}
		.banner{
			margin-top: 10px!important;
		}
		li{
		 
		  border-top: solid #bc9460 1px;
  		}
		nav {
		  width: 300px!important;
		  height: 100%;
		  position: fixed;
		  top: 0;
		  left: -310px;
		  background-color: #ffe7c1;/*背景顏色*/
		  box-shadow: 0 0 10px 0 #888;
		  transition: 0.3s;
		  overflow-y: auto;
		  /* The emerging W3C standard
			that is currently Firefox-only */
		  scrollbar-width: thin;
		  scrollbar-color: #5e3800 #444;
		  /* Works on Chrome/Edge/Safari */
		}
		nav ul li:hover{
			background-color:#ffe7c1;/*背景顏色*/
			color:#5e3800;
		}
		li {
		  	color: #5e3800;/*menu文字顏色*/
		  	cursor: pointer;
		  	position: relative;
		}
		li li{
		  	color: #5e3800;/*內層文字顏色*/
		  	cursor: pointer;
		  	position: relative;
		}
		ul ul li{
		  background-color: #fff0d6!important;/*第一層背景顏色*/
		}
		ul ul li:hover{
		  background-color: #fff0d6!important;/*第一層背景顏色*/	
		}
		ul ul li p {
		  padding-left: 30px;
		}
		ul ul ul li{
		  background-color:#fff8e8!important;/*第二層背景顏色*/
		}
		ul ul ul li p {
		  padding-left: 45px;
		}
		li p {
		  padding: 15px;
		  margin: 0;
		  transition: 0.3s;
		}
}
@media (max-width: 450px) {
		.computer-header{
			display: none;
		}
		.menu.active {
		  margin-left: 315px;
		}
		.mb-logo img{
			z-index: 1;
			width:40%;
			height: auto;
			position: absolute;
			top:10px;
			left:100px;
		}
		.banner{
			
		}
		li p {
		  padding: 15px;
		  margin: 0;
		  transition: 0.3s;
		}
	}
@media (max-width: 450px){
		li{
		 
		  border-top: solid #bc9460 1px;
  		}
		nav {
		  width: 300px;
		  height: 100%;
		  position: fixed;
		  top: 0;
		  left: -310px;
		  background-color: #ffe7c1;/*背景顏色*/
		  box-shadow: 0 0 10px 0 #888;
		  transition: 0.3s;
		  overflow-y: auto;
		  /* The emerging W3C standard
			that is currently Firefox-only */
		  scrollbar-width: thin;
		  scrollbar-color: #5e3800 #444;
		  /* Works on Chrome/Edge/Safari */
		}
		nav ul li:hover{
			background-color:#ffe7c1;/*背景顏色*/
			color:#5e3800;
		}
		li {
		  	color: #5e3800;/*menu文字顏色*/
		  	cursor: pointer;
		  	position: relative;
		}
		li li{
		  	color: #5e3800;/*內層文字顏色*/
		  	cursor: pointer;
		  	position: relative;
		}
		ul ul li{
		  background-color: #fff0d6!important;/*第一層背景顏色*/
		}
		ul ul li:hover{
		  background-color: #fff0d6!important;/*第一層背景顏色*/	
		}
		ul ul li p {
		  padding-left: 30px;
		}
		ul ul ul li{
		  background-color:#fff8e8!important;/*第二層背景顏色*/
		}
		ul ul ul li p {
		  padding-left: 45px;
		}
	}
/*End menu ---------------------------------------------------------- */

/* head ----------------------------------------------------------*/
	.logo-picture{
		cursor: pointer;
		width:350px;
	}
	.logo-picture a{
		display: block;
	}
	.search-input{
		width:380px;
		height: 46px;
	}
	.search-logo{
		height: 46px;/*圖片高度*/
        width: 92px;/*圖片寬度*/
	}
	.search-logo a{
		height: 46px;/*圖片高度*/
        width: 92px;/*圖片寬度*/
		cursor: pointer;
		background:url("https://www.sheng-ci.com/fimg/1.0home_search_01.png");/*預設顯示圖片*/
        display: block;
        font-size: 0; 
        -moz-background-size:cover;        /*for Firefox*/
		-webkit-background-size:cover;        /*for Google Chrome、Safari*/
		-o-background-size:cover;        /*for Opera*/
		background-size:cover;        /*for IE*/
	}
	.search-logo a:hover{
		height: 46px;/*圖片高度*/
        width: 92px;/*圖片寬度*/
		cursor: pointer;
		background: url("https://www.sheng-ci.com/fimg/1.0home_search_02.png");/*滑鼠移過顯示圖片*/
		-moz-background-size:cover;        /*for Firefox*/
		-webkit-background-size:cover;        /*for Google Chrome、Safari*/
		-o-background-size:cover;        /*for Opera*/
		background-size:cover;        /*for IE*/
	}
	.search-block{
		display: block;
		cursor: pointer;
		text-decoration: none;
	}
	.btn-gray{
	  background-color:rgba(154,154,154,1.00);
	  color: #fff;
	  border-color:#fff;
	  font-weight: 300;
	  border-radius: 10px;
	  padding: 5px 10px;
	}
	.btn-gray:hover{
	  color:rgba(154,154,154,1.00)!important;
	  background-color:#fff;
	  border-color:rgba(154,154,154,1.00)!important;
	  box-shadow: 0 .125rem .25rem rgba(86,86,86,0.50)!important
	}
	.btn-gray:not(:disabled):not(.disabled).active, .btn-gray:not(:disabled):not(.disabled):active, .show>.btn-gray.dropdown-toggle{
	  color:rgba(154,154,154,1.00);
	  background-color:#fff;
	  border-color:#fff;
	  box-shadow:0 0 0 0.2rem rgba(147,165,196,.5);
	}
	.btn-gray.focus, .btn-gray:focus{
	  box-shadow:0 0 0 0.2rem rgba(147,165,196,.5);
	}
	.change-picture{
		height: 31px;/*圖片高度*/
        width: 150px;/*圖片寬度*/
	}
	.change-picture a{
		cursor: pointer;
		background:url("https://www.sheng-ci.com/fimg/1.0home_registration.jpg");/*預設顯示圖片*/
        display: block;
        font-size: 0; 
        height: 31px;/*圖片高度*/
        width: 150px;/*圖片寬度*/
		-moz-background-size:cover;        /*for Firefox*/
		-webkit-background-size:cover;        /*for Google Chrome、Safari*/
		-o-background-size:cover;        /*for Opera*/
		background-size:cover;        /*for IE*/
	}
	.change-picture a:hover{
		cursor: pointer;
		background: url("https://www.sheng-ci.com/fimg/1.0home_registration.jpg");/*滑鼠移過顯示圖片*/
		height: 31px;/*圖片高度*/
        width: 150px;/*圖片寬度*/
		-moz-background-size:cover;        /*for Firefox*/
		-webkit-background-size:cover;        /*for Google Chrome、Safari*/
		-o-background-size:cover;        /*for Opera*/
		background-size:cover;        /*for IE*/
	}
	.login-picture{
		height: 48px;/*圖片高度*/
        width: 150px;/*圖片寬度*/
	}
	.login-picture a{
		cursor: pointer;
		background:url("https://www.sheng-ci.com/fimg/1.0home_login_01.png");/*預設顯示圖片*/
        display: block;
        font-size: 0; 
       	height: 48px;/*圖片高度*/
        width: 150px;/*圖片寬度*/
		-moz-background-size:cover;        /*for Firefox*/
		-webkit-background-size:cover;        /*for Google Chrome、Safari*/
		-o-background-size:cover;        /*for Opera*/
		background-size:cover;        /*for IE*/
	}
	.login-picture a:hover{
		cursor: pointer;
		background: url("https://www.sheng-ci.com/fimg/1.0home_login_02.png");/*滑鼠移過顯示圖片*/
		height: 48px;/*圖片高度*/
        width: 150px;/*圖片寬度*/
		-moz-background-size:cover;        /*for Firefox*/
		-webkit-background-size:cover;        /*for Google Chrome、Safari*/
		-o-background-size:cover;        /*for Opera*/
		background-size:cover;        /*for IE*/
	}
	.logout-block1{
		display: flex;
		flex-direction: row;
		width: 100%;
		color: #ae0000;
	}
	.logout-block1 a{
		display: block;
		color: #007bff!important;
		cursor: pointer;
	}
	.logout-picture{
		height: 20px;/*圖片高度*/
        width: 40px;/*圖片寬度*/
	}
	.logout-picture a{
		cursor: pointer;
		background:url("https://www.sheng-ci.com/fimg/1.0home_logout_01.png");/*預設顯示圖片*/
        display: block;
        font-size: 0; 
       	height: 32px;/*圖片高度*/
        width: 56px;/*圖片寬度*/
		-moz-background-size:cover;        /*for Firefox*/
		-webkit-background-size:cover;        /*for Google Chrome、Safari*/
		-o-background-size:cover;        /*for Opera*/
		background-size:cover;        /*for IE*/
	}
	.logout-picture a:hover{
		cursor: pointer;
		background: url("https://www.sheng-ci.com/fimg/1.0home_logout_02.png");/*滑鼠移過顯示圖片*/
		height: 32px;/*圖片高度*/
        width: 56px;/*圖片寬度*/
		-moz-background-size:cover;        /*for Firefox*/
		-webkit-background-size:cover;        /*for Google Chrome、Safari*/
		-o-background-size:cover;        /*for Opera*/
		background-size:cover;        /*for IE*/
	}
	.header-block{
		margin-left: -50px;
	}
	.header-block1{
		font-size: 16px;
		color: #ae0000;
	}
	.header-block1 a{
		display: block;
		text-decoration: none;
		cursor: pointer;
	}
/* End header ----------------------------------------------------------*/
/* socail ----------------------------------------------------------*/
.loadingDiv{
	position: fixed;
	z-index: 1000;
	width: 100%;
	height: 100%;
	top:0px;
	left:0px;
	background:#434343;
	opacity: 0.8;
	display: none;
}
.loadingImg{
	position: absolute;
	top: calc(45% - 40px);
	left: calc(50% - 40px);
	width: 80px;
	height: 80px;
}
.menu-bg{
	width: 50px;
	position: fixed;
	top:calc(80% - 275px);
	right:10px;
	z-index: 10;
	background-color:rgb(242,243,245);
	border-top-left-radius: 10px;
}
.toTop{
	width: 50px;
	position: fixed;
	top:calc(100% - 15%);
	right:10px;
	z-index: 10;
	display:none;
}
.toTop img{
	width:100%;	
	cursor: pointer;
}
.menu-bg1 img{
	width:100%;
	cursor: pointer;
}
.menu-bg2 img{
	width:90%;
	margin: 5%;
	cursor: pointer;
}
@media (max-width: 700px) {
	.menu-bg{
		width: 40px;
		position: fixed;
		top:300px;
		right:10px;
		z-index: 20;
		background-color:rgb(242,243,245);
		}
	.menu-bg1 img{
		width:100%;
		cursor: pointer;
		margin-top: -5px;
	}
	.menu-bg2 img{
		width:80%;
		margin:5px;
		cursor: pointer;
	}
	.toTop{
		width: 40px;
		position: fixed;
		top:550px;
		right:10px;
		z-index: 10;
		cursor: pointer;
	}
}
	.btn-w{
	  background-color:rgb(248,182,45);
	  color: #ffffff;
	  border-color:rgb(248,182,45);
	  font-weight: bold;
	  padding: 5px 30px !important;
	}
	.btn-w:hover{
	  color:rgb(248,182,45);
	  background-color:#ffffff;
	  border-color:rgb(248,182,45);
	  box-shadow: 0 .125rem .25rem rgba(0,0,0,.1)!important
	}
	.btn-w:not(:disabled):not(.disabled).active, .btn-w:not(:disabled):not(.disabled):active, .show>.btn-w.dropdown-toggle{
	  color:#fff;
	  background-color:rgb(248,182,45);
	  border-color:rgb(248,182,45);
	  box-shadow:0 0 0 0.2rem rgba(147,165,196,.5);
	}
	.btn-w.focus, .btn-w:focus{
	  box-shadow:0 0 0 0.2rem rgba(147,165,196,.5);
	}
	.modal-footer{
		justify-content:center!important;
	}
	.modal-header {
		display: -ms-flexbox;
		display: flex;
		-ms-flex-align: start;
		align-items: flex-start;
		-ms-flex-pack: justify;
		justify-content: center;
		text-align: center;
		padding: 5px;
		border-bottom: 1px solid #ffffff;
		border-top-left-radius: .3rem;
		border-top-right-radius: .3rem;
	}
	.modal-body {
		position: relative;
		-ms-flex: 1 1 auto;
		flex: 1 1 auto;
		padding: 0 0 5px 0;
	}
	.color-block{
		background-color: #fff2d1;
	}
	.r-close{
		color:#f13a5a;
	}
	.r-close:hover{
		color:#f13a5a;
	}
	.r-blue{
		color:#1200FF;
	}
	.link a{
		text-decoration: none;
	}
/* End socail ----------------------------------------------------------*/
/* footer ----------------------------------------------------------*/
	.footer-block{
		margin-top: 10px;
		width:100%;
		min-height: 125px;
		background-color: #f0d3c8;
		border-top: 2px #471400 solid;
	}
	.footer-block1{
		width:100%;
		margin-top: 20px;
	}
	.footer-block1 a{
		display: block;
		text-decoration: none;
		cursor: pointer;
	}
	.footer-block1 img{
		width:270px;
		margin-left: 50px;
	}
	.footer-block2{
		color:#471400;/*footer 文字顏色*/
		font-size: 16px;/*footer 文字大小*/
		margin-top: 30px;
	}
	.footer-block2-1{
		color:#471400;/*footer 文字顏色*/
		font-size: 16px;/*footer 文字大小*/
		margin-top: 10px;
	}
	.footer-block2-1 a{
		text-decoration: none;
		cursor: pointer;
	}
@media (min-width: 1200px){
		.mb-only{
		display: none;
	}
}
	
@media (min-width: 451px) and (max-width: 1199px) {
	.footer-block{
		margin-top: 10px;
		margin-bottom: 10px;
		width:100%;
		min-height: 200px!important;
		background-color: #f0d3c8;
		border-top: 2px #471400 solid;
	}
	.footer-block1{
		width:100%;
		margin-top: 20px;
		vertical-align : middle;
		text-align: center;
	}
	.footer-block1 a{
		display: block;
		text-decoration: none;
		cursor: pointer;
	}
	.footer-block1 img{
		width:270px;
		margin-left: 0px;
	}
	.footer-block3{
		color:#471400;/*footer 文字顏色*/
		font-size: 16px;/*footer 文字大小*/
		margin-top: 0px;
		padding-bottom: 10px;
		text-align: center;
	}
	.footer-block2{
		color:#471400;/*footer 文字顏色*/
		font-size: 16px;/*footer 文字大小*/
		margin-top: 0px;
	}
	.footer-block2-1{
		color:#471400;/*footer 文字顏色*/
		font-size: 16px;/*footer 文字大小*/
	}
	.footer-block2-1 a{
		text-decoration: none;
		cursor: pointer;
	}
}
@media (max-width: 450px) {
	.footer-block{
		margin-top: 10px;
		width:100%;
		min-height: 250px;
		background-color: #f0d3c8;
		border-top: 2px #471400 solid;
	}
	.footer-block1{
		width:100%;
		margin-top: 20px;
	}
	.footer-block1 a{
		display: block;
		text-decoration: none;
		cursor: pointer;
	}
	.footer-block1 img{
		width:60%;
		margin-left: 50px;
	}
	.footer-block3{
		color:#471400;/*footer 文字顏色*/
		font-size: 12px;/*footer 文字大小*/
		margin-top: 0px;
		padding: 10px;
		text-align: center;
	}
	.footer-block2{
		color:#471400;/*footer 文字顏色*/
		font-size: 12px;/*footer 文字大小*/
		margin-top: 10px;
	}
	.footer-block2-1{
		color:#471400;/*footer 文字顏色*/
		font-size: 12px;/*footer 文字大小*/
		margin-top: 10px;
	}
	.footer-block2-1 a{;
		text-decoration: none;
		cursor: pointer;
	}
}
/* End footer ----------------------------------------------------------*/
@media screen and (min-width: 1200px) {
	.mptopc {
		width: 0px;
	}
}
@media (min-width: 501px) and (max-width: 1199px) {
	.mptopc {
		width: 1px;
	}
}
@media screen and (max-width: 500px) {
	.mptopc {
		width: 2px;
	}
}