@charset "UTF-8";
/* contents */

@keyframes focus-in {
	0% {
		filter: blur(12px);
		opacity: 0;
	}
	100% {
		filter: blur(0px);
		opacity: 1;
	}
}
@keyframes focus-out {
	0% {
		transform: translateZ(0);
		filter: blur(0.01);
	}
	100% {
		transform: translateZ(-500px);
		filter: blur(12px) opacity(0%);
	}
}
@keyframes focus-out-bg {
	0% {
		opacity: 1;
		transform: translateZ(0);
	}
	100% {
		opacity: 0;
		transform: translateZ(-500px);
	}
}
.focus-in-out {
	animation-name: focus-in, focus-out;
	animation-delay: 0s, 3.6s;
	animation-duration: 1.2s, 1.4s;
	animation-timing-function: cubic-bezier(0.550, 0.085, 0.680, 0.530), cubic-bezier(0.550, 0.085, 0.680, 0.530);
	animation-fill-mode: forwards, both;
}


#mainVisual{position:relative; width:100%; margin:0 auto; ; overflow:hidden;padding:50px}
#mainVisual:after{content:''; clear:both; display:block;}
#mainVisual .inner{width:100%; height:100%; padding:0;}
#mainVisual .swiper-container{width:100%; /*max-width:1920px;*/ height:100%;}
#mainVisual .imgBox{}
#mainVisual .imgBox img{border-radius:10px}
#mainVisual .imgBox img.pc{display:inline-block;}
#mainVisual .imgBox img.mobile{display:none;}
#mainVisual .txtBox{display:inline-block; position:absolute; width:80%; top:50%; left:200px; margin-top:-30px; transform:translateY(-50%); z-index:2;/* cursor:default;*/}
#mainVisual .txtBox p{display:block; line-height:1.6; margin:0 auto 28px; color:#222; font-size:2.4rem; word-break:keep-all;}
#mainVisual .txtBox p.ti{line-height:1; margin:0 auto 32px; font-size:3.2rem; font-weight:bold;}
#mainVisual .bgBox{position:absolute; width:100%; height:100%; bottom:0;}
#mainVisual .bgBox .inner{height:100%;}
#mainVisual .bgBox .control{position:absolute; width:100%; bottom:50%;}
#mainVisual .bgBox .control .swiper-button-prev{display:inline-block; left:28px;}
#mainVisual .bgBox .control .swiper-button-next{display:inline-block; right:28px;}
#mainVisual .bgBox .pager{display:inline-block; position:absolute; width:100%; line-height:0; left:0; bottom:26px; text-align:center;}

/* common */
.swiper-pagination{display:inline-block; position:relative; text-align:center;}
.swiper-pagination-bullet{display:inline-block; width:15px; height:5px; margin:0 3px; background:#DDD; border-radius:0; opacity:1; vertical-align:top; transition:.2s;}
.swiper-pagination-bullet:focus, .swiper-pagination-bullet:hover{background:#eee;}
.swiper-pagination-bullet-active{position:relative; width:15px; height:12px; margin:0 3px; background:#555;}
.swiper-pagination-bullet-active:focus, .swiper-pagination-bullet-active:hover{background:#666;}
.swiper-pagination-fraction{bottom:0;}
.swiper-button-next, .swiper-button-prev{position:absolute; width:25px; height:47px; top:50%; left:auto; right:auto; margin:0; margin-top:-23.5px; padding:0; transition:opacity .2s;}
.swiper-button-prev{left:0;}
.swiper-button-prev.gray{background:url('../images/ico_prev_gray.png') no-repeat center top; background-size:100%;}
.swiper-button-prev.white{background:url('../images/ico_prev_white.png') no-repeat center top; background-size:100%;}
.swiper-button-next{right:0;}
.swiper-button-next.gray{background:url('../images/ico_next_gray.png') no-repeat center top; background-size:100%;}
.swiper-button-next.white{background:url('../images/ico_next_white.png') no-repeat center top; background-size:100%;}
.swiper-button-prev:focus, .swiper-button-prev:hover{opacity:0.7;}
.swiper-button-next:focus, .swiper-button-next:hover{opacity:0.7;}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled{background-position:center bottom !important; opacity:1;}
.swiper-button-play, .swiper-button-pause{display:none; width:8px; height:10px; margin-left:5px; font-size:0; vertical-align:middle; opacity:0.5; cursor:pointer;}
.swiper-button-play:focus, .swiper-button-pause:focus, .swiper-button-play:hover, .swiper-button-pause:hover{opacity:1;}
.swiper-button-play{background:url('../images/ico_play.png') no-repeat center;}
.swiper-button-pause{background:url('../images/ico_pause.png') no-repeat center;}
.swiper-button-play.active, .swiper-button-pause.active{display:inline-block;}



.swiper-pagination-bullet:focus, .swiper-pagination-bullet:hover{background:#eee;}
.swiper-pagination-bullet-active{position:relative; width:20px; height:4px; margin:0 3px; background:#555;}
.swiper-pagination-bullet-active:focus, .swiper-pagination-bullet-active:hover{background:#666;}
.swiper-pagination-fraction{bottom:0;}

.swiper-button-prev{left:0;}
.swiper-button-prev.gray{background:url('../images/ico_prev_gray.png') no-repeat center top; background-size:100%;}
.swiper-button-prev.white{background:url('../images/ico_prev_white.png') no-repeat center top; background-size:100%;}
.swiper-button-next{right:0;}
.swiper-button-next.gray{background:url('../images/ico_next_gray.png') no-repeat center top; background-size:100%;}
.swiper-button-next.white{background:url('../images/ico_next_white.png') no-repeat center top; background-size:100%;}
.swiper-button-prev:focus, .swiper-button-prev:hover{opacity:0.7;}
.swiper-button-next:focus, .swiper-button-next:hover{opacity:0.7;}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled{background-position:center bottom !important; opacity:1;}
.swiper-button-play, .swiper-button-pause{display:none; width:8px; height:10px; margin-left:5px; font-size:0; vertical-align:middle; opacity:0.5; cursor:pointer;}
.swiper-button-play:focus, .swiper-button-pause:focus, .swiper-button-play:hover, .swiper-button-pause:hover{opacity:1;}
.swiper-button-play{background:url('../images/ico_play.png') no-repeat center;}
.swiper-button-pause{background:url('../images/ico_pause.png') no-repeat center;}
.swiper-button-play.active, .swiper-button-pause.active{display:inline-block;}

/* visual */
#mainVisual{position:relative;  margin:0 auto; overflow:hidden;}
#mainVisual:after{content:''; clear:both; display:block;}

#mainVisual .swiper-container{ /*max-width:1920px;*/ height:100%;}
#mainVisual .imgBox{}
#mainVisual .imgBox img{}
#mainVisual .imgBox img.pc{display:inline-block;}
#mainVisual .imgBox img.mobile{display:none;}


#mainVisual .video{
  position: relative;
  width: 56%;
  margin: 0 auto;           /* ÄÁÅ×ÀÌ³Ê ÀÚü¸¦ Áß¾ÓÀ¸·Î */
  aspect-ratio: 16 / 9;     /* Æеù Æ®¸¯ ´ë½Å Çö´ë½Ä */
}

#mainVisual .video video{
  display:block;
  width:100%;           /* °¡·Î¸¸ ¸ÂÃß°í */
  height:auto;          /* ¼¼·Î´Â ¿øº»ºñÀ²·Î ÀÚµ¿ */
  margin: auto;             /* Àý´ë positioned ¿ä¼Ò¸¦ Áß¾Ó Á¤·Ä */
  object-fit: contain;  /* ¾ÈÀüÇÏ°Ô ¿øº»ºñÀ² À¯Áö(¿©¹é »ý±æ ¼ö ÀÖÀ½) */
}

@media all and (max-width:1279px){
	#mainContents{min-width:960px;}
}

@media all and (max-width:1023px){
	#mainContents{min-width:100%;}
}

@media all and (max-width:768px){
}

@media all and (max-width:480px){
#mainVisual{position:relative; width:100%; margin:0 auto; ; overflow:hidden;padding:50px 10px}
.swiper-pagination-bullet{display:inline-block; width:10px; height:5px; margin:0 3px; background:#DDD; border-radius:0; opacity:1; vertical-align:top; transition:.2s;}
.swiper-pagination-bullet:focus, .swiper-pagination-bullet:hover{background:#eee;}
.swiper-pagination-bullet-active{position:relative; width:10px; height:5px; margin:0 3px; background:#555;}
}

@media all and (max-width:319px){
	#mainContents{min-width:280px;}

}

/* ie hack */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) and (max-width:768px){
}