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

@charset "utf-8";
/* ALL *******************************************************************************************/ 
html{font-size:62.5%}
body{font-size:20px;font-size:2rem;letter-spacing:-.02em;overflow-x:hidden;*overflow-x:inherit;background:#333;color:#CCC} /* 18px */
h1{font-size:72px;font-size:7.2rem} /* 24px */
h2{font-size:48px;font-size:4.8rem;text-transform:uppercase}/* 18px */
h3{font-size:32px;font-size:3.2rem;text-transform:capitalize}/* 18px */
*:first-child+html h2{text-shadow:none;filter:none}
body,div,ul,li,dl,dt,dd,ol,p,h1,h2,h3,h4,h5,h6,form{margin:0;padding:0}
ul,ol,dl,li{list-style:none}
img{vertical-align:top}
em{font-style:normal}
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block;margin:0;padding:0}
img{max-width:100%!important;width:auto\9!important;height:auto;border:0}
html,body{min-height:100%;height:100%}
a{cursor:pointer;text-decoration:none}
a,img{border:none;border:0;outline:none}
strong{font-weight:bold}
input{border:0}

 
/* HTML Reset */
@font-face{
 font-family:'Titillium Web';
 font-style:normal;
 font-weight:400;
 src:local('titillium-regular-webfont'),local('titillium-regular-webfont'),local('titillium-regular-webfont');
 src:url(//web.softnyx.com/font/titillium-regular-webfont.eot);
 src:url(//web.softnyx.com/font/titillium-regular-webfont.eot?#iefix) format('embedded-opentype'),url(//web.softnyx.com/font/titillium-regular-webfont.woff) format('woff'),url(//web.softnyx.com/font/titillium-regular-webfont.ttf) format('truetype')}
@font-face{
 font-family:'Titillium Web';
 font-style:normal;
 font-weight:700;
 src:local('titillium-Bold-webfont'),local('titillium-Bold-webfont'),local('titillium-Bold-webfont');
 src:url(//web.softnyx.com/font/titillium-Bold-webfont.eot);
 src:url(//web.softnyx.com/font/titillium-Bold-webfont.eot?#iefix) format('embedded-opentype'),url(//web.softnyx.com/font/titillium-Bold-webfont.woff) format('woff'),url(//web.softnyx.com/font/titillium-Bold-webfont.ttf) format('truetype')}

/* Font Family */
body,table,input,button,textarea,select,input{font-family:Titillium Web,Verdana,Geneva,sans-serif}

/* Today */
.gotohomepage{float:left;font-size:14px;font-size:1.4rem}
.gotohomepage a{width:200px;height:26px;padding-top:6px;text-align:center;display:block;background:#000;color:#CCC;border-radius:5px}
.gotohomepage a:hover{background:#666}
.nomoretoday{float:right;color:#999;padding-top:6px;font-size:14px;font-size:1.4rem}
.nomoretoday input{vertical-align:-1px}
.today{max-width:1200px;min-height:30px;margin:10px auto}

#floatMenu { position:absolute; right:0; top:90px; z-index:998; width:136px; height:509px }

/* Facebook 
.facebookArea{background:url(http://img.softnyx.com/3/rk2015/event/promo1607/promo_facebook.jpg) no-repeat center top;background-size:100% 100%;min-height:100px}
.facebookArea>div{margin:0 auto;max-width:980px}
.facebookArea p{display:inline-block;zoom:1;*display:inline;
margin:0 auto;width:360px;font-size:20px;color:#FFF;vertical-align:top;padding:20px;font-size:24px;font-size:2.4rem}
.facebookArea p>strong{color:orange}

/* Font */
.view_txt{margin-bottom:20px}
.txt_hint{color:#C33;margin:20px 0}

.txt_point{display:inline-block;zoom:1;*display:inline;padding:10px;font-size:28px;font-size:2.8rem;background:#000;color:#CF0}
.txt_period{display:inline-block;zoom:1;*display:inline;padding:10px;font-size:20px;font-size:2.0rem;background:#CF0;color:#000}

/* TAB */
.tab{background:url(http://img.softnyx.net/1/rk2015/event/1805_Himmel/tab_bg.jpg)  top;height:140px;width:100%;text-align:center}
.fixed{position:fixed;top:0px;width:100%;z-index:999; background-position:center bottom;
	-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-ms-transition:all 0.5s ease;-o-transition:all 0.5s ease;transition:all 0.5s ease;height:80px;padding-top:10px}  
.tab li{display:inline-block;zoom:1;*display:inline;padding:50px 110px;font-size:36px; font-weight:bold}

.fixed li{ padding:20px 89px}
.tab li a{color:#CCC;text-transform:uppercase}

/* design */
.area01>div,.area02>div,.area03>div,.area04>div{width:996px;margin:0 auto;color:#CCC}
.area01{overflow:hidden;position:relative;z-index:0;background:url(http://img.softnyx.net/1/rk2015/event/1805_Himmel/main_bg.jpg) no-repeat center top;height:800px;font-size:28px;font-size:2.8rem}
.area02{background:url(http://img.softnyx.net/1/rk2015/event/1805_Himmel/area01_bg.jpg) fixed center top}
.area03{background:url(http://img.softnyx.net/1/rk2015/event/1805_Himmel/area02_bg.jpg) repeat center top}
.area04{background:url(http://img.softnyx.net/1/rk2015/event/1805_Himmel/area03_bg.jpg) repeat center top}

.area01 h2{width:996px;margin:0 auto; padding-top:200px}
.area01 p{margin-bottom:40px}
.area02 h3,.area03 h3,.area04 h3{padding-top:100px;padding-bottom:40px}
.area03 img{vertical-align:0px}

.tit_img01{position:absolute;width:1920px;height:854px;top:0;left:50%;margin-left:-960px;z-index:2;background:url(http://img.softnyx.net/1/rk2015/event/1805_Himmel/main_img01.png) no-repeat center}
.tit_img02{position:absolute;width:1920px;height:800px;top:0;left:50%;margin-left:-960px;z-index:1;background:url(http://img.softnyx.net/1/rk2015/event/1805_Himmel/main_img02.png) no-repeat center}

.btn_basic{padding-top:40px;text-align:center}
.btn_basic a{
	display:inline-block;zoom:1;*display:inline;padding:20px 30px;color:#FFF;border-radius:5px;border:1px solid #333;
	/*start ------------*/
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff3019+0,cf0404+100;Red+3D */
	background: #ff3019; /* Old browsers */
	background: -moz-linear-gradient(top,  #ff3019 0%, #cf0404 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #ff3019 0%,#cf0404 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #ff3019 0%,#cf0404 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 ); /* IE6-9 */
}

.btn_basic a:hover{color:#ccff00;border-color:#333;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#45484d+0,000000+100;Black+3D+%231 */
	background: #45484d; /* Old browsers */
	background: -moz-linear-gradient(top,  #45484d 0%, #000000 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #45484d 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #45484d 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}

.event{background:rgba(0, 0, 0, 0.7);padding:20px;margin:40px 0;border-radius:15px}

h4{padding:40px 0 20px}

/** Carousel **/
.jcarousel-wrapper{margin:50px auto;position:relative}

.jcarousel{position:relative;overflow:hidden;width:100%; margin:20px 0 50px}
.jcarousel ul{width:20000em;position:relative;list-style:none;margin:0;padding:0}
.jcarousel li{position:relative;width:1920px;float:left}
.jcarousel img{display:block;max-width:100%;height:auto !important}
/** Carousel Controls **/

.jcarousel-control-prev, .jcarousel-control-next{position:absolute;top:55%;margin-top:-15px;width:80px;height:80px;text-align:center;color:#fff;text-decoration:none;font-family:initial;font-size:200px;font-size:20.0rem;opacity:.4;filter:alpha(opacity=40)}
.jcarousel-control-prev img, .jcarousel-control-next img{vertical-align:top}
.jcarousel-control-prev:hover, .jcarousel-control-next:hover{opacity:.8;filter:alpha(opacity=80)}
.jcarousel-control-prev{left:-145px}
.jcarousel-control-next{right:-145px}

/** Carousel Pagination **/

.jcarousel-pagination{position:absolute;bottom:70px;left:50%;-webkit-transform:translate(-50%, 0);-ms-transform:translate(-50%, 0);transform:translate(-50%, 0);margin:0}
.jcarousel-pagination a{text-decoration:none;display:inline-block;font-size:16px;height:10px;width:10px;line-height:10px;background:#fff;color:#4E443C;border-radius:10px;text-indent:-9999px;margin-right:7px;-webkit-box-shadow:0 0 2px #4E443C;-moz-box-shadow:0 0 2px #4E443C;box-shadow:0 0 2px #4E443C}
.jcarousel-pagination a.active{background:#960;color:#fff;opacity:1;-webkit-box-shadow:0 0 2px #F0EFE7;-moz-box-shadow:0 0 2px #F0EFE7;box-shadow:0 0 2px #F0EFE7}



/* animated elements */
.animateblock {
  padding: 8px 0;
  color: #fff;
  opacity: 0;
  -webkit-transition: all 0.55s linear;
  -moz-transition: all 0.55s linear;
  transition: all 0.55s linear;
}

.animateblock.animated {
  opacity: 1;
}

/* animation transition styles */
.animateblock.left {
  margin-left: -2%;
}
.animateblock.left.animated {
  margin-left: 12%;
}

.animateblock.right {
  display: block;
  margin-left: 100%;
}
.animateblock.right.animated {
  margin-left: 70%;
}

.animateblock.top {
  display: block;
  width: auto;
  text-align: center;
  margin-top: -25px;
}
.animateblock.top.animated {
  margin-top: 0px;
}

.animateblock.btm {
  display: block;
  width: auto;
  text-align: center;
  margin-top: 25px;
}
.animateblock.btm.animated {
  margin-top: 0;
}

.animateblock.centerleft {
  display: block;
  width: auto;
  text-align: center;
  margin-right: -10%;
}
.animateblock.centerleft.animated {
  margin-right: 0;
}

.animateblock.centerright {
  display: block;
  width: auto;
  text-align: center;
  margin-left: -10%;
}
.animateblock.centerright.animated {
  margin-left: 0;
}

.animateblock.center {
  margin-left: 2%;
}
.animateblock.center.animated {
  margin-left: 42%;
}

.animateblock.size {
  display: block;
  width: 10%;
  text-align: center;
}
.animateblock.size.animated {
  width: 100%;
  height: 100%;
}
.animateblock.size img {
  max-width: 100%;
  height: auto;
}

/* 데스크탑 브라우저 가로 */
@media only screen and (min-width : 1224px) {
#video_area{height:750px}
#video_area .mvBG{width:1800px;height:1080px;margin-top:-100px;margin-left:-80px;z-index:0}
body:first-of-type #video_area .mvBG{width:1800px;height:1080px;margin-top:-100px;margin-left:-80px;z-index:0}
}

/* 큰 모니터 */
@media only screen and (min-width : 1824px) {
#video_area{height:800px}
#video_area .mvBG{width:1920px;height:1080px;margin-top:-30px;margin-left:0px;z-index:0}
body:first-of-type #video_area .mvBG{width:1920px;height:1080px;margin-top:-30px;margin-left:0px;z-index:0}
}