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.
1039 lines
42 KiB
CSS
1039 lines
42 KiB
CSS
5 years ago
|
@charset "utf-8";
|
||
|
|
|
||
|
|
|
||
|
|
/* 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 */
|