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.
170 lines
9.6 KiB
CSS
170 lines
9.6 KiB
CSS
@charset "utf-8";
|
|
/* CSS Document */
|
|
/* video style */
|
|
video { right: 0; top: 0; width: auto; height: auto; z-index: -100; background: url(/video/guilin-landscapes.jpg) no-repeat; background-size: cover; position: absolute; }
|
|
.videoBg { height: 432px; position: relative; width: 100%; }
|
|
.videoBg .textBg { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.2); }
|
|
.videoBg .textBg h1 { display: block; width: 100%; text-align: center; font-size: 60px; position: absolute; left: 0; top: calc(50% - 45px); height: 90px; color: #fff; border-bottom: none; font-weight: 600; text-shadow: 0 1px 10px rgba(0,0,0,.8); letter-spacing: 0.05em; }
|
|
.ourAdvantage { padding:10px 0 40px;}
|
|
.ourAdvantage h2 { margin:50px 0 20px; font-size:26px; display: block;}
|
|
.photoBlock { margin:-10px 0 30px;font-style: italic;}
|
|
.photoBlock img { margin-bottom:10px; border-radius:4px;}
|
|
/* guilin tours */
|
|
.guilinTours { display: block; background:#e8e8e8; padding:80px 0;}
|
|
.guilinTours h2 { font-size:35px; font-weight:300; margin:0 0 50px;}
|
|
.guilinTours h3 { margin:0 0 15px; font-size:28px; font-weight:300;}
|
|
.guilinTours .container { width:90%; margin:0 auto;}
|
|
.guilinTours .row { margin-left:-30px; margin-right:-30px;}
|
|
.guilinTours .col-md-8 { padding-left:30px; padding-right:30px;}
|
|
.guilinTours .container h2 { text-align:center;}
|
|
.guilinTours .container p { text-align:center;}
|
|
.guilinTours .guilinTourList { display: block; border:1px solid #bbb; border-radius:6px; position:relative;}
|
|
.guilinTours .guilinTourList img { border-radius:5px;}
|
|
.guilinTours .guilinTourList .itineraryInfo { display: block; background:#fff; padding:20px; width:100%; position:absolute; left:0; bottom:100px;}
|
|
.guilinTours ul li { font-size:16px; line-height:22px; margin-bottom:10px; color:#777;}
|
|
.guilinTours ul li em { font-style: normal; background:#a31022; border-radius:2px; width:15px; height:15px; display: inline-block; padding:2px 5px; color:#fff; text-align:center; font-size:14px; float: left; margin:4px 20px 30px 0;}
|
|
.guilinTours .guilinTourList .linkBg { background:rgba(0,0,0,.4); width:100%; height:100px; position:absolute; left:0; bottom:0;}
|
|
.guilinTours .guilinTourList .linkBg .viewMore { display: block; border:3px solid #fff; border-radius:6px; text-align:center; width:200px; height:44px; position: absolute; left:calc(50% - 100px); bottom:calc(50% - 22px);}
|
|
.guilinTours .guilinTourList .linkBg .viewMore a { display: block; text-decoration: none; color:#fff; font-size:22px; padding-top:2px;}
|
|
.guilinTours .guilinTourList .linkBg .viewMore .fa { font-size:140%; margin-left:15px; margin-top:-1px; vertical-align: middle;}
|
|
/* reviews */
|
|
.tripAdvisor { display: block; text-align:center; padding-left:40px; width:500px; float: right; background:#f1f1f1; margin:25px 0 30px 30px; padding:20px; border-radius:4px;}
|
|
.TAname { font-size:20px; display: block; color:#000; margin-bottom:5px;}
|
|
.reviewNumber { display: block; margin-top:5px; border-bottom:1px solid #d1d1d1; padding-bottom:20px; margin-bottom:20px; }
|
|
.reviewDetail { display: block; font-style: italic; color:#999; font-size:16px; background:url(/pic/quote-left.png) no-repeat left 5px / 18px 14px; padding-left:25px;}
|
|
.byWho { display: block; font-size:14px; margin-top:10px; background:url(/pic/quote-right.png) no-repeat right bottom / 18px 14px;}
|
|
/* tailor and difference */
|
|
.go-tailor { display: block; padding:80px 0 60px;}
|
|
.go-tailor h2 { font-size:33px; font-weight:300; margin:0 0 40px;}
|
|
.go-tailor p strong { font-size:22px; font-weight:500; color:#444;}
|
|
.go-tailor p em { font-size:20px; color:#777; font-weight:300; line-height:30px;}
|
|
.tailorLead { padding:50px 0 50px 90px; background:url(/image/guilin-tours/bg-transparent.png) no-repeat left top; position:relative;}
|
|
.tailorLead .goAll { display: block; position:absolute; top: 0; left:0; width:100%; height:100%;}
|
|
.tailorLead .goAll a { display: block; width: 100%; height:100%;}
|
|
.tailorLead h3 { font-size:22px; margin:0 0 25px;}
|
|
.formBlock { display: block; border-bottom:1px solid #d1d1d1; padding-bottom:20px; margin-bottom:20px; overflow: hidden;}
|
|
.formBlock .formTitle { display: block; font-size:16px; font-weight:600; margin-bottom:15px;}
|
|
.formBlock .selectOptionFloat { display: block; float: left; width:50%; margin-bottom:10px; font-size:16px; font-weight:300;}
|
|
.formBlock .selectOption { display: block; margin-bottom:10px; font-size:16px; font-weight:300;}
|
|
.formBlock .selectOption:last-child input[type="radio"] { float: left; display: inline-block; margin:3px 8px 15px 0;}
|
|
.formBlock input[type="checkbox"] { margin:0 5px 0 0;}
|
|
.formBlock input[type="radio"] { margin:-3px 5px 0 0; vertical-align: middle;}
|
|
.goFurther { background:url(/pic/white-arrow-12x17.png) no-repeat 90% center #a31022; color:#fff; font-size:20px; display: block;margin:30px 15px; border-radius:4px; font-weight:400;}
|
|
.goFurther a { text-decoration: none; color:#fff; display: block; padding:12px 0 12px 30px; }
|
|
/* magin input */
|
|
.mgc { position: relative; width: 18px; height: 18px; background-clip: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; margin: -0.15px 0.6px 0 0; vertical-align: text-bottom; border-radius: 2px; -webkit-transition: background-color 0.25s; transition: background-color 0.25s; background-color: #fff; border: 1px solid #555; }
|
|
.mgc:checked:after { content: ''; display: block; height: 7px; width: 11px; border: 0 solid #000; border-width: 0 0 2px 2px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); position: absolute; top: 3px; left: 3px; }
|
|
.mgc:disabled { opacity: 0.65; }
|
|
.mgc:focus { outline: none; box-shadow: inset 0 1px 1px rgba(255,255,255,0.075), 0 0px 2px #38a7ff; }
|
|
.mgc:checked { background-color: #fff; border-color: #d7d7d7; }
|
|
.mgc:checked:after { border-color: #414141; }
|
|
.mgc-primary { background-color: #fff; border: 1px solid #999; }
|
|
.mgc-primary:checked { background-color: #337ab7; border-color: #337ab7; }
|
|
.mgc-primary:checked:after { border-color: #fff; }
|
|
.mgr { position: relative; width: 18px; height: 18px; background-clip: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; margin: -0.15px 0.6px 0 0; vertical-align: text-bottom; border-radius: 50%; background-color: #fff; border: 1px solid #d7d7d7; }
|
|
.mgr:disabled { opacity: 0.65; }
|
|
.mgr:before { content: ''; display: block; height: 0px; width: 0px; -webkit-transition: width 0.25s, height 0.25s; transition: width 0.25s, height 0.25s; }
|
|
.mgr:checked:before { height: 10px; width: 10px; border-radius: 50%; margin: 3px 0 0 3px; }
|
|
.mgr:focus { outline: none; box-shadow: inset 0 1px 1px rgba(255,255,255,0.075), 0 0px 2px #38a7ff; }
|
|
.mgr:checked { border: 1px solid #555; }
|
|
.mgr:checked:before { background-color: #555; }
|
|
.mgr-primary { background-color: #fff; border: 1px solid #999; }
|
|
.mgr-primary:checked { border: 1px solid #555; }
|
|
.mgr-primary:checked:before { background-color: #555; }
|
|
.whyInfo p a { color:#333;}
|
|
.ciythighlights {
|
|
padding: 30px 0;}
|
|
.ciythighlights h2 { font-size: 35px;
|
|
font-weight: 300;text-align: center;}
|
|
.experienceimg {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
justify-content: center;
|
|
}
|
|
.experience {
|
|
float: left;
|
|
position: relative;
|
|
padding-right: 2px;
|
|
}
|
|
.experienceinfo {
|
|
position: absolute;
|
|
bottom: 0;
|
|
text-shadow: 1px 1px 1px #000;
|
|
background: url(//data.chinahighlights.com/pic/highlights-bg.png?v=20190227) top repeat-x;
|
|
color: #fff;
|
|
padding: 15px;
|
|
width: calc(100% - 2px);
|
|
}
|
|
.experiencename {
|
|
font-size: 24px;
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
}
|
|
.experienceinfo ul li {
|
|
list-style: none;
|
|
font-size: 18px;
|
|
background: url(//data.chinahighlights.com/pic/highlights-list-bg.png) no-repeat 0 5px;
|
|
padding-left: 30px;
|
|
background-size: 18px 18px;
|
|
margin-bottom: 5px;
|
|
line-height: 22px;
|
|
}
|
|
.highlightsmore {
|
|
font-size: 20px;
|
|
float: right;
|
|
padding: 3px 5px;
|
|
}
|
|
.highlightsmore a {
|
|
color: #fff;
|
|
text-decoration: none;
|
|
}
|
|
.experiencelast {
|
|
float: left;
|
|
position: relative;
|
|
padding-right: 0;
|
|
}
|
|
.beijingexperienceinfo {
|
|
position: absolute;
|
|
bottom: 0;
|
|
text-shadow: 1px 1px 1px #000;
|
|
color: #fff;
|
|
padding: 15px;
|
|
width: calc(100% - 2px);
|
|
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
|
|
}
|
|
@media(max-width:760px) {
|
|
video { height:200px !important}
|
|
.videoBg { height:200px !important}
|
|
.ourAdvantage { padding:0 20px 20px !important;}
|
|
.whyInfo { padding:20px;}
|
|
.tripAdvisor { display: none !important;}
|
|
.guilinTours .guilinTourList .itineraryInfo { position: relative !important;}
|
|
.guilinTours .guilinTourList img { border-radius:5px 5px 0 0!important;}
|
|
.guilinTours .guilinTourList { margin-bottom:30px !important;}
|
|
.tailorLead { background: none !important; padding:20px !important;}
|
|
.formBlock { display: none !important;}
|
|
.goFurther { margin:30px 0 !important;}
|
|
.videoBg .textBg h1 { position: relative !important;}
|
|
#crumbNav { text-align: right !important;}
|
|
.ourAdvantage h2 { margin-top:20px !important}
|
|
.guilinTours { padding:30px 0 !important;}
|
|
.guilinTours h2, .go-tailor h2 { font-size:30px !important;}
|
|
.itineraryInfo { height:auto !important;}
|
|
.guilinTours .container { width:100% !important;}
|
|
.go-tailor { padding-top:20px !important;}
|
|
.ourAdvantage, .guilinTours, .go-tailor { overflow: hidden;}
|
|
.ciythighlights h2 { font-size: 30px;}
|
|
.experienceimg { flex-wrap: wrap;}
|
|
.experience { margin-bottom: 30px; padding-right: 0;}
|
|
.guilinTours h3 { font-size: 22px; line-height: 27px;}
|
|
}
|
|
@media(max-width: 1600px) {
|
|
.guilinTours .guilinTourList img { border-radius:5px 5px 0 0!important;}
|
|
.itineraryInfo { position: relative !important; height:350px !important;}
|
|
}
|
|
@media(min-width: 1024px) and @media(max-width:1500px) {
|
|
.itineraryInfo { position: relative !important; height:335px !important;}
|
|
}
|
|
|