html,body{
margin:0; padding:0;
background-color: #1A1A1A;
}
$tranche_w:9mm;
$tranche_mr:5mm;
$p_w:227.41mm;
$p_h:207.26mm;
$main_w:2.001*$p_w;
$navh:30mm;
// $mt:1cm;
// $mb:1cm;
// $me:1cm;
// $mi:1cm;
#root{
position: relative;
width:($tranche_w+$tranche_mr+$main_w)*1.001;
height:$p_h+$navh;
margin:0 auto;
letter-spacing:-.25em;
&>*{letter-spacing: normal;}
}
#header{
display: inline-block;
width: $tranche_w; height: $p_h;
margin-right:$tranche_mr;
background-color: black;
background-image: url('../../images/dos.jpg');
background-size: contain;
background-repeat: no-repeat;
h1{
font-size: 1em;
margin: 0 0 15mm 0; padding:0.3em;
position: absolute;
bottom:0; left:0;
transform-origin: 0% 0%;
transform: rotate(270deg);
visibility: hidden;
}
}
#main{
display: inline-block;
width:$main_w;
overflow: hidden;
// background-color: magenta;
#page-left{
float:left;
// padding:$mt $mi $mb $me;
// background-image: url("../../images/pages/01_anan.jpeg");
background-position: right;
}
#page-right{
float: right;
// padding:$mt $me $mb $mi;
// background-image: url("../../images/pages/02_TH.jpeg");
background-position: left;
}
.page{
position: relative;
width:$p_w;
height:$p_h;
background-repeat: no-repeat;
background-size: contain;
.overlay{
position: relative;
width:100%; height:100%;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
z-index: 1;
// img{max-width: 100%;}
}
.maps{
position:absolute;
top:0; left:0;
width:100%; height:100%;
z-index: 2;
.map{
position: absolute;
cursor: pointer;
&[debug="true"]{
background-color: rgba(0, 0, 250, 0.4);
}
}
}
}
}
#navigation{
width:$main_w;
height:$navh;
overflow: hidden;
$ml:$tranche_w + $tranche_mr;
margin:0 0 0 $ml;
padding:0;
background-color: rgba(26, 26, 26, 0.7);
// background-color: green;
text-align: center;
// opacity: 0;
transition: opacity .3s ease-in-out;
// &:hover{opacity: 1;}
}
#pagination{
color:#fff;
font-size: 1em;
padding: 1mm 0;
letter-spacing: -.25em;
&>*{letter-spacing: normal;}
div{
display: inline-block;
width:49.9%;
span.p{
display: inline-block;
vertical-align: middle;
min-width: 3em;
text-align: center;
}
span.l{
cursor: pointer;
line-height: -1em;
&.hidden{visibility: hidden;}
}
&.wrapper-l{
left:0; text-align: right;
// span.p{text-align: left;}
}
&.wrapper-r{
right:0; text-align: left; border-left: 1px solid white;
// span.p{text-align: right;}
}
}
opacity: 0.3;
transition: opacity .3s ease-in-out;
&:hover{opacity: 1;}
}
#railway{
// background-color: blue;
ul{
padding:1mm 0; margin:0;
text-align: justify;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
li{
// display: inline-block; vertical-align: middle;
// display:
list-style: none;
opacity:0.2;
transition: opacity 0.3s ease-in-out;
&.current, &.active:hover{opacity: 1;}
span{
display: inline-block;
background-color: white;
width:1mm; height:7mm;
// margin-left: 0.5mm;
background-position: center;
background-size: cover;
&.active{
width:7mm; cursor: pointer;
}
&.page-right{
// margin-right: 1mm;
}
}
}
&:hover li{opacity: 1;}
}
}