@charset "utf-8";
/* line 1, ../scss/_opr.scss */
.opr-page {
  position: fixed;
  height: 100%;
  width: 100%;
  overflow:hidden;
}

/* line 6, ../scss/_opr.scss */
.opr-current {
  z-index: 99;
}

/* line 9, ../scss/_opr.scss */
.opr-animate {
  z-index: 100;
}

/* line 12, ../scss/_opr.scss */
.opr-nav a[data-target], .opr-next, .opr-prev {
  cursor: pointer;
}

/* line 13, ../scss/main.scss */
body {
  background-color: #ddd;
  font-family: 'Roboto Slab', serif;
  color: #333;
}

/* line 18, ../scss/main.scss */
a {
  text-decoration: none;
  color: #333;
  display: block;
}

/* line 24, ../scss/main.scss */
a:after {
  content: '';
  position: relative;
  display: block;
  width: 8px;
  border-bottom: 2px solid #333;
  transition: 0.3s ease-in-out;
}

/* line 32, ../scss/main.scss */
a:hover:after {
  width: 100%;
}

/* line 35, ../scss/main.scss */
#nav-main {
  position: fixed;
  right: 0;
  z-index: 999;
  padding: 20px;
  margin: 20px;
  border: 4px solid #333;
}

/* line 43, ../scss/main.scss */
#nav-main li {
  float: left;
}

/* line 46, ../scss/main.scss */
#nav-main li + li {
  margin-left: 20px;
}

/* line 49, ../scss/main.scss */
.first {
  background-color: #11CC88;
}

/* line 52, ../scss/main.scss */
.second {
  background-color: #FFB242;
}

/* line 55, ../scss/main.scss */
.third {
  background-color: #418AD0;
}

/* line 58, ../scss/main.scss */
.fourth {
  background-color: #FF6342;
}

/* line 62, ../scss/main.scss */
.opr-next {
  width: 44px;
  height: 43px;
  position: fixed;
  left: 50%;
  margin-left:-22px;
  bottom: 40px;
  cursor: pointer;
  background:url(../images/v.png) no-repeat center center;
  z-index:999999999999;
}

.loadingWrap {
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.9);
	position: fixed;
	top: 0;
	left: 0;
	z-index:99998;
}

.loadingWrap img {
	position: absolute;
	width:100px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -70%);
}


/* 모든 디바이스 지원 */
.page{position:relative;float:left;width:100%;height:100%;background-color: #ddd;}
.page > img{position:absolute;max-width:100%;height:auto;top:50%;left:50%;transform: translate(-50%, -50%);}


.menu-wrap{position:fixed;width:117px;height:100%;left:-80px;z-index:99999;overflow-y:hidden;-webkit-transition:left 0.5s ease;-moz-transition:left 0.5s ease;-o-transition:left 0.5s ease;transition:left 0.5s ease;}
.menu{float:left;width:90px;height:100%;background-color:#000;text-align:center;}
.menu .menu-ul{position:absolute;width:90px;height:auto;top:50%;transform: translateY(-50%);}
.menu .menu-ul li{float:left;width:100%;height:20px;line-height:20px;text-align:center;color:#868686;margin:7px 0px;font-size:18px;}
.menu .menu-ul li.year{font-size:20px;color:#fff;text-align:center;}
.menu .menu-ul li.month{cursor:default;}
.menu .menu-ul li.clickable{cursor:pointer;color:#fff;}
.menu .menu-ul li.clickable:hover{text-decoration: underline;}
.menu .menu-ul li.month.selected{text-decoration: underline;}

.btn-wrap{float:left;width:27px;height:100%;}
#menu-check{position: absolute;visibility: hidden;}
#menu-btn{position:absolute;cursor:pointer;width:27px;height:62px;background:url(../images/arrowside.png) no-repeat center center;top:50%;margin-top:-31px;margin-left:-1px;}
#menu-btn.on{background:url(../images/arrowside_on.png) no-repeat center center;}
.open-menu{left:0px;}


.film-item {position:absolute;width:850px;height:480px;top:50%;left:50%;transform: translate(-50%, -40%);}
.film-item img{display:block;max-width:100% !important;max-height:100% !important;height:auto;}
.film-item iframe{position: absolute;float:left; top:0; left:0;width:100%;height:100%;}
.film-item{cursor:pointer;}
.film-item .play{position:absolute;width:70px;height:49px;top:50%;left:50%;margin-top:-24.5px;margin-left:-35px;background:url(../images/btn_play.png) no-repeat center center;}
.film-item:hover > .play{background:url(../images/btn_paly_on.png) no-repeat center center;}
.bottom-bg{
	position: absolute;
	bottom:-14px;
	width: 100%;
	height: 15px;
	background: url(../images/bg_bottom.png) no-repeat;
	background-size: 100% 15px;
}


/* 스마트폰(아이폰3GS, 아이폰4, 아이폰4S, 갤럭시S, 갤럭시S2, 갤럭시S3 등) 지원 */
@media all and (max-width:533px) {
	.opr-next {bottom: 10px;}

}

/* 태블릿(아이패드, 아이패드2, 뉴아이패드, 아이패드4, 아이패드mini 등) 의 세로 지원 */
@media all and (min-width:534px) and (max-width:767px) {
	.opr-next {bottom: 15px;}
}

/* 태블릿(아이패드, 아이패드2, 뉴아이패드, 아이패드4, 아이패드mini 등) 의 세로 지원 */
@media all and (min-width:768px) and (max-width:1023px) {
	.opr-next {bottom: 15px;}
}

/* 태블릿의 가로 and 4:3모니터 지원 */
@media all and (min-width:1024px) and (max-width:1258px) {
	.opr-next {bottom: 15px;}
}
/* 와이드모니터 지원 */
@media all and (min-width:1259px) and (max-width:1443px) {
	.page > img{position:relative;}
	.menu-wrap{width:100%;height:auto;left:0px;top:-40px;-webkit-transition:top 0.5s ease;-moz-transition:top 0.5s ease;-o-transition:top 0.5s ease;transition:top 0.5s ease;}
	.menu{width:100%;height:50px;}
	.menu .menu-ul{position:static;width:auto;height:100%;top:0px;display:inline-block; transform: none;}
	.menu .menu-ul li{width:60px;height:100%;line-height:50px;color:#cccbc4;margin:0px 5px;}
	.menu .menu-ul li.year{font-size:20px;width:90px;}

	.btn-wrap{width:100%;height:35px;text-align:center;}
	#menu-btn{position:static;display:inline-block;width:80px;height:35px;background:url(../images/arrow.png) no-repeat center center;top:0px;margin-top:0px;margin-left:0px;}
	#menu-btn.on{background:url(../images/arrow_on.png) no-repeat center center;}
	.open-menu{top:0px;}




}
/* 와이드모니터2 지원 */
@media all and (min-width:1444px) {
	.page > img{max-width:none;}

	.menu-wrap{width:100%;height:auto;left:0px;top:-40px;-webkit-transition:top 0.5s ease;-moz-transition:top 0.5s ease;-o-transition:top 0.5s ease;transition:top 0.5s ease;}
	.menu{width:100%;height:50px;}
	.menu .menu-ul{position:static;width:auto;height:100%;top:0px;display:inline-block; transform: none;}
	.menu .menu-ul li{width:60px;height:100%;line-height:50px;color:#cccbc4;margin:0px 5px;}
	.menu .menu-ul li.year{font-size:20px;width:90px;}

	.btn-wrap{width:100%;height:35px;text-align:center;}
	#menu-btn{position:static;display:inline-block;width:80px;height:35px;background:url(../images/arrow.png) no-repeat center center;top:0px;margin-top:0px;margin-left:0px;}
	#menu-btn.on{background:url(../images/arrow_on.png) no-repeat center center;}
	.open-menu{top:0px;}



}