/*******************************************************************************************************
메인 swiper 롤링
*******************************************************************************************************/
.mrolltextZone01,
.mrolltextZone02,
.mrolltextZone03,
.mrolltextZone04,
.mrolltextZone05,
.mrolltextZone06,
.mrolltextZone07,
.mrolltextZone08,
.mrolltextZone09 {position:relative;left:0px;top:0px;width:100%;height:100%;z-index:4;}

.mrolltextBox01 {position:absolute;left:5%;bottom:10%;/*transform: translate(-50%, -50%);*/}
.mrolltextBox02 {position:absolute;left:50%;top:50%;transform: translate(-50%, -50%);}
.mrolltextBox03 {position:absolute;left:50%;top:50%;transform: translate(-50%, -50%);}
.mrolltextBox04 {position:absolute;left:50%;top:50%;transform: translate(-50%, -50%);}

.mrolltextBox01 .slogan01 {text-align:left;}
.mrolltextBox01 .slogan02 {text-align:left;}
.mrolltextBox01 .slogan03 {text-align:left;}
.mrolltextBox01 .slogan04 {text-align:left;}
.mrolltextBox01 .slogan04 a {border:1px solid #fff;padding:0.5em 1.5em;color:#fff;border-radius:25px;}
.mrolltextBox01 .slogan04 a:hover {border:1px solid #fff;color:rgba(191,30,46,1);background:#fff;}

.mrolltextBox02 .slogan01 {text-align:center;}
.mrolltextBox02 .slogan02 {text-align:center;}
.mrolltextBox02 .slogan03 {text-align:center;word-break: keep-all;word-wrap: break-word;}
.mrolltextBox02 .slogan04 {text-align:center;}
.mrolltextBox02 .slogan04 a {border:1px solid #fff;padding:0.5em 1.5em;color:#fff;border-radius:25px;}
.mrolltextBox02 .slogan04 a:hover {border:1px solid #fff;color:rgba(191,30,46,1);background:#fff;}

.mrolltextBox03 .slogan01 {text-align:center;}
.mrolltextBox03 .slogan02 {text-align:center;}
.mrolltextBox03 .slogan03 {text-align:center;}
.mrolltextBox03 .slogan04 {text-align:center;}
.mrolltextBox03 .slogan04 a {border:1px solid #fff;padding:0.5em 1.5em;color:#fff;border-radius:25px;}
.mrolltextBox03 .slogan04 a:hover {border:1px solid #fff;color:rgba(191,30,46,1);background:#fff;}

.mrolltextBox04 .slogan01 {text-align:center;}
.mrolltextBox04 .slogan02 {text-align:center;}
.mrolltextBox04 .slogan03 {text-align:center;}
.mrolltextBox04 .slogan04 {text-align:center;}
.mrolltextBox04 .slogan04 a {border:1px solid #fff;padding:0.5em 1.5em;color:#fff;border-radius:25px;}
.mrolltextBox04 .slogan04 a:hover {border:1px solid #fff;color:rgba(191,30,46,1);background:#fff;}

.slogan01,
.slogan02,
.slogan03,
.slogan04 {position:relative;opacity:0;word-break: keep-all;word-wrap: break-word;}

.slogan01 {font-size:1.4rem;font-weight:400;color:#fff;letter-spacing: -0.025em;line-height:1.2em;margin:0px 0px .5rem 0px;}
.slogan02 {font-size:10rem;font-weight:800;color:#fff;letter-spacing: -0.025em;line-height:1em;margin:0px 0px 0 0px;font-family: "Play", sans-serif;}
.slogan03 {font-size:.9rem;font-weight:400;color:#fff;letter-spacing: -0.025em;line-height:1.5em;/*margin-bottom:30px;*/}
.slogan04 {font-size:.9rem;font-weight:400;color:#fff;}

.slogan03 a {display:inline-block;border:1px solid #fff;padding:.5rem 1rem;color:#fff;font-weight:600;}
.slogan03 a:hover {background-color:#fff;color:var(--main-color1);}

.slogan01 span,
.slogan02 span,
.slogan03 span,
.slogan04 span {display:block;}

.slogan01 strong,
.slogan02 strong,
.slogan03 strong,
.slogan04 strong {color:var(--toplink-info-color);}

.slogan01 em,
.slogan02 em,
.slogan03 em,
.slogan04 em {font-style:normal;}

/* 텍스트 애니메이션 */
.swiper-wrapper .swiper-slide.swiper-slide-active .slogan01 {animation: mainovject 1s 0.2s both;animation-delay:1.2s;}
.swiper-wrapper .swiper-slide.swiper-slide-active .slogan02 {animation: mainovject 1s 0.5s both;animation-delay:1.5s;}
.swiper-wrapper .swiper-slide.swiper-slide-active .slogan03 {animation: mainovject 1s 0.8s both;animation-delay:1.8s;}
.swiper-wrapper .swiper-slide.swiper-slide-active .slogan04 {animation: mainovject 1s 1.1s both;animation-delay:2.1s;}
/*
.swiper-wrapper .swiper-slide.swiper-slide-active .slogan02 {animation: mainovject 1s 0.5s both;animation-delay:1.5s;}
.swiper-wrapper .swiper-slide.swiper-slide-active .slogan04 {animation: mainovject 1s 1.1s both;animation-delay:1.8s;}
*/
.slick-track .slick-current.slick-active .slogan01 {animation: mainovject 1s 0.2s both;animation-delay:1.2s;}
.slick-track .slick-current.slick-active .slogan02 {animation: mainovject 1s 0.5s both;animation-delay:1.5s;}
.slick-track .slick-current.slick-active .slogan03 {animation: mainovject 1s 0.8s both;animation-delay:1.8s;}
.slick-track .slick-current.slick-active .slogan04 {animation: mainovject 1s 1.1s both;animation-delay:2.1s;}

.swiper-wrapper .swiper-slide .slogan01 {animation: mainovject 1s 0.2s both;animation-delay:1.2s;}
.swiper-wrapper .swiper-slide .slogan02 {animation: mainovject 1s 0.5s both;animation-delay:1.5s;}
.swiper-wrapper .swiper-slide .slogan03 {animation: mainovject 1s 0.8s both;animation-delay:1.8s;}
.swiper-wrapper .swiper-slide .slogan04 {animation: mainovject 1s 1.1s both;animation-delay:2.1s;}

@keyframes mainovject {
	0% { opacity: 0; transform: translateY(40px);}
	100% { opacity: 1; transform: translateY(0px);}
}

@media (max-width:1280px) {
	.slogan01,
	.slogan02,
	.slogan03,
	.slogan04 {text-align:left !important;}

	.slogan01 {font-size:2vw;}
	.slogan02 {font-size:12vw;}
	.slogan03 {font-size:1.5vw;}
	.slogan04 {font-size:2vw;}
}
@media (max-width:840px) {
	.slogan01 {font-size:2vw;}
	.slogan02 {font-size:10vw;}
	.slogan03 {font-size:2vw;}
	.slogan04 {font-size:2vw;}
}
@media (max-width:600px) {
	.slogan01 {font-size:3vw;}
	.slogan02 {font-size:17vw;}
	.slogan03 {font-size:2.5vw;padding:0px 2rem;}
	.slogan03 span {display:inline;}
	.slogan04 {font-size:2vw;}
}

/* 백그라운드 이미지 */
.swiper-container #swiper01, 
.swiper-container #swiper02,
.swiper-container #swiper03,
.swiper-container #swiper04,
.swiper-container #swiper05,
.swiper-container #swiper06,
.swiper-container #swiper07,
.swiper-container #swiper08,
.swiper-container #swiper09,
.swiper-container #swiper10 {height:100%;}
/*
.swiper-container #swiper01 {background-image: url(../../../images/main_roll/bg0_1.jpg);}
.swiper-container #swiper02 {background-image: url(../../../images/main_roll/bg0_2.jpg);}
.swiper-container #swiper03 {background-image: url(../../../images/main_roll/bg0_3.jpg);}
.swiper-container #swiper04 {background-image: url(../../../images/main_roll/bg0_4.jpg);}
.swiper-container #swiper05 {background-image: url(../../../images/main_roll/bg0_5.jpg);}
.swiper-container #swiper06 {background-image: url(../../../images/main_roll/bg0_6.jpg);}
.swiper-container #swiper07 {background-image: url(../../../images/main_roll/bg0_7.jpg);}
.swiper-container #swiper08 {background-image: url(../../../images/main_roll/bg0_8.jpg);}
.swiper-container #swiper09 {background-image: url(../../../images/main_roll/bg0_9.jpg);}
*/
#swiper01 .bB_B {background:rgba(0,0,0,0.5)}

.swiper-button-next {right:30px;}
.swiper-button-prev {left:30px;}
.swiper-button-next.swiper-button-white {margin-top:-15px;width:19px;height:35px;color:#fff;background:url(../../../images/nav_right_w.png) no-repeat center;}
.swiper-button-prev.swiper-button-white {margin-top:-15px;width:19px;height:35px;color:#fff;background:url(../../../images/nav_left_w.png) no-repeat center;}
/* swiper 수정 --------------------------------------------------------------------------------------------*/
.swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after,
.swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after {display:none;}

.swiper-container {width: 100%;height: 100vh;margin-left: auto;margin-right: auto;}
@media (max-width:600px) {
	.swiper-container {height: 85vh;}
}
@media (max-width:500px) {
	.swiper-container {height: 76vh;}
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    /* 슬라이드 텍스트를 세로로 가운데 정렬 */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
/* swiper 추가 --------------------------------------------------------------------------------------------*/
.swiper-slide {  overflow:hidden;  background-size: cover;  background-position: center;}
.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {position:relative;margin:0.5em 0;}
.swiper-container-vertical>.swiper-pagination-bullets {top:80%;right:35px;}
.swiper-pagination-bullet .show_hide {
display:none;
transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-webkit-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
}
.swiper-pagination-bullet-active .show_hide {display:inline-block;position:absolute;width:auto;right:15px;top:-4px;font-size:0.65em;line-height:1em;white-space: nowrap;
transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-webkit-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
}

#main_roll .swiper-pagination {/* margin-left:3em; */}
#main_roll .swiper-pagination-clickable .swiper-pagination-bullet {background:#fbb040;border-radius:10px;
	transition: all 0.5s ease 0s;
	-moz-transition: all 0.5s ease 0s;
	-webkit-transition: all 0.5s ease 0s;
	-o-transition: all 0.5s ease 0s;
}
#main_roll .swiper-pagination-bullet {}

#main_roll .swiper-pagination {
	position: absolute;
	bottom: 4em !important;
	width: 1200px !important;
	left: 50% !important;
	margin: 0;
	transform:translate(-50%);
}

#main_roll .swiper-pagination-bullet-active {color:#333;width:60px;border-radius:10px;
	transition: all 0.5s ease 0s;
	-moz-transition: all 0.5s ease 0s;
	-webkit-transition: all 0.5s ease 0s;
	-o-transition: all 0.5s ease 0s;
}



/* ---------------------------------------------- /*
 * Mouse animate icon
/* ---------------------------------------------- */
.mouse-icon {position: absolute;left: 50%;bottom: 30px;border: 2px solid #fff;border-radius: 16px;height: 50px;width: 30px;margin-left: -15px;display: block;z-index: 10;}
.mouse-icon .wheel {-webkit-animation-name: drop;-webkit-animation-duration: 1s;-webkit-animation-timing-function: linear;-webkit-animation-delay: 0s;-webkit-animation-iteration-count: infinite;-webkit-animation-play-state: running;animation-name: drop;animation-duration: 1s;animation-timing-function: linear;animation-delay: 0s;animation-iteration-count: infinite;animation-play-state: running;}
.mouse-icon .wheel {position: relative;border-radius: 10px;background: #fff;width: 4px;height: 10px;top: 4px;margin-left: auto;margin-right: auto;}
@-webkit-keyframes drop {0%   { top:5px;  opacity: 0;}30%  { top:10px; opacity: 1;}100% { top:25px; opacity: 0;}}
@keyframes drop	{0%   { top:5px;  opacity: 0;}30%  { top:10px; opacity: 1;}100% { top:25px; opacity: 0;}}
/* ---------------------------------------------- /*
 * 영상 풀화면(전체영상)
/* ---------------------------------------------- */
video.slider-video {position: fixed; left:50%; top:50%;
	 -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    min-width: 100%; min-height: 100%;
    width: auto; height: auto; z-index: -100;
    background-size: cover;
}
/*--------------------------------------------------------------------------------------------
roll_notice
--------------------------------------------------------------------------------------------*/
/* 여백 */
.margin_right_10px {margin-right:10px;}
/* 기본설정 */
.wrapper.roll_notice {
	position:absolute;
	bottom:0px;
	display:block;
	width:100%;
	/*background:url(../../images/main_normal/m_bg04.jpg) fixed center;*/
	background-color:rgba(0,0,0,0.4);
	background-size:cover;
	padding:1em 0;
	z-index:10;
}

.roll_notice .container h2 {margin:0 0 1.5em 0;text-align:center;font-weight:500;color:#fff;}
.roll_notice .container h4 {display:inline-block;float:left;margin:0;width:14%;height:35px;line-height:35px;color:#f8b412;}
.roll_notice .container h4 a {color:#f8b412;font-size:28px;}
.roll_notice .container h4 a:hover {color:#ffcc00;}
.roll_notice .container .lazy {display:inline-block;float:left;width:85%;}

.roll_notice .slick-vertical .slick-slide p {color:#fff;}
.roll_notice .slick-vertical .slick-slide {opacity:1;}

.slick-slide a {padding-right:80px;}

a.video_full {display:block;position:absolute;top:0px;left:0px;width:100%;height:100%;z-index:3;}

/*--------------------------------------------------------------------------------------------
기타설정
--------------------------------------------------------------------------------------------*/
.colors_width {color:#fff;}
.colors_block {color:#000;}
.colors_red {color:#ff0000;}
.colors_blue {color:#0000ff;}
@media (max-width:840px) {
	.mouse-icon,
	#main_roll .swiper-pagination {display:none;}

	.roll_notice .container h4 {line-height:26px;}
	.roll_notice .container h4 a {font-size:18px;}
	.slick-slide a {font-size:16px;padding-left:30px;}
	.new_icon {top:5px;width:18px;height:18px;line-height:18px;font-size:12px;}
	

}
@media (max-width:620px) {
	.roll_notice .container h4 {width:20%;}
	.roll_notice .container .lazy {width:80%;}
}
@media (max-width:551px) {
}
@media (max-width:400px) {
	.roll_notice .container h4 {font-size:13px;}
	.roll_notice .container h4 a {font-size:14px;}
	.slick-slide a {display:inline-block;width:100%;font-size:14px;padding-left:25px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;overflow:hidden;}
}
@media (max-width:280px) {
	.roll_notice .container h4 a {font-size:0.75em;}
	.slick-slide a {font-size:12px;}
}
/******************************************************************************************************* 
유튜브 백그라운드
********************************************************************************************************/
.video-background {
  background: #000;
  position: fixed;
  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;
}
#vidtop-content {
    top: 0;
    color: #fff;
}
.vid-info { position: absolute; top: 0; right: 0; width: 33%; background: rgba(0,0,0,0.3); color: #fff; padding: 1rem; font-family: Avenir, Helvetica, sans-serif; }
.vid-info h1 { font-size: 2rem; font-weight: 700; margin-top: 0; line-height: 1.2; }
.vid-info a { display: block; color: #fff; text-decoration: none; background: rgba(0,0,0,0.5); transition: .6s background; border-bottom: none; margin: 1rem auto; text-align: center; }
@media (min-aspect-ratio: 16/9) {
  #player { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
  #player { width: 300%; left: -100%; }
}
@media (aspect-ratio: 16/9) {
  #player { width:100%;height: 301%; top: -100%;left:0; }
}
@media all and (max-width: 600px) {
.vid-info { width: 50%; padding: .5rem; }
.vid-info h1 { margin-bottom: .2rem; }
}
@media all and (max-width: 500px) {
.vid-info .acronym { display: none; }
}
/******************************************************************************************************* 
유튜브 백그라운드 ai
********************************************************************************************************/
/* 기본 설정: 모든 경우에 플레이어를 뷰포트 중앙에 고정 */
#player {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 중앙 정렬 */
    z-index: -99;
    overflow: hidden; /* 영상이 뷰포트를 벗어나는 부분을 숨김 */
}

/* YT Player 내부 iframe 스타일 (API에서 이미 100%로 설정되지만 안전을 위해) */
#player > iframe {
    width: 100%;
    height: 100vh;
}