You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
information-system/application/views/mobile_first/ch.php

1810 lines
87 KiB
PHTML

<!doctype html><html amp i-amphtml-layout i-amphtml-no-boilerplate lang=en transformed="google;v=3"><head><meta charset=utf-8><meta content="width=device-width,minimum-scale=1,initial-scale=1" name=viewport><meta name=robots><meta content=chinahighlights.com name=amp-cookie-scope><link href=//data.chinahighlights.com/favicon.ico rel="shortcut icon"><style >
/* public style */
body { margin: 0;font-family:'Proxima Nova', Arial, Helvetica, sans-serif;color:#000; background:#fff; }
a { color: #000;
text-decoration: none;
}
a:hover { text-decoration: none; color:#000; }
h1 { font-size: 30px;
font-weight: 600;
text-align: left;
text-transform: initial;
line-height: 36px;}
h2{ font-size: 23px;
font-weight: 600;
margin-bottom: 25px;
margin-top: 70px;
color: #000;
padding: 0 15px;
line-height: 30px;}
h3{font-size: 20px;
font-weight: 600;
color: #000;
padding: 0 15px;
margin-bottom: 25px;
margin-top: 50px;
line-height: 30px; }
p{line-height:32px;margin-bottom:30px;font-size:18px;color: #000; font-family: Proxima Nova; padding: 0 15px;}
p a { color: #000;
text-decoration: none;
border-bottom: 3px solid #df8787;
padding-bottom: 2px;}
p a:hover { text-decoration: none; color:#000; background: #df8787; transition: 1s;}
p strong { font-weight: 800;}
.img-responsive, video{
display: block;
max-width: 100%;
height: auto;
}
/* google font */
@font-face{font-family:'Proxima Nova';font-style:italic;font-weight:300;src:local('Proxima Nova Light Italic'),local('OpenSans-LightItalic'),url('//data.chinahighlights.com/public/fonts/PRmiXeptR36kaC0GEAetxko2lTMeWA_kmIyWrkNCwPc.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;}@font-face{font-family:'Proxima Nova';font-style:italic;font-weight:400;src:local('Proxima Nova Italic'),local('OpenSans-Italic'),url('//data.chinahighlights.com/public/fonts/xjAJXh38I15wypJXxuGMBo4P5ICox8Kq3LLUNMylGO4.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;}@font-face{font-family:'Proxima Nova';font-style:italic;font-weight:600;src:local('Proxima Nova SemiBold Italic'),local('OpenSans-SemiBoldItalic'),url('//data.chinahighlights.com/public/fonts/PRmiXeptR36kaC0GEAetxl2umOyRU7PgRiv8DXcgJjk.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;}@font-face{font-family:'Proxima Nova';font-style:italic;font-weight:700;src:local('Proxima Nova Bold Italic'),local('OpenSans-BoldItalic'),url('//data.chinahighlights.com/public/fonts/PRmiXeptR36kaC0GEAetxolIZu-HDpmDIZMigmsroc4.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;}@font-face{font-family:'Proxima Nova';font-style:italic;font-weight:800;src:local('Proxima Nova ExtraBold Italic'),local('OpenSans-ExtraBoldItalic'),url('//data.chinahighlights.com/public/fonts/PRmiXeptR36kaC0GEAetxnibbpXgLHK_uTT48UMyjSM.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;}@font-face{font-family:'Proxima Nova';font-style:normal;font-weight:300;src:local('Proxima Nova Light'),local('OpenSans-Light'),url('//data.chinahighlights.com/public/fonts/DXI1ORHCpsQm3Vp6mXoaTegdm0LZdjqr5-oayXSOefg.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;}@font-face{font-family:'Proxima Nova';font-style:normal;font-weight:400;src:local('Proxima Nova Regular'),local('OpenSans-Regular'),url('//data.chinahighlights.com/public/fonts/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;}@font-face{font-family:'Proxima Nova';font-style:normal;font-weight:600;src:local('Proxima Nova SemiBold'),local('OpenSans-SemiBold'),url('//data.chinahighlights.com/public/fonts/MTP_ySUJH_bn48VBG8sNSugdm0LZdjqr5-oayXSOefg.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;}@font-face{font-family:'Proxima Nova';font-style:normal;font-weight:700;src:local('Proxima Nova Bold'),local('OpenSans-Bold'),url('//data.chinahighlights.com/public/fonts/k3k702ZOKiLJc3WVjuplzOgdm0LZdjqr5-oayXSOefg.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;}@font-face{font-family:'Proxima Nova';font-style:normal;font-weight:800;src:local('Proxima Nova ExtraBold'),local('OpenSans-ExtraBold'),url('//data.chinahighlights.com/public/fonts/EInbV5DfGHOiMmvb1Xr-hugdm0LZdjqr5-oayXSOefg.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;}
/* from font awesome */
@font-face{font-family:FontAwesome;src:url('//data.chinahighlights.com/public/fonts/fontawesome-webfont.eot?v=4.7.0');src:url('//data.chinahighlights.com/public/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),url('//data.chinahighlights.com/public/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('//data.chinahighlights.com/public/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),url('//data.chinahighlights.com/public/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),url('//data.chinahighlights.com/public/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');font-weight:400;font-style:normal}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-facebook-square:before{content:"\f082"}.fa-facebook-f:before,.fa-facebook:before{content:"\f09a"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-square:before{content:"\f0d3"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-up:before{content:"\f0d8"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-instagram:before{content:"\f16d"}.fa-flickr:before{content:"\f16e"}.fa-tripadvisor:before{content:"\f262"}.fa-500px:before{content:"\f26e"}.fa-angle-down:before{content:"\f107"}.fa-square-o:before{content:"\f096"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}
.fa-facebook-square:before { content: "\f082" }
.fa-facebook-f:before, .fa-facebook:before { content: "\f09a" }
.fa-twitter:before { content: "\f099" }
.fa-pinterest:before { content: "\f0d2" }
.fa-pinterest-square:before { content: "\f0d3" }
.fa-caret-down:before { content: "\f0d7" }
.fa-caret-up:before { content: "\f0d8" }
.fa-caret-left:before { content: "\f0d9" }
.fa-caret-right:before { content: "\f0da" }
.fa-instagram:before { content: "\f16d" }
.fa-flickr:before { content: "\f16e" }
.fa-tripadvisor:before { content: "\f262" }
.fa-500px:before { content: "\f26e" }
.fa-angle-down:before { content: "\f107" }
.fa-square-o:before { content: "\f096" }
.fa-angle-left:before { content: "\f104" }
.fa-angle-right:before { content: "\f105" }
.fa-navicon:before,.fa-reorder:before,.fa-bars:before { content: "\f0c9"; color:#fff; margin:5px 0 0 15px; }
.fa-google-plus::before { content: "\f0d5";}
.fa-angle-double-down:before {content: "\f103";}
.fa-search:before {content: "\f002";}
/* sidebar style */
.headerbar .start-navbar-trigger { background:#fff; position:fixed; width:100%; z-index:9999; border-bottom: 1px solid #e0e0e0; }
.headerbar .start-navbar-trigger .navimenu { color: #000;
border-left: 1px solid #a0a0a0;
padding-left: 15px;
margin-left: 20px;}
.topnavitailor {float: right;
height: 40px;
margin-top: 13px;}
.topnavitailor .topnaviarrowdown { border-left: 1px solid #555;
padding-left: 15px;
margin-left: 15px;
padding-top: 1px;
height: 27px;
padding-right: 15px;}
a.infocustomize { position: relative; font-size: 14px;
color: #000;
border: 1px solid #000;
border-radius: 4px;
padding: 6px 10px;
font-weight: 600;
display: initial;
height: 20px;}
.headerbar .start-navbar-trigger { background:#fff; position:fixed; width:100%; z-index:9999; height: 53px;
padding: 0 20px; font-size: 1.38rem;}
.headerbar { background-color: #fff; color: #000; z-index: 999; box-shadow: 0 0 5px 2px rgba(0,0,0,.1) }
.headerbar-nav { line-height: 3.5rem }
.start-nav a, .start-navbar-trigger { cursor: pointer; text-decoration: none }
.start-nav a :hover, .start-navbar-trigger {color: #fff;}
.start-navbar-trigger { line-height: 3.5rem; font-size: 2.2rem }
.headerbar-nav { -webkit-box-flex: 1; -ms-flex: 1; flex: 1 }
.sidebar { background-color: rgba(0,0,0,0.75);
max-width: 160vw;
top: calc(0px);
width: 100%;
background: url(https://data.chinahighlights.com/pic/guide/info-template-top-navigation.jpg) no-repeat;}
.sidebar-header { line-height: 3.5rem; min-height: 3.5rem }
.sidebar .start-navbar-trigger { line-height: inherit;
color: #999;
width: 50px;
font-size: 35px;
float: right; }
.headerbar { color: #f88; background-color: #fff; height: 2.6rem; box-shadow: none; }
.sidebar-nav-image { width: 120px }
.sidebar-header { position: relative; z-index: 1 }
.start-nav { margin-bottom: 2rem }
.start-nav-item { color: #222; list-style: none; padding-bottom:8px; }
.sidebar .start-nav-item { margin-bottom: 20px; padding-left: 30px }
.nav-link { font-size: 32px;
font-weight: 700;
line-height: normal;
display: inline-block;
position: relative;
color: #efefef;
text-transform: uppercase;}
.nav-link .fa { position: absolute; right: 20px; top: 3px }
/* -------- */
.updateinfo { padding: 15px 15px 10px 15px;
background: #f2f2f2;
height: 50px;}
.updateinfo p { background: url(https://data.chinahighlights.com/pic/guide/update-info-template-arrow.png) right no-repeat;
font-weight: 600;
font-size: 16px;
line-height: 22px;
padding-right: 20px;
margin-top: 0;
padding-left: 0;}
.updateinfo p a { border-bottom: none;}
.topcontent { padding: 50px 15px;}
.infocategory { font-size: 16px;
font-weight: 600;
border-left: 4px solid #a31022;
padding-left: 15px;
text-transform: uppercase;}
p.subheadline {font-size: 18px;
font-weight: 600; padding: 0;}
.followus {font-size: 16px;
color: #555;
text-transform: uppercase;
border-bottom: 1px solid #dcdcdc;
padding-bottom: 15px;
margin-bottom: 20px;
margin-top: 40px;}
.authorupdate {font-size: 16px;
text-transform: uppercase;
color: #555;}
.authorupdate strong {border-right: 1px solid #dcdcdc;
padding-right: 10px;
margin-right: 10px; color: #000;}
.infovideo, .infoimage { margin: 70px 0;}
.infoimagetitle {font-size: 14px;
text-transform: uppercase;
color: #888;
display: block;
border-left: 3px solid #b8b8b8;
padding-left: 15px;
margin-left: 15px;
margin-top: 15px;
line-height: 18px;}
table.infotable { margin: 0 15px;
border-top: 5px solid #df8787;border-left: 1px solid #d1d1d1;
border-spacing: 0;}
table.infotable th {background: #f5f5f5;
padding: 15px 10px;
border-top: 1px solid #d1d1d1;
border-right: 1px solid #d1d1d1;
border-bottom: 1px solid #d1d1d1;
font-size: 18px;
line-height: 23px;}
table.infotable td { padding: 15px;
border-right: 1px solid #c9c9c9;
border-bottom: 1px solid #c9c9c9;
font-size: 16px;
line-height: 22px;}
table.infotable td a { border-bottom: 2px solid #df8787;}
table.infotable td a:hover {background: #df8787; transition: 1s;}
ul.infolist li {
background: url(https://data.chinahighlights.com/pic/guide/info-template-list-bg.png) no-repeat 0;
list-style: none;
font-size: 18px;
margin-bottom: 15px;
padding-left: 20px;
line-height: 25px;
}
ul.infolist { padding-left: 15px; margin: 30px 0;}
.infoad { margin: 50px 15px;}
.loadmore {border: 1px solid #000;
text-align: center;
text-transform: uppercase;
margin: 50px 15px;
font-size: 18px;}
.loadmore a { width: 100%;
display: block; padding: 13px 0;}
.recotitlebg { position: relative;
border-bottom: 1px solid #000;
margin: 100px auto 50px auto;
width: 93%;
display: block;
}
.recotitlebg h2 { font-size: 25px;
font-weight: 600;
margin-bottom: 20px;
color: #000;
position: absolute;
top: calc(100% - 85px);
background: #fff;
text-align: center;
width: 250px;
text-transform: uppercase;
display: block;
left: calc(100% - 320px);
padding: 0 10px;}
.updatearticle {background: #efefef;
margin: 50px 15px;
position: relative;}
.articlemore {position: absolute;
right: 0;
top: calc(100% - 45px);
background: #fff;
font-size: 14px;
font-weight: 600;
padding: 5px 10px;
border-radius: 50px 0 0 50px;}
.articlemore .fa { color: #a31022;
font-weight: 1000;
font-size: 18px;
margin-left: 5px;}
.category {font-size: 16px;
color: #a3a3a3;
text-transform: uppercase;
display: block;
padding-left: 25px;
padding-top: 30px;}
.categorycenter { font-size: 16px;
color: #a3a3a3;
text-transform: uppercase;
display: block;
padding-top: 30px;
text-align: center;}
.newarticletitle { font-size: 24px;
font-weight: 600;
display: block;
padding-left: 25px;
padding: 20px 25px 45px 25px;
line-height: 30px;}
.articlenexttitle {font-size: 24px;
font-weight: 600;
display: block;
padding-left: 25px;
line-height: 30px;
text-align: center;
padding: 20px 0;}
.infotailor { margin: 100px 0;
background: url(https://data.chinahighlights.com/image/tour-detail/guilin/gl-3-why-us-bg-mobile-longsheng.jpg) no-repeat;
height: 670px;
position: relative;}
.infotailorword {position: absolute;
top: calc(100% - 565px);
color: #fff;
font-size: 32px;
text-align: center;
padding: 0 50px;
line-height: 45px;}
.infotailorbutton { position: absolute;
top: calc(100% - 210px);
background: #fff;
display: block;
margin: 0 auto;
width: 200px;
text-align: center;
font-size: 18px;
left: calc(100% - 285px);
text-transform: uppercase;}
.infotailorbutton a {width: 200px;
display: block;
padding: 15px 0;}
.articlenext {background: #efefef;
padding: 15px;
margin: 30px 15px;}
.infobottom { background: #3a3a32;
padding: 70px 15px;
margin-top: 100px;
color: #fff;}
.infobottom ul li { list-style: none;
margin-bottom: 25px;
font-size: 14px;
text-transform: uppercase; }
.bottommedia {width: 50%;
float: left;
height: 100%;
padding-left: 30px;
display: inline-block;
}
.bottommedia ul { padding-left: 0;
display: inline-block;
margin-left: -15px; margin-top: 0;}
.bottommedia .fa { color: #fff;
background: #757570;
margin-right: 10px;
width: 35px;
height: 25px;
text-align: center;
padding-top: 9px;
border-radius: 50%;
font-size: 20px;}
.bottommedia ul li a {color: #fff;
font-size: 14px;
text-transform: uppercase;}
.featureon { margin: 40px 0 0 0; padding: 0 15px;}
.bottomlinks { width: 40%;
height: 100%;
;
display: inline-block;}
.followtitle { font-size: 16px;
text-transform: uppercase;
margin-bottom: 25px;
display: block;
color: #a9a9a9;
font-weight: 700;}
.followtitle a {color: #a9a9a9;}
.bottomlinks ul li { font-size: 14px;
text-transform: uppercase;
margin-bottom: 20px; width: 100%; }
.bottomlogo {
background: url(https://data.chinahighlights.com/pic/guide/info-template-bottom-logo.jpg) no-repeat 20px #1e1e1e;
height: 37px;
background-size: 90px;
color: #fff;
padding-left: 135px;
padding-top: 10px;
line-height: 18px;
font-size: 13px;
padding-bottom: 10px;
}
.bottomlinks ul {display: inline-block;
padding-left: 0; margin-top: 0;}
.bottomlinks ul li a { color: #fff;}
ul.infoshare {display: inline-block;
float: right;
margin-top: -5px;}
ul.infoshare li {list-style: none;
float: left;
margin-right: 20px;}
.navicustomize { border: 1px solid #fff;
padding: 5px 10px;
border-radius: 4px;
margin-right: 20px;
display: inline-block;
float: right;
height: 20px;
margin-top: 20px;
font-size: 16px;}
.navicustomize a {
color: #fff;
position: relative;
top: -25px;
}
h3.navimore { padding-left: 0; margin-top: 0; margin-bottom: 0;}
li.sub-nav-item { padding-left: 30px; margin-bottom: 15px;}
li.sub-nav-item a { color: #fff;
font-size: 26px;
font-weight: 700;
width: 100%;
display: block;}
.naviback { padding-left: 30px;
margin-top: 60px;
display: block;}
.naviback a { display: block; width: 100%;}
.chinatours {max-width: 160vw;
width: 100%;
background: url(https://data.chinahighlights.com/pic/guide/info-template-top-navi-china-tours-bg.jpg) no-repeat; background-size: 414px;}
.destinationtours {max-width: 160vw;
width: 100%;
background: url(https://data.chinahighlights.com/pic/guide/info-template-top-navi-destinations-bg.jpg) no-repeat; background-size: 414px;}
.travelguide {max-width: 160vw;
width: 100%;
background: url(https://data.chinahighlights.com/pic/guide/info-template-top-navi-travel-guide-bg.jpg) no-repeat; background-size: 414px;}
.culture {max-width: 160vw;
width: 100%;
background: url(https://data.chinahighlights.com/pic/guide/info-template-top-navi-culture-bg.jpg) no-repeat; background-size: 414px;}
.asia {max-width: 160vw;
width: 100%;
background: url(https://data.chinahighlights.com/pic/guide/info-template-top-navigation-asia.jpg) no-repeat; background-size: 414px;}
.search {max-width: 160vw;
width: 100%;
background: url(https://data.chinahighlights.com/pic/guide/info-template-top-navigation-search.jpg) no-repeat; background-size: 414px;}
.subarrow {color: #fff;
border-left: 1px solid #fff;
padding-left: 15px;
margin-left: 0;}
.websearch { color: #fff;
font-size: 24px;
float: right;
margin-top: 23px;
margin-right: 20px;
margin-left: 20px;}
.bottomwechat { display: block;
margin-bottom: 50px; height: 100px;}
.bottomwechat img {float: left;
margin-right: 30px;}
.wechattitle {font-size: 21px;
text-transform: uppercase;
display: block;
padding-top: 15px;}
.infotailormade {text-align: center;
font-size: 20px;
width: 250px;
margin: 70px auto;
display: block;
font-weight: 400;
background: #fff;}
.infotailormade a {color: #000;
text-decoration: none;
display: block;
text-transform: uppercase; padding: 3px 10px;}
.toptailorarrow { margin-left: 10px;}
.siteSearch {
border: 1px solid #d1d1d1;
padding: 2px 2px 2px 0;
background: #fff;
border-top: none;
border-bottom: none;
height: 40px;
margin: 0 30px;
border-radius: 4px;
}
.siteSearch .strkeys {
background: #fff;
border: 0;
float: left;
display: inline-block;
width: 195px;
margin-top: -1px;
color: #666;
font-size: 18px;
height: 39px;
font-weight: 300;
padding-left: 10px;
}
.siteSearch .submits {
display: block;
float: right;
padding-top: 7px;
padding-right: 5px;
width: auto;
}
.footerBtn {
/* position: fixed; ycc 预览窗口不浮动 */
bottom: 0;
left: 0;
height: 45px;
width: 100%;
color: #fff;
z-index: 30;
background: #eee;
padding-bottom: 10px;
padding-top: 12px;
}
.footerBtn a {
color: #fff;
text-decoration: none;
}
.footerBtn button {
width: 70%;
border: none;
background: #a31022;
padding-top: 12px;
padding-bottom: 2px;
font-size:16px;
color: #fff;
bottom: 0;
justify-content: center;
display: flex;
margin: 0 auto;
border-radius: 25px;
text-transform: uppercase;
}
.footerBtn button .fa {
margin-left: 15px;
font-size: 21px;
margin-top: -3px;
margin-bottom: 6px;
}
.subtitle {
color: #fff;
font-size: 18px;
text-shadow: 5px 3px 4px #000;;
padding: 0 15px;
display: block;
margin-bottom: 20px;}
.tournavi {
/* position: fixed; ycc 预览窗口不浮动*/
z-index: 11;
box-shadow: 0 0 5px #9d9d9d;
border-bottom: 1px solid #d9d9d9;
width: 100%;
margin: 0 auto;
margin-top: -2px;
background: #fff;
top: 2.9rem;
}
.TopNavi {
font-size: 15px;
display: block;
border-right: 1px solid #d2d2d2;
float: left;
height: 35px;
padding-top: 10px;
text-align: center;
width: 25%;
}
.TopNavi a, .TopNaviLast a {
text-decoration: none;
}
.TopNaviLast {
font-size: 15px;
display: block;
float: left;
height: 35px;
padding-top: 10px;
text-align: center;
width: 24%;
}
img.topimg { margin-bottom: 6px;}
img.bottomright { width: 49%;}
img.bottomleft { width: 49%; margin-right: 6px; float: left;}
.bottomimg { margin-bottom: 70px;}
.whyus { position: relative; color: #fff;}
.whyus ul li {font-size: 16px;
margin-bottom: 10px; line-height: 22px;}
.traptop { position: absolute;
color: #fff;
top: 0;
padding: 0 15px;}
.trapbottom { position: absolute; color: #fff; top: calc(100% - 250px);}
.bookingcontent { right: 0;
display: block;
border-left: 2px solid #e5e5e5;
height: 100px;
position: relative;
left: 0;
top: 45px;
margin-bottom: 150px;
margin-left: 30px;}
.proceduretop { position: absolute; left: -25px;top: 0;}
.procedurebottom { position: absolute; left:-25px; top: 70px;}
.proceduretitlebg {
background: #d2d2d2;
border-radius: 50%;
width: 50px;
height: 50px;
display: block;
float: left;
position: relative;
margin-right: 20px;
}
.proceduretitle {
display: table-cell;
font-size: 18px;
font-weight: 600;
line-height: 22px;
width: 320px;
height: 50px;
padding-top: 5px;}
img.taleft { float: left; margin-right: 10px;}
img.tarating { margin-bottom: 5px;
margin-top: 25px;}
.ratingnumber { font-size: 16px;
display: block;}
.ratingnumber strong { color: #00a680; font-size: 22px; font-weight: 600;}
.feedbackbg { background: #e5e5e5;
padding: 20px;
margin-bottom: 70px;
margin-top: 30px;
float: left;
height: 290px;
}
.feedbackbg p { line-height: 23px;}
.feedbacktitle {font-weight: 600;
font-size: 20px;}
.feedbackdate { font-size: 15px;}
.tourdaytitlebg { background: url(https://www.chinahighlights.com/image/tour-detail/guilin/gl-3-tourday-bg-mobile.png) no-repeat;
display: block;
float: left;
position: relative;
margin-right: 15px;
width: 61px;
height: 22px;
color: #fff;
padding-left: 4px;
padding-top: 4px;
font-size: 15px;
margin-bottom: 45px;
}
.tourdaytitle { font-size: 20px;
font-weight: 600;
margin-top: -60px;
}
.tourday {position: relative;
left: -10px;}
.tourday p{ margin-bottom: -17px;
padding: 0 0 50px 70px;
margin-left: 10px;}
.tourcontent { margin: 50px 0; border-left: 2px solid #e5e5e5;
position: relative;
left: 5px;}
.hoteltitle { display: block; text-align: center; font-size: 22px; margin-top: -25px;}
.tourprice { background: #eee; padding: 30px 15px 80px 15px; }
.pricefrom {display: block;
font-size: 16px;
color: #000;}
.pricefrom strong { color: #a31022;
font-size: 25px;
margin-left: 5px;}
.priceterm {
font-size: 16px;
color: #474646;
line-height: 20px;
margin-top: 10px;
display: block;
border-bottom: 1px solid #d2d2d2;
padding-bottom: 20px;
}
.tourprice ul { font-size: 16px;
border-bottom: 1px solid #d2d2d2;
padding-bottom: 5px; padding-left: 15px;}
.tourprice ul li { margin-bottom: 15px;
line-height: 20px;}
p.wechat { text-align: left;
float: left;
width: 55%;
font-style: italic;
padding-left: 10px;
color: #555;
line-height: 20px;}
img.code { display: block; margin: 0 auto;}
img.step { display: block;
margin: auto;
margin-top: 6px;}
.citytours { padding: 0 15px;}
ul.top { margin-bottom: 60px;}
.toptitle { position: absolute;
bottom: 0;}
.wechatname {
font-size: 14px;
text-align: center;
display: block;
margin-bottom: 10px;}
img.chinahighlightslogo {padding-left: 15px;}
h1.tourdetailh1 {
color: #fff;
text-shadow: 5px 3px 4px #000;
text-align: left;
padding-left: 15px;
text-transform: Uppercase;
line-height: 36px;
padding-right: 15px;
display: block;
}
/* menu begin */
/* Icons (made with Icomoon.io) */
@font-face {
font-family: 'feather';
font-weight: normal;
font-style: normal;
src: url('https://data.chinahighlights.com/css/fonts/feather.eot?1gafuo');
src: url('https://data.chinahighlights.com/css/fonts/feather.eot?1gafuo#iefix') format('embedded-opentype'), url('https://data.chinahighlights.com/css/fonts/feather.woff2?1gafuo') format('woff2'), url('https://data.chinahighlights.com/css/fonts/feather.ttf?1gafuo') format('truetype'), url('https://data.chinahighlights.com/css/fonts/feather.woff?1gafuo') format('woff'), url('https://data.chinahighlights.com/css/fonts/feather.svg?1gafuo#feather') format('svg');
}
.icon {
font-family: 'feather';
font-weight: normal;
font-style: normal;
font-variant: normal;
line-height: 1;
text-transform: none;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
speak: none;
}
.icon--arrow-left:before {
content: '\e901';
}
.icon--menu:before {
content: '\e903';
}
.icon--cross:before {
content: '\e117';
}
/* Menu styles */
.menu {
position: fixed;
top: 120px;
left: 0;
width: 300px;
height: calc(100vh - 120px);
background: #1c1d22;
}
.menu__wrap {
position: absolute;
top: 3.5em;
bottom: 0;
overflow: hidden;
width: 100%;
}
.menu__level {
position: absolute;
top: 0;
left: 0;
visibility: hidden;
overflow: hidden;
overflow-y: scroll;
width: calc(100% + 50px);
height: 100%;
margin: 0;
padding: 0;
list-style-type: none;
}
.menu__level:focus {
outline: none;
}
.menu__level--current {
visibility: visible;
}
.menu__item {
display: block;
width: calc(100% - 50px);
}
.menu__link {
font-weight: 600;
position: relative;
display: block;
padding: 1em 2.5em 1em 1.5em;
color: #bdbdbd;
-webkit-transition: color 0.1s;
transition: color 0.1s;
}
.menu__link[data-submenu]::after {
content: '\e904';
font-family: 'feather';
position: absolute;
right: 0;
padding: 0.25em 1.25em;
color: #2a2b30;
}
.menu__link:hover,
.menu__link:focus,
.menu__link[data-submenu]:hover::after,
.menu__link[data-submenu]:focus::after {
color: #5c5edc;
}
.menu__link--current::before {
content: '\00B7';
font-size: 1.5em;
line-height: 0;
position: absolute;
top: 50%;
left: 0.5em;
height: 4px;
color: #5c5edc;
}
[class^='animate-'],
[class*=' animate-'] {
visibility: visible;
}
.animate-outToRight .menu__item {
-webkit-animation: outToRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
animation: outToRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
}
@-webkit-keyframes outToRight {
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
@keyframes outToRight {
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
.animate-outToLeft .menu__item {
-webkit-animation: outToLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
animation: outToLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
}
@-webkit-keyframes outToLeft {
to {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
@keyframes outToLeft {
to {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
.animate-inFromLeft .menu__item {
-webkit-animation: inFromLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
animation: inFromLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
}
@-webkit-keyframes inFromLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes inFromLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.animate-inFromRight .menu__item {
-webkit-animation: inFromRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
animation: inFromRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
}
@-webkit-keyframes inFromRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes inFromRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.menu__breadcrumbs {
font-size: 0.65em;
line-height: 1;
position: relative;
padding: 2.5em 3.75em 1.5em 2.5em;
}
.menu__breadcrumbs a {
font-weight: bold;
display: inline-block;
cursor: pointer;
vertical-align: middle;
letter-spacing: 1px;
text-transform: uppercase;
color: #5c5edc;
}
.menu__breadcrumbs a:last-child {
pointer-events: none;
}
.menu__breadcrumbs a:hover,
.menu__breadcrumbs a:focus {
color: #8182e0;
}
.menu__breadcrumbs a:not(:last-child)::after {
content: '\e902';
font-family: 'feather';
display: inline-block;
padding: 0 0.5em;
color: #33353e;
}
.menu__breadcrumbs a:not(:last-child):hover::after,
.menu__breadcrumbs a:not(:last-child):focus::after {
color: #33353e;
}
.menu__back {
font-size: 1.05em;
position: absolute;
z-index: 100;
top: 0;
right: 2.25em;
margin: 0;
padding: 1.365em 0.65em 0 0;
cursor: pointer;
color: #2a2b30;
border: none;
background: none;
}
.menu__back--hidden {
pointer-events: none;
opacity: 0;
}
.menu__back:hover,
.menu__back:focus {
color: #fff;
outline: none;
}
/* Open and close buttons */
.action {
position: absolute;
display: block;
margin: 0;
padding: 0;
cursor: pointer;
border: none;
background: none;
}
.action:focus {
outline: none;
}
/*
.action--open {
font-size: 1.5em;
top: 1em;
left: 1em;
display: none;
color: #fff;
position: fixed;
z-index: 1000;
}
*/
.action--close {
font-size: 1.1em;
top: 1.25em;
right: 1em;
display: none;
color: #45464e;
}
@media screen and (max-width: 40em) {
/*
.action--open,*/
.action--close {
display: block;
}
.menu {
z-index: 1000;
top: 0;
width: 100%;
height: 100vh;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.menu--open {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
/* menu end */
</style>
<title>6 Recommended Destinations for Your China Tours 2020</title><link href=https://www.chinahighlights.com/tour/expats-tours rel=canonical>
</head><body>
<!--头部导航-->
<header class="headerbar flex justify-start items-center top-0 left-0 right-0 pl2 pr4 pt2 md-pt0" id="header">
<div role=button tabindex=0>
<a href="/"> <img src=https://www.chinahighlights.com/pic/guide/info-template-top-logo.png width=98px height=53px alt=xxx class="chinahighlightslogo"></a>
<div class="topnavitailor">
<a href="/tour/create-my-trip.htm" class="infocustomize"> CUSTOMIZE <i aria-hidden="true" class="fa fa-caret-right toptailorarrow"></i></a>
<i class="fa fa-angle-down navimenu topnaviarrowdown action--open"></i>
</div>
</div>
</header>
<!---->
<nav id="ml-menu" class="menu">
<button class="action action--close" aria-label="Close Menu"><span class="icon icon--cross"></span></button>
<div class="menu__wrap">
<ul data-menu="main" class="menu__level" tabindex="-1" role="menu" aria-label="All">
<li class="menu__item" role="menuitem"><a class="menu__link" data-submenu="submenu-1" aria-owns="submenu-1" href="#">Vegetables</a></li>
<li class="menu__item" role="menuitem"><a class="menu__link" data-submenu="submenu-2" aria-owns="submenu-2" href="#">Fruits</a></li>
<li class="menu__item" role="menuitem"><a class="menu__link" data-submenu="submenu-3" aria-owns="submenu-3" href="#">Grains</a></li>
<li class="menu__item" role="menuitem"><a class="menu__link" data-submenu="submenu-4" aria-owns="submenu-4" href="#">Mylk &amp; Drinks</a></li>
</ul>
<!-- Submenu 1 -->
<ul data-menu="submenu-1" id="submenu-1" class="menu__level" tabindex="-1" role="menu" aria-label="Vegetables">
<li class="menu__item" role="menuitem"><a class="menu__link" href="#">Stalk Vegetables</a></li>
<li class="menu__item" role="menuitem"><a class="menu__link" href="#">Roots &amp; Seeds</a></li>
<li class="menu__item" role="menuitem"><a class="menu__link" href="#">Cabbages</a></li>
<li class="menu__item" role="menuitem"><a class="menu__link" href="#">Salad Greens</a></li>
<li class="menu__item" role="menuitem"><a class="menu__link" href="#">Mushrooms</a></li>
<li class="menu__item" role="menuitem"><a class="menu__link" data-submenu="submenu-1-1" aria-owns="submenu-1-1" href="#">Sale %</a></li>
</ul>
<!-- Submenu 1-1 -->
<ul data-menu="submenu-1-1" id="submenu-1-1" class="menu__level" tabindex="-1" role="menu" aria-label="Sale %">
<li class="menu__item" role="menuitem"><a class="menu__link" href="#">Fair Trade Roots</a></li>
<li class="menu__item" role="menuitem"><a class="menu__link" href="#">Dried Veggies</a></li>
<li class="menu__item" role="menuitem"><a class="menu__link" href="#">Our Brand</a></li>
<li class="menu__item" role="menuitem"><a class="menu__link" href="#">Homemade</a></li>
</ul>
<!-- Submenu 2 -->
<ul data-menu="submenu-2" id="submenu-2" class="menu__level" tabindex="-1" role="menu" aria-label="Fruits">
<li class="menu__item" role="menuitem"><a class="menu__link" href="#">Citrus Fruits</a></li>
<li class="menu__item" role="menuitem"><a class="menu__link" href="#">Berries</a></li>
<li class="menu__item" role="menuitem"><a class="menu__link" data-submenu="submenu-2-1" aria-owns="submenu-2-1" href="#">Special Selection</a></li>
<li class="menu__item" role="menuitem"><a class="menu__link" href="#">Tropical Fruits</a></li>
<li class="menu__item" role="menuitem"><a class="menu__link" href="#">Melons</a></li>
</ul>
<!-- Submenu 2-1 -->
<ul data-menu="submenu-2-1" id="submenu-2-1" class="menu__level" tabindex="-1" role="menu" aria-label="Special Selection">
<li class="menu__item" role="menuitem"><a class="menu__link" href="#">Exotic Mixes</a></li>
<li class="menu__item" role="menuitem"><a class="menu__link" href="#">Wild Pick</a></li>
<li class="menu__item" role="menuitem"><a class="menu__link" href="#">Vitamin Boosters</a></li>
</ul>
<!-- Submenu 3 -->
<ul data-menu="submenu-3" id="submenu-3" class="menu__level" tabindex="-1" role="menu" aria-label="Grains">
<li class="menu__item" role="menuitem"><a class="menu__link" href="#">Buckwheat</a></li>
<li class="menu__item" role="menuitem"><a class="menu__link" href="#">Millet</a></li>
<li class="menu__item" role="menuitem"><a class="menu__link" href="#">Quinoa</a></li>
<li class="menu__item" role="menuitem"><a class="menu__link" href="#">Wild Rice</a></li>
<li class="menu__item" role="menuitem"><a class="menu__link" href="#">Durum Wheat</a></li>
<li class="menu__item" role="menuitem"><a class="menu__link" data-submenu="submenu-3-1" aria-owns="submenu-3-1" href="#">Promo Packs</a></li>
</ul>
<!-- Submenu 3-1 -->
<ul data-menu="submenu-3-1" id="submenu-3-1" class="menu__level" tabindex="-1" role="menu" aria-label="Promo Packs">
<li class="menu__item" role="menuitem"><a class="menu__link" href="#">Starter Kit</a></li>
<li class="menu__item" role="menuitem"><a class="menu__link" href="#">The Essential 8</a></li>
<li class="menu__item" role="menuitem"><a class="menu__link" href="#">Bolivian Secrets</a></li>
<li class="menu__item" role="menuitem"><a class="menu__link" href="#">Flour Packs</a></li>
</ul>
<!-- Submenu 4 -->
<ul data-menu="submenu-4" id="submenu-4" class="menu__level" tabindex="-1" role="menu" aria-label="Mylk &amp; Drinks">
<li class="menu__item" role="menuitem"><a class="menu__link" href="#">Grain Mylks</a></li>
<li class="menu__item" role="menuitem"><a class="menu__link" href="#">Seed Mylks</a></li>
<li class="menu__item" role="menuitem"><a class="menu__link" href="#">Nut Mylks</a></li>
<li class="menu__item" role="menuitem"><a class="menu__link" href="#">Nutri Drinks</a></li>
<li class="menu__item" role="menuitem"><a class="menu__link" data-submenu="submenu-4-1" aria-owns="submenu-4-1" href="#">Selection</a></li>
</ul>
<!-- Submenu 4-1 -->
<ul data-menu="submenu-4-1" id="submenu-4-1" class="menu__level" tabindex="-1" role="menu" aria-label="Selection">
<li class="menu__item" role="menuitem"><a class="menu__link" href="#">Nut Mylk Packs</a></li>
<li class="menu__item" role="menuitem"><a class="menu__link" href="#">Amino Acid Heaven</a></li>
<li class="menu__item" role="menuitem"><a class="menu__link" href="#">Allergy Free</a></li>
</ul>
</div>
</nav>
<!--各种样式列表 -->
<div>
<!--china tours-->
<div class="sidebar px3 md-flex flex-column justify-content items-center justify-center chinatours" hidden=hidden id=tours layout=nodisplay>
<div class="flex justify-start items-center sidebar-header">
<div aria-label="close sidebar" class="start-navbar-trigger items-start" on=tap:header-sidebar.toggle role=button tabindex=0><i class="fa fa-angle-down subarrow"></i></div>
<a on=tap:search.toggle> <i class="fa fa-search websearch"></i></a>
<div class="navicustomize"> <a href=/tour/create-my-trip.htm > CUSTOMIZE <i aria-hidden="true" class="fa fa-caret-right toptailorarrow"></i></a></div>
</div>
<nav class="sidebar-nav start-nav ">
<ul class="list-reset m0 p0 sidebar">
<li class=start-nav-item><a class=nav-link href=/ >Home</a></li>
<li class=start-nav-item>
<h3 class="nav-link accordion-header navimore"><a class=nav-link href=/tour/ >China Tours</a> </h3>
<li class=sub-nav-item><a href=/tour/top-china-tours/ >Top 10 Tours</a> </li>
<li class=sub-nav-item><a href=/tour/family-tours/ >Family Tours</a></li>
<li class=sub-nav-item><a href=/tour/year.htm >China Tours 2020</a></li>
<li class=sub-nav-item><a href=/tour/china-panda-tours/ >Panda Tours</a></li>
<li class=sub-nav-item><a href=/greatwall/hiking.htm >Great Wall Hiking</a></li>
<li class=sub-nav-item><a href= /tour/china-nature-tours/ >Nature Tours</a></li>
<li class=sub-nav-item><a href=/tour/silk-road-tours/ >Silk Road Tours</a></li>
<li class=sub-nav-item><a href=/tour/expats-tours.htm >China Expats Tours</a></li>
</li>
</ul>
<span class="naviback"><a class=nav-link on=tap:header-sidebar.toggle>Back</a></span>
</nav>
</div>
<!--destinations-->
<div class="sidebar px3 md-flex flex-column justify-content items-center justify-center destinationtours" hidden=hidden id=destinations layout=nodisplay>
<div class="flex justify-start items-center sidebar-header">
<div aria-label="close sidebar" class="start-navbar-trigger items-start" on=tap:header-sidebar.toggle role=button tabindex=0><i class="fa fa-angle-down subarrow"></i></div>
<a on=tap:search.toggle> <i class="fa fa-search websearch"></i></a>
<div class="navicustomize"> <a href=/tour/create-my-trip.htm > CUSTOMIZE <i aria-hidden="true" class="fa fa-caret-right toptailorarrow"></i></a></div>
</div>
<nav class="sidebar-nav start-nav ">
<ul class="list-reset m0 p0 sidebar">
<li class=start-nav-item>
<h3 class="nav-link accordion-header navimore"><a class=nav-link href=/citytour/ >Destinations</a> </h3>
<li class=sub-nav-item><a href=/beijing/tours.htm >Beijing</a></li>
<li class=sub-nav-item><a href=/shanghai/tours.htm >Shanghai</a></li>
<li class=sub-nav-item><a href=/guilin/tours.htm >Guilin</a></li>
<li class=sub-nav-item><a href=/zhangjiajie/tours.htm >Zhangjiajie</a></li>
<li class=sub-nav-item><a href=/yunnan/tours.htm >Yunnan</a></li>
<li class=sub-nav-item><a href=/huangshantours.htm >Huangshan</a></li>
<li class=sub-nav-item><a href=/xian/tours.htm >Xi&#39;an</a></li>
<li class=sub-nav-item><a href=/chengdu/tours.htm >Chengdu</a></li>
</li>
</ul>
<span class="naviback"><a class=nav-link on=tap:header-sidebar.toggle>Back</a></span>
</nav>
</div>
<!--travel guide-->
<div class="sidebar px3 md-flex flex-column justify-content items-center justify-center travelguide" hidden=hidden id=guide layout=nodisplay>
<div class="flex justify-start items-center sidebar-header">
<div aria-label="close sidebar" class="start-navbar-trigger items-start" on=tap:header-sidebar.toggle role=button tabindex=0><i class="fa fa-angle-down subarrow"></i></div>
<a on=tap:search.toggle> <i class="fa fa-search websearch"></i></a>
<div class="navicustomize"> <a href=/tour/create-my-trip.htm > CUSTOMIZE <i aria-hidden="true" class="fa fa-caret-right toptailorarrow"></i></a></div>
</div>
<nav class="sidebar-nav start-nav ">
<ul class="list-reset m0 p0 sidebar">
<li class=start-nav-item><a class=nav-link href=/ >Home</a></li>
<li class=start-nav-item>
<h3 class="nav-link accordion-header navimore"><a class=nav-link href=/travelguide/ >Travel Guide</a> </h3>
<li class=sub-nav-item><a href=/map/ >China Maps</a></li>
<li class=sub-nav-item><a href=/travelguide/article/ >China Tour Planning</a></li>
<li class=sub-nav-item><a href=/travelguide/top-highlights-of-china.htm >Best of China</a></li>
<li class=sub-nav-item><a href=/travelguide/visa-application/ >China Visas</a></li>
<li class=sub-nav-item><a href=/travelguide/china-travel-city-guide.htm >China Area Guide</a></li>
<li class=sub-nav-item><a href=/travelguide/china-attraction-guide.htm >China Top Attractions</a></li>
<li class=sub-nav-item><a href=/weather/ >China Weather</a></li>
</li>
</ul>
<span class="naviback"><a class=nav-link on=tap:header-sidebar.toggle>Back</a></span>
</nav>
</div>
<!--culture-->
<div class="sidebar px3 md-flex flex-column justify-content items-center justify-center culture" hidden=hidden id=culture layout=nodisplay>
<div class="flex justify-start items-center sidebar-header">
<div aria-label="close sidebar" class="start-navbar-trigger items-start" on=tap:header-sidebar.toggle role=button tabindex=0><i class="fa fa-angle-down subarrow"></i></div>
<a on=tap:search.toggle> <i class="fa fa-search websearch"></i></a>
<div class="navicustomize"> <a href=/tour/create-my-trip.htm > CUSTOMIZE <i aria-hidden="true" class="fa fa-caret-right toptailorarrow"></i></a></div>
</div>
<nav class="sidebar-nav start-nav ">
<ul class="list-reset m0 p0 sidebar">
<li class=start-nav-item><a class=nav-link href=/ >Home</a></li>
<li class=start-nav-item>
<h3 class="nav-link accordion-header navimore"><a class=nav-link href=/travelguide/culture/ >Culture</a> </h3>
<li class=sub-nav-item><a href=/travelguide/chinese-zodiac/ >Chinese Zodiac</a></li>
<li class=sub-nav-item><a href=/travelguide/chinese-food/ >Chinese Food</a></li>
<li class=sub-nav-item><a href=/travelguide/culture/china-history.htm >China History</a></li>
<li class=sub-nav-item><a href=/travelguide/religion.htm >Chinese Religions</a></li>
<li class=sub-nav-item><a href=/festivals/ >Chinese Festivals</a></li>
<li class=sub-nav-item><a href=/travelguide/special-report/chinese-new-year/ >Chinese New Year</a></li>
<li class=sub-nav-item><a href=/travelguide/kungfu/ >Kung Fu</a></li>
<li class=sub-nav-item><a href=/travelguide/chinese-tea/ >Chinese Tea</a></li>
</li>
</ul>
<span class="naviback"><a class=nav-link on=tap:header-sidebar.toggle>Back</a></span>
</nav>
</div>
<!--asia-->
<div class="sidebar px3 md-flex flex-column justify-content items-center justify-center asia" hidden=hidden id=asia layout=nodisplay>
<div class="flex justify-start items-center sidebar-header">
<div aria-label="close sidebar" class="start-navbar-trigger items-start" on=tap:header-sidebar.toggle role=button tabindex=0><i class="fa fa-angle-down subarrow"></i></div>
<a on=tap:search.toggle> <i class="fa fa-search websearch"></i></a>
<div class="navicustomize"> <a href=/tour/create-my-trip.htm > CUSTOMIZE <i aria-hidden="true" class="fa fa-caret-right toptailorarrow"></i></a></div>
</div>
<nav class="sidebar-nav start-nav ">
<ul class="list-reset m0 p0 sidebar">
<li class=start-nav-item><a class=nav-link href=/ >Home</a></li>
<li class=start-nav-item>
<h3 class="nav-link accordion-header navimore"><a class=nav-link href=/tour/asia-tours/ >Asia Tours</a> </h3>
<li class=sub-nav-item><a href=https://www.asiahighlights.com/thailand/tours/?utm_source=chinahighlights&amp;utm_medium=referral&amp;utm_campaign=asiatours >Thailand</a></li>
<li class=sub-nav-item><a href=https://www.asiahighlights.com/vietnam/tours/?utm_source=chinahighlights&amp;utm_medium=referral&amp;utm_campaign=asiatours >Vietnam</a></li>
<li class=sub-nav-item><a href=https://www.asiahighlights.com/india/tours/?utm_source=chinahighlights&amp;utm_medium=referral&amp;utm_campaign=asiatours >India</a></li>
<li class=sub-nav-item><a href=https://www.asiahighlights.com/japan/tours/?utm_source=chinahighlights&amp;utm_medium=referral&amp;utm_campaign=asiatours >Japan</a></li>
<li class=sub-nav-item><a href=https://www.asiahighlights.com/myanmar/tours/?utm_source=chinahighlights&amp;utm_medium=referral&amp;utm_campaign=asiatours >Myanmar</a></li>
<li class=sub-nav-item><a href=https://www.asiahighlights.com/tours/?utm_source=chinahighlights&amp;utm_medium=referral&amp;utm_campaign=asiatours >Top Asia Tours</a></li>
</li>
</ul>
<span class="naviback"><a class=nav-link on=tap:header-sidebar.toggle>Back</a></span>
</nav>
</div>
<!--search-->
<div class="sidebar px3 md-flex flex-column justify-content items-center justify-center search" hidden=hidden id=search layout=nodisplay>
<div class="flex justify-start items-center sidebar-header">
<div aria-label="close sidebar" class="start-navbar-trigger items-start" on=tap:header-sidebar.toggle role=button tabindex=0><i class="fa fa-angle-down subarrow"></i></div>
<div class="navicustomize"> <a href=/tour/create-my-trip.htm > CUSTOMIZE <i aria-hidden="true" class="fa fa-caret-right toptailorarrow"></i></a></div>
</div>
<nav class="sidebar-nav start-nav ">
<ul class="list-reset m0 p0 sidebar">
<li class=start-nav-item><a class=nav-link href=/ >Home</a></li>
<div class="siteSearch pull-right hidden-xs">
<form id="searchbox_001281624266240652297:cl1fy1cxepi" name="googlesreach" action="https://secure.chinahighlights.com/result.asp">
<input type="hidden" value="001281624266240652297:cl1fy1cxepi" name="cx">
<input type="hidden" value="FORID:9" name="cof">
<input type="text" onfocus="this.value = ''" class="strkeys" placeholder="site search" name="q">
<input type="image" class="submits" src="https://data.chinahighlights.com/pic/site-search-bg.png">
<input type="hidden" name="__ftoken__" value="MTU5ODMzNDc2NDQ0NA==.3664784f0395175e7de44382781cd7f7cb647e2a"></form>
</div>
</ul>
<span class="naviback"><a class=nav-link on=tap:header-sidebar.toggle>Back</a></span>
</nav>
</div>
<!--正文-->
<h1>信息更新提醒</h1>
<div class="updateinfo">
<p><a href="xxx">The Chinese government has lifted the ban on domestic travel. Now...</a></p>
</div>
<!--结束-->
<h1>页面头部大图</h1>
<div class="infotopimage">
<img src=https://www.chinahighlights.com/image/tour-detail/china-tour/china-tours-2020-top-amp.jpg width=600 height=800 alt=xxx class="img-responsive">
</div>
<!--结束-->
<h1>信息头部分类H1副标题 </h1>
<div class=topcontent>
<div class="infocategory">Chinese Food</div>
<h1>Spicy - Central China, Especially Sichuan and Hunan</h1>
<p class="subheadline">Spiciness is also called the "pungent flavor"
among the five flavors. It can not only whet
the appetite.</p>
<!--结束-->
<h1>社媒分享按钮</h1>
<div class="followus">
Follow Us
<ul class="infoshare">
<li><a href="https://www.facebook.com/Chinahighlights" rel="nofollow" title="Follow us on Facebook" class="fb" target="_blank"><img src=https://www.chinahighlights.com/pic/guide/info-template-facebook.png width=25px height=25px alt=xxx></a></li>
<li><a href="https://twitter.com/Chinahighlights" rel="nofollow" title="Share us on Twitter" class="tw" target="_blank"><img src=https://www.chinahighlights.com/pic/guide/info-template-twitter.png width=25px height=25px alt=xxx></a></li>
<li><a href="https://www.instagram.com/chinahighlights/" rel="nofollow" title="Follow us on Instagram" class="linkin" target="_blank"><img src=https://www.chinahighlights.com/pic/guide/info-template-ins.png width=25px height=25px alt=xxx></a></li>
</ul>
</div>
<!--结束-->
<h1>信息页面作者,更新时间</h1>
<div class="authorupdate">By <strong>Candice Song</strong>Update 20.08.2020</div>
<!--结束-->
</div>
<div class="information">
<h1>段落文字</h1>
<p>Discover China through our <a href=xxx>unique tours</a> with award-winning guides and with 1:1 help from a dedicated China expert, every step of the way. China Highlights have specialized in private China tours for over 20 years; it's all we do. "Nihao and welcome to China!"</p>
<p><strong>Discover China through our unique tours</strong> with award-winning guides and with 1:1 help from a dedicated China expert, every step of the way. China Highlights have specialized in private China tours for over 20 years; it's all we do. "Nihao and welcome to China!"</p>
<!--结束-->
<h1>视频</h1>
<div class="infovideo">
<video controls="" height="344" layout="responsive" poster="//data.chinahighlights.com/video/chinese-new-year.jpg" width="600">
<video playsinline="" webkit-playsinline="" controls="" poster="//data.chinahighlights.com/video/chinese-new-year.jpg"><source src="https://data.chinahighlights.com/video/chinese-new-year.mp4" type="video/mp4"></video>
</div>
<!--结束-->
<h1>信息页面插图</h1>
<div class="infoimage">
<img src=https://www.chinahighlights.com/image/amp/cny/fish-dish.jpg alt=xxx class="img-responsive" width=600px height=414px>
<span class="infoimagetitle">Fish is a must for the Chinese New Year reunion dinner.</span>
</div>
<!--结束-->
<h1>统一H2标题</h1>
<h2>Chinese New Year Foods — Most Have Lucky Meanings</h2>
<!--结束-->
<h1>信息页面表格</h1>
<div class="table-responsive">
<table class="infotable"><tbody><tr><th>
Solar Date (2020)
</th><th>
Lunar Date
</th><th>
Title
</th></tr><tr><td>
January 17th
</td><td>
December 23rd
</td><td>
Little Year
</td></tr><tr><td>
January 24th
</td><td>
December 30th
</td><td>
<a href="/travelguide/festivals/chinese-new-year-eve.htm" > Chinese New Year's Eve
</a></td></tr><tr><td>
January 25th
</td><td>
January 1st
</td><td>
Spring Festival
</td></tr><tr><td>
February 8th
</td><td>
January 15th
</td><td>
<a href="/festivals/lantern-festival.htm" >Lantern Festival</a>
</td></tr></tbody></table>
</div>
<!--结束-->
<h1>统一H3标题</h1>
<h3>Chinese New Year Foods — Most Have Lucky Meanings</h3>
<!--结束-->
<h1>列表</h1>
<ul class="infolist">
<li><a href="/travelguide/festivals/chinese-new-year-greetings.htm" >Top 30 Chinese New Year Greetings</a></li>
<li><a href="/travelguide/special-report/chinese-new-year/happy-new-year-in-chinese.htm" >How to Say Happy Chinese New Year in Chinese</a></li>
<li><a href="/travelguide/chinese-food/chinese-new-year-food.htm" > Chinese New Year Food: Top 7 Lucky Foods and Symbolism</a></li>
<li><a href="/travelguide/festivals/when-chinese-new-year.htm" >Chinese New Year 2020 </a></li>
</ul>
<!--结束-->
<h1>信息页面中广告图</h1>
<div class="infoad">
<img src=https://data.chinahighlights.com/image/tour-detail/china-tour/contact-us-updated-travel-information-amp.jpg alt=xxx class="img-responsive" width=600px height=750px>
</div>
<!--结束-->
<h1>信息页面加载更多内容按钮</h1>
<div class="loadmore"><a href=xxx>Continue reading</a></div>
<!--结束-->
</div>
<h1>信息页面文章推荐</h1>
<div class="articlereco">
<div class="recotitlebg">
<h2>New Update</h2>
</div>
<div class="updatearticle">
<span class="category">Chinese Food</span>
<span class="newarticletitle"><a href="xxx">Chinese Food Ingredients - What Chinese Eat</a></span>
<a href="xxx"> <img src=https://www.chinahighlights.com/image/amp/cny/fish-dish.jpg alt=xxx class="img-responsive" width=600px height=414px ></a>
<span class="articlemore"><a href="xxx">Read <i aria-hidden="true" class="fa fa-angle-right"></i></a></span>
</div>
</div>
<div class="articlereco">
<div class="recotitlebg">
<h2>Read Next</h2>
</div>
<div class="articlenext">
<img src=https://www.chinahighlights.com/image/amp/cny/fish-dish.jpg alt=xxx class="img-responsive" width=600px height=414px >
<span class="categorycenter">Chinese Food</span>
<span class="articlenexttitle"><a href="xxx">Chinese Food Ingredients - What Chinese Eat</a></span>
</div>
<div class="articlenext">
<img src=https://www.chinahighlights.com/image/amp/cny/fish-dish.jpg alt=xxx class="img-responsive" width=600px height=414px >
<span class="categorycenter">Chinese Food</span>
<span class="articlenexttitle"><a href="xxx">Chinese Food Ingredients - What Chinese Eat</a></span>
</div>
<div class="articlenext">
<img src=https://www.chinahighlights.com/image/amp/cny/fish-dish.jpg alt=xxx class="img-responsive" width=600px height=414px >
<span class="categorycenter">Chinese Food</span>
<span class="articlenexttitle"><a href="xxx">Chinese Food Ingredients - What Chinese Eat</a></span>
</div>
</div>
<!--结束-->
<h1>信息页面TM引导</h1>
<div class="infotailor">
<span class="infotailorword">We are here to help you...<br> start planning your tailor-made China tour with 1-1 help from our travel advisors.
<span class="infotailormade"><a href="https://www.chinahighlights.com/tour/create-my-trip.htm">Create Your Trip <i aria-hidden="true" class="fa fa-caret-right"></i></a></span>
</span>
</div>
<!--结束-->
<h1>产品页面内导航</h1>
<div class="tournavi">
<span class="TopNavi"><a href="#highlights">Highlights</a></span>
<span class="TopNavi"><a href="#itinerary">Itinerary</a></span>
<span class="TopNavi"><a href="#feedback">Feedback</a></span>
<span class="TopNaviLast"><a href="#price">Price</a></span>
</div>
<!--结束-->
<h1>产品页面亮点内容</h1>
<div class=citytours>
<h2 >Tour 'Wow' Points</h2>
<h3><em>Discover</em> a Little-Known Pristine Land on the Border between Qinghai and Sichuan</h3>
<p class="center">This is the ancient battlefield of King Gesar as told in the Tibetan legend. It is a forgotten wonderland blessed by the Tibetan gods. </p>
<img src="https://www.chinahighlights.com/image/tour-detail/chengdu/cd-83-experience-2-grassland-1-amp.jpg" class="img-responsive topimg" alt="the people standing on the bank of the lake" width=600px height=435px >
<img src="https://www.chinahighlights.com/image/tour-detail/chengdu/cd-83-experience-2-grassland-1-amp.jpg" class="img-responsive bottomimg" alt="painting on the rock" width=600px height=435px >
<h3><em>Enjoy</em>the Sunset at the First Bend of the Yellow River</h3>
<p class="center">Drive through the paradise of the local nomadic people in the Nuoergai Wetland Nature Reserve. Enjoy the ribbon-like bends of the Yellow River at sunset.</p>
<img src="https://www.chinahighlights.com/image/tour-detail/chengdu/cd-83-experience-2-grassland-1-amp.jpg" class="img-responsive topimg" alt="sunset at the first bend of the Yellow River" width=600px height=435px >
<img src="https://www.chinahighlights.com/image/tour-detail/chengdu/cd-83-experience-2-grassland-2-amp.jpg" class="img-responsive bottomimg" alt="Gers on the grassland" width=600px height=435px >
<h3><em>Uncover</em> the Small Sects of the Tibetan Buddhism at the Less Touristy Monasteries. </h3>
<p class="center">The magnificent golden roof, the white pagodas, the colorful butter sculptures and thousands of prayer wheels of the monasteries will bring you to the spirit world of the Tibetan Buddhism.</p>
<img src="https://www.chinahighlights.com/image/tour-detail/chengdu/cd-83-experience-3-Tibet-1-amp.jpg" class="img-responsive topimg" alt="the white pagoda of Langyi Monastery" width=600px height=435px >
<img src="https://www.chinahighlights.com/image/tour-detail/chengdu/cd-83-experience-3-Tibet-2-amp.jpg" class="img-responsive bottomimg" alt="the colorful building of Saige lamasery " width=600px height=435px >
</div>
<!--结束-->
<h1>产品页面whyus内容</h1>
<div class="whyus">
<img src="https://data.chinahighlights.com/image/tour-detail/guilin/gl-3-why-us-bg-mobile-longsheng.jpg" class="img-responsive" alt="Longji Terraced Fields" width=600px height=1060px >
<div class="traptop">
<h2 class=whyus>We Fix the Uncertainty & Concern:</h2>
<ul class="top">
<li>Confirm where you can go.</li>
<li>Help guide you to get the required travel documents.</li>
<li>Offer the best options when last minute changes occur.</li>
<li>Promise full refund for any reason when canceling before your arrival day.</li>
</ul>
<h2 class=whyus>Tourist Trap? Never Happens with Us:</h2>
<ul>
<li>You control the pace of the trip and won't be pushed.</li>
<li>No time or money wasted in commission shops.</li>
<li>No no-shows or risky bookings with one-man companies.</li>
</li>
</ul>
</div>
</div>
<!--结束-->
<h1>产品页面预定流程和用户反馈</h1>
<div class=citytours>
<h2 >Finish Your Booking in as Quick as 1 Day</h2>
<div class="bookingcontent">
<div class="proceduretop">
<span class="proceduretitlebg"> <img src="https://www.chinahighlights.com/image/tour-detail/guilin/booking-procedure-1.png" width=35px height=35px class="step"></span>
<span class="proceduretitle">Tell us your dream travel idea</span>
</div>
<div class="procedurebottom">
<span class="proceduretitlebg"> <img src="https://www.chinahighlights.com/image/tour-detail/guilin/booking-procedure-2.png" width=35px height=35px class="step"></span>
<a id="feedback"></a> <span class="proceduretitle">Work out your unique plan with 1 to 1 expert advice</span>
</div>
</div>
<h2 >10000+ Travelers Say</h2>
<img src="https://www.chinahighlights.com/image/tour-detail/guilin/tripadvisor-2020.png" alt="the certificate of TA excellent 2020" width=120px height=120px class=taleft >
<img src=https://data.chinahighlights.com/pic/ta-rating-5-1.png width=192px height=35px class=tarating >
<span class=ratingnumber><strong>10000+</strong> excellent reviews</span>
</div>
<h1>产品页面用户反馈</h1>
<div class="feedbackbg">
<p class=feedbacktitle>Best experience ever!</p>
<p>Our tour guide Mervyn was extremely knowledgeable. We had to change our plans due to a virus closure and she found other activities that we loved! By the end of the trip we felt like we had made a close friend and would enjoy spending time together again.</p>
<p class=feedbackdate>Angela T from US, July, 2020</p>
</div>
<!--结束-->
<div class="clear"></div>
<div class=citytours>
<h2 >Tour Map</h2>
<img src="https://www.chinahighlights.com/image/tour-detail/chengdu/cd-83-map.jpg" class="img-responsive" alt="Discover the Mysterious Tibetan Area of Northern Sichuan tour map" width=730px height=500px>
<a id="itinerary"></a>
<div class="titlebg">
<h2 >Itinerary Quick Look</h2>
</div>
<h1>产品页面具体行程</h1>
<div class="tourcontent" >
<div class="tourday">
<span class="tourdaytitlebg" >DAY 1</span>
<span class="tourdaytitle" >Chengdu to Songpan (322 km, 6 hrs)</span>
<p >Drive from Chengdu to Songpan and enjoy the mountain scenery along the way. Explore the Songpan ancient town in the late afternoon. </p>
</div>
<div class="tourday">
<span class="tourdaytitlebg" >DAY 2</span>
<span class="tourdaytitle" >Songpan to Ruoergai to Tangke (200 km, 3½ hrs)</span>
<p >Ruoergai Huahu (Flower Lake) , the Roergai grasslands, and the sunset at the first bend of the Yellow River.</p>
</div>
<div class="tourday">
<span class="tourdaytitlebg" >DAY 3</span>
<span class="tourdaytitle" >Tangke to A'ba (140 km, 3 hrs)</span>
<p>Saige Lamasery and Langyi Monastery</p>
</div>
<div class="tourday">
<span class="tourdaytitlebg" >DAY 4</span>
<span class="tourdaytitle" >A'ba</span>
<p >The Lianbaoyeze Scenic Area. This is a secret place hidden away in the mountains and includes a beautiful lake surrounded by peaks. </p>
</div>
<div class="tourday">
<span class="tourdaytitlebg" >DAY 5</span>
<span class="tourdaytitle" >5 A'ba to Chengdu (477 km, 8 hrs)</span>
<p >Drive from A'ba back to Chengdu. Visit the Ganbao Tibetan village on the way.</p>
</div>
</div>
<!--结束-->
<h1>产品页面酒店</h1>
<h2 >Hotel Selection</h2>
<span class=hoteltitle>—the Icing on the Cake</span>
<p class=center>Boutique hotels are recommended to enrich your travel experience. </p>
<img src="https://www.chinahighlights.com/image/tour-detail/chengdu/cd-83-hotel-1-amp.jpg" class="img-responsive topimg" alt="the decorations of Duomei Linka Hotel" width=600px height=435px >
<div class="bottomimg">
<img src="https://www.chinahighlights.com/image/tour-detail/chengdu/cd-83-hotel-2-amp.jpg" class="img-responsive bottomleft" alt="the lobby of the Duomei Linka Hotel" width=600px height=705px ><a id="price"></a>
<img src="https://www.chinahighlights.com/image/tour-detail/chengdu/cd-83-hotel-3-amp.jpg" class="img-responsive bottomright" alt="the bedroom of Duomei Linka Hotel" width=600px height=705px >
</div>
</div>
<!--结束-->
<h1>产品页面价格</h1>
<div class="tourprice">
<span class=pricefrom>From<strong>CNY 8340</strong>p/p</span>
<span class=priceterm>Based on a private tour for 2 people. price varies depending on program, travel date, number of people and chosen hotel</span>
<p>Price includes:</p>
<ul>
<li>Private air-conditioned business car with big windows and ample space</li>
<li>English speaking local guide</li>
<li>Activities, hotels, and meals listed in the itinerary</li>
<li>24/7 helpline for while you are traveling</li>
</ul>
<!--结束-->
<h1>产品页面微信</h1>
<p class="wechat">Contact us via WeChat or click the red button to start planning.</p>
<span class="wechatname">chinahighlightstour</span>
<img src=https://data.chinahighlights.com/image/forms/follow-us-wechat-2020.png width=100px height=100px class="code">
<!--结束-->
</div>
<h1>产品页面预定按钮</h1>
<div class="footerBtn">
<a href="https://www.chinahighlights.com/secureforms/inquiry?cli_no=cd-83" rel="nofollow" target="_top"><button type="submit">Start Travel Now<i aria-hidden="true" class="fa fa-angle-right"></i></button></a>
</div>
<!--结束-->
<h1>底部</h1>
<div class="infobottom">
<div class="bottomwechat">
<p><img src="https://data.chinahighlights.com/pic/guide/info-template-qr-code.jpg" alt=xxx width=100px height=100px></p>
<span class="wechattitle">Contact us via WeChat</span>
</div>
<div class="bottommedia">
<span class="followtitle">Follow Us</span>
<ul>
<li> <a href="https://www.facebook.com/Chinahighlights" rel="nofollow" title="Follow us on Facebook" class="fb" target="_blank">
<i class="fa fa-facebook"></i>Facebook
</a></li>
<li><a href="https://twitter.com/Chinahighlights" rel="nofollow" title="Share us on Twitter" class="tw" target="_blank"> <i class="fa fa-twitter"></i>Twitter </a></li>
<li> <a href="https://www.instagram.com/chinahighlights/" rel="nofollow" title="Follow us on Instagram" class="linkin" target="_blank">
<i class="fa fa-instagram" aria-hidden="true"></i>
Instagram </a></li>
<li><i class="fab fa-weixin" aria-hidden="true"></i></li>
</ul>
</div>
<div class="bottomlinks">
<span class="followtitle"><a href="/aboutus/" rel="nofollow">About Us</a></span>
<ul>
<li><a href="/contactus/" rel="nofollow">Contact Us</a></li>
<li><a href="/privacy.htm" rel="nofollow">Privavy</a></li>
<li><a href="/aboutus/terms.htm" rel="nofollow">Terms</a></li>
<li><a href="/partner/" rel="nofollow">Partner</a></li>
<li><a href="/aboutus/jobs-volunteer.htm" rel="nofollow">Work for Us</a></li>
</ul>
</div>
<div class="featureon">
<span class="followtitle">Featured on</span>
<img src=https://data.chinahighlights.com/pic/guide/info-template-feature-on.png alt=xxx class="img-responsive" width=436px height=250px >
</div>
</div>
<div class="bottomlogo">
© 1998-2020 China Highlights <br>— Discovery Your Way!
</div>
</div>
<script src="https://data.chinahighlights.com/js/mobile-menu.js"></script>
<script>
(function () {
var menuEl = document.getElementById('ml-menu'),
mlmenu = new MLMenu(menuEl, {
// breadcrumbsCtrl : true, // show breadcrumbs
// initialBreadcrumb : 'all', // initial breadcrumb text
backCtrl: true, // show back button
// itemsDelayInterval : 60, // delay between each menu item sliding animation
//onItemClick: loadDummyData // callback: item that doesn´t have a submenu gets clicked - onItemClick([event], [inner HTML of the clicked item])
});
// mobile menu toggle
var openMenuCtrl = document.querySelector('.action--open'),
closeMenuCtrl = document.querySelector('.action--close');
openMenuCtrl.addEventListener('click', openMenu);
closeMenuCtrl.addEventListener('click', closeMenu);
function openMenu() {
classie.add(menuEl, 'menu--open');
closeMenuCtrl.focus();
}
function closeMenu() {
classie.remove(menuEl, 'menu--open');
openMenuCtrl.focus();
}
})();
</script>
</body></html>