@charset "utf-8";
/* CSS Document */

.jsGallery{
position: relative;
overflow: hidden;/*fixH*/
text-align: center;
background-color: #f0f0f0;
}

.jsSlideList{
position: relative;
overflow: hidden;
z-index: 1;
}

.jsSlideList .jsSlide{
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 100%;
display: block;

filter:alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;

background-size: cover;
background-position: center;


-webkit-transition: opacity 0.8s;
-moz-transition: opacity 0.8s;
-o-transition: opacity 0.8s;
transition: opacity 0.8s;
}

.jsSlideList .jsSlide img{
width: 100%;
}

.jsSlideList .jsSlide.active{
z-index: 5;

filter:alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
}

.jsDotList{
position: absolute;
right: 50px;
bottom: 50px;
z-index: 3;
text-align: right;
}

.jsDotList .jsDot{
display: inline-block;
width: 26px;
height: 26px;
text-align: center;
cursor: pointer;
margin: 0 5px;

border: 5px #203469 solid;
background: #fff;

-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;

-webkit-transition: border 0.3s;
-moz-transition: border 0.3s;
-o-transition: border 0.3s;
transition: border 0.3s;
}

.jsDotList .jsDot:hover{
border: 5px #ee364c solid;
}

.jsDotList .jsDot.active{
border: 5px #ee364c solid;
background: #203469;
}



#bookPanel{
width: 290px;
font-size: 14px;

position: fixed;
right: -290px;
top: 150px;
z-index: 88889;

min-height: 400px;

color: #fff;
background: #ee364c;;

-webkit-border-radius: 10px 0 0 10px;
-moz-border-radius: 10px 0 0 10px;
border-radius: 10px 0 0 10px;

-webkit-box-shadow: rgba(0,0,0,0.5) 0 0 10px;
-moz-box-shadow: rgba(0,0,0,0.5) 0 0 10px;
box-shadow: rgba(0,0,0,0.5) 0 0 10px;

-webkit-transition: right 0.3s;
-moz-transition: right 0.3s;
-o-transition: right 0.3s;
transition: right 0.3s;
}


#bookPanel.expand{
right: 0;
}

#bookPanel .inner{
margin: 20px 18px;
}

.btnOpenTab{
padding: 20px 12px;
position: absolute;
left: -36px;
top: 30px;

cursor: pointer;

background: #ee364c;

-webkit-border-radius: 10px 0 0 10px;
-moz-border-radius: 10px 0 0 10px;
border-radius: 10px 0 0 10px;

-webkit-box-shadow: rgba(0,0,0,0.2) -1px 0 1px;
-moz-box-shadow: rgba(0,0,0,0.2) -1px 0 1px;
box-shadow: rgba(0,0,0,0.2) -1px 0 1px;
}

.btnOpenTab:before{
display: block;
width: 95px;
height: 95px;
content: " ";
top: -85px;
left: -35px;
position: absolute;
background: url("../images/tabIcon.png") center center no-repeat;
}

.btnOpenTab img{
width: 17px;
height: auto;
}


.showMoreContainer .hideCont{
display: none;
padding: 10px;
}

.showMoreContainer .brief{
padding: 10px 0;
color: #0f3b76;
font-size: 22px;
}

/*.bgGraList{*/
/*position: relative;*/
/*}*/

/*.bgGraList .bgGraInner{*/
/*position: relative;*/
/*z-index: 3;*/
/*padding-bottom: 80px;*/
/*}*/

/*.bgGraList:before,*/
/*.bgGraList:after{*/
/*position: absolute;*/
/*z-index: 1;*/
/*left: 0;*/
/*top: 0;*/
/*content: " ";*/
/*height: 100%;*/
/*width: 100%;*/
/*}*/

/*.bgGraList:before{*/
/*background: url("../images/programme/bg1.png") left top repeat-y;*/
/*}*/

/*.bgGraList:after{*/
/*background: url("../images/programme/bg2.png") right top repeat-y;*/
/*}*/

#lightBox{
width: 100%;
height: 100%;
position: fixed;
background: rgba(0,0,0,0.8);
z-index: 999;
left: 0;
top: 0;

display: none;
}

#lightBox .modelWrap{
width:900px;
height: 500px;
background: #fff;

position: absolute;
left: 50%;
top: 50%;
margin: -250px 0 0 -450px;
}

#lightBox .modelInner{
width: 100%;
height: 100%;
overflow-y: auto;
}

#googleMap{
width: 560px;
height: 100%;
background: #ddd;
float: left;
}

#lightBox .route{
width: 340px;
height: 100%;
float: right;
padding: 45px 20px 20px 20px;
box-sizing: border-box;
}

#lightBox .btnClose{
width: 40px;
height: 40px;
font-size: 20px;
text-align: center;
line-height: 40px;
position: absolute;
right: 5px;
top: 5px;
color: #203469;
cursor: pointer;
background: #fff;
}

#lightBox .btnClose:hover{
background: #dce3e9;
}


#lightBox .route h4{
margin-bottom: 10px;
}

@media (max-width: 1026px) {



}



@media (max-width: 769px) {

.bgGraList:before,
.bgGraList:after{
display: none;
}


.jsDotList{
right: auto;
bottom: 6px;
text-align: center;
width: 100%;
}

.jsDotList .jsDot{
width: 10px;
height: 10px;
border: 2px #203469 solid;
}

.jsDotList .jsDot:hover{
border: 2px #ee364c solid;
}

.jsDotList .jsDot.active{
border: 2px #ee364c solid;
}

#lightBox .modelWrap{
width:600px;
height: 800px;
margin: -400px 0 0 -300px;
}


#googleMap{
width: 100%;
height: 600px;
}

#lightBox .route{
width: 100%;
min-height: 200px;
height: auto;
padding: 20px 20px 20px 20px;
}

}


@media (max-width: 641px) {


#lightBox .modelWrap{
width:300px;
height: 500px;
margin: -250px 0 0 -150px;
}


#googleMap{
width: 100%;
height: 300px;
}

#lightBox .route{
width: 100%;
min-height: 200px;
height: auto;
padding: 20px 20px 20px 20px;
}



}



