/* BASIC css start */
.updown {display:none; } /* 메인위아래버튼 노출안함 */

/* 상단반응형영역 */
@media all and (max-width :640px){ #contentWrapper { margin-top:0px !important;}}
@media all and (min-width :641px) and (max-width :1024px) and (orientation : landscape){ #contentWrapper { margin-top:0px !important;}}
@media all and (min-width :641px) and (max-width :1024px) and (orientation : portrait){ #contentWrapper { margin-top:0px !important;}}
@media all and (min-width :1025px){ #contentWrapper { margin-top:0px !important; }}



.section{ }
#menu li { display:block; margin:10px;color: #000;background: rgba(255,255,255, 0); -webkit-border-radius: 100%; border-radius: 100%; text-align:center;}
#menu li.active{ background: rgba(0,0,0,0);color: #fff;}
#menu li a { width:30px; height:30px;  line-height:30px; color: #000;font-size:12px;font-family: 'Dancing Script','Poppins', sans-serif;  color:#000; font-weight: 700;}
#menu li.active a:hover{ color: #000;}
#menu li a:hover{	background: rgba(255,255,255, 0); font-size:18px; color:#fff }
#menu li a,
#menu li.active a { display:block;}
#menu li.active a {color: #fff; font-size:18px; border-top:1px solid #fff; border-bottom:1px solid #fff; }
#menu{position:fixed;top:50%; transform: translateY(-50%);right:10px;height: auto;	z-index: 70;padding: 0;}


.video-background {
  background: #000;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -99;
}
.video-foreground,
.video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@media (min-aspect-ratio: 16/9) {
  .video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
  .video-foreground { width: 300%; left: -100%;  }
}


.promotion { border:0px solid #000;  width:100%;height:100% }
.promotion .main_text { position:absolute;top:60%;right:10%; transform: translateY(-50%); width:40%; border:0px solid #000; opacity:0; ;-webkit-transition:all 2s ease,-webkit-transform 1s ease-out;-moz-transition:all 2s ease,-moz-transform 1s ease-out;-ms-transition:all 2s ease,-ms-transform 1s ease-out; }
.promotion .main_text .mainTexBut { cursor:pointer; padding:10px 20px; margin-top:30px; float:right; transition:all 0.2s ease-out;width:200px;border:1px solid #fff;}
.promotion .main_text .mainTexBut a {color:#fff;}
.promotion .main_text .mainTexBut:hover {color:#fff;background:#000;border-color:#000;}


.main_text_button .mainTexBut { cursor:pointer; padding:10px 20px; margin:30px auto 0;transition:all 0.2s ease-out;width:200px;border:1px solid #fff;}
.main_text_button .mainTexBut a {color:#fff;}
.main_text_button .mainTexBut:hover {color:#fff;background:#000;border-color:#000;}
.main_text_button { cursor:pointer;position:absolute;top:60%;left:50%;transform:translateX(-50%) translateY(-50%);opacity:0;z-index:999;-webkit-transition:all 2s ease,-webkit-transform 1s ease-out;-moz-transition:all 2s ease,-moz-transform 1s ease-out;-ms-transition:all 2s ease,-ms-transform 1s ease-out;}

.main_item  { width:100%; margin:0 auto;  padding:50px; }
.main_item .itemstory { margin-top:120px; transition:transform 2.0s ease,opacity 2.0s ease;transform:translate(0px,120px);opacity:0.0; }
.main_item .itemstory ul { margin:0; font-size:0; vertical-align:top;  }
.main_item .itemstory li { display:inline-block; text-align:center; vertical-align:top; padding:10px 0;}
.main_item .itemstory li:hover { }
.main_item .itemstory li a {display:block; width:100%;   }
.main_item .itemstory li img { width:95%; text-align:center; overflow: hidden; }
.main_item .itemstory li strong { display: block; margin: 30px auto 10px;; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 400; color: #333; font-size: 18px; letter-spacing: ;}
.main_item .itemstory li p { box-sizing:border-box; padding:0 30px;  color: #666;  font-size: 13px;  line-height: 1.5; word-break: keep-all;}

@media all and (max-width :640px){ .itemstory li { width:100%; padding:0 1%; }}
@media all and (min-width :641px) and (max-width :1024px) and (orientation : landscape){ .itemstory li { width:50%; }}
@media all and (min-width :641px) and (max-width :1024px) and (orientation : portrait){ .itemstory li {width:50%;  }}
@media all and (min-width :1025px) { .itemstory li { width:25%; }}




/* 액션위치설정 */
.section.active .main_text_button { position:absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);opacity:1;z-index:999;-webkit-transition:all 2s ease,-webkit-transform 1s ease-out;-moz-transition:all 2s ease,-moz-transform 1s ease-out;-ms-transition:all 2s ease,-ms-transform 1s ease-out;}
.section.active .promotion .main_text { position:absolute;top:50%;right:10%;transform:translateY(-50%);opacity:1;z-index:999; ;-webkit-transition:all 2s ease,-webkit-transform 1s ease-out;-moz-transition:all 2s ease,-moz-transform 1s ease-out;-ms-transition:all 2s ease,-ms-transform 1s ease-out;  }
.section.active .main_text_button { position:absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);opacity:1;z-index:999;-webkit-transition:all 2s ease,-webkit-transform 1s ease-out;-moz-transition:all 2s ease,-moz-transform 1s ease-out;-ms-transition:all 2s ease,-ms-transform 1s ease-out;}
.section.active .itemstory { transform:translate(0,0);opacity:1.0;}
.section.active .itemstory { transform:translate(0,0);opacity:1.0;}

/* 액션위치설정 */

.fp-viewing-anchor7 .itemstory { transform:translate(0,0);opacity:1.0;}


/* BASIC css end */