#mouse-wheel { position:fixed; left:79%; bottom:130px; z-index:100004;}
html, body {padding:0; margin:0; width:100%; height:100%; overflow:hidden;}

#wrapper {width:100%; height:100%; overflow:hidden; white-space:nowrap; -webkit-overflow-scrolling: touch;}
#main {width:calc(100% - 20%); height:100%; overflow:hidden; display:inline-block; white-space:normal;}
#info {width:20%; height:100%; overflow:hidden; display:inline-block; white-space:normal; background:#f9f9f9; border-left:1px solid #ddd; box-shadow:0px 0px 30px rgba(0,0,0,0.15);}
#main-scroll {width:100%; padding-right:21px; height:100%; overflow:hidden; overflow-y:scroll; position:relative; -webkit-overflow-scrolling: touch;}
#wrapper input {display:none;}
#info-scroll {width:calc(100% + 20px); height:100%; overflow:hidden; overflow-y:scroll; -webkit-overflow-scrolling: touch;}


.main-inner {padding:110px 20px 200px 20px; position:absolute; top:0px; left:0; /*min-height:100%;*/ opacity:0; z-index:10; transition:0.25s;}
.main-inner img {width:100%; display:block;}
.info-inner {padding:0 27px 10px 20px; border-bottom:1px solid #ddd; cursor: pointer; -webkit-tap-highlight-color: rgba(0,0,0,0);}
.info-inner img {width:100%; height:auto;}
.info-inner:hover { background:#e8e8e8; background: #e8e8e8 url(img/line_333.gif) repeat-y left 0;}
.info-inner:hover h3 { color:#111;}
.info-inner:hover p { color:#111;}

h2 {padding:0; margin:0; font-family: "UNVR57"; font-size:22px; color:#888; text-align:right; letter-spacing:2px; margin-bottom:10px;}
h3 {padding:0; margin:0; font-family: "UNVR57"; font-size:30px; color:#777; padding-top:30px; margin-bottom:0px;}
.info-inner p, .main-inner p {padding:0; margin:0; font-size:14px; color:#666;}
.info-inner p {width:400px; padding-top:0px; padding-bottom:24px;}
.main-inner p { woverflow:hidden; transition:0.25s; }
.ma-txt1 { font-family: "UNVR57"; font-size:80px; color:#222; }
.ma-txt2 { font-size:14px; color:#555; line-height:21px; }
.txt1 { color:#F00; font-size:14px;}

#arrow {position:absolute; right:24px; top:75px; z-index:30; display:none;}
.pad-top {height:0px;}
.pad-bottom {height:0px;}

#wrapper #pic1:checked ~ #main #main-scroll div:nth-of-type(2),
#wrapper #pic2:checked ~ #main #main-scroll div:nth-of-type(3),
#wrapper #pic3:checked ~ #main #main-scroll div:nth-of-type(4),
#wrapper #pic4:checked ~ #main #main-scroll div:nth-of-type(5),
#wrapper #pic5:checked ~ #main #main-scroll div:nth-of-type(6),
#wrapper #pic6:checked ~ #main #main-scroll div:nth-of-type(7),
#wrapper #pic7:checked ~ #main #main-scroll div:nth-of-type(8),
#wrapper #pic8:checked ~ #main #main-scroll div:nth-of-type(9),
#wrapper #pic9:checked ~ #main #main-scroll div:nth-of-type(10),
#wrapper #pic10:checked ~ #main #main-scroll div:nth-of-type(11),
#wrapper #pic11:checked ~ #main #main-scroll div:nth-of-type(12),
#wrapper #pic12:checked ~ #main #main-scroll div:nth-of-type(13),
#wrapper #pic13:checked ~ #main #main-scroll div:nth-of-type(14),
#wrapper #pic14:checked ~ #main #main-scroll div:nth-of-type(15),
#wrapper #pic15:checked ~ #main #main-scroll div:nth-of-type(16),
#wrapper #pic16:checked ~ #main #main-scroll div:nth-of-type(17),
#wrapper #pic17:checked ~ #main #main-scroll div:nth-of-type(18),
#wrapper #pic18:checked ~ #main #main-scroll div:nth-of-type(19),
#wrapper #pic19:checked ~ #main #main-scroll div:nth-of-type(20),
#wrapper #pic20:checked ~ #main #main-scroll div:nth-of-type(21),
#wrapper #pic21:checked ~ #main #main-scroll div:nth-of-type(22),
#wrapper #pic22:checked ~ #main #main-scroll div:nth-of-type(23) {opacity:1; z-index:20;}

#wrapper #pic1:checked ~ #main #main-scroll div:nth-of-type(2) p,
#wrapper #pic2:checked ~ #main #main-scroll div:nth-of-type(3) p,
#wrapper #pic3:checked ~ #main #main-scroll div:nth-of-type(4) p,
#wrapper #pic4:checked ~ #main #main-scroll div:nth-of-type(5) p,
#wrapper #pic5:checked ~ #main #main-scroll div:nth-of-type(6) p,
#wrapper #pic6:checked ~ #main #main-scroll div:nth-of-type(7) p,
#wrapper #pic7:checked ~ #main #main-scroll div:nth-of-type(8) p,
#wrapper #pic8:checked ~ #main #main-scroll div:nth-of-type(9) p,
#wrapper #pic9:checked ~ #main #main-scroll div:nth-of-type(10) p,
#wrapper #pic10:checked ~ #main #main-scroll div:nth-of-type(11) p,
#wrapper #pic11:checked ~ #main #main-scroll div:nth-of-type(12) p,
#wrapper #pic12:checked ~ #main #main-scroll div:nth-of-type(13) p,
#wrapper #pic13:checked ~ #main #main-scroll div:nth-of-type(14) p,
#wrapper #pic14:checked ~ #main #main-scroll div:nth-of-type(15) p,
#wrapper #pic15:checked ~ #main #main-scroll div:nth-of-type(16) p,
#wrapper #pic16:checked ~ #main #main-scroll div:nth-of-type(17) p,
#wrapper #pic17:checked ~ #main #main-scroll div:nth-of-type(18) p,
#wrapper #pic18:checked ~ #main #main-scroll div:nth-of-type(19) p,
#wrapper #pic19:checked ~ #main #main-scroll div:nth-of-type(20) p,
#wrapper #pic20:checked ~ #main #main-scroll div:nth-of-type(21) p,
#wrapper #pic21:checked ~ #main #main-scroll div:nth-of-type(22) p,
#wrapper #pic22:checked ~ #main #main-scroll div:nth-of-type(23) p {max-height:500px;}

#wrapper #pic1:checked ~ #info #info-scroll div:nth-of-type(2),
#wrapper #pic2:checked ~ #info #info-scroll div:nth-of-type(3),
#wrapper #pic3:checked ~ #info #info-scroll div:nth-of-type(4),
#wrapper #pic4:checked ~ #info #info-scroll div:nth-of-type(5),
#wrapper #pic5:checked ~ #info #info-scroll div:nth-of-type(6),
#wrapper #pic6:checked ~ #info #info-scroll div:nth-of-type(7),
#wrapper #pic7:checked ~ #info #info-scroll div:nth-of-type(8),
#wrapper #pic8:checked ~ #info #info-scroll div:nth-of-type(9),
#wrapper #pic9:checked ~ #info #info-scroll div:nth-of-type(10),
#wrapper #pic10:checked ~ #info #info-scroll div:nth-of-type(11),
#wrapper #pic11:checked ~ #info #info-scroll div:nth-of-type(12),
#wrapper #pic12:checked ~ #info #info-scroll div:nth-of-type(13),
#wrapper #pic13:checked ~ #info #info-scroll div:nth-of-type(14),
#wrapper #pic14:checked ~ #info #info-scroll div:nth-of-type(15),
#wrapper #pic15:checked ~ #info #info-scroll div:nth-of-type(16),
#wrapper #pic16:checked ~ #info #info-scroll div:nth-of-type(17),
#wrapper #pic17:checked ~ #info #info-scroll div:nth-of-type(18),
#wrapper #pic18:checked ~ #info #info-scroll div:nth-of-type(19),
#wrapper #pic19:checked ~ #info #info-scroll div:nth-of-type(20),
#wrapper #pic20:checked ~ #info #info-scroll div:nth-of-type(21),
#wrapper #pic21:checked ~ #info #info-scroll div:nth-of-type(22),
#wrapper #pic22:checked ~ #info #info-scroll div:nth-of-type(23) {background:#e8e8e8; background: #e8e8e8 url(../img/line_333.gif) repeat-y left 0; color:#fff;}
@media only screen and (min-width: 800px) {
.inc_menu{display:none;}
#logo img{width:80%;}
}
@media only screen and (max-width: 1024px) {
#main {width:calc(100% - 220px);}
.main-inner {padding:110px 5% 20px 5%;width:calc(90%);}
#info {width:220px;}
#mouse-wheel { display:none; }
.inc_menu{display:none;}
#logo img{width:70%;}
}
@media only screen and (max-width: 800px) {
#main {width:calc(100%);}
#info {width:220px;}
#arrow {display:block;}
#mouse-wheel { display:none;}
.inc_menu{display:block;}
.main-inner {padding:110px 4% 20px 4%;width:calc(92%);}
.main-inner img { display:none;}
.main-inner h2 { display:none;}
.ma-txt1 { font-size:40px; text-align:right; margin-top:-10px;}
.ma-txt2 { margin-top:60px;}
}