@media screen and (max-width:1700px){
	header .sunmotion{right: 0;}
	header .robot{width: 180px;}
	#about .ill01 {width: 190px;left: 100px;}
	#about .ill02 {width: 180px;right: 0;}
	#about .ill03 {width: 190px;}
	#about .ill04 {width: 300px;bottom: -20px;}
	#ecgood .animals {left: 5%;width: 500px;}
}
@media screen and (max-width:1200px){
	header { height: auto;}
	header .sunmotion{right: 45%;top: 30px;}
	header .robot{ width: 130px;}
	.insideheader { background-position: center 120px;}
	.insideheader .container .ill01 { display: none;}
	.insideheader .container .ill02 {right: 15%; top: 38%;}
	.insidekv {margin-top: 60px;}
	.insideheader .robot {width: 150px;}
	#about .ill01 {width: 160px;top: -10px;}
	#about .ill02 {width: 150px; top: 300px; }
	#about .ill03 {width: 160px;left:10px;}
	#about .ill04 {width: 270px;right: 50px; bottom: -30px;}
	#place{background-size: 35%,35%; background-position: left top,right bottom;}
	#ecgood .animals {left: 2%;width: 450px;}
	#ecgood .textBox {padding-left: 100px;}
	.brand h3 {font-size: 16px;}
	.brand2 { padding-left: 15px;}
	.box .ih-item.circle.effect6 .info h3 { font-size: 20px;}
	#giftcBox .plan {height: 370px;}
	.booksGroup .booklist .book {height: 170px;}
	.host-info {width: 76%;}
	.peoplewrap .host-info {width: 65%;}
	.placeBox ul{font-size:20px;}
	#activity .blog-post .intro h2 {height: 80px;}
	
	.sponsorBox dl { width:100%; margin:auto; margin-bottom:10px; text-align:center;}
	.sponsorBox dl:nth-child(2) { margin-bottom:0;}
	.sponsorBox dt { width:60px;}
	.sponsorBox dl:nth-child(1) { margin-bottom:10px;}
	.sponsorBox dl:nth-child(3) { margin-bottom:0px;}
	.sponsorBox dl:nth-child(4) dt { margin-bottom:10px;}
	.sponsorBox img { height:22px;}/*80%*/
	.sponsorBox .logoSM img { height:48px !important;}/*80%*/
	.sponsorBox .logoM img { height:60px;}/*80%*/
	.sponsorBox .free img { height:32px;}/*80%*/
}
@media screen and (max-width:991px){
	.insidekv {padding: 0 50px; margin-left: -40px; margin-top: 40px;}
	.insidekv h1 { margin-left: 0;}
	.insideheader .container .ill02 {right: 7%;}
	.insideheader .robot {width: 130px;right: -30px;}
	#recruit .row {padding: 0;}
	.navbar-brand {width: 150px;}
	#about .ill01 {left: 60px; }
	#about .ill02 {top: 80px; }
	#about .ill03 {bottom: -50px;}
	.placeBox ul { padding-left: 0; font-size:24px;}
	.placeBox li { margin: 10px 0;float: left;padding:3px; width: 33%;height: 40px; }
	#ecgood {height: 550px;}
	#ecgood .animals {left: 2%; top: inherit; bottom: 5px;}
	.brand h3 {font-size: 18px;}
	.host-info {width: 68%; padding-right: 5px;}
	.peoplewrap .host-info {width: 56%;}
	.booksGroup .booklist .book {height: 197px;}
	.placeBox {margin-top: 0px;}
	#activity .blog-post .intro h2 {height: 55px;}	
	.activitywrap .intro h2 {height: auto;}
}
@media(max-width:767px) {
	header .robot { display: none;}
	.brand { padding: 0 50px;}
	.brand2 {margin-top: -50px;}
	.brand h3 {font-size: 24px; margin-top: 0;}
	.brand .bear { display: none;}
	
	.insideheader {background-position-y: 400px; height: 600px;}
	.insidekv { margin-left: 0; margin-top: 70px;}
	.insideheader .container .ill02 {right: 7%; top: inherit; bottom: -170px;}
	.insideheader .robot {top: 35px;}
	
	#about p {font-size: 17px;}
	#about .ill01 {width: 140px; left: 30px; top: -20px;}
	#about .ill02 {width: 130px; top: 100px;}
	#about .ill03 {width: 140px;}
	#about .ill04 {width: 240px; bottom: -60px;}
	#map:before, #recruit:before {top: -48px;background-size: 100%;background-position: left center;}
	footer:before ,#place:before, #ecgood:before {top: -48px;background-size: 100%;background-position: right center;}
	#map .map, #map .outlineBox {width: 100%;margin: 0 auto;}
	#map .outlineBox p .outlineTitle {display: block;position: static;width: 95%;height: auto;padding: 3px 0;margin: 0 auto 15px;}
	#map .outlineBox p {text-align: center;width: 100%;padding: 0;margin: 10px auto 5px auto;}
	#outlinePlace strong{line-height:1.3em;}
	#map .outlineBox p .outlineTitle br {display: none;}
	#ecgood {height: 500px;}
	#ecgood .animals {bottom: -50px;}
	.activitywrap .blog-post {margin: 0;}
	.faqBox ul li {padding: 5px 0;}
	
	.insidefooter { padding: 50px 0 60px 0;}
	.bottom-banner {display:none;}
	
	.sponsorBox { display:flex; flex-wrap:wrap;}
	.sponsorBox dl:first-child dd,.sponsorBox dl:nth-child(3) dd { margin:0 20px 0 0;}
	.sponsorBox dl,.sponsorBox dl:last-child { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; margin:0 auto 15px auto;}
	.sponsorBox dt { width:65px;}
	.sponsorBox dt:after { display:none;}
	.sponsorBox dl:nth-child(2) dt,.sponsorBox dl:nth-child(3) dt,.sponsorBox dl:nth-child(4) dt { display:block; width:100%; text-align:center; margin-top:10px;}
	.sponsorBox dd,.sponsorBox dd:last-child { margin:0 10px !important;}
	.sponsorBox dl:nth-child(4) dd { margin-bottom:8px !important;}
	.sponsorBox img { height:26px;}
	.sponsorBox .logoM img { height:66px;}
	.sponsorBox .free img { height:38px;}
	
	.forumtable {width:100%;}	
	.table{ font-size: 16px;}
  	/*針對tr去做隱藏*/tr.tr-only-hide {display: none !important;}
   /*讓tr變成區塊主要讓他有個區塊*/td.rwd_time{background-color: #3664b1 !important;color: #fff; font-size: 15px;}
	.table-rwd td {text-align: left;overflow: hidden;width: 100%;display: block;}
	.table-rwd td:before {display: inline-block;text-transform: uppercase;font-weight: bold;margin-right: 10px;}
  	.table-rwd.table-bordered td,.table-rwd.table-bordered th,.table-rwd.table-bordered{border:0;}
	.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {padding: 6px;}
	td.title{ padding: 10px 10px 0px 10px !important;}
	
	.booksGroup .morebtn {display: inline-block;width: 100%;}
	
	.signBox { margin:0 20px;}
	.web_nav ul{bottom: 170px;}
	.gameBox .q_title {text-align: center;}
	.gameBox .q_list .listItem {padding: 8px 10px;line-height: 40x;height: 40px;}
	.modal-footer .sendbtn .btn { width: 80%;font-size: 20px;}
	
	.foodbox {margin-top: 0;}
	.foodbox  p{ float: left;}
	.foodbox img{ width: 150px; float: right; margin-top: -20px;}
}
@media screen and (max-width:680px){
	#map:before, #place:before, #recruit:before, #ecgood:before, footer:before {top: -43px;}
	.insideheader {background-position-y: 350px;height: 500px;}
	.insideheader .container .ill02 { bottom: -180px;}
	.insideheader .robot {right: 0;}
	
	#about .ill01 { display: none;}
	#about .ill02 { display: none;}
	.placeBox li { width: 49%; padding-left:0;}
	#ecgood .textBox {padding-left: 0;}
	#ecgood .animals { bottom: -100px; width: 400px;}
	.brand {padding: 0 10px;}
	.pageheader { margin: 0 0 10px 0;}	
	.ws-intro { margin-bottom :15px;}
	.img-host {width: 100%;margin: 0 auto;display: block; padding: 15px;}
	.img-host .number {top: 15px;left: 15px;font-size: 15px;}
	.host-info {width: 100%; padding: 0 15px;}	
	.peoplewrap .host-info {width: 100%; padding: 0;}	
	.peoplewrap .img-host.pull-right { float: inherit !important;}
	
	.placeBox ul { font-size:18px;}
}
@media screen and (max-width:465px){
	header { margin-top: 45px; background-position-y: 300px;}
	.brand { margin-top: 0;}
	.brand h3 {font-size: 20px;}
	.brand2 { margin-top: -35px;z-index: 6;padding: 0 20px;}
	.brand2 p {font-size: 12px; margin-top:-5px;}
	.brand3 { margin: 15px 0 0;}
	
	.insideheader {background-position: -400px 220px;height: 400px;}
	.insideheader .container .ill02 {bottom: -110px;}
	.insidekv {padding: 0 20px; }
	.insideheader .robot { width: 80px;}
	.insidekv {margin-top: 50px;}

	.recruitBox { margin-bottom: 30px;}
	#recruit .bigtitle h2 {max-width: 250px;}
	.faqBox h2 {font-size: 20px;}
	.faqBox ul li h4 {font-size: 19px;}
	.infoBox {margin-top: 10px;}
	#about .ill03 {display:none;}
	#about .ill04 {width: 180px;right: 20px; bottom: -40px;}
	#map .map #googlemap { height: 200px;}
	#map .mapbtn .btn {font-size: 21px;}
	#outlineinfo h3 {font-size: 18px; width: 80px;}
	#outlineinfo h4 {font-size: 16px;}
	#place{background-size: 50%,50%;}
	
	section { padding: 40px 0 80px 0;}
	.pageheader h2 img {width: 100%;}
	.pageheader h3 {font-size: 18px;line-height: 1.4; text-align: justify;}
	.pageheader h4 {font-size: 17px; margin: 10px 0 10px;}
	.pageheader p {font-size: 15px; line-height: 1.5; text-align: justify;}
	.signBox {margin: 15px; padding: 20px 15px 10px 15px;}
	.signBox .noticBox {padding: 0;}
	
	.booksGroup .listItem li {margin-bottom: 0;}
	.booksGroup .listItem li:nth-of-type(even) { padding-left: 5px;}
	.booksGroup .listItem li:nth-of-type(odd) { padding-right: 5px;}
	.booksGroup .listItem li .caption h3 { font-size: 16.5px; line-height: 1.4; height: 75px;}
	.booksGroup .classtitle { margin-bottom: 8px;}
	.booksGroup .classtitle h2 {font-size: 20px;}
	.booksGroup .classtitle span {font-size: 14px; padding-right: 0;}
	#activity {margin: 0;}
	#activity .blog-post {margin: 5px -10px 15px -10px;}
	#ecgood {height: 470px;}
	#ecgood .animals { bottom: -50px; width: 320px;}
	#ecgood h3 { font-size: 29px; }
	#ecgood p { font-size: 16px; }
	#ecgood h3 span {display: block;width: 100%; margin-left:0;}

	.social-icons { margin: 10px 10px 5px 0;}
	.social-icons li {width: 30px;height: 30px;}
	.social-icons li:nth-child(1), .social-icons li:nth-child(2), .social-icons li:nth-child(3){line-height: 32px; margin-right: 5px;}
	.social-icons li a i{ font-size: 18px;}

	.form-box {padding: 15px 20px;}
	.form-box h2 {font-size: 32px;}
	.form-box h3 {font-size: 17px;}
	.form-bottom .btn { font-size: 18px;padding: 15px 20px;}
	.modal-body {padding: 5px 10px;}
	.planettable img {width: 90px;}
	
	.menuBox dl dt {width: 70%;}
}
@media screen and (max-width:375px){
	.text-big { font-size: 120%;}
	.insideheader {background-position-y: 190px;height: 330px;}
	.insideheader .container .ill02 {bottom: -95px;}
	.insidekv {margin-top: 60px;}
	.insideheader .robot { width: 75px; right: -10px; top:20px;}
	.insidekv {margin-top: 45px;}
	.brand {padding: 0;}
	#about .ill04 {width: 170px;}
	.placeBox {margin: 10px -10px;}
	.placeBox li {width: 50%; height: 30px; font-size: 16.5px; font-weight: 500; margin: 5px 0;}
	.sort-color1 {margin-right: 5px; width: 27px; height: 27px;}
	.signBox .noticBox {margin: 0;}
	.booksGroup .listItem li .caption h3 { font-size: 16px; line-height: 1.4;}
	.foodbox img{ margin-top: 10px;}
}
@media screen and (max-width:320px){
	header { background-position-y: 200px;}
	.insideheader {background-position-y: 150px;height: 290px;}
	.insideheader .container .ill02 {bottom: -85px;}
	.insideheader .robot { width: 60px;}
	#map .outlineBox p .outlineTitle{font-size: 18px;}
	#outlineDate strong {font-size: 27px;}
	.day {margin: 0; font-size: 12px;}
	.time {font-size: 18px;}
	#ecgood .animals { bottom: -50px; width: 300px;}
	#place #placeinfo {margin-bottom: 20px;}
	.placeBox li {margin: 5px 0;width: 100%;height: auto; font-size: 18px;}
	.placeBox {margin: 10px 5px;}
	.sort-color1 {margin-right: 10px;}
	.booksGroup .listItem li .caption h3 { height: 83px;}
	.menuBox dl dt {width: 67%;}
	
}