/* ========== mainslide ========== */

/* 슬라이드 이미지 */
.mainslide .swiper-slide .slide01{background: url(/img/main/mainslide01.jpg)no-repeat center / cover;}

.mainslide .swiper-slide{overflow: hidden;}
.mainslide .swiper-slide .slide-inner{position: relative; height: 100vh; overflow: hidden; display: flex;}
.mainslide .swiper-slide .slide-inner .titment{display: flex; flex-direction: column; align-items: center; justify-content: center;}


/* ========== mainconts01 ========== */

.mainconts01{}
.mainconts01 .menuvar{width: 1600px; /* height: 16vw; */ text-align: center; padding: 3rem; z-index: 99; position: absolute; bottom: -15%; left: 50%; transform: translateX(-50%); box-shadow: 20px 0 20px rgb(34 37 38 / 0.2);}
.mainconts01 .menuvar .var_inner{display: flex; justify-content: space-between; align-items: flex-start;}
.mainconts01 .menuvar .var_inner .box{width: 33.3%; padding: 1.5rem 3rem;}
.mainconts01 .menuvar .var_inner .box:after{content: ''; display: block; width: 1px; background: #fff; height: 16vw; max-height: 200px; margin-left: auto; position: absolute; right: 0; top: 0;}
.mainconts01 .menuvar .var_inner .box:last-child:after{display: none;}

.mainconts01 .menuvar .var_inner .box .tit{display: flex; align-items: center; justify-content: space-between;}
.mainconts01 .menuvar .var_inner .box .tit a:hover{font-weight: 500; text-decoration : underline; text-underline-offset : 5px;}
.mainconts01 .menuvar .var_inner .box .inner{width: 100%; justify-content: space-between; display: flex;}

/* 로그인 form */
.mainconts01 .menuvar .var_inner .box .form_group input{background: none; border: 1px solid #fff; padding: 0.5rem 0.65rem; width: 18rem; border-radius: 0; height: 45px;}
.mainconts01 .menuvar .var_inner .box .form_group input::placeholder{color: #fff; opacity: 0.5;}
.mainconts01 .menuvar .var_inner .box .form_group input[type=password]:focus, .mainconts01 .menuvar .var_inner .box .form_group input[type=text]:focus{
-webkit-box-shadow: 0 0 5px #fff; -moz-box-shadow: 0 0 5px #fff; box-shadow: 0 0 5px #fff; border: 1px solid #fff !important;}

.mainconts01 .menuvar .var_inner .box button{border: 1px solid #fff; border-radius: 0; width: 12rem; margin-left: 1rem;}
.mainconts01 .menuvar .var_inner .box button:hover{background: #fff; color: var(--pointcolor); font-weight: 600;} 

/* 로그아웃 */
.mainconts01 .menuvar .box .welcom{width: 100%; text-align: left;}
.mainconts01 .menuvar .box .welcom .hello{display: flex; justify-content: space-between; align-items: center;}
.mainconts01 .menuvar .box .welcom .inner .icon{width: 20%;}
.mainconts01 .menuvar .box .welcom .inner > span{width: 78%;}

/* 회원가입 안내 */
.mainconts01 .menuvar .var_inner .box .more > a{display: flex; align-items: center;}
.mainconts01 .menuvar .var_inner .box .icon{width: 20%;}
.mainconts01 .menuvar .var_inner .box .inner > span{width: 78%;}

/* 공지사항 */
.mainconts01 .menuvar .var_inner .box ul li{display: flex; justify-content: space-between; align-items: center;}
.mainconts01 .menuvar .var_inner .box ul li.m-auto{display: flex; justify-content: center; align-items: center;}
.mainconts01 .menuvar .var_inner .box .type{border: 1px solid #fff; padding: 0.15rem 0.25rem; margin-right: 0.5rem;}
.mainconts01 .menuvar .var_inner .box .list{width: 70%; text-align: left;}
.mainconts01 .menuvar .var_inner .box .day{width: 3rem; /* letter-spacing: 1px; */}

/* 반응형 */
@media (max-width: 1600px){
	.mainconts01 .menuvar{width: 90%; margin: auto;}
	.mainconts01 .menuvar .var_inner .box .form_group{width: 100%;}
	.mainconts01 .menuvar .var_inner .box .form_group input{width: 100%;}
}

@media (max-width: 1240px){
}

@media (max-width: 990px){
	.mainconts01 .menuvar{bottom: -30rem;}
	.mainconts01 .menuvar .var_inner{flex-wrap: wrap;}
	.mainconts01 .menuvar .var_inner .box{width: 100%; padding: 5rem 3rem;}
	.mainconts01 .menuvar .var_inner .box:after{width: 100%; height: 1px; max-height: 1px; top: auto; bottom: 0;}
	.mainconts01 .menuvar .var_inner .box .inner{margin-bottom: 0;}
	.mainconts01 .menuvar .var_inner .box .inner > span{width: 80%;}
}

@media (max-width: 500px){
	.mainconts01 .menuvar{padding: 1.5rem;}
	.mainconts01 .menuvar .var_inner .box{padding: 3rem 1.5rem 4rem;}
	.mainconts01 .menuvar .box .inner .icon > img{width: 60%;}
}


/* ========== mainconts02 ========== */

/* 아이콘 list */
.mainconts02{padding-top: 240px;}
.mainconts02 .icon_wrap{display: flex; flex-wrap: wrap; justify-content: space-between;}
.mainconts02 .icon_wrap .icon_item{width: 20%; display: flex; flex-direction: column; align-items: center;}
.mainconts02 .icon_wrap .icon_item .cricle{width: 6.5rem; height: 6.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.3s;}
.mainconts02 .icon_wrap .icon_item .cricle .r_more{display: none;}
.mainconts02 .icon_wrap .icon_item .cricle:hover{background: #fff; border: 1px solid var(--pointcolor);}
.mainconts02 .icon_wrap .icon_item .cricle:hover .icon{display: none;}
.mainconts02 .icon_wrap .icon_item .cricle:hover .r_more{display: block;}

.rotate-center {
	-webkit-animation: rotate-center 0.6s ease-in-out both;
	        animation: rotate-center 0.6s ease-in-out both;
}
/*
 * ----------------------------------------
 * animation rotate-center
 * ----------------------------------------
 */
@-webkit-keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}



@media (max-width: 1240px){
}

@media (max-width: 1024px){
	.mainconts02 .icon_wrap .icon_item .cricle{width: 8rem; height: 8rem;}
}

@media (max-width: 990px){
	.mainconts02{padding-top: 32rem;}
}


@media (max-width: 768px){
	.mainconts02 .icon_wrap .icon_item{width: 50%; margin-bottom: 3rem;}
	.mainconts02 .icon_wrap .icon_item .cricle .icon{width: 50%;}
}

@media (max-width: 500px){
}



/* ========== mainconts03 ========== */
.mainconts03{}
.mainconts03 .c_wrap{z-index: 0;}
.mainconts03 .c_wrap > img{position: absolute; right:0; bottom: -25px; z-index: -1;}


/* ========== mainconts04 ========== */
.mainconts04{width: 100%;}
.mainconts04 .rolling_wrap:before, .mainconts04 .rolling_wrap:after{content: ""; display: block; position: absolute; top: 0; width: 16rem; height: 100%; z-index: 2;}
.mainconts04 .rolling_wrap:before{left: 0; background: linear-gradient(to right, rgba(255, 255, 255, 100%), rgba(255, 255, 255, 82%), rgba(255, 255, 255, 0));}
.mainconts04 .rolling_wrap:after{right: 0; background: linear-gradient(to left, rgba(255, 255, 255, 100%), rgba(255, 255, 255, 82%), rgba(255, 255, 255, 0));}
.mainconts04 .rolling_wrap{overflow:hidden; position:relative; width: 100%; /* 테스트를 위한 임시 값*/ height: auto;}

.mainconts04 .rollimgs {width: 100%; /* 보여야 하는 이미지 + 클론이미지 전체 합 */ height: 100%; display: flex; flex-wrap: nowrap; animation: bannermove 5s linear infinite;}   
.mainconts04 .rollimgs > li {flex:0 0 auto; height: auto; vertical-align: top; text-align: center; margin-right: 5%;}
.mainconts04 .rollimgs .clone {opacity:.4;}

/* 롤링배너 */
.simply-scroll-container { 
	position: relative;
}

.simply-scroll-clip { 
	position: relative;
	overflow: hidden;
}

.simply-scroll-list { 
	overflow: hidden;
	margin: 0;
	padding: 0;
	list-style: none;
}
	
.simply-scroll-list li {
	padding: 0;
	margin: 0;
	list-style: none;
}
	
.simply-scroll-list li img {
	border: none;
	display: block;
}

@media (max-width: 990px){
	.mainconts04 .rolling_wrap:before, .mainconts04 .rolling_wrap:after{width: 5rem;}
	.mainconts04 .rollimgs > li{flex: 0 0 15%; margin-right: 5%;}
	.mainconts04 .rollimgs img{width: 100%;}
}


/* TEST */
.MarQueeSwiper .swiper-wrapper{transition-timing-function:linear ; }
.MarQueeSwiper:before, .MarQueeSwiper:after{content: ""; display: block; position: absolute; top: 0; width: 16rem; height: 100%; z-index: 2;}
.MarQueeSwiper:before{left: 0; background: linear-gradient(to right, rgba(255, 255, 255, 100%), rgba(255, 255, 255, 82%), rgba(255, 255, 255, 0));}
.MarQueeSwiper:after{right: 0; background: linear-gradient(to left, rgba(255, 255, 255, 100%), rgba(255, 255, 255, 82%), rgba(255, 255, 255, 0));}

@media (max-width: 990px){
	.MarQueeSwiper:before, .MarQueeSwiper:after{width: 6rem;}
}


/* .MarQueeSwiper .swiper-slide{width:20%}

@media (max-width: 990px){
	.MarQueeSwiper:before, .MarQueeSwiper:after{width: 5rem;}
	.MarQueeSwiper .swiper-slide{width:33.3%}
}

@media (max-width: 768px){
	.MarQueeSwiper .swiper-slide{width: 20%; margin-right: 5%;}
} */