#mouse-wheel { position:fixed; right:268px; bottom:50px; 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% - 300px); height:100%; overflow:hidden; display:inline-block; white-space:normal;}
#info {width:300px; 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:20px; 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 20px 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:22px; color:#333; padding-top:10px; margin-bottom:10px;}
.info-inner p {padding:0; margin:0; font-size:14px; color:#666;}
.info-inner p {width:400px; padding-top:10px; padding-bottom:4px;}
.main-inner p { }
.mic { background:#FFF; position:absolute; width:330px; height:310px; padding:30px; opacity:0.9; top:30%; left:0; box-shadow:-10px 10px 10px rgba(0,0,0,0.15);}
.ma-txt1 { font-family: "UNVR57"; font-size:80px; color:#000; }
.ma-txt2 { font-size:14px; color:#666; line-height:21px; }
.txt1 { color:#a63393; font-size:14px;}
.txt2 { color:#a63393; font-size:20px; margin:3px;}

#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(http://homepageimg.infotown.kr/bc_001/images/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 30px 30px 10px;}
#info {width:220px;}
#mouse-wheel { right:188px; }
.inc_menu{display:none;}
#logo img{width:70%;}
.mic { background:#fff; position:absolute; width:220px; height:220px; padding:30px; opacity:0.9; top:30%; left:0;}
.ma-txt1 { font-family: "UNVR57"; font-size:50px; color:#000; }
.ma-txt2 { font-size:14px; color:#666; line-height:16px; }
.txt2 { color:#a63393; font-size:18px; }
}
@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 h2 { display:none;}
.mic { background:#fff; position:absolute; width:150px; height:150px; padding:30px; opacity:0.9; top:50%; left:0;}
.ma-txt1 { font-family: "UNVR57"; font-size:33px; color:#000; }
.ma-txt2 { font-size:12px; color:#666; line-height:16px; margin-top:-30px; }
.txt2 { color:#a63393; font-size:14px; }
}