add new css
lyy
6 years ago
parent
f6bc1c8576
commit
a7b8f2df91
@ -0,0 +1,266 @@
|
|||||||
|
@charset "utf-8";
|
||||||
|
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i');
|
||||||
|
body { font-family:'Hind Madurai', sans-serif}
|
||||||
|
/* new fonts */
|
||||||
|
|
||||||
|
/* latin */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Alegreya Sans';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 500;
|
||||||
|
font-display: swap;
|
||||||
|
src: local('Alegreya Sans Medium'), local('AlegreyaSans-Medium'), url(https://www.asiahighlights.com/css/fonts/5aUu9_-1phKLFgshYDvh6Vwt5alOqEp2iw.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+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||||
|
}
|
||||||
|
/* latin */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Alegreya Sans';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-display: swap;
|
||||||
|
src: local('Alegreya Sans Regular'), local('AlegreyaSans-Regular'), url(https://www.asiahighlights.com/css/fonts/5aUz9_-1phKLFgshYDvh6Vwt7VptvQ.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+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Alegreya Sans';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
font-display: swap;
|
||||||
|
src: local('Alegreya Sans Bold'), local('AlegreyaSans-Bold'), url(https://www.asiahighlights.com/css/fonts/5aUu9_-1phKLFgshYDvh6Vwt5eFIqEp2iw.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+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||||
|
}
|
||||||
|
/* latin */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Hind Madurai';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 300;
|
||||||
|
font-display: swap;
|
||||||
|
src: local('Hind Madurai Light'), local('HindMadurai-Light'), url(https://www.asiahighlights.com/css/fonts/f0Xu0e2p98ZvDXdZQIOcpqjfXaUXfsEp.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+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||||
|
}
|
||||||
|
/* latin */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Hind Madurai';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-display: swap;
|
||||||
|
src: local('Hind Madurai Regular'), local('HindMadurai-Regular'), url(https://www.asiahighlights.com/css/fonts/f0Xx0e2p98ZvDXdZQIOcpqjX9ocC.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+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||||
|
}
|
||||||
|
/* CSS Document */
|
||||||
|
|
||||||
|
#inquiryBox { display: block; margin:0 0 35px; background-color: #FFF;padding: 50px;border-radius: 4px;float: right;width: 100%;}
|
||||||
|
.wholeWrap{background: url(https://data.asiahighlights.com/image/inquiry-pc-header.jpg) no-repeat fixed;background-size: 100%;padding-top:60px;padding-right: 15%;width: 100%;padding-bottom: 100px}
|
||||||
|
.wholeWrap2{background: url(https://data.asiahighlights.com/image/tailor-made-pc.jpg) no-repeat fixed;background-size: 100%;padding-top:60px;padding-right: 15%;width: 100%;padding-bottom: 100px}
|
||||||
|
h3{ font-size: 20px;
|
||||||
|
font-weight: 500;
|
||||||
|
font-family: 'Alegreya Sans',sans-serif;margin-bottom: 10px;margin-top: 40px;}
|
||||||
|
h2{font-family: 'Alegreya Sans',sans-serif;font-size: 28px;font-weight: 700;text-align: center;margin: 30px 0 25px 0;}
|
||||||
|
.settleBlock{padding: 15px 0;width:100%;}
|
||||||
|
.settleMponey{font-size: 24px;font-weight: 700;border-top: 1px dashed #d1d1d1;border-bottom: 1px dashed #d1d1d1;padding: 15px 0; font-family: 'Alegreya Sans',sans-serif;}
|
||||||
|
.settleItems{font-size: 18px}
|
||||||
|
.totalPrice{color: #ad1818}
|
||||||
|
.settlePart{border-top: 1px dashed #d1d1d1;padding: 20px 0}
|
||||||
|
#inquiryBox h1 { font-size:36px; margin:0 0 15px;font-family: 'Alegreya Sans',sans-serif;font-weight: 700;border: 0;text-align: center;}
|
||||||
|
#contactInfo { display: block; box-shadow:0 0 5px #999; border-radius:4px; margin:0 0 25px; padding:25px; background:#fff;}
|
||||||
|
#contactInfo h2 { font-size:24px; border-bottom:1px solid #d1d1d1; padding-bottom:20px; margin:0 0 00px;}
|
||||||
|
.labelTitle { display: block; font-size:16px; font-weight:400; color:#333; margin:30px 0 15px;}
|
||||||
|
.labelTitle .whatsThis { color:#a31022; font-size:13px;}
|
||||||
|
textarea { font-family:'Open Sans', sans-serif!important; font-size:16px; line-height:26px; padding:15px !important; border:1px solid #d1d1d1; background:#fff; width:100%; height:200px; border-radius:2px;margin-top: 10px;}
|
||||||
|
textarea:focus{border: 1px solid #7D9EC0;outline: none}
|
||||||
|
#contactInfo .subTitle { display: block; font-size:16px; font-weight:400; color:#333; margin:30px 0 15px;}
|
||||||
|
#contactInfo input { width:100%; font-size:14px; font-family:'Open Sans', sans-serif!important; border-radius:2px!important; padding:8px 15px; color:#777 !important; background:#fff; border:1px solid #d1d1d1;}
|
||||||
|
#inquiryBox label { font-weight: normal;}
|
||||||
|
#inquiryBox .checked {background: url(/pic/checked-icon.png) no-repeat left;}
|
||||||
|
#inquiryBox select { width:100%; font-size:14px; font-family:'Open Sans', sans-serif!important; border-radius:2px!important; padding:2px 10px; cursor:pointer; appearance: none; -moz-appearance: none; -webkit-appearance: none; background: url(/pic/select-tag.png) no-repeat 96% center #fff; background-size: 18px 10px; color:#777 !important; border:1px solid #d1d1d1;}
|
||||||
|
#inquiryBox select option { padding:5px 0 5px 10px;}
|
||||||
|
#contactInfo select { width:100%; font-size:14px; font-family:'Open Sans', sans-serif!important; border-radius:2px!important; padding:2px 10px; cursor:pointer; appearance: none; -moz-appearance: none; -webkit-appearance: none; background: url(/pic/select-tag.png) no-repeat 96% center #fff; background-size: 18px 10px; color:#777 !important;border:1px solid #d1d1d1;height:38px}
|
||||||
|
#contactInfo select option { padding:5px 0 5px 10px;}
|
||||||
|
|
||||||
|
/* selection box */
|
||||||
|
|
||||||
|
.optionLable input{display: none;}
|
||||||
|
.checkboxGender input[type="radio"] + label{font-size: 18px;padding:15px 0;border: 1px solid #d1d1d1;border-radius: 4px;display: block;margin-top: 10px;text-align: center;color: #999;font-family: 'Alegreya Sans',sans-serif;height: 60px;}
|
||||||
|
.checkboxGender input[type="radio"]:checked + label{background-color:#ad1818;color: #FFF;border-color: #ad1818}
|
||||||
|
.optionLable input[type="radio"] + label{font-size: 18px;border: 1px solid #d1d1d1;border-radius: 4px;display: block;text-align: center;color: #999;height: 65px;font-family: 'Alegreya Sans',sans-serif;font-weight: 500!important;padding: 10px}
|
||||||
|
.optionLable{width: 32%;display: inline-block;margin-top: 10px;}
|
||||||
|
.optionLable input[type="radio"]:checked + label{border: 2px solid #ad1818;color: #ad1818}
|
||||||
|
.selectHotl{width: 100%;text-align: center}
|
||||||
|
.optionLable:nth-child(3){float: right}
|
||||||
|
.optionLable:nth-child(1){float: left}
|
||||||
|
.checkboxLabel input[type="checkbox"] + label{font-size: 22px;padding: 5px 0;border: 1px solid #d1d1d1;border-radius: 4px;display: block;margin-top: 10px;text-align: center;color: #999;height: 65px;font-family: 'Alegreya Sans',sans-serif;padding-top: 15px;}
|
||||||
|
.checkboxLabel input[type="checkbox"]:checked + label{border: 2px solid #ad1818;color: #ad1818}
|
||||||
|
.checkboxLabel{display: block;width: 100%;}
|
||||||
|
.checkboxLabel input{display: none}
|
||||||
|
.selectionMemo{font-size: 12px;font-style: italic;font-weight: 300;margin-top:2px}
|
||||||
|
#inquiryBox .flexibleDate{display: inline-block;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
padding: 5px 0 5px 30px;}
|
||||||
|
.genderSelection{text-align: center}
|
||||||
|
.checkboxGender{width: 32%;display: inline-block;}
|
||||||
|
.checkboxGender label{width: 100%}
|
||||||
|
.checkboxGender input{display: none}
|
||||||
|
.checkboxGender:nth-child(3){float: right}
|
||||||
|
.checkboxGender:nth-child(1){float: left}
|
||||||
|
.optionLable input[type="radio"] + label:hover{border: 1px solid #ad1818;cursor: pointer;}
|
||||||
|
.travelTag input[type="checkbox"] + label:hover{border: 1px solid #ad1818;cursor: pointer;}
|
||||||
|
.checkboxGender input[type="radio"] + label:hover{border: 1px solid #ad1818;cursor: pointer;}
|
||||||
|
.checkboxLabel input[type="checkbox"] + label:hover{border: 1px solid #ad1818;cursor: pointer;}
|
||||||
|
.inputTerm label {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 18px;
|
||||||
|
position: absolute;
|
||||||
|
left: 20px;
|
||||||
|
top: calc(50% - 13px);
|
||||||
|
transition: all ease-in-out .5s;
|
||||||
|
pointer-events: none;height: 26px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
.inputTerm {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
margin: 15px auto;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.inputTerm input:focus ~ label, .inputTerm input:valid~label{top:5px;font-size:12px;color:#999;transition:0.3s;text-transform:uppercase}
|
||||||
|
.inputTerm input:focus{border: 1px solid #7D9EC0;outline: none}
|
||||||
|
.inputTerm input {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
font-size: 22px;
|
||||||
|
border: 1px solid #d1d1d1;
|
||||||
|
height: 60px;
|
||||||
|
padding: 15px 15px 0 20px;
|
||||||
|
border-radius: 4px;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
.checkYes {
|
||||||
|
display: block;
|
||||||
|
width: 100%;margin-top: 5px;margin-bottom: 15px}
|
||||||
|
.checkBorder:checked {
|
||||||
|
background-color: #ad1818;
|
||||||
|
border-color: #ad1818;margin-right: 5px;
|
||||||
|
}
|
||||||
|
.checkBorder {
|
||||||
|
background-color: #fff;
|
||||||
|
border: 1px solid #c1c1c1;position: relative;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
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 #d1d1d1
|
||||||
|
}
|
||||||
|
.contactUs{border-top: 1px solid #d1d1d1;}
|
||||||
|
.contactUs p{margin-top: 15px;font-size: 18px;font-weight: normal}
|
||||||
|
p a
|
||||||
|
input[type=checkbox]+label {
|
||||||
|
color: #999;
|
||||||
|
font-size: 16px !important;
|
||||||
|
}
|
||||||
|
input[type=text]:focus{border: 1px solid #7D9EC0;outline: none}
|
||||||
|
.checkYes label {
|
||||||
|
display: inline;
|
||||||
|
font-style: italic;font-size: 18px;color: #999
|
||||||
|
}
|
||||||
|
input[type=checkbox]:checked+label{color: #000}
|
||||||
|
|
||||||
|
.checkBorder:checked:after {
|
||||||
|
border-color: #fff;
|
||||||
|
}
|
||||||
|
.checkBorder:checked:after {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
height: 8px;
|
||||||
|
width: 14px;
|
||||||
|
border: 0 solid #FFF;
|
||||||
|
border-width: 0 0 2px 2px;
|
||||||
|
-webkit-transform: rotate(-45deg);
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
position: absolute;
|
||||||
|
top: 3px;
|
||||||
|
left: 2px;
|
||||||
|
}
|
||||||
|
.formMemo{font-size: 16px;color: #999;display: block;margin-top: -10px }
|
||||||
|
.chooseothers{font-size: 18px;color: #000;display: block;margin-top: 10px }
|
||||||
|
|
||||||
|
.inquiryBtn{display:block;text-align:center;font-family:Georgia,"Times New Roman",Times,serif;font-size:24px}
|
||||||
|
input[type=submit]{background: linear-gradient(#ca3c3b,#ad1818);
|
||||||
|
text-align: center;
|
||||||
|
display: table;
|
||||||
|
border-radius: 60px;
|
||||||
|
min-width: 38%;
|
||||||
|
margin: 25px auto;
|
||||||
|
padding: 8px 30px;color: #FFF;font-family: 'Alegreya Sans',sans-serif;font-weight: 500;font-size: 20px;border:solid 0px}
|
||||||
|
input[type=submit]:hover{width: 42%}
|
||||||
|
|
||||||
|
i{margin-left: 10px}
|
||||||
|
.howWeWork{font-size: 18px;margin-top: -15px;margin-bottom: 50px;text-align: center;margin: 0 auto;padding-bottom: 35px;}
|
||||||
|
.preface{font-size: 18px;margin-top: -15px;margin-bottom: 50px;text-align: center;margin: 0 auto;}
|
||||||
|
.interestedRoute{background: url(https://data.asiahighlights.com/image/fast-nav-backpic.png) no-repeat top;background-size: 100%;position: relative;margin: 20px 0 10px 0;padding:20px 0 5px 0;margin-top: 20px}
|
||||||
|
.routeName{font-size: 22px;text-align: center;font-weight: 400;margin: 0 auto; font-family: 'Alegreya Sans',sans-serif;font-style: italic;}
|
||||||
|
.headerText{background-color: #FFF;margin: 0 auto;padding: 0 15px;text-align: center;font-weight: 500;font-size: 14px;height: 22px;width: 200px;left: calc(50% - 100px);position: absolute;top:-8px;}
|
||||||
|
.readMore {
|
||||||
|
max-height:0;
|
||||||
|
overflow:hidden;
|
||||||
|
transition:max-height .3s;
|
||||||
|
}
|
||||||
|
:checked ~ .readMore {
|
||||||
|
max-height:666px;
|
||||||
|
}
|
||||||
|
.foldDestinations input[type="checkbox"] {
|
||||||
|
clip:rect(0 0 0 0);
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
#check:checked ~ .check-in {
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
#check:checked ~ .check-out {
|
||||||
|
display:inline-block;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.check-out {
|
||||||
|
display:none;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.check-in,.check-out {
|
||||||
|
color:#ad1818;
|
||||||
|
cursor:pointer;
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 20px;text-decoration: underline;
|
||||||
|
|
||||||
|
}
|
||||||
|
#check:checked+.foldDestinations>.readMore {
|
||||||
|
max-height:666px;
|
||||||
|
}
|
||||||
|
.formNote{color: #999;font-size: 16px}
|
||||||
|
.minaddBtn:hover{border: 1px solid #ad1818;background-color: #ad1818;color: #fff}
|
||||||
|
.number, .minaddBtn:focus{border:1px solid #ad1818;outline: none}
|
||||||
|
.peopleSelect{width: 45%;margin-top: 20px;font-size: 24px;display: inline-block;}
|
||||||
|
.peopleSelect:nth-child(odd){float: right;}
|
||||||
|
.minaddBtn{background: #FFF;border: 1px solid #d1d1d1;border-radius: 4px;color: #ad1818;height: 65px;font-weight: 700;width: 28%;display: inline-block}
|
||||||
|
.numberBtn{width: 100%;overflow: hidden;}
|
||||||
|
.numberBtn:nth-child(3){float: right}
|
||||||
|
.number{width:35%;text-align: center;border: 1px solid #d1d1d1;border-radius: 4px;font-weight: 300;height: 65px}
|
||||||
|
.kidNum{margin-left: 5px;width:35%;text-align: center;border: 1px solid #d1d1d1;border-radius: 4px;font-weight: 300;height: 65px}
|
||||||
|
#Date_Start { width:100%; font-size:18px; font-family:'Open Sans', sans-serif!important; border-radius:2px!important; padding:8px 15px; color:#777 !important; background:url(/pic/calendar-icon-red.png) no-repeat 96% 20px #fff; border:1px solid #d1d1d1;height: 60px}
|
||||||
|
.travelStyle input{display: none;}
|
||||||
|
.travelTag{margin-left: -8px}
|
||||||
|
.travelStyle{display: inline-block}
|
||||||
|
.travelTag input[type="checkbox"] + label{margin-left: 8px;margin-top: 8px;font-size: 14px;padding: 5px 7px;color: #999;border:1px solid #d1d1d1;border-radius: 2px}
|
||||||
|
.travelTag input[type="checkbox"]:checked + label{color: #FFF;background-color: #ad1818;border-color: #ad1818}
|
||||||
|
hr{color: #d1d1d1;border:1px dotted;margin-top: 25px;}
|
||||||
|
.workingSteps{font-size: 18px;color: #FFF;padding-bottom: 80px;overflow: hidden;position: relative;}
|
||||||
|
.stepLogo img{width: 50px}
|
||||||
|
.detailedSteps strong{font-weight: 700}
|
||||||
|
.stepText{padding-left: 10px}
|
||||||
|
.dotted{width: 1px;border-left: 2px dashed #f1f1f1;height:180px;position: absolute; top: 50px;left: 40px;}
|
||||||
|
.stpeBlock{padding-top:60px}
|
||||||
Loading…
Reference in New Issue