@charset "utf-8";
body { font-family: Roboto, helvetica, sans-serif; margin: 0; padding: 0; line-height: 1.8; font-size: 16px; color: #333 }
ol, ul { margin: 0; padding: 0 }
ul li { list-style: none }
ol li { list-style: decimal inside; padding-top: 5px }
h1, h2 { text-align: center }
h1 { font-size: 28px }
h2 { font-size: 22px }
h3 { font-size: 18px }
a { text-decoration: none; color: #666 }
a img { border: none }
input[type="text"]:-ms-input-placeholder, input[type="text"]::-webkit-input-placeholder, input[type="text"]::-moz-placeholder, textarea:-ms-input-placeholder, textarea::-webkit-input-placeholder, textarea::-moz-placeholder {
font-family:Roboto, helvetica, sans-serif;
color:#aaa
}
label { display: block; font-weight: 500 }
.multiline { width: 99%; resize: none; font-size: 14px }
.sigleline { width: 99%; height: 28px; font-size: 15px }
.surmesurebtn { display: block; width: 88%; padding: 8px 5px; border-radius: 5px; background: #e62329; color: #fff; font-size: 20px; cursor: pointer; text-align: center; margin: 0 auto }
.vcode { width: 36% }
.pagemaincontent a, .lnk { text-decoration: none; color: #337ab7 }
.bold { font-weight: 500 }
.block { display: block }
.clear { clear: both }
.clearfix::after, .clearfix::before { display: block; content: ""; clear: both }
.title-st { font-size: 24px; font-weight: 500 }
.highlights { color: #000; font-weight: 500 }
.red { color: #e62329 }
.grey { color: #808080 }
.center { text-align: center }
.italic { font-style: italic }
.rimg, .guideimg-left, .guideimg-right, .carteducircuit { width: 100%; height: auto }
.r-img { max-width: 100%; height: auto }
.r-img-block, .feedbackimg { display: block; margin: 0 auto; max-width: 100%; height: auto }
.justify { text-align: justify }
.flt-l { float: left }
.flt-r { float: right }
.hr-st2 { width: 60%; text-align: left; margin: 10px 0 0 0; color: #ccc }
.ol-st1 li { list-style: upper-alpha; list-style-position: inside }
.ol-st2 li { list-style: decimal; list-style-position: inside }
.dayimg { display: block; text-align: center; }
.dayimg img { width: 100%; height: auto; }
#showmorebtn { display: none; background: #e62329; width: 85%; padding: 8px 0; margin: 15px auto 25px auto; text-align: center; color: #fff; font-size: 18px; font-weight: 500; cursor: pointer }
#topinfo, #subnav1, #subnav2, #subnav3, #subnav4, #subnav5, #breadcrumb-nav, #page-block2, #page-block5, #page-block6 { display: none }
#top-block { width: 100%; margin-top: 2% }
#menubar { background: #e62329 url(/image/web/button/menuicon.png) no-repeat right center; heigh: 42px; line-height: 42px; cursor: pointer; text-align: center }
#menubar:after { content: "ChineVoyage SA"; color: #fff; font-size: 20px; font-weight: 500 }
#navs { display: none; background: rgb(51,51,51) }
#navs a { color: #fff }
#navs li { font-size: 18px; border-bottom: 1px solid #fff; padding: 5px }
#navs li:last-child { border-bottom: none }
#navs .triangle { width: 0; height: 0; border-color: #fff transparent transparent transparent; border-style: solid; border-width: 5px; position: relative; margin-left: 5px; top: 15px; display: none }
#navs .open { float: right; font-size: 20px; display: inline-block; width: 36%; text-align: right; padding-right: 12% }
#navs .close { float: right; margin-right: 15%; display: none }
#subnav1, #subnav2, #subnav3, #subnav4, #subnav5 { background: rgb(102,102,102); }
#subnav1 li, #subnav2 li, #subnav3 li, #subnav4 li, #subnav5 li { font-size: 15px; padding: 12px }
.nav-trigger { color: #fff; cursor: pointer }
#page-block1, #page-block2, #page-block3, #page-block4, #page-block5, #foot-block, #aboutus, #qrcode { width: 93%; padding: 0 3.5% }
#foot-block { margin-top: 10px; background: #666; color: #fff; font-size: 14px; padding: 32px 0 12px 5px; margin: 0 auto }
#foot-block p.btn { margin-bottom: 50px }
#foot-block .bookbtn { display: block; width: 98%; text-align: center; padding: 5px 0; border: 1px solid #fff; border-radius: 5px; color: #fff; font-size: 20px; font-weight: 500 }
#picwrap-circuit { position: relative }
#picwrap-circuit h1 { color: #808080 }
#circuit-brief .right #prix { font-size: 18px }
#circuit-brief .right .prix { font-size: 24px; font-weight: 500; color: #e62329 }
#circuit-brief .right .code { display: inline; font-size: 16px; font-weight: normal }
#circuit-nav { text-align: center }
#circuit-nav li { display: inline-block; width: 43%; margin-bottom: 15px; margin-right: 3%; padding: 1%; font-weight: 500; cursor: pointer; background: #fff; color: #e62329; border: 1px solid #e62329 }
#circuit-nav li.act { background: #e62329; color: #fff }
.daydetails .day { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 10px 0 10px 42px; background: url(/image/web/button/daycalendar.png) no-repeat 0 5px }
#circuit-inexclude { margin-top: 25px; margin-bottom: 75px }
#circuit-inexclude ol { margin: 15px }
#qbox-lite, .hr-st3 { display: none }
#qrcode hr { clear: both; display: block; border: 0; height: 12px; background-color: #ccc; margin-top: 50px }
#qrcode div.qr { width: 75%; margin: 0 auto }
.home-promotion, .circuit-type { background: #f4f4f4; margin-bottom: 15px }
.home-promotion ul, .circuit-type ul { border: 1px solid #ccc; border-radius: 5px }
.home-promotion ul li, .circuit-type ul li { padding: 5px 15px }
.home-promotion ul li:first-child, .circuit-type ul li:first-child { padding: 0 }
.home-promotion img, .circuit-type img { border-top-left-radius: 5px; border-top-right-radius: 5px }
.home-promotion .title, .circuit-type .title { font-size: 18px; font-weight: 500; padding: 10px inherit; color: #666 }
.home-promotion .desc, .circuit-type .desc { margin-top: 10px }
.home-promotion .btn, .circuit-type .btn, .circuit .btn { text-align: center; margin: 20px auto }
.home-promotion .btn a, .circuit-type .btn a, .circuit .btn a { border: 1px solid #ccc; padding: 10px 30px; font-weight: 500; border-radius: 3px }
.home-voyages img, #aboutus img { border-radius: 5px }
.home-voyages { position: relative; margin-bottom: 36px }
.home-voyages span.block { position: absolute; width: 80%; color: #fff; left: 50%; top: 25%; transform: translate(-50%, -25%); font-size: 28px; font-weight: 500; text-align: center; border: 2px solid #fff; border-radius: 5px }
.home-voyages span.desc { position: absolute; display: block; width: 100%; text-align: center; color: #fff; top: 50% }
.home-voyages ul, .home-voyages .txt { width: 100%; position: absolute; bottom: 8px; background: rgba(102,102,102,0.7) }
.home-voyages ul li { list-style-position: inside; list-style-type: square; color: #fff; padding: 3px 0 0 3px }
.home-voyages .txt { text-align: center; color: #fff }
.home-voyages a { color: #fff }
.circuit { margin-bottom: 40px; padding-bottom: 15px; border-bottom: 3px solid #999 }
.circuit .title { font-size: 18px; font-weight: 500 }
.circuit .prix { font-size: 18px; font-weight: 500; color: #e62329 }
.circuit ul li { padding: 5px 0 }
.circuit-selectx2, .circuit-selectx3 { background: #f0f0f0; border-radius: 5px; color: #666 }
.circuit-selectx2 p, .circuit-selectx3 p { padding: 0 8px 0 8px }
.circuit-selectx2 .highlight, .circuit-selectx3 .highlight { font-size: 20px; color: #000 }
.circuit-selectx2 .line, .circuit-selectx3 .line { border-bottom: 1px solid #999 }
.imgnavblock div { position: relative; margin-bottom: 15px }
.imgnavblock img { width: 100% }
.imgnavblock a { display: block }
.imgnavblock span { width: 100%; position: absolute; left: 0; top: 50%; font-size: 40px; color: #fff; text-align: center; transform: translateY(-50%) }
.dest { border-bottom: 2px dotted #ccc; margin-bottom: 25px }
.dest .title { font-size: 18px; font-weight: 500 }
.btnnav a { display: inline-block; width: 100% }
.btnnav>li { border: 1px solid #ccc; border-radius: 8px; margin-bottom: 8px; padding: 5px }
.feedback { border-bottom: 2px solid #999; padding-bottom: 15px; margin-bottom: 30px }
.feedback .title { font-size: 16px; font-weight: 500; padding: 10px inherit; color: #666; margin-bottom: 10px }
.feedback .btn { text-align: center; margin: 20px auto }
.feedback .btn a { border: 1px solid #ccc; padding: 10px 20px; font-weight: 500; border-radius: 5px; background: #ddd }

@media screen and (min-width:768px) {
h1 { text-align: left; font-size: 30px }
h2 { font-size: 25px }
#top-block { overflow: hidden; padding-bottom: 15px }
#logo { display: block; float: left }
#logo img { width: 448px; height: 90px }
#topinfo { display: block; float: right; margin-right: 15px; }
#topinfo li { padding: 3px 0 0 20px }
#topinfo #tel { background: url(/image/web/button/whatsapp.png) no-repeat 0 72% }
#topinfo #email { background: url(/image/web/button/emailgreen.png) no-repeat 0 72% }
#topinfo #btn { margin-top: 8px; padding: 0 }
#topinfo #btn a { border: 1px solid #e62329; padding: 5px 30px; border-radius: 5px }
#breadcrumb-nav { display: block; padding-top: 15px }
#picwrap { width: 100%; margin: -1px auto 0 auto; display: block; overflow: hidden; text-overflow: clip }
#picwrap .rimg { vertical-align: top; margin-bottom: -2.4% }
#pic { border: 0; width: 100%; height: 100% }
#num_nav { position: relative; background: none; text-align: center; padding: 0; margin: -5% 0 0 0; z-index: 99 }
.number, .number_current { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #fff; margin-right: 15px; border: 1px solid #e62329 }
.number_current { display: inline-block; width: 8px; height: 8px; background: #e62329; border: 2px solid #fff }
#flashwrap { position: relative; text-align: center; z-index: 99 }
#adwrap { position: absolute; width: 100%; top: 20%; color: #fff }
#adwrap div { font-weight: 700; margin-bottom: 5px }
#adwrap span { color: #fff; border: 2px solid #fff; border-radius: 5px; margin: 0 auto; padding: 10px; font-weight: 500 }
#showmorebtn { width: 320px }
#picwrap-circuit h1 { width: 100%; position: absolute; text-align: center; color: #fff }
#circuit-brief { margin-top: 25px }
#circuit-nav { text-align: left; background: #ccc }
#circuit-nav li { display: inline-block; width: auto; margin-bottom: 15px; margin: 0; padding: 0.5% 5%; background: none; color: #333; border: none }
#circuit-nav li.act { background: #fff; color: #e62329; border-top: 5px solid #ccc; border-left: 5px solid #ccc }
#qrcode, #qrcode>hr:nth-of-type(1) { margin-bottom: 50px }
#qrcode>hr:nth-of-type(2) { display: none }
#qrcode div.qrapp { float: left; width: 46% }
#qrcode div.qrapp:nth-of-type(1) { margin-right: 8% }
#qrcode div.qrdesc h4 { margin: 5px; padding: 0 }
#qrcode div.qrdesc p { text-align: justify; padding: 0 5px 3px 5px }
#qrcode div.qrdesc { width: 100% }
#qrcode div.qr { width: 60% }
.daydetails .visite { padding-left: 50px; padding-right: 50px }
.circuit { border: 1px solid #999 }
.circuit ul li { padding: 5px 15px }
.circuit ul li .title { display: inline-block }
.circuit, .circuit-type { display: inline-block; vertical-align: text-top }
.guideimg-left, .guideimg-right, .carteducircuit { display: block; width: auto; margin: 0 auto }
.imgnavblock img { height: 180px }
.imgnavblock span { font-weight: 500 }
.imgnavblock .col13, .imgnavblock .col23, .imgnavblock .col12 { float: left; margin-right: 2% }
.imgnavblock .col13 { width: 32% }
.imgnavblock .col23 { width: 66% }
.imgnavblock .col12 { width: 49% }
.imgnavblock :last-child { margin-right: 0 }
.dest { display: inline-block; background: #eee; border: 1px solid #999; padding: 5px; margin-bottom: 15px; vertical-align: top }
.btnnav>li { display: inline-block }
.multiline, .sigleline { width: 100% }
.surmesurebtn { width: 320px }
.vcode { width: 88px }
.feedback { display: inline-block; vertical-align: top; border: 1px solid #999; padding: 8px; min-height: 280px }
}

@media screen and (min-width:768px) and (max-width:1199px) {
#menubar { background-position-x: left }
#navs { position: absolute; background: rgba(51,51,51,0.85); width: 36%; z-index: 999 }
#subnav1, #subnav2, #subnav3, #subnav4, #subnav5 { background: rgba(255,255,255,0.75) }
#subnav1 a, #subnav2 a, #subnav3 a, #subnav4 a, #subnav5 a { color: #333 }
#adwrap div { font-size: 40px }
#adwrap span { font-size: 20px }
#foot-block p.btn { margin-bottom: 0 }
#foot-block .bookbtn { width: 32%; float: right; margin-right: 1% }
#picwrap-circuit h1 { top: 0; left: 0; color: #fff; font-size: 40px }
.home-promotion, .circuit-selectx3 { width: 32.5%; float: left; margin-right: 1% }
.home-promotion ul { background: #f3f3f3; border-radius: 5px }
.home-promotion .btn a, .circuit .btn a { border: 1px solid #ccc; padding: 10px; font-weight: 500; border-radius: 3px }
.home-voyages, .circuit-selectx2 { width: 48.2%; float: left; margin-right: 3% }
.dest, .btnnav>li { width: 47.2%; margin-right: 1.5% }
.imgnavblock span { font-size: 36px }
.circuit, .circuit-type { width: 48.5%; margin-right: 1.8% }
.feedback { width: 46.2%; margin-right: 2% }
.home-voyages:nth-of-type(even), .circuit:nth-of-type(even), .home-promotion:last-child, .circuit-selectx3:last-child, .circuit-selectx2:last-child, .circuit:nth-of-type(2n), .circuit-type:nth-of-type(2n), .dest:nth-child(2n), .btnnav>li:nth-child(2n), .feedback:nth-child(2n) { margin-right: 0 }
}

@media screen and (min-width:1200px) {
a:hover { text-decoration: underline; color: #e62329 }
#top-block, #navs, #page-block1, #page-block2, #page-block3, #page-block4, #page-block5, #foot-block, #aboutus, #qrcode { width: 1140px; margin: 0 auto; padding: 0 }
#page-block3 { padding-top: 10px }
#topinfo, #logo { margin-top: 15px }
#topinfo li { display: inline; margin-left: 20px }
#topinfo #btn { display: block; text-align: center; margin-top: 20px }
#topinfo #btn a { display: block; font-size: 18px }
#topinfo #btn a:hover { background: #e62329; color: #fff }
#nav-block { width: 100%; background: none; border-bottom: 1px solid #ccc }
#menubar, #foot-block .bookbtn { display: none }
#navs { display: block; height: 50px; line-height: 50px; background: none; position: relative; z-index: 999 }
#navs li { float: left; padding: 0 25px; border: 0; font-weight: 500 }
#navs li a { color: #000; text-decoration: none }
#navs .triangle { display: inline; border-top-color: #e62329 }
#navs .open, #navs .close { display: none; float: none; margin-right: 0 }
#subnav1, #subnav2, #subnav3, #subnav4, #subnav5 { position: absolute; background: rgba(51,51,51,0.85) }
#subnav1 li, #subnav2 li, #subnav3 li, #subnav4 li, #subnav5 li { float: none; width: 136px; border-bottom: 1px solid #fff; font-weight: 500 }
#subnav1 li a, #subnav2 li a, #subnav3 li a, #subnav4 li a, #subnav5 li a { color: #fff }
#adwrap div { font-size: 55px }
#adwrap span { font-size: 25px }
#aboutus .left { width: 570px; float: left; padding-right: 20px }
#aboutus .right { width: 550px; float: right; margin-top: 20px }
#page-block5 { display: block; width: 100%; float: left; background: #666; color: #fff; padding: 50px 0; margin-top: 20px }
#page-block5 div.maincontent { width: 1140px; margin: 0 auto; }
#page-block5 .icon { display: block; width: 60% }
#page-block5 div.left { width: 835px; float: left; padding-right: 15px }
#page-block5 div.right { width: 290px; float: left }
#page-block5 ul li { width: 15.5%; float: left; margin-right: 1%; font-size: 15px; text-align: center }
#page-block5 ul li img { margin: 0 auto }
#page-block6 { display: block; width: 100%; float: left; background: #666; color: #fff; padding: 50px 0; margin-top: 50px }
#page-block6 div.maincontent { width: 1140px; margin: 0 auto; }
#page-block6 div.left { width: 33%; float: left; padding-right: 3% }
#page-block6 div.right { width: 64%; float: left }
#foot-block { background: none; text-align: center; color: #333 }
#picwrap-circuit h1 { top: 15%; left: 0; color: #fff; font-size: 50px }
#circuit-brief .left { width: 65%; float: left; padding-right: 5% }
#circuit-brief .right { width: 30%; float: right }
#circuit-brief .right #prix { text-align: center }
#circuit-brief .right .prix { font-size: 28px }
#circuit-brief .right .code { display: block }
.daydetails .visite { padding-left: 100px; padding-right: 100px; text-align: justify }
#qbox-lite { display: block; width: 100%; padding: 50px 0 }
#qbox-lite div.left { width: 33%; float: left; padding-right: 3% }
#qbox-lite div.right { width: 64%; float: left }
#qbox span { display: block; padding-bottom: 10px }
#qbox .tbox { width: 98%; height: 30px; font-size: 15px; border: 1px solid #ccc }
#qbox .tbox-pax, #qbox select, #qbox .tbox-budget { background: #666; border: none; border-bottom: 2px solid #fff }
#qbox .tbox-pax { width: 36px }
#qbox select { color: #fff; font-size: 16px }
#qbox .tbox-budget { width: 48px }
#qbox textarea { width: 98%; height: 150px; resize: none; font-size: 15px; border: 1px solid #ccc }
#qbox #btn { background: #666; border: 2px solid #fff; border-radius: 5px; color: #fff; font-size: 16px; font-weight: 500; padding: 10px 30px; cursor: pointer }
#adwrap span:hover { background: #f00 }

#qrcode div.qrapp { float: left; width: 46%;margin-top: 20px;margin-bottom: 50px}
#qrcode div.qrapp:nth-of-type(1) { margin-right: 8% }
#qrcode div.qrdesc { float: left; width: 52% }
#qrcode div.qr { float: right; width: 42% }
.pagemaincontent { width: 960px; margin: 0 auto; text-align: justify }
.home-promotion, .home-voyages, .circuit-selectx3 { width: 363px; float: left; margin-right: 25px }
.home-promotion .btn a:hover, .circuit-type .btn a:hover, .circuit .btn a:hover { background: #e62329; color: #fff; border: 1px solid #e62329; text-decoration: none }
.home-voyages a:hover { color: #fff; text-decoration: none }
.home-voyages span.block:hover { background: #f00 }
.circuit, .circuit-type { width: 358px; margin-right: 25px }
.circuit-selectx2 { width: 557px; float: left; margin-right: 25px }
.hr-st1 { color: #fff; margin: 30px 0 }
.hr-st3 { clear: both; display: block; border: 0; height: 12px; background-color: #ccc; margin-top: 50px }
.btmbookbtn { display: block; width: 98%; text-align: center; padding: 5px 0; border: 1px solid #fff; border-radius: 5px; color: #fff; font-size: 20px; font-weight: 500 }
.guideimg-left { float: left; padding: 1% 4% 4% 0; }
.guideimg-right { float: right; padding: 1% 0 4% 4% }
.cartewrap { border: 1px solid #ccc; margin: 15px 100px 40px 100px; padding: 20px 0 }
.dest, .btnnav>li { width: 350px; margin-right: 23px }
.dest .brief { text-align: justify }
.feedback { width: 342px; margin-right: 25px }
.surmesureitem { float: left; width: 49%; margin-right: 2% }
.surmesureitempatch, .dest:nth-child(3n), .btnnav>li:nth-child(3n), .home-promotion:last-child, .home-voyages:nth-of-type(3n), .circuit:nth-of-type(3n), .circuit-type:nth-of-type(3n), .circuit-selectx3:last-child, .circuit-selectx2:last-child, .feedback:nth-child(3n) { margin-right: 0 }
}