body{
}
#linklist3 #menu1 {
	display: block;
}
#linklist3 .menu_toggle {
	display: none;
}
@media (min-width: 1680px) {
  body .home-banner {
    max-height: 500px;
    overflow: hidden;
  }

  body .item-text3 {
    max-height: 500px;
    width: 40%;
  }

  body .item-text .wrap {
    left: 40px;
    width: calc(100% - 80px);
  }

  body .item-text .wrap h2 {
    font-size:  40px
  }
  body .item-text .wrap #ppp {
    font-size: 20px;
    line-height: 2
  }
}
@media (max-width: 1300px) {
	body .item-text .wrap h2 {
		font-size: 26px;
		line-height: 1.2;
	}
	body .item-text .wrap #ppp {
		overflow: hidden;
		max-height: 7.5em;
	}
}
@media (max-width: 1024px) {
	body .item-text .wrap h2 {
		font-size: 24px;
		line-height: 1.2;
	}
	body .item-text .wrap #ppp {
		overflow: hidden;
		/*max-height: 6em;*/
	}
}

@media (max-width: 768px) {
	/*header*/
	body #corner {
		padding: 10px 20px;
	}
	body #corner2 {
		overflow: hidden;
	}
	body .menu-corner {
		float: right;
	}
	body .menu-guide {
		float: left;
		width: 50%;
		position: static;
	}

	span.big1 {
	    font-size: 18px;
	    line-height: 2;
	    position: absolute;
	    display: block;
	    left: 0;
	    top: 50%;
	    transform: translateY(-50%);
	}
	/* page */
	html {
	}
	body {
		min-width: 0;
	}
	#container {
		background: none !important;
		width: 100% !important;
		padding: 0 !important;
	}
	#pageheader2, #main2, #linklist2, #footer2 {
		width: 100% !important;
	}
	#container2 {
		background: none !important;
	}
	#pageheader {
		border-bottom: 3px solid #922d31;
		height: auto !important;
		overflow: hidden !important;
 		width: 100% !important;
	}
	#pageheader2 {
		background: none !important;
		padding: 0 !important;
	}
	#pageheader2 > * {
		display: none;
	}
	#pageheader2 #corner {
	    border-bottom: 1px solid #ddd;
	    box-sizing: border-box;
	    display: block;
	    padding: 10px 20px;
	    position: static;
	    text-align: left;
	    width: 100%;
	}
	#pageheader2 #corner a {
		padding: 0 2px !important;
	}
	#pageheader2 #corner a:hover {
	}
	#pageheader2 #corner span{
		display: none;
	}
	#pageheader2 > a > img {
		display: none;
	}
	#pageheader #pageheader2 > h1 {
	    margin: 20px;
	    display: block;
	    position: static;
	    width: 336px;
	    background-size: 100% auto;
	    background-position: 0 50%;
    	height: 101px;
	}
	#pageheader #pageheader2 > h1 a {
		display: block;
	}
	#ADB {
		/* display: none; */
	}
	#container #container2 #ADB {
    display: block;
		bottom: auto;
		height: auto;
		left: auto;
		position: relative;
		right: auto;
		top: auto;
    width: 100%;
	}
	#container #container2 #ADB * {
		height: auto;
		width: 100% !important;
	}
	#container #container2 #ADB img{
		display: block;
		height: auto;
		width: 100%;
	}
	#container #main1 {
		background: none;
		margin: 0;
		width: 100%;
	}
	#container #main2 {
		background: none;
		min-height: 500px;
	}
	#container #main {
		background: none;
		margin: 0 auto;
		padding: 0;
		width: 90%;
	}
	#main #content {
		float: none;
		position: relative;
		width: 100%;
	}
	#main #content2 {}
	#main #submenu {
		background: #fff;
	  float: none;
	  margin: 0 0 20px;
	  padding: 0;
	  position: static;
	  width: 100%;
	}
	#main #submenu_b {
		background: none;
	}
	#main #submenu a{
		font-size: 15px;
	}
	#main #super_pages_list, #main #submenu2, #main #recruit_list {
	  float: none;
	  margin: 0 0 20px;
	  position: static !important;
	  width: 100% !important;
	}
	#main #submenu2 li, #main #super_pages_list li, #main #recruit_list li {
		float: none;
	}

	#main .ts_styled th:last-child, #main .ts_rowsonly th:last-child, #main .ts_styled td:last-child, #main .ts_rowsonly td:last-child {
		display: none;
	}

	#main .ts_styled caption, #main .ts_rowsonly caption {
    box-sizing: border-box;
    width: 100%;
	}

	#main .ts_styled th, #main .ts_rowsonly th, #main .ts_styled td, #main .ts_rowsonly td {
    font-size: 15px;
    vertical-align: top;
    width: auto;
	}
	#main .PageDetails {
		float: none;
	}
	#main #album_list {
		margin: 0;
		padding: 0;
	}
	#main #album_list .album {
    box-sizing: border-box;
    height: auto;
    min-height: 0;
    min-width: 0;
    margin: 0;
    padding: 0;
    width: 100%;
	}
	#main #album_list .album div {
		margin: 0;
	}
	#main #album_list .album ul {
		margin: 0 0 20px 60px;
	}

	#editor * {
		text-align: justify;
	}
	#editor br {
		clear: both;
		display: block;
		margin: 0 0 15px;
	}
	#editor img {
	  display: block;
	  height: auto;
	  margin: 0 0 20px;
	  max-width: 100%;
	}

	#accesskey_menu, #accesskey_top, #accesskey_submenu, #accesskey_content{
	    display: none;
	}
	#container #calendar_large {
		width: 100%;
	}
	#container #calendar_large caption {
		width: 100%;
	}
	#container #extralist10 {
	  bottom: auto;
	  clear: both;
	  float: none;
	  left: auto;
	  margin: 0 auto 40px;
	  position: relative;
	  right: auto;
	  top: auto;
	  width: 100%;
	}
	#container #extralist10 > div {
		float: none;
		display: block;
		margin: 0 auto 20px;
		padding: 0;
		width: 100%;
	}
	body .page-bread {
		padding: 20px 0 !important;
	}
	body#page_main .page-bread {
		display: none !important;
	}
	body .page-banner {
		margin: 0 !important;
	}
	body#page_main .page-banner {
		display: none !important;
	}
	body .home-banner {
		border: none;
		display: none !important;
	}
	body#page_main .home-banner {
		display: block !important;
	}
	/* menu */
	#container #linklist {
		min-height: 0;
		background: #7a1316 url(cssimg/bg-menu-mobile.png) repeat-y 0 0;
		background-size: 100% auto;
	}
	#container #linklist2 {
		background: none !important;
	}
	#container #linklist3 {
		background: none !important;
		padding: 0;
	}
	/* main color = #aa2a0d */
	#linklist3 .menu_toggle {
		cursor: pointer;
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-indent: 120%;
		background: url(cssimg/btn-menu-toggle.png) no-repeat 0 0;
		width: 60px;
		height: 60px;
		position: absolute;
		right: 20px;
		top: -100px;
	}
	#linklist3 .menu_toggle:hover {
		opacity: 0.7;
	}
	#linklist3 .menu_toggle .toggle {
		display: none;
		float: right;
		position: relative;
	}
	#linklist3 .menu_toggle span {
		padding: 0 10px 0 0;
	}
	#linklist3 .menu_toggle .fa {
    font-size: 24px;
    position: relative;
    top: 2px;
	}
	#linklist3 #menu1 {
		display: none;
		bottom: auto;
		height: auto;
		left: auto;
		position: relative;
		right: auto;
		top: auto;
		width: 100%;
		/*background: url(cssimg/bg-menu-mobile.png) repeat-y 0 0;*/
		background-size: 100% auto;
		border-bottom: 3px solid #921619;
	}
	#linklist3 #menu1 ul {
		background: none;
		height: auto;
		margin: 0;
		padding: 0;
		text-align: left;
		width: 100%;
	}
	#linklist3 #menu1 li {
		float: none;
		display: block;
		height: auto;
		list-style: none;
		width: 100%;
		padding: 0 20px;
		box-sizing: border-box;
	}
	#linklist3 #menu1 li span {
		background: none;
		display: inline;
		margin: 0;
		padding:0;
	}
	#linklist3 #menu1 li a {
	    background: none repeat scroll 0 0;
	    border: 0 none;
	    box-sizing: border-box;
	    color: #fff;
	    display: block;
	    float: none;
	    font: 18px/1.5 'Noto Sans TC', sans-serif !important;
	    height: auto;
	    margin: 0;
	    padding: 15px 20px;
	    width: 100%;
	    text-align: right;
	    border-bottom: 1px solid rgba(255,255,255,0.2);
	 }
	#linklist3 #menu1 li:last-child a {
		border-bottom: 0;
	}
	#linklist3 #menu1 li a:hover {

	}

	#linklist3 #menu2 {
		display: none;
	}
	body .menu-level1 li:hover .menu-level2 {
	  display: none;
	}

	body .menu-level2 li:hover .menu-level3 {
	  display: block;
	}
	#menu2 ul {}
	#menu2 li {}
	#menu2 li a {}
	#menu2 li a:hover {}
	
	#linklist3 #menu3 {
		display: none;
	}
	#menu3 ul {}
	#menu3 li {}
	#menu3 li a {}
	#menu3 li a:hover {}
	#linklist3 #menu_login {
		display: none;
	}
	#linklist3 #menu_search {
		display: none;
	}
	#linklist3 #menu_service {}


	#footer {
    background: url(cssimg/bg-footer.png) no-repeat right bottom #322d2e;
    color: #fff;
    clear: both;
    position: relative;
    padding: 40px 0;
    background-size: auto 240px;
	}
	#footer2 {}
	#footer3 {
		overflow: hidden;
	}
	body .box-links {
	  float: none;
	  text-align: center;
	  border-bottom: 1px solid rgba(255,255,255,0.2);
	}

	body .box-icons {
	  float: none;
	  text-align: center;
	}

	body .box-icons a {
	  float: none;
	  display: inline-block;
	}
	#footer3 #footer_address {
	  margin: 0 auto 10px;
	  position: static;
	  text-align: justify;
	  width: 100%;
	  box-sizing: border-box;
	  padding: 0 20px 10px;
	}
	#footer3 #footer_ruling {
		bottom: 0;
		right: 20px;
	}
	#footer3 .last-update {
		margin: 0 0 0 20px;
	}
	#footer3 #counter {
	}
	#footer3 #footer_logo {
		display: none;
	}

	/* main */
	body .item-text {
	  position: static;
	}

	body .item-text2 {
	  position: static;
	  transform: none;
	  width: 100%;
	}

	body .item-text3 {
	  width: 100%;
	  position: static;
	  height: auto !important;
	  padding: 30px 30px 60px;
	}

	body .item-text .wrap {
	  position: static;
	  width: 100%;
	  transform: none;
	}

	body#page_main .home-banner {
	  height: auto !important;
	}
	body .item-text .wrap #ppp {
		max-height: 100vh;
	}
	body .item-banner {
	  position: static !important;
	}

	.item-banner.cycle-slide {
	  display: none !important;
	}

	body .item-banner.cycle-slide-active {
	  display: block !important;
	}

	body .box-top .box {
	  float: none;
	  width: 100%;
	  background-size: 100% 60px;
	  height: auto !important;
    margin: 0 auto 30px;
    min-height: 0;
	}
  body .box-bottom {
    margin: 0 auto !important;
  }
	body .box-top2.block-container {
		/*width: 100%;*/
	}
	body .footer-menus a {
    font-size: 14px;
	}

	body .box-links span {
	  padding: 0 4px;
	}
	body .footer-menus a {
	  font-size: 14px;
	}
  body .footer-menus2 {
    width: 100%;
  }
  body .footer-menus2 a {
    font-size: 13px;
    padding: 0 3px;
  }
  body .footer-menus2 span {
    display: none;
  }
	body .box-links span {
	  padding: 0 4px;
	}
	body .box-bottom {
		margin: 0;
	}
	body .box-bottom .box-link {
	  float: none;
	  width: 100%;
	  margin: 0 0 40px;
	}
	body .box-bottom .box-link+.box-link {
	  float: none;
	  margin: 0;
	}
	#page_main #main1 {
		background: none;
		margin: 0;
		width: 100%;
	}
	#page_main #main2 {
		background: none;
    min-height: 500px;
	}
	#page_main #main {
		background: none;
    margin: 0 auto;
    padding: 0;
    width: 100%;
	}
	#page_main #main #content {}
	#page_main #main #content2 {}
	#page_main #main #content2 > div {
		float: none;
		margin: 0 auto 20px;
		width: 100%;
	}
	#page_main #content2 div {}
	#page_main #content2 div ul {}
	#page_main #content2 div li {
    display: block !important;
    float: none !important;
    height: auto !important;
    width: auto !important;
	}
	#page_main #content2 div li a {
		display: block;
		float: none;
		width: 100%;
	}
	#page_main #content2 div .pic img {
		clear: both;
		display: block;
		float: none;
		height: auto;
		margin: 0 0 10px;
		width: 100%;
	}
	#page_main #content2 div .note {
	}
	#page_main #content2 div .note a {
	}
	body #AD1 ul {
		height: auto !important;
		margin: 0 0 20px !important;
	}
	#AD1 img {
		display: block;
		height: auto;
		width: 100%;
	}
	#pic_img {
	  margin-top: 10px;
	  width: 100%;
	}
	#pic_img img {
	  padding: 0;
	  border: 0px solid #ccc;
	  width: 100%;
	  height: auto;
	}
	body #pages_area {
		overflow-x: auto;
	}
}


@media (max-width: 440px) {

	#pageheader #pageheader2 > h1 {
	    margin: 20px;
	    display: block;
	    position: static;
	    width: calc(100% - 120px);
	    background-size: 100% auto;
	    background-position: 0 50%;
    	height: calc(100vw * 0.22);
	}
	#pageheader #pageheader2 > h1 a {
		display: block;
	}
	body .menu-corner {
	    float: none;
	    border-bottom: 1px solid #eee;
	    padding: 0 0 10px;
	    margin: 0 0 10px;
	    text-align: center;
	}

	body .menu-guide {
	    float: none;
	    width: 100%;
	    text-align: center;
	}

	body .menu-guide a {
	    float: none;
	}
  body .item-text .wrap h2 {
    font-size: 18px;
  }

  body .item-text .wrap #ppp {
    font-size: 15px;
  }
  #page_main #content2 div li a {
    font-size: 15px;
  }

  body .footer-menus2 {
    width: 100%;
  }
  body .footer-menus2 .box-links {
    padding: 10px;
  }
  body .footer-menus2 a {
    line-height: 2;
    display: inline-block;
  }
}

@media (max-width: 400px) {
	#linklist3 .menu_toggle {
		top: -90px;
	}
}