/* main css */
/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
body {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.bx-wrapper {
	border:none;
	box-shadow:none;
	margin-bottom: 0;
}

.bx-wrapper img {
	display:inline-block;
}

.main_slider > li {
	position:relative;
	height: calc(var(--vh));
}

.section_01 {
	position: relative;
}

.section_01 .row {
	height: calc(var(--vh));
	min-height: 860px;
	overflow: hidden;
	padding: 0;
}

.swiper-container {
	position: relative;
	overflow:hidden;
	width: 72vw;
	min-width:820px;
}

.swiper-slide {
	position:relative;
	overflow:hidden;
	height: calc(var(--vh));
	min-height: 860px;
	width: 100%;
}

.swiper-slide .bg_wrap {
	position:absolute;
	width: 100%;
	height:100%;
	top: 0;
	left: 0;
	z-index: 2;
}

.swiper-slide .bg_wrap,
.swiper-slide .bg {
	position:absolute;
	width: 100%;
	height:100%;
	top: 0;
	left: 0;
	z-index: 3;
}

.swiper_main_slider .swiper-slide.swiper-slide-active .bg {
	animation: zoomOut 4.8s .2s ease both;
}

@keyframes zoomOut {
	from {
		transform:scale3d(1.08, 1.08, 1.08);
	}

	to {
		transform:scale3d(1, 1, 1);
	}
}

.swiper_main_slider .swiper-slide.first .bg {
	background-image:url('../img/main/main_slider01_bg.jpg?new');
	background-size:cover;
	background-position:center;
}

.swiper_main_slider .swiper-slide.second .bg {
	background-image:url('../img/main/main_slider02_bg.jpg?new');
	background-size:cover;
	background-position:center;
}

.swiper_main_slider .swiper-slide.third .bg {
	background-image:url('../img/main/main_slider03_bg.jpg?new');
	background-size:cover;
	background-position:center;
}

.swiper_main_slider .swiper-slide.forth .bg {
	background-image:url('../img/main/main_slider04_bg.jpg?new');
	background-size:cover;
	background-position:center;
}

.swiper_main_slider .swiper-slide p {
	position:absolute;
	top: 45%;
	left: calc(50% - 1vw);
	transform:translate(-50%, -50%);
	z-index: 10;
}

.swiper_main_slider .swiper-slide.swiper-slide-active p {
	animation: fadeUp 1.2s .5s ease both;
}

@keyframes fadeUp {
	from {
		opacity: 0;
		visibility:hidden;
		margin-top: 40px;
	}

	to {
		opacity: 1;
		visibility:visible;
		margin-top: 0;
	}
}

.section_01 .swiper-btn-prev {
	position:absolute;
	display:block;
	left: 80px;
	width: 62px;
	height: 62px;
	background-image:url('../img/main/main_slider_arrow.png?new') !important;
	background-position: 0 center !important;
	background-size: auto !important;
}

.section_01 .swiper-btn-next {
	position:absolute;
	display:block;
	right: calc(30vw + 80px);
	width: 62px;
	height: 62px;
	background-image:url('../img/main/main_slider_arrow.png?new') !important;
	background-position: 100% center !important;
	background-size: auto !important;
}

.section_01 .swiper-btn-prev::after,
.section_01 .swiper-btn-next::after {
	content: none;
}

.left_area .swiper-pagination {
	top: 60%;
	width: 70vw !important;
	min-width:820px;
}
	
.left_area .swiper-pagination-bullet {
	background-color: #fff;
}

.left_area .swiper-pagination-bullet span{
	display: none;
}

.circle_icon {
	position:absolute;
	top: 12vw;
	right: calc(30vw - 84px);
	width: 168px;
	height: 168px;
	line-height:168px;
	text-align:center;
	transition:all 400ms;
	z-index: 99999;
}

.circle_icon.fixed {
	position:fixed;
}

.circle_icon .bg {
	position:absolute;
	width: 100%;
	height: 100%;
	background-image:url('../img/main/main_circle_text.png?new');
	animation: CircleRotate 7s linear infinite;
	left: 0;
	top: 0;
}

.circle_icon img {
	transition:all 400ms;
}

.circle_icon.bt img {
	transform:rotate(-180deg);
}

@keyframes CircleRotate {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.section_01 .right_area {
	display: flex;
	flex-direction: column;
	justify-content: center;
	position:absolute;
	background-image: url('../img/main/main_right_bg.png?new');
	background-position: 0 100%;
	background-size: cover;
	top: 0;
	right:0;
	width: 30vw;
	min-width: 500px;
	height: calc(var(--vh));
	min-height: 860px;
	text-align: center;
	z-index: 999;
}

.section_01 .right_area {
	!animation: fadeLeft 1s .1s ease-in-out both;
}

@keyframes fadeLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.section_01 .right_top {
	margin-bottom: 70px;
	position:absolute;
	left: 50%;
	top: 40%;
	width: 310px;
	transform:translate(-50%, -50%);
	animation: fadeDown 1.5s ease-in-out both;
}

@keyframes fadeDown {
  0% {
		clip:rect(0,310px,0,0);
	}

	100% {
		clip:rect(0,310px,360px,0);
	}
}

/* == */
.right_bt {
	position:absolute;
	bottom: 130px;
	left: 50%;
	transform:translateX(-50%);
	width: 260px;
	height: 300px;
}

.right_bt .swiper-container {
	min-width:auto;
	width: 260px;
	height: 300px;
	overflow:hidden;
	border-bottom-left-radius: 30px;
}

.right_bt .swiper-slide {
	width: 260px;
	height: 300px;
	min-height:auto;
	border-bottom-left-radius: 30px;
}

.right_bt .swiper-pagination {
	position:absolute;
	left: auto;
	right: -20px;
	top: 0;
	bottom: auto;
	width: 10px;
	height: auto;
}

.right_bt .swiper-pagination-bullet	{
	margin: 3px 0 !important;
	width: 14px;
	height: 14px;
	background-color: #fff;
}

.right_bt .text {
	position:absolute;
	right: -25px;
	bottom: 0;
}
 
@media(max-width:1660px) {

	.swiper-container {
		width:calc(100% - 450px);
	}

	.section_01 .swiper-btn-next {
		right: calc(500px + 80px);
	}

	.circle_icon {
		right: calc(500px - 84px);
	}
}


/* Layer Popup */
.layer_Popup { position: absolute; border: 1px solid #313565; z-index: 999999}
.layer_Popup .layerBox a { display: block}
.modal-today { display: flex; align-items: center; padding: 10px 20px; background: #fff}
.modal-today .checkboxSet { display: flex; align-items: center}
.modal-today .checkboxSet input[type=checkbox] { margin-top: 2px}
.modal-today .checkboxSet label { display: block; font-size: 14px; color: #666; margin-left: 5px; cursor: pointer}
.modal-today .modalClose { font-size: 14px; color: #666; margin-left: auto}

@media (max-width: 1200px) {
/* Layer Popup */
.layer_Popup { position: absolute; left: 50% !important; top: 100px !important; width:90%;  transform: translateX(-50%); border: 1px solid #313565; z-index: 999999}
.layer_Popup .layerBox a { display: block}
.layer_Popup .layerBox img { width: 100%}
.modal-today .checkboxSet { display: flex; align-items: center}
.modal-today .checkboxSet input[type=checkbox] { margin-top: 2px}
.modal-today .checkboxSet label { display: block; font-size: 14px; color: #666; margin-left: 5px; cursor: pointer}
.modal-today .modalClose { font-size: 14px; color: #666; margin-left: auto}
}