body {font-family: 'Lato', 'Microsoft JhengHei'; -webkit-text-size-adjust: 100%  /*fix ios*/}

.page-container { position:relative; padding:0; overflow:hidden; clear:both /*fix firefox*/}
a {text-decoration:none; }

* {  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box}

input[type="text"], input[type="password"], input[type="email"], input[type="tel"] {padding:0 8px}
textarea {padding:8px}

/* For Old Broswer */
.flex-fl-left > * {float:left}
.flex-fl-right > * {float:right}
img , a {border:0  \9}
* {outline:0}

/* ==================*/

.page-container, .inner-container {width:100%}

header , footer {position:relative; width:100%}
header .wrap {overflow:visible}
.wrap { position:relative; padding:0; overflow:hidden; padding:0 30px}
.wrap-inner {position:relative; padding:0; margin:0 auto; overflow:hidden; width:1200px;}
.main-content {position:relative; width:100%; overflow:hidden}

.fl-left {float:left}
.fl-right {float:right}
.txt-left {text-align:left}
.txt-center {text-align:center}
.txt-right {text-align:right}
.txt-justify {text-align:justify}
.txt-300 {font-weight:300}
.txt-500 {font-weight:500}
.txt-600 {font-weight:600}
.txt-italic {font-style:italic}
.txt-underline {text-decoration:underline}
.txt-through {text-decoration:line-through}
.txt-upper {text-transform:uppercase}
.alert {color:red}
.fade {transition:0.4s; -webkit-transition:0.4s }
.clear {width:100%; overflow:hidden}

/* column */
.col-lg-1 {width:8.3333%}
.col-lg-2 {width:16.6666%}
.col-lg-3 {width:25%}
.col-lg-4 {width:33.3333%}
.col-lg-5 {width:41.6666%}
.col-lg-6 {width:50%}
.col-lg-7 {width:58.3333%}
.col-lg-8 {width:66.6666%}
.col-lg-9 {width:75%}
.col-lg-10 {width:83.3333%}
.col-lg-11 {width:91.66667%}

.col-center {text-align:center}
.col-center > * {display:inline-block}

/* list */
.list-lg-i2 > li {width:48%; margin-right:4%;}
.list-lg-i2 > li:nth-child(2n) {margin-right:0}
.list-lg-i3 > li {width:31.3333%; margin-right:3%}
.list-lg-i3 > li:nth-child(3n) {margin-right:0}
.list-lg-i4 > li {width:23%; margin-right:2.6%}
.list-lg-i4 > li:nth-child(4n) {margin-right:0}
.list-lg-i5 > li {width:19%; margin-right:1.2%}
.list-lg-i5 > li:nth-child(5n) {margin-right:0}
.list-lg-i6 > li {width:15.6666%; margin-right:1.2%}
.list-lg-i6 > li:nth-child(6n) {margin-right:0}
.list-lg-i9 > li {width:10%; margin-right:1.2%}
.list-lg-i9 > li:nth-child(9n) {margin-right:0}

/* position */
.pos-rel {position:relative}
.pos-abs {position:absolute}
.pos-fix {position:fixed}

.list-disc {list-style-type:disc}
.list-num {list-style-type:decimal}
.img-inline {position:relative; top:3px}
.img-thumb {overflow:hidden; text-align:center}
.img-thumb img {display:block; width:100%; vertical-align:middle}
.img-thumb.vertical img {width:auto; height:100%; margin:0 auto}

.table-tr {width:100%; overflow:hidden}
.table-tr > div {float:left}

/* flex box */
.flex {display:flex; display:-ms-flexbox; display:-webkit-flex; }
.flex-wrap {flex-wrap:wrap ;-ms-flex-wrap:wrap; -webkit-flex-wrap:wrap;}
.flex-fl-left {flex-direction:row; -ms-flex-direction:row; -webkit-flex-direction:row;}
.flex-fl-right {flex-direction:row-reverse; -ms-flex-direction:row-reverse; -webkit-flex-direction:row-reverse;}
.flex-h-left {justify-content:flex-start; -webkit-justify-content:flex-start;}
.flex-h-right {justify-content:flex-end; -webkit-justify-content:flex-end;}
.flex-h-between {justify-content:space-between; -webkit-justify-content:space-between;}
.flex-h-center {justify-content:center; -webkit-justify-content:center}
.flex-v-top {-webkit-align-items:flex-start; -ms-flex-align:start; align-items: flex-start;}
.flex-v-bottom {-webkit-align-items:flex-end; -ms-flex-align:end; align-items: flex-end;}
.flex-v-center {-webkit-align-items:center; -ms-flex-align:center; align-items:center;}

/* special hidden / show classes */
.tablet-show {display:none}
.mobile-show {display:none}
.tablet-hide {} 
.mobile-hide {} 
.tablet-block {}
.mobile-block {}

/* waypoint */
.el-hidden {opacity:0; transform:translateY(-100px); -webkit-transform:translateY(-100px)}
.el-hidden.el-start {}
.el-hidden.el-top {transform:translateY(-100px); -webkit-transform:translateY(-100px)}
.el-hidden.el-bottom {transform:translateY(100px); -webkit-transform:translateY(100px)}
.el-hidden.el-scale {transform:scale(0); -webkit-transform:scale(0)}
.el-hidden.el-left {transform:translateX(-100px); -webkit-transform:translateX(-100px)}
.el-hidden.el-right {transform:translateX(100px); -webkit-transform:translateX(100px)}
.el-top, .el-bottom, .el-left, .el-right, .el-scale {transition:0.4s; -webkit-transition:0.4s; }
.el-timer-1 {transition:0.4s !important; -webkit-transition:0.4s !important; }
.el-timer-2 {transition:0.6s !important; -webkit-transition:0.6s !important; }
.el-timer-3 {transition:0.8s !important; -webkit-transition:0.8s !important; }
.el-timer-4 {transition:1s !important; -webkit-transition:1s !important; }

/* Custom style */
h1, .undoreset h1 {font-size:40px; line-height:40px; margin:0 0 10px 0; color:#fff; text-transform:uppercase}
.place-info h1 {font-size:60px; line-height:60px;}
h2, .undoreset h2 {font-size:20px; line-height:30px; color:#000; margin:0 0 30px 0; font-weight:600}
h2.big {font-size:30px}
h3 {}
p, .undoreset p {font-size:16px; line-height:24px; color:#fff; margin:0 0 24px 0;}
p a, .undoreset p a {color:#fff; text-decoration:underline}
p a:hover, .undoreset p a:hover {color:#e9d72e}
.undoreset table {border:1px solid #000}
.undoreset table td {border:1px solid #000; padding:5px; vertical-align:middle}
.undoreset img {max-width:100%}
.undoreset ul {list-style-type:disc; margin-left:25px; padding-left:0; }
.undoreset ol {list-style-type:decimal; margin-left:25px; padding-left:0; }
.undoreset li {font-size:16px; line-height:24px; color:#fff; margin:0 0 5px 0;}
.font-lg {font-size:18px}
.font-sd {font-size:16px}
.font-md {font-size:15px}
.font-sm {font-size:14px}
.font-ty {font-size:12px}
.btn-360 {position:relative; display:inline-block; border:3px solid #1eaeae; padding:0 10px 0 50px; line-height:40px;  background-size:25px 32px; font-size:18px; color:#1eaeae; font-weight:bold}
.btn-360:before {content:" "; position:absolute; left:10px; top:7px; width:32px; height:25px; background:url('../images/icons/icon_360.png') no-repeat left top;}
.btn-360:hover {border-color:#f4d922; color:#f4d922}
.btn-360:hover:before {background-position:left bottom} 
.btn-readmore {position:relative; display:inline-block; padding:0 40px 0 10px; border:2px solid #fff; height:36px; line-height:32px; font-size:18px; color:#fff; }
.btn-readmore:before {content:" "; position:absolute; right:10px; top:10px; width:7px; height:12px; background:url('../images/icons/arrow01.png') no-repeat 0 0;}
.btn-readmore:hover {border-color:#f4d922; color:#f4d922}
.btn-readmore:hover:before {background-position:0 -12px} 
.btn-readmore.btn-mini {border:0; padding:0 17px 0 0; font-size:14px; line-height:14px; height:14px;}
.btn-readmore.btn-mini:before {top:0; right:0}
.btn-loadmore {position:relative; display:inline-block; padding:0 40px 0 10px; border:2px solid #1eaeae; height:36px; line-height:32px; font-size:18px; color:#1eaeae; }
.btn-loadmore:before {transform:rotate(90deg); -webkit-transform:rotate(90deg); content:" "; position:absolute; right:10px; top:10px; width:7px; height:12px; background:url('../images/icons/arrow01.png') no-repeat -7px -12px;}
.btn-loadmore:hover {border-color:#f4d922; color:#f4d922}
.btn-loadmore:hover:before {background-position:0 -12px} 
.btn-back {position:relative; display:block; font-size:14px; color:#fff; line-height:24px; padding-left:16px; }
.btn-back:before {content:" "; position:absolute; left:0; top:6px; width:7px; height:12px; background:url('../images/icons/arrow01.png') no-repeat 0 0; transform:rotate(180deg)}
.btn-back:hover {color:#f4d922; }
.btn-back:hover:before {background-position:0 -12px} 
.btn-back-top {margin:11px 0}
.btn-toggle {display:block; width:32px; height:32px; background:url('../images/icons/btn-toggle.png') no-repeat left bottom; margin-bottom:20px; cursor:default}
.btn-toggle.closed {background-position:left top}
.bgcolor-yuen {background-color:#22acad}
.bgcolor-tuen {background-color:#a4c25f}
.bgcolor-event {background-color:#74b776}

.bgimg-place {background-repeat:no-repeat; background-size:cover}
.bg-y-history {background-image:url('../images/bg_place/yuen_history.jpg')}
.bg-y-shops {background-image:url('../images/bg_place/yuen_shops.jpg')}
.bg-y-people {background-image:url('../images/bg_place/yuen_people.jpg')}
.bg-y-hertiage {background-image:url('../images/bg_place/yuen_hertiage.jpg')}
.bg-y-festivals {background-image:url('../images/bg_place/yuen_festivals.jpg')}
.bg-y-features {background-image:url('../images/bg_place/yuen_features.jpg')}
.bg-t-history {background-image:url('../images/bg_place/tuen_history.jpg')}
.bg-t-shops {background-image:url('../images/bg_place/tuen_shops.jpg')}
.bg-t-people {background-image:url('../images/bg_place/tuen_people.jpg')}
.bg-t-hertiage {background-image:url('../images/bg_place/tuen_hertiage.jpg')}
.bg-t-festivals {background-image:url('../images/bg_place/tuen_festivals.jpg')}
.bg-t-features {background-image:url('../images/bg_place/tuen_features.jpg')}
.bgcolor-nav {background-color:#4abdd3}