/*==========================================
Old Screen
==========================================*/

@media screen and (max-width: 1280px ) and (min-width: 1024px) {
 .wrap-inner {width:1024px}
#head-top-left > .fl-left, #head-top-left > .fl-right {float:none}
#head-top-left > .fl-right {margin:20px 0 0 0 !important}
#main-nav div > a {padding:0 20px}
.home-article article {padding:30px}
.home-place-list li a span {display:block; font-size:14px; line-height:20px; padding-right:0; }
.home-place-list li a span:before {display:none}
header #head-top-left img {width:320px}
header .footer-org img {height:40px}
.event-title h1 {font-size:45px}
}

/*==========================================
Tablet
==========================================*/

@media screen and (max-width: 1023px ) and (min-width: 768px) {
.wrap-inner {width:748px}
.tablet-show {display:block}
.tablet-hide {display:none} 
.col-md-1 {width:8.3333%}
.col-md-2 {width:16.6666%}
.col-md-3 {width:25%}
.col-md-4 {width:33.3333%}
.col-md-5 {width:41.6666%}
.col-md-6 {width:50%}
.col-md-7 {width:58.3333%}
.col-md-8 {width:66.6666%}
.col-md-9 {width:75%}
.col-md-10 {width:83.3333%}
.col-md-11 {width:91.66667%}
.col-md-12 {width:100%}
.list-md-i2 > li {width:48%}
.list-md-i2 > li:nth-last-child(1) {margin-right:0}
.list-md-i3 > li {width:31.3333%; margin-right:3%}
.list-md-i3 > li:nth-child(3n) {margin-right:0}
.list-md-i4 > li {width:23%; margin-right:2.6%}
.list-md-i4 > li:nth-child(4n) {margin-right:0}
.list-md-i5 > li {width:19%; margin-right:1.2%}
.list-md-i5 > li:nth-child(5n) {margin-right:0}
.list-md-i6 > li {width:15.6666%; margin-right:1.2%}
.list-md-i6 > li:nth-child(6n) {margin-right:0}
.list-md-i9 > li {width:10%; margin-right:1.2%}
.list-md-i9 > li:nth-child(9n) {margin-right:0}

#mobile-bar {top:0}
.page-container {margin-top:68px}
#footer-top {text-align:center}
.footer-org {float:none; display:inline-block}
.footer-org p {text-align:left}
#footer-bottom {overflow:hidden}
.deco05 {left:30px; bottom:-32px}
#footer-bottom p {width:100%; text-align:center}
.home-article article .btn-readmore {float:none; margin-bottom:0}
.place-info h1, .event-title h1 {font-size:32px; line-height:40px;}
.about-article {padding:40px 60px}
#contact-info > div {width:30%}
.page-detail-article {padding:30px 50px}
.place-list li figcaption {width:100%; margin:-40px  0 0 0}
.place-list li .img-thumb {position:relative; width:100%}
.place-detail-photos .swiper-slide .img-thumb {height:400px}
.event-photo, .event-info {padding:60px 40px 0 40px}
.event-photo .swiper-slide img {height:300px}
.exhibition-map {position:relative; height:300px}
#exhibition .event-photo {padding:0}

}

/*==========================================
Mobile
==========================================*/

@media screen and (max-width: 767px ) {
.wrap-inner {width:100%}
.tablet-show {display:block}
.mobile-show {display:block}
.tablet-hide {display:none} 
.mobile-hide {display:none} 
.mobile-icon {display:block}
.col-sm-1 {width:8.3333%}
.col-sm-2 {width:16.6666%}
.col-sm-3 {width:25%}
.col-sm-4 {width:33.3333%}
.col-sm-5 {width:41.6666%}
.col-sm-6 {width:50%}
.col-sm-7 {width:58.3333%}
.col-sm-8 {width:66.6666%}
.col-sm-9 {width:75%}
.col-sm-10 {width:83.3333%}
.col-sm-11 {width:91.66667%}
.col-sm-12 {width:100%}
.list-sm-i2 > li {width:48%; margin-right:4%}
.list-sm-i2 > li:nth-child(3n) {margin-right:4%}
.list-sm-i2 > li:nth-child(2n) {margin-right:0}
.list-sm-i3 > li {width:31.3333%; margin-right:3%}
.list-sm-i3 > li:nth-child(3n) {margin-right:0}
.list-sm-i4 > li {width:23%; margin-right:2.6%}
.list-sm-i4 > li:nth-child(4n) {margin-right:0}
.list-sm-i5 > li {width:19%; margin-right:1.2%}
.list-sm-i5 > li:nth-child(5n) {margin-right:0}
.list-sm-i6 > li {width:15.6666%; margin-right:1.2%}
.list-sm-i6 > li:nth-child(6n) {margin-right:0}
.list-sm-i9 > li {width:10%; margin-right:1.2%}
.list-sm-i9 > li:nth-child(9n) {margin-right:0}

h1 {font-size:32px; line-height:40px; margin-bottom:0}
.place-info h1, .event-title h1 {font-size:32px; line-height:40px; text-align:center}
h2, .undoreset h2 {font-size:24px; line-height:30px; margin:0 0 10px 0; font-weight:600}
h3 {}
.place-side, .breadcrumb, .event-top .wrap-inner:before {display:none;}
.event-top .wrap-inner {height:150px}
.event-title h1 {margin-top:50px; text-align:center; padding:0 10px}
.about-article {padding:20px 30px;}
.about-article .deco03 {width:15px}

.btn-toggle {margin-bottom:0}
.wrap {padding:0 10px}
#mobile-bar {top:0; background-position:right 50px bottom}
#mobile-main-logo {left:auto; right:55px}
.page-container {margin-top:68px}
#footer-bottom {overflow:hidden}
.deco03 {width:20px; background-size:41px}
.deco05 {display:block; position:relative; top:20px; left:30px; margin-bottom:-15px}
#footer-bottom p {width:100%; text-align:center}
.home-article {padding-bottom:0}
.home-article article {padding:30px}
.home-article article .btn-readmore {float:none; margin-bottom:0}
#home-event, .home-place .slider-caption {position:relative; }
#footer-bottom .wrap-inner {height:auto}
#home-yuen .slider-caption {height:auto; padding:0 30px; overflow:hidden; background-color:rgba(34,172,173, 1)}
#home-tuen .slider-caption {height:auto; padding:0 30px; overflow:hidden; background-color:rgba(164,194,95, 1)}
#home-yuen-caption, #home-tuen-caption {float:none; width:100%} 
.home-place .slider-caption .swiper-pagination {display:none}
#home-statment .wrap-inner {padding:20px 30px}
#footer-top {padding:30px 20px; text-align:center}
#footer-bottom p {float:none}
#home-statment p {text-align:justify}
.footer-org {float:none; display:inline-block}
.footer-org p {text-align:left}
.footer-org img {height:35px}
#home-event {padding:15px}
.btn-itour {height:50px; margin:0 0 10px 0}
.contact-icon {float:left; width:70px; height:70px; background-size:40px; margin-right:10px}
#contact-info > div p {text-align:left; margin:20px 0 0 0}
#contact-info > div:nth-of-type(1) p {margin-top:0}
#contact-map {height:300px}
.place-info {width:100%; padding:20px 0px 0 0}
.page-detail-article {padding:20px 30px}
.place-list li figcaption {width:100%; margin:-40px  0 0 0}
.place-list li .img-thumb {position:relative; width:100%}
.place-detail-photos .swiper-slide .img-thumb {height:auto}
.place-detail-photos .swiper-slide .img-thumb img {width:100%; height:auto}
.place-detail-photos .swiper-slide p {width:90%}
.btn-back-top {display:none}
h2.big {padding-left:20px; margin-bottom:20px}
.page-detail-related {padding:0 20px}
.title-deco {display:none}
.event-bottom {padding-top:30px}
.event-photo, .event-info {height:auto; min-height:300px; padding:60px 30px 30px 30px }
.event-photo .swiper-slide img {height:auto ; max-width:100%}
.page-detail-article .deco {width:15px}
.exhibition-map {height:300px}
.fancybox-close {top:-44px; right:0; }

}

@media screen and (max-width: 480px ) {
.col-ty-1 {width:8.3333%}
.col-ty-2 {width:16.6666%}
.col-ty-3 {width:25%}
.col-sm-4 {width:33.3333%}
.col-ty-5 {width:41.6666%}
.col-ty-6 {width:50%}
.col-ty-7 {width:58.3333%}
.col-ty-8 {width:66.6666%}
.col-ty-9 {width:75%}
.col-ty-10 {width:83.3333%}
.col-ty-11 {width:91.66667%}
.col-ty-12 {width:100%}
.list-ty-i1 > li {width:100%; margin-right:0}
.list-ty-i2 > li {width:48%}
.list-ty-i2 > li:nth-last-child(1) {margin-right:0}
.list-ty-i3 > li {width:31.3333%; margin-right:2%}
.list-ty-i3 > li:nth-child(3n) {margin-right:0}
.list-ty-i4 > li {width:23%; margin-right:2.6%}
.list-ty-i4 > li:nth-child(4n) {margin-right:0}
.list-ty-i5 > li {width:19%; margin-right:1.2%}
.list-ty-i5 > li:nth-child(5n) {margin-right:0}
.list-ty-i6 > li {width:15.6666%; margin-right:1.2%}
.list-ty-i6 > li:nth-child(6n) {margin-right:0}
.list-ty-i9 > li {width:10%; margin-right:1.2%}
.list-ty-i9 > li:nth-child(9n) {margin-right:0}	
	
.footer-org:nth-of-type(1) {margin-right:20px}
.footer-org img {height:30px}
#footer-top {padding:20px 0}
.btn-readmore {font-size:14px}
h1, .place-info h1, .event-title h1 {font-size:24px; line-height:30px}
h2, .undoreset h2 {font-size:20px; line-height:24px}
#place-yuen .page-detail-button > div,
#place-tuen .page-detail-button > div,
#event .page-detail-button > div {width:100%}

#exhibition .event-info .table-tr > div:nth-child(1),
#exhibition .event-info .table-tr > div:nth-child(2) {width:100%}

.underConstruction{font-size: 24px;}
.underConstruction2{font-size: 24px;}

}