|
|
<!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 & 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 & 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 & 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'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&utm_medium=referral&utm_campaign=asiatours >Thailand</a></li>
|
|
|
<li class=sub-nav-item><a href=https://www.asiahighlights.com/vietnam/tours/?utm_source=chinahighlights&utm_medium=referral&utm_campaign=asiatours >Vietnam</a></li>
|
|
|
<li class=sub-nav-item><a href=https://www.asiahighlights.com/india/tours/?utm_source=chinahighlights&utm_medium=referral&utm_campaign=asiatours >India</a></li>
|
|
|
<li class=sub-nav-item><a href=https://www.asiahighlights.com/japan/tours/?utm_source=chinahighlights&utm_medium=referral&utm_campaign=asiatours >Japan</a></li>
|
|
|
|
|
|
<li class=sub-nav-item><a href=https://www.asiahighlights.com/myanmar/tours/?utm_source=chinahighlights&utm_medium=referral&utm_campaign=asiatours >Myanmar</a></li>
|
|
|
<li class=sub-nav-item><a href=https://www.asiahighlights.com/tours/?utm_source=chinahighlights&utm_medium=referral&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> |