:root {
    --swiper-theme-color: #0F8468 !important;
}
.swiper-pagination-lock{
	display:block;
}
.autoplay-progress{
	display: flex;
	align-items: center;
	width: 285px;
	height: 100%;
	position: relative;
}
.autoplay-progress svg{
	--progress: 0;
	position: absolute;
	left: 0;
	top: 50%;
	z-index: 10;
	width: 100%;
	stroke-width: 4px;
	stroke: #fff;
	fill: none;
	stroke-dashoffset: calc(285 * (1 - var(--progress)));
	stroke-dasharray: 285;
	transform: translateY(-50%);
}
.autoplay-progress svg line{
	/* stroke-dasharray: 285;
	stroke-dashoffset: calc(var(--progress) * 285); */
}
.section01 {
	width: 100%;
	/* padding-left: 30px;
	padding-right: 30px; */
}
.section01 .main_slide_wrap {
	/* max-width: 1640px; */
	margin: 0 auto;
}
.section01 .main_slide_wrap .main_slider {
	height: 650px;
	/* border-radius: 20px; */
	position: relative;
}
.section01 .main_slide_wrap .main_slider .swiper-slide::before{
	content: "";
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 28%;
	background: transparent linear-gradient(180deg, #00000000 0%, #000000F2 100%) 0% 0% no-repeat padding-box;
}
.section01 .main_slide_wrap .main_slider .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.section01 .main_slide_wrap .main_slider .swiper-slide video{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.section01 .main_slide_wrap a {
	display: inline-block;
	width: 100%;
	height: 100%;
}
.section01 .main_slide_wrap .main_slider {
	position: relative;
	overflow: hidden;
}
.section01 .main_slide_wrap .main_slider .imgbox {
	/* position: relative;
	height: 700px;
	overflow: hidden; */
}
.section01 .main_slide_wrap .main_slider .imgbox::after {
	/* content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: #000;
	opacity: 0.06; */
}
.section01 .main_slide_wrap .main_slider .imgbox .img {
	/* position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover; */
}
.section01 .main_slide_wrap .main_slider .imgbox .img.img_pc {
	/* display: block; */
}
.section01 .main_slide_wrap .main_slider .imgbox .img.img_m {
	/* display: none; */
}
.section01 .main_slide_wrap .main_slider .txtbox {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 50%;
	margin-left: -100px;
	padding: 230px 0 0 210px;
	background: url(../images/user/main/bg_visual_txtbox.png) no-repeat 0 0;
}
.section01 .main_slide_wrap .main_slider .txtbox .tit {
	color: #fff;
	font-size: 60px;
	line-height: 1.15;
	font-weight: 700;
	/* letter-spacing: -1.5px; */
}
.section01 .main_slide_wrap .main_slider .txtbox .tit em {
	color: #FCFE62;
	font-weight: 700;
}
.section01 .main_slide_wrap .main_slider .txtbox .txt {
	margin-top: 16px;
	color: #fff;
	font-size: 26px;
	line-height: 30px;
	font-weight: 500;
}
.section01 .main_slide_wrap .main_slider .wrap{
	display: inline-flex;
	align-items: center;
	position: absolute;
	/* left: calc((1640px - 1280px) / 2); */
	left: 5%;
	bottom: 6%;
	z-index: 3;
}
.section01 .main_slide_wrap .main_slider .wrap02{
	display: inline-flex;
	justify-content: flex-end;
	position: absolute;
	right: 5%;
    bottom: 6%;
    z-index: 3;
    width: 49%;
	text-align: right;
}
.section01 .main_slide_wrap .main_slider .wrap02 p{
	/* letter-spacing: -0.8px; */
	color: #FFFFFF;
	font-size: 16px;
	font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
	width: 100%;
}
.section01 .main_slide_wrap .main_slider .wrap .pagination_progress_wrap{
	margin-right: 15px;
	/* letter-spacing: 1.3px; */
	font-size: 16px;
	color: #FFFFFF;
	display: flex;
	gap: 4px;
	min-width: 40px;
}
.section01 .main_slide_wrap .main_slider .wrap .pagination_progress_wrap .current{
	opacity: 1;
}
.section01 .main_slide_wrap .main_slider .wrap .pagination_progress_wrap .total{
	opacity: 0.3;
}
.section01 .main_slide_wrap .main_slider .wrap .pagination_progress_wrap .slash{
	opacity: 0.3;
}
.section01 .main_slide_wrap .main_slider .button_wrap{
	height: 20px;
	margin-left: 15px;
}
.section01 .main_slide_wrap .main_slider .button_wrap .btn_stop_play {
	width: 15px;
	height: 100%;
	text-indent: -999px;
	overflow: hidden;
	background: url(/images/user/main/stop_btn.svg) center center no-repeat;
    background-size: 9px;
}
.section01 .main_slide_wrap .main_slider .button_wrap .btn_stop_play.stop {
	height: 20px;
	background-image: url(/images/user/main/start_btn.svg);
	background-size: contain;
}
.section01 .main_slide_wrap .main_slider .swiper-button-prev {
	order: 1;
	position: absolute;
	top: 50%;
	left: 40px;
	background-color: transparent;
	color: #FBF9F6;
	/* transform: translateY(-25%);
	background-size: contain;
	text-indent: -999px;
	overflow: hidden;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: url(/images/user/main/main_slider_arrow.svg) center center no-repeat;
	background-color: #FBF9F6; */
}
.section01 .main_slide_wrap .main_slider .swiper-button-next {
	order: 3;
	position: absolute;
	top: 50%;
	right: 40px;
	background-color: transparent;
	color: #FBF9F6;
	/* transform: translateY(-25%) rotate(180deg);
	background-size: contain;
	text-indent: -999px;
	overflow: hidden;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: url(/images/user/main/main_slider_arrow.svg) center center no-repeat;
	background-color: #FBF9F6; */
}
/* .section01:hover .main_slide_wrap .main_slider .swiper-button-prev{
	opacity: 1;
}
.section01:hover .main_slide_wrap .main_slider .swiper-button-next{
	opacity: 1;
}
.section01 .main_slide_wrap .main_slider .swiper-button-prev:focus{
	opacity: 1;
}
.section01 .main_slide_wrap .main_slider .swiper-button-next:focus{
	opacity: 1;
} */
.section01 .main_slide_wrap .main_slider .swiper-pagination {
	display: flex;
	align-items: center;
	position: static;
	width: 230px;
	height: 2px;
	color: #fff;
	font-size: 20px;
	line-height: 23px;
	font-weight: 500;
	text-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
	background-color: #ffffff15;
}
.section01 .main_slide_wrap .main_slider .swiper-pagination .swiper-pagination-progressbar-fill{
	background-color: #fff;
}
.section01 .main_slide_wrap .main_slider .swiper-pagination .current {
	font-weight: 700;
}
.section01 .main_slide_wrap .main_slider .swiper-pagination .slash {
	margin: 0 6px;
}
.social_wrap {
	position: absolute;
	top: 30px;
	right: 30px;
	z-index: 2;
}


/* section02 */
.section02{
	width: 100%;
	background: transparent linear-gradient(0deg, #FFFFFF 0%, #F4F9F1 50%) 0% 0% no-repeat padding-box;
	padding-top: 100px;
	padding-bottom: 20px;
}
.inner_layout .top_wrap{
	display: flex;
    justify-content: space-between;
}
.inner_layout .top_wrap h2{
	/* letter-spacing: -0.03em; */
	color: #000000;
	font-size: 40px;
	font-weight: 700;
}
.inner_layout .top_wrap .button_wrap{
	display: flex;
	justify-content: space-between;
	gap: 10px;
}
.inner_layout .top_wrap .button_wrap .left{
	background-color: #FBF9F6;
	border: 1px solid #00000012;
	border-radius: 800px;
	height: 40px;
	display: flex;
	padding: 2px;
}
.inner_layout .top_wrap .button_wrap .left button{
	background-color: transparent;
	border-radius: 800px;
	/* letter-spacing: -0.8px; */
	/* color: #A29DA0; */
	color: #595454;
	font-size: 16px;
	padding: 7px 30px 8px 31px;
	flex: 1;
	white-space: nowrap;
}
.inner_layout .top_wrap .button_wrap .left button.active{
	border: 1px solid #0000001A;
	background-color: #0F8468;
	color: #FFFFFF;
}
.inner_layout .top_wrap .button_wrap .right{
	background-color: #FBF9F6;
	border: 1px solid #00000012;
	border-radius: 800px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.inner_layout .top_wrap .button_wrap .right a{
	width: 100%;
	height: 100%;
	background-color: transparent;
	display: flex;
    align-items: center;
    justify-content: center;
}
.inner_layout .top_wrap .button_wrap .right a img{
    transform: translate(0.5px,-0.5px);
    width: 15px;
    height: 15px;
}
.inner_layout .slide_style01{
	margin-top: 40px;
}
.inner_layout .slide_style01 .swiper-slide{
	width: 25%;
}
.inner_layout .slide_style01 .swiper-slide .box{
	width: 100%;
	position: relative;
}
.inner_layout .slide_style01 .swiper-slide .box > a{
	background-color: #fff;
	display: block;
	border-radius: 20px;
	overflow: hidden;
}
.inner_layout .slide_style01 .swiper-slide .box .top_area{
	width: 100%;
	aspect-ratio: 1/1;
	position: relative;
	border-radius: 20px;
	overflow: hidden;
}
.inner_layout .slide_style01 .swiper-slide .box .top_area::before{
	content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border: 1px solid #000;
    border-radius: 20px;
    opacity: .10;
	z-index: 1;
}
.inner_layout .slide_style01 .swiper-slide .box.video .top_area::before {
	content: "";
	position: absolute;
	background: url(/images/user/common/icon_circle_play_btn.png) center center no-repeat;
	background-size: cover;
	width: 55px;
	height: 55px;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 1;
}
.inner_layout .slide_style01 .swiper-slide .box .top_area::after{
	content: "";
	display: block;
	padding-bottom: 100%;
}
.inner_layout .slide_style01 .swiper-slide .box .top_area img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0px;
	left: 0px;
}
.inner_layout .slide_style01 .swiper-slide .box .bottom_area{
	padding: 32px 30px 40px;
}
.inner_layout .slide_style01 .swiper-slide .box .bottom_area .con{

}
.inner_layout .slide_style01 .swiper-slide .box .bottom_area .con.one{
	gap: 3px;
	display: flex;
}
.inner_layout .slide_style01 .swiper-slide .box .bottom_area .con.one .state{
	border: 1px solid #3f3c3c;
	border-radius: 800px;
	/* letter-spacing: -0.6px; */
	color: #FFFFFF;
	font-size: 14px;
	font-weight: 500;
	padding: 3px 10px 3px;
	/* background-color: #A29DA0; */
	background-color: #5c5757;
}
.inner_layout .slide_style01 .swiper-slide .box .bottom_area .con.one .classify{
	border: 1px solid #944B03;
	border-radius: 800px;
	/* letter-spacing: -0.6px; */
	font-size: 12px;
	font-weight: 500;
	padding: 2px 10px 3px;
	background-color: #ffffff;
	color: #944B03;
}
.inner_layout .slide_style01 .swiper-slide .box .bottom_area .con.two .title{
	margin-top: 10px;
	/* letter-spacing: -0.03em; */
	color: #000000;
	font-size: 22px;
	font-weight: 700;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.inner_layout .slide_style01 .swiper-slide .box .bottom_area .con.two p{
	/* letter-spacing: -0.03em; */
	color: #666666;
	margin-top: 5px;
}
.inner_layout .slide_style01 .swiper-slide .box .bottom_area .con.three {
	margin-top: 20px;
}
.inner_layout .slide_style01 .swiper-slide .box .bottom_area .con.three .date{
	position: relative;
	display: flex;
	align-items: center;
	/* letter-spacing: 0px; */
	color: #666666;
	font-size: 16px;
}
.inner_layout .slide_style01 .swiper-slide .box .bottom_area .con.three .date::before{
	content: url(/images/user/main/icon_clock.svg);
	position: relative;
	width: 16px;
	height: 16px;
	margin-right: 5px;
}
.inner_layout .slide_style01 .swiper-slide .box .bottom_area .con.three .people{
	position: relative;
	display: flex;
	align-items: center;
	/* letter-spacing: 0px; */
	color: #666666;
	font-size: 16px;
	margin-top: 8px;
	overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.inner_layout .slide_style01 .swiper-slide .box .bottom_area .con.three .people::before{
	content: url(/images/user/main/icon_people.svg);
	position: relative;
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 5px;
	transform: translateY(2px);
}
.inner_layout .slide_style01 .slide_state_wrap{
	display: flex;
	padding-top: 33px;
	height: auto;
}
.inner_layout .slide_style01 .slide_state_wrap .left{
	width: calc(100% - 142px);
	padding-right: 52px;
	display: flex;
	align-items: center;
}
.inner_layout .slide_style01 .slide_state_wrap .left .swiper-pagination{
	position: relative;
	top: auto;
	bottom: auto;
	left: auto;
	right: auto;
	background-color: #0000001A;
	width: 100%;
	height: 4px;
	/* border-radius: 250px; */
	overflow: hidden;
}
.inner_layout .slide_style01 .slide_state_wrap .left .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{
	border-radius: 250px;
}
.inner_layout .slide_style01 .slide_state_wrap .right{
	width: 142px;
	height: auto;
	display: flex;
	justify-content: space-between;
}
.inner_layout .slide_style01 .slide_state_wrap .right .swiper-button-prev{
	position: relative;
	top: auto;
	bottom: auto;
	left: auto;
	right: auto;
}
.inner_layout .slide_style01 .slide_state_wrap .right .swiper-button-next{
	position: relative;
	top: auto;
	bottom: auto;
	left: auto;
	right: auto;
	transform: rotate(180deg);
}
.inner_layout .slide_style01 .slide_state_wrap .right > button{
	margin: 0px;
	display: block;
	width: auto;
	height: auto;
	background-color: #5A5243;
	padding: 15px;
	background: url('/images/user/main/slide_arrow.svg') center center no-repeat;
}
.inner_layout .slide_style01 .slide_state_wrap .right > button:after{
	content: "";
	display: none;
}
.inner_layout .slide_style01 .slide_state_wrap .right .progress_num {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 4px;
	/* letter-spacing: 1.3px; */
	color: #000000;
	font-size: 16px;
	font-weight: 500;
}
/* section03 */
.section03{
	padding-top: 100px;
}
.section03 .inner_layout{}
.section03 .inner_layout .top_wrap{

}
.section03 .inner_layout .bottom_wrap {
	margin-top: 37px;
}
.section03 .inner_layout .bottom_wrap .banner_area{
	display: flex;
	gap: 0px 40px;
}
.section03 .inner_layout .bottom_wrap .banner_area > div{
	width: calc(50% - 20px);
}
.section03 .inner_layout .bottom_wrap .banner_area > .left{
	aspect-ratio: 1 / 0.645;
}
.section03 .inner_layout .bottom_wrap .banner_area > .left .box{
	width: 100%;
	height: 100%;
	border-radius: 20px;
	padding: 60px 60px;
	display: inline-block;
	background:#f7f2ef url(/images/user/main/main_exhibition_bg01.svg) center center no-repeat;
	background-size: cover;
}
.section03 .inner_layout .bottom_wrap .banner_area > .left .box .big{
	letter-spacing: -2.52px;
	color: #FFF;	
	font-size: 36px;
	font-weight: 700;
}
.section03 .inner_layout .bottom_wrap .banner_area > .left .box .small{
	color: #F2E0C2;
	font-size: 16px;
	font-weight: 500;
	margin-top: 17px;
	line-height: 1.3;
}
.section03 .inner_layout .bottom_wrap .banner_area > .left .box .move_btn{
	margin-top: 30px;
	width: 45px;
	height: 45px;
	display: inline-block;
	background: url(/images/user/main/main_exhibition_arrow01.svg) center center no-repeat;
	background-size: contain;
	transition: 0.3s;
	transform: scale(1);
}
.section03 .inner_layout .bottom_wrap .banner_area > .left .box:hover .move_btn{
	/* transform: scale(1.2); */
}
.section03 .inner_layout .bottom_wrap .banner_area > .right{
	aspect-ratio: 1 / 0.645;
}
.section03 .inner_layout .bottom_wrap .banner_area > .right .box{
	width: 100%;
	height: 100%;
	border-radius: 20px;
	padding: 60px 60px;
	display: inline-block;
	background:#f7f2ef url(/images/user/main/main_exhibition_bg02.svg) center center no-repeat;
	background-size: cover;
}

.section03 .inner_layout .bottom_wrap .banner_area > .right .box .big{
	letter-spacing: -2.52px;
	color: #000000;	
	font-size: 36px;
	font-weight: 700;
}
.section03 .inner_layout .bottom_wrap .banner_area > .right .box .small{
	color: #666666;
	font-size: 16px;
	font-weight: 500;
	margin-top: 17px;
	line-height: 1.3;
}
.section03 .inner_layout .bottom_wrap .banner_area > .right .box .move_btn{
	margin-top: 30px;
	width: 45px;
	height: 45px;
	display: inline-block;
	background: url(/images/user/main/main_exhibition_arrow02.svg) center center no-repeat;
	background-size: contain;
	transition: 0.3s;
	transform: scale(1);
}
.section03 .inner_layout .bottom_wrap .banner_area > .right .box:hover .move_btn{
	/* transform: scale(1.2); */
}
.section03 .inner_layout .bottom_wrap .icon_area{
	display: flex;
	gap: 0px 40px;
	margin-top: 40px;
}
.section03 .inner_layout .bottom_wrap .icon_area .item{
	flex: 1;
}
.section03 .inner_layout .bottom_wrap .icon_area .item i.img{
	display: inline-block;
	aspect-ratio: 1 / 0.803;
	border-radius: 20px;
	background-color:#F8FCF2;
	border: 1px solid #EEF2E9;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 0.3s;
}
.section03 .inner_layout .bottom_wrap .icon_area .item i.img img{
	width: 88px;
	filter: drop-shadow(10px 10px 0 rgba(15, 132, 104, 0.15));
}
.section03 .inner_layout .bottom_wrap .icon_area .item p{
	text-align: center;
	margin-top: 15px;
	font-weight: 500;
	font-size: 20px;
}
.section03 .inner_layout .bottom_wrap .icon_area .item:hover i.img{
	background-color: #3c6e63;
	border: 1px solid #29433D;
}



.section03 .inner_layout .bottom_wrap .icon_area .item:nth-of-type(1):hover i.img img{content: url(/images/user/main/main_exhibition_hover_icon01.svg);}
.section03 .inner_layout .bottom_wrap .icon_area .item:nth-of-type(2):hover i.img img{content: url(/images/user/main/main_exhibition_hover_icon02.svg);}
.section03 .inner_layout .bottom_wrap .icon_area .item:nth-of-type(3):hover i.img img{content: url(/images/user/main/main_exhibition_hover_icon03.svg);}
.section03 .inner_layout .bottom_wrap .icon_area .item:nth-of-type(4):hover i.img img{content: url(/images/user/main/main_exhibition_hover_icon04.svg);}
.section03 .inner_layout .bottom_wrap .icon_area .item:nth-of-type(5):hover i.img img{content: url(/images/user/main/main_exhibition_hover_icon04.svg);}
/* section03 end */
/* section04 */
.section04{
	/* display: none; */
	position: relative;
	padding-top: 60px;
	padding-bottom: 120px;	
}
.section04 .inner_layout{
	display: flex;
	gap: 40px;
	overflow: visible;
	padding-left: 0px;
	padding-right: 0px;
	margin: 0 auto;
	align-items: center;
}

.section04 .inner_layout > div {
	width: calc(50% - 20px);
}

.section04 .inner_layout > .left .box {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    padding: 0px;
    display: inline-block;
	overflow: hidden;
}

.section04 .inner_layout > .left .box img {
	display: block;
	width: 100%;
}

.section04 .inner_layout > .right {
	position: relative;
}

.section04 .inner_layout > .right .section04_slider{
	position: relative;
	height: auto;
	overflow: hidden;
}

.section04 .inner_layout > .right .section04_slider .swiper-notification {
	display: none;
}


.section04 .inner_layout > .right .section04_slider .swiper-slide{
	
}
.section04 .inner_layout > .right .section04_slider .swiper-slide a{
	width: 100%;
	height: 100%;
	display: inline-block;
	border-radius: 20px;
	overflow: hidden;
}
.section04 .inner_layout > .right .section04_slider .swiper-slide a::after{
	content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: calc(100% - 4px);
    border: 1px solid #000;
    border-radius: 19px;
    opacity: .10;
    z-index: 1;
}
.section04 .inner_layout > .right .section04_slider .swiper-slide a img{
	width: 100%;
	object-fit: cover;
	aspect-ratio: 1 / 0.548387;
}
.section04 .swiper-button-prev{
	width: 70px;
	height: 70px;
	background: url(/images/user/main/banner_slide_arrow.svg) center center no-repeat;
	background-size: 50%;
	background-color: rgb(255, 255, 255);
	margin: 0;
	padding: 0;
	left: 0;
	right: auto;
	top: 50%;
	bottom: auto;
	transform:translate(-50%, -50%) rotate(-180deg);
	border-radius: 50%;
}
.section04 .swiper-button-next{
	width: 70px;
	height: 70px;
	background: url(/images/user/main/banner_slide_arrow.svg) center center no-repeat;
	background-size: 50%;
	background-color: rgb(255, 255, 255);
	margin: 0;
	padding: 0;
	left: auto;
	right: 0px;
	top: 50%;
	bottom: auto;
	border-radius: 50%;
	transform: translate(50%, -50%);
}

.section04 .swiper-button-next.swiper-button-disabled{
	opacity: 1;
	pointer-events: initial;
}
.section04 .swiper-button-prev.swiper-button-disabled{
	opacity: 1;
	pointer-events: initial;
}
.section04 .swiper-button-prev::after{
	display: none;
}
.section04 .swiper-button-next::after{
	display: none;
}
/* section04 end */
/* section05 start */
.section05{
	padding-top: 130px;
	padding-bottom: 90px;
}
.section05 .inner_layout .section05_slider{

}
.section05 .inner_layout .swiper-slide{
	width: 25%;
	background-color: #fff;
	border-radius: 20px;
	border: 1px solid #5A5243;
	position: relative;
}
.section05 .inner_layout .swiper-slide::after{
	content: "";
    display: block;
    padding-bottom: 100%;
}
.section05 .inner_layout .swiper-slide .in{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	padding: 30px;
	display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.section05 .inner_layout .swiper-slide .in .top_area a:hover > div {
	/* text-decoration: underline; */
}
.section05 .inner_layout .swiper-slide .in .classify{
	/* letter-spacing: -0.6px; */
	font-weight: 500;
	font-size: 14px;
	padding: 3px 11px 4px 10px;
	display: inline-block;
	border-radius: 800px;
}
.section05 .inner_layout .swiper-slide .in .classify.type01{
	color: #FFFFFF;
	background-color: #0F8468;
	border: 1px solid #0D725A;
}
.section05 .inner_layout .swiper-slide .in .classify.type02{
	color: #5A5243;
	background-color: #ffffff;
	border: 1px solid #0D725A;
	color: #0F8468;
}
.section05 .inner_layout .swiper-slide .in .tit{
	margin-top: 15px;
	/* letter-spacing: -1.54px; */
	color: #000000;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.section05 .inner_layout .swiper-slide .in .con{
	margin-top: 10px;
	/* letter-spacing: -0.8px; */
	color: #666666;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
.section05 .inner_layout .swiper-slide .in .top_area{

}
.section05 .inner_layout .swiper-slide .in .bottom_area{

}
.section05 .inner_layout .swiper-slide .in .bottom_area .date{
	/* letter-spacing: 0px; */
	color: #A29DA0;
	font-size: 16px;
	font-weight: 500;
}
.section05 .more_wrap{
	margin-top: 60px;
	display: flex;
	justify-content: center;
}
.section05 .more_wrap a{
	/* letter-spacing: -1.68px; */
	color: #000000;
	font-size: 26px;
	font-weight: 700;
	display: flex;
	align-items: center;
}
.section05 .more_wrap a i{
	background: url(/images/user/main/main_icon_moreArrow.svg) center center no-repeat;
	width: 20px;
	height: 20px;
	display: inline-block;
	margin-left: 17px;
}
/* section05 end */
/* section06 start */
.section06{
	padding-top: 100px;
	padding-bottom: 100px;
	background-color: #402C18;
}
.section06 .sns_title {
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
	display: flex;
	flex-flow: column wrap;
    gap: 15px;
    align-content: center;
    text-align: center;
}
.section06 .sns_title span {
	max-width: 230px;
}

.section06 .sns_title a {
	color: #FFD3A7;
	font-size: 22px;
	font-weight: 200;
}

.section06 .sns_list {
	margin-top: 88px;
	display: flex;
	flex-flow: row nowrap;
	width: 100%;
	overflow: auto;
	gap: 20px;
	padding: 0 32px;
	-ms-overflow-style: none;
}
.section06 .sns_list::-webkit-scrollbar {
	display: none;
}

.section06 .sns_list .box {
	aspect-ratio: 1/1;
	min-width: 395px;
	border-radius: 20px;
	overflow: hidden;	
}

.section06 .sns_list .box img {
	width: 100%;
}
/* section06 end */


/* section07 stert */
.section07 {
	position: relative;
    display: flex;
    width: 100%;
    aspect-ratio: 1 / 0.341565;
	overflow: hidden;
}
.section07::after {
	display: none;
	position: absolute;
	content: '';
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #614100;
	opacity: 0.35;
	z-index: 1;
	mix-blend-mode: multiply;
}
.section07 .text_box {
	position: absolute;
	width: auto;
	height: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	text-align: center;
}

.section07 .text_box > img {
	display: block;	
	width: 591px;
	animation: text_box 1s infinite alternate ease-out;
	transition: 0.3s;
	margin: 0 auto;
}

@-webkit-keyframes text_box{
	0% {
		padding-bottom: 0px;
	}
	100% {
		padding-bottom: 10px;
	}
}

.section07 video {
	position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* section07 end */

@media screen and (max-width: 1340px){
	.section01 {
		max-width: 1280px;
		margin: 0 auto;
	}
	.section04 {
		padding-top: 100px;
	}

	.section04 .inner_layout{
		padding-left: 30px;
		padding-right: 30px;
	}
	.section04 .inner_layout .section04_slider{
		height: auto;
	}
	.section04 .inner_layout .section04_slider .swiper-slide{
		height: auto;
	}
	.section04 .swiper-button-prev{
		left: 35px;
		width: 55px;
		height: 55px;
	}
	.section04 .swiper-button-next{
		right: 35px;
		width: 55px;
		height: 55px;
	}
}
@media screen and (min-width: 1281px){
	.section05 .inner_layout{
		padding: 1px;
	}
}
@media screen and (max-width: 1280px){
	.section03 .inner_layout .bottom_wrap{
		margin-top: 40px;
	}
	.section03 .inner_layout .bottom_wrap .banner_area{
		gap: 0px 20px;
	}
	.section03 .inner_layout .bottom_wrap .banner_area > .left,
	.section03 .inner_layout .bottom_wrap .banner_area > .right {
		width: calc(50% - 10px);
	}
	.section03 .inner_layout .bottom_wrap .banner_area > .left .box,
	.section03 .inner_layout .bottom_wrap .banner_area > .right .box{
		padding: 30px 30px;
	}
	.section03 .inner_layout .bottom_wrap .banner_area > .left .box .big,
	.section03 .inner_layout .bottom_wrap .banner_area > .right .box .big{
		font-size: 27px;
	}
	
	.section03 .inner_layout .bottom_wrap .icon_area{
		gap: 0px 25px;
		margin-top: 20px;
	}	
	
	.section04 .inner_layout {
		gap: 0px 20px;
	}
	.section04 .inner_layout > .left,
	.section04 .inner_layout > .right {
		width: calc(50% - 10px);
	}

	.section05 .inner_layout .swiper-slide .in{
		padding: 15px;
	}
	.section05 .inner_layout .swiper-slide .in .tit{
		font-size: 17px;
		margin-top: 10px;
	}
	.section05 .inner_layout .swiper-slide .in .con{
		font-size: 15px;
	}

	.section07 .text_box > img {
		width: 480px;
	}
}
@media screen and (max-width: 1024px){
	.section01 .main_slide_wrap .main_slider .wrap02{
		width: 40%;
	}
	.section03 .inner_layout .bottom_wrap .banner_area{
		flex-direction: column;
		gap: 30px 0px;
	}
	.section03 .inner_layout .bottom_wrap .banner_area > div{
		width: 100%;
	}
	.section03 .inner_layout .bottom_wrap .banner_area > .left,
	.section03 .inner_layout .bottom_wrap .banner_area > .right {
		width: 100%;
	}
	.section03 .inner_layout .bottom_wrap .banner_area > .left .box,
	.section03 .inner_layout .bottom_wrap .banner_area > .right .box {
		padding: 35px 40px;
	}
	.section03 .inner_layout .bottom_wrap .banner_area > .left .box .big,
	.section03 .inner_layout .bottom_wrap .banner_area > .right .box .big {
		font-size: 34px;
	}
	.section03 .inner_layout .bottom_wrap .icon_area .item i.img img{
		width: 68px;
	}
	.section04 .swiper-button-prev{
		width: 50px;
		height: 50px;
		left: 32px;
	}
	.section04 .swiper-button-next{
		width: 50px;
		height: 50px;
		right: 32px;
	}

	.section06 {
		padding-top: 70px;
		padding-bottom: 70px;
	}

	.section06 .sns_list {
		margin-top: 65px;
		gap: 15px;
		padding: 0 27px;
	}

	.section06 .sns_list .box {
		min-width: 290px;
	}

	.section07 .text_box > img {
		width: 400px;
	}
}
@media screen and (max-width: 860px){
	.section03 .inner_layout{
		padding-left: 30px;
		padding-right: 30px;
	}
	.section03 .inner_layout .top_wrap{
		padding-left: 0px;
		padding-right: 0px;
	}
	.section03 .inner_layout .bottom_wrap .banner_area{
		padding-left: 0px;
		padding-right: 0px;
	}
	.section03 .inner_layout .bottom_wrap .banner_area > .left .box .big,
	.section03 .inner_layout .bottom_wrap .banner_area > .right .box .big{
		font-size: 28px;
	}
	.section03 .inner_layout .bottom_wrap .icon_area{
		overflow-x: auto;
		padding-left: 0px;
		padding-right: 0px;
		gap: 0px 15px;
		margin-top: 15px;
	}
	.section03 .inner_layout .bottom_wrap .icon_area .item{
		min-width: 80px;
	}
	.section03 .inner_layout .bottom_wrap .icon_area .item i.img img{
		width: 65%;
		max-width: 55px;
		filter: drop-shadow(6px 6px 0 rgba(15, 132, 104, 0.15));
	}
	.section05{
		padding-top: 100px;
	}
}

@media screen and (max-width: 768px){
	.section04 {
        padding-top: 90px;
    }	
	.section04 .inner_layout {
		gap: 30px 0px;
		flex-flow: column;
	}
	.section04 .inner_layout > .left, 
	.section04 .inner_layout > .right {
        width: 100%;
    }

	.section07 .text_box > img {
		width: 300px;
	}
}
@media screen and (max-width: 767px){
	/* 767 section01 */
	.section01{
		/* margin-top: 20px; */
		padding-left: 0px;
		padding-right: 0px;
	}
	.section01 .main_slide_wrap{
		/* padding-left: 15px;
		padding-right: 15px; */
	}
	.section01 .main_slide_wrap .main_slider{
		position: relative;
		height: auto;
		border-radius: 0px;
	}
	.section01 .main_slide_wrap .main_slider .swiper-slide{
		height: auto !important;
	}
	.section01 .main_slide_wrap .main_slider .swiper-wrapper{
		position: relative;
	}
	.section01 .main_slide_wrap .main_slider .swiper-button-prev{
		left: 10px;
	}
	.section01 .main_slide_wrap .main_slider .swiper-button-prev::after{
		font-size: 20px;
	}
	.section01 .main_slide_wrap .main_slider .swiper-button-next{
		right: 10px;
	}
	.section01 .main_slide_wrap .main_slider .swiper-button-next::after{
		font-size: 20px;
	}
	.section01 .main_slide_wrap .main_slider .wrap02{
		right: 15px;
	}
	.section01 .main_slide_wrap .main_slider .wrap02 p{
		font-size: 12px;
	}
	.section01 .main_slide_wrap .main_slider .wrap{
		left: 15px;
		align-items: flex-start;
		flex-wrap: wrap;
	}
	.section01 .main_slide_wrap .main_slider .swiper-pagination{
	    width: 23vw;
    	margin: auto 0px;
	}
	.section01 .main_slide_wrap .main_slider .wrap .pagination_progress_wrap{
		width: 100%;
		font-size: 11px;
	}
	.section01 .main_slide_wrap .main_slider::after{
		/* content: "";
		display: block;
		padding-bottom: 100%; */
	}
	.inner_layout .slide_style01 .swiper-slide .box > a{
		border-radius: 10px;
	}
	
	/* 767 공통 */
	.inner_layout .top_wrap{
		align-items: center;
	}
	.inner_layout .top_wrap h2{
		font-size: 24px;
	}
	.inner_layout .top_wrap .button_wrap{
		/* margin-top: 15px; */
	}
	.inner_layout .top_wrap .button_wrap .left{
		flex: 1;
		height: 36px;
	}
	.inner_layout .top_wrap .button_wrap .left button{
		font-size: 15px;
		padding: 0px;
	}
	.inner_layout .top_wrap .button_wrap .right{
		width: 36px;
		height: 36px;
	}
	.inner_layout .top_wrap .button_wrap .right a img{
		width: 11px;
		height: 11px;
	}
	.inner_layout .slide_style01{
		margin-top: 15px;	
	}
	.inner_layout .slide_style01 .swiper-slide{

	}
	.inner_layout .slide_style01 .swiper-slide .box .bottom_area{
		padding: 27px 25px 35px;
	}
	.inner_layout .slide_style01 .swiper-slide .box .bottom_area .con.one .state{
		font-size: 10px;
		padding: 2px 10px 1.5px;
	}
	.inner_layout .slide_style01 .swiper-slide .box .bottom_area .con.one .classify{
		font-size: 10px;
		padding: 2px 10px 1.5px;
	}
	.inner_layout .slide_style01 .swiper-slide .box .bottom_area .con.two .title a{
		font-size: 18px;
	}
	.inner_layout .slide_style01 .swiper-slide .box .bottom_area .con.two p{
		font-size: 13px;
	}
	.inner_layout .slide_style01 .swiper-slide .box .bottom_area .con.three{
		margin-top: 10px;
	}
	.inner_layout .slide_style01 .swiper-slide .box .bottom_area .con.three .date{
		font-size: 12px;
	}
	.inner_layout .slide_style01 .swiper-slide .box .bottom_area .con.three .people{
		font-size: 12px;
		margin-top: 4px;
	}
	.inner_layout .slide_style01 .slide_state_wrap{

	}
	.inner_layout .slide_style01 .slide_state_wrap .left{
		/* width: auto; */
		width: 50%;
		padding-right: 0px;
	}
	.inner_layout .slide_style01 .slide_state_wrap .right{
		margin-left: 20px;
		flex: 1;
		width: auto;
	}
	.inner_layout .slide_style01 .slide_state_wrap .right .progress_num{
		font-size: 11px;
		max-width: 50px;
	}
	.inner_layout .slide_style01 .slide_state_wrap .right > button{
		padding: 0px;
		background-size: contain;
		flex: 1;
	}
	.inner_layout .slide_style01 .swiper-slide .box .bottom_area .con.two .title{
		font-size: 18px;
	}
	.inner_layout .slide_style01 .slide_state_wrap .left .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{
		/* border-radius: 25%; */
	}
	.inner_layout .slide_style01 .swiper-slide .box .top_area{
		border-radius: 10px;
	}
	.inner_layout .slide_style01 .swiper-slide .box .top_area{
		border-radius: 10px;
	}
	.inner_layout .slide_style01 .swiper-slide .box .top_area::before{
		border-radius: 10px;
	}
	/* 767 section02 */
	.section02{
		padding-top: 30px;
	}
	/* 767 section03 */
	.section03{
		padding-top: 30px;
	}
	.section03 .inner_layout{
		padding-left: 0px;
		padding-right: 0px;
	}
	.section03 .inner_layout .top_wrap{
		padding-left: 15px;
		padding-right: 15px;
	}
	.section03 .inner_layout .bottom_wrap{
		margin-top: 15px;
	}
	.section03 .inner_layout .bottom_wrap .banner_area{
		gap: 15px 0px;
		padding-left: 15px;
		padding-right: 15px;
	}
	
	.section03 .inner_layout .bottom_wrap .banner_area > .left .box .small,
	.section03 .inner_layout .bottom_wrap .banner_area > .right .box .small{
		font-size: 13px;
		margin-top: 10px;
	}
	.section03 .inner_layout .bottom_wrap .banner_area > .left .box .big,
	.section03 .inner_layout .bottom_wrap .banner_area > .right .box .big {
		font-size: 18px;
		letter-spacing: -0.04em;
	}
	.section03 .inner_layout .bottom_wrap .banner_area > .left .box .move_btn,
	.section03 .inner_layout .bottom_wrap .banner_area > .right .box .move_btn {
		width: 30px;
		height: 30px;
		margin-top: 20px;
	}
	.section03 .inner_layout .bottom_wrap .icon_area{
		padding-left: 15px;
		padding-right: 15px;
	}
	.section03 .inner_layout .bottom_wrap .icon_area .item i.img{
		border-radius: 10px;
	}
	.section03 .inner_layout .bottom_wrap .icon_area .item p{
		font-size: 14px;
		margin-top: 10px;
	}
	/* 767 section04 */
	.section04 {
		padding-top: 50px;
		padding-bottom: 50px;
	}
	.section04 .inner_layout {
        gap: 15px;
    }

	.section04 .inner_layout > .left .box,
	.section04 .inner_layout > .right .section04_slider .swiper-slide a {
		border-radius: 15px;
	}

	.section04 .swiper-button-prev{
		transform: translate(0px,-50%) rotate(180deg);
		left: 10px;
		right: auto;
		width: 32px;
		height: 32px;
	}
	.section04 .swiper-button-next{
		transform: translate(0px,-50%);
		left: auto;
		right: 10px;
		width: 32px;
		height: 32px;
	}
	.section04 .inner_layout{
		padding-left: 15px;
		padding-right: 15px;
	}
	.section04 .inner_layout .section04_slider{
		height: auto;
	}
	.section04 .inner_layout .section04_slider .swiper-slide{
		height: auto;
	}
	.section04 .inner_layout .section04_slider .swiper-slide a{
		border-radius: 10px;
	}
	.section04 .inner_layout .section04_slider .swiper-slide a::after{
		border-radius: 10px;
	}
	/* 767 section05 */
	.section05{
		padding-top: 50px;
		padding-bottom: 40px;
	}
	.section05 .more_wrap{
		margin-top: 30px;
	}
	.section05 .more_wrap a i{
		display: inline-block;
		width: 16px;
		height: 16px;
		background-size: 100%;
		margin-left: 7px;
	}
	.section05 .inner_layout .swiper-slide{
		border-radius: 10px;
	}
	.section05 .inner_layout .swiper-slide .in{
		padding: 25px;
	}
	.section05 .inner_layout .swiper-slide .in .tit{
		margin-top: 11px;
		font-size: 18px;
	}
	.section05 .inner_layout .swiper-slide .in .con{
		margin-top: 10px;
		font-size: 13px;
	}
	.section05 .more_wrap a{
		font-size: 16px;
	}
	.section05 .inner_layout .swiper-slide .in .con{
		font-size: 15px;
	}
	.section05 .inner_layout .swiper-slide .in .bottom_area .date{
		font-size: 13px;
	}
	.section05 .inner_layout .swiper-slide .in .classify{
		font-size: 10px;
    	padding: 2px 10px 1.5px;
	}

	.section06 {
        padding-top: 50px;
        padding-bottom: 50px;
    }

	.section06 .sns_title {
		gap: 8px;
	}

	.section06 .sns_title span {
		max-width: 160px;
	}

	.section06 .sns_title a {
		font-size: 15px;
	}

	.section06 .sns_list {
        margin-top: 50px;
        padding: 0 25px;
    }

	.section06 .sns_list .box {
        min-width: 40%;
    }
}
@media screen and (max-width: 425px){
	.section03 .inner_layout .bottom_wrap .icon_area .item{
		min-width: 65px;
	}
	.section03 .inner_layout .bottom_wrap .icon_area .item i.img img{
		/* width: 24px; */
		height: 30px;
	}
	.section03 .inner_layout .bottom_wrap .icon_area .item p{
		margin-top: 10px;
		font-size: 15px;
	}
	.section03 .inner_layout .bottom_wrap .icon_area{
		gap: 0px 15px;
	}

	.section06 .sns_title span {
		max-width: 140px;
	}

	.section06 .sns_list {
        margin-top: 30px;
        padding: 0 15px;
    }

	.section06 .sns_list .box {
        min-width: 55%;
    }

	.section07 .text_box > img {
		width: 100%;
	}
}



.sns_w_wrap{
	width: calc(100% - 60px);
	margin: 0 auto;
	overflow: auto;
	margin-top: 88px;
}
.sns_w_wrap .in{
	width: 100%;
	min-width: 1200px;
	display: flex;
	gap: 20px;
}
.sns_w_wrap .in .box{
	width: 300px;
	aspect-ratio: 1/1;
	background-color: orange;
}
/* 가로 스크롤바 커스텀 */
.sns_w_wrap::-webkit-scrollbar {
	height: 8px; /* 스크롤바 높이 */
}
.sns_w_wrap::-webkit-scrollbar-track {
	background: #ffffff; /* 스크롤바 트랙 색상 */
}
.sns_w_wrap::-webkit-scrollbar-thumb {
	background: #FFD3A7; /* 스크롤바 색상 */
	border-radius: 4px; /* 스크롤바 둥글게 */
}
.sns_w_wrap::-webkit-scrollbar-thumb:hover {
	background: #FFD3A7; /* 스크롤바 호버 색상 */
}
@media screen and (max-width: 767px){
	.sns_w_wrap{
		width: calc(100%);
		padding-left: 15px;
		margin-left: 0;
		margin-right: 0;
		margin-top: 45px;
	}
	.sns_w_wrap::-webkit-scrollbar{
		height: 0;
	}
}


/* 250311_top_animation */
.top_visual {
	position: relative;
    display: block;
    width: 100%;
    max-height: 510px;
    background: linear-gradient(180deg, #FFF 10%, #A1D9FF);
    aspect-ratio: 1 / 0.267997;
	overflow: hidden;
}

@media screen and (min-width: 1903px){
	.top_visual {
		min-height: 510px;
		max-height: none;
	}
}

.top_visual::after {
	position: absolute;
	content: '';
	width: 100%;
	height: 6px;
	background: #000;
	left: 0;
	bottom: 0;
	z-index: 0;
}

.top_visual .img_ground {
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.top_visual .img_ground img {
    position: relative;
    z-index: 1;
}

.top_visual .img_ground .left_b_bg {
    position: absolute;
    width: 33%;
    bottom: 0;
    left: 0;
	z-index: 5;
}
.top_visual .img_ground .left_c_bg {
    position: absolute;
	width: auto;
	width: 31.529%;
    height: 100%;
    bottom: 0;
    left: 0;
	z-index: 4;
}
.top_visual .img_ground .left_person {
    position: absolute;
    width: 13.5%;
    bottom: 1%;
    left: 10.5%;
    z-index: 5;
    animation: left_person 2.5s ease-out forwards;
	transform: translateX(-21%) scale(0.5) translateY(-12%) scaleX(1);
    opacity: 0.4;
    /* filter: blur(4px); */
}

@keyframes left_person {
    0% {
        transform: translateX(-21%) scale(0.5) translateY(-12%) scaleX(1);
        opacity: 0.4;
        /* filter: blur(4px); */
    }
    10% {
        transform: translateX(-21%) scale(0.5) translateY(-12%) scaleX(1);
        opacity: 0.4;
        /* filter: blur(4px); */
    }
    20% {
        transform: translateX(-16%) scale(0.8) translateY(-8%) scaleX(-1);
        opacity: 0.75;
        /* filter: blur(4px); */
    }
    30% {
        transform: translateX(-16%) scale(0.8) translateY(-8%) scaleX(-1);
        opacity: 0.75;
        /* filter: blur(4px); */
    }
    40% {
        transform: translateX(-11%) scale(0.9) translateY(-5%) scaleX(1);
        opacity: 1;
        /* filter: blur(2px); */
    }
    50% {
        transform: translateX(-11%) scale(0.9) translateY(-5%) scaleX(1);
        opacity: 1;
        /* filter: blur(2px); */
    }
    60% {
        transform: translateX(-6%) scale(0.95) translateY(-3%) scaleX(-1);
        opacity: 1;
        /* filter: blur(2px); */
    }
    70% {
        transform: translateX(-6%) scale(0.95) translateY(-3%) scaleX(-1);
        opacity: 1;
        /* filter: blur(0px); */
    }
    80% {
        transform: translateX(0%) scale(1) translateY(0%) scaleX(1);
        opacity: 1;
        /* filter: blur(0px); */
    }
    90% {
        transform: translateX(0%) scale(1) translateY(0%) scaleX(1);
        opacity: 1;
        /* filter: blur(0px); */
    }
    100% {
        transform: translateX(0%) scale(1) translateY(0%) scaleX(1);
        opacity: 1;
        /* filter: blur(0px); */
    }
}
.top_visual .img_ground .left_t_box {
    position: absolute;
    width: 12.191%;
    top: 7.6%;
    left: 3.7%;
    z-index: 5;
    transform: rotate(-17deg);
    opacity: 0; /* 처음에는 숨김 */
    animation: left_t_box 0.5s ease-out 1 forwards, left_t_box_float 1s ease-in-out infinite;
    animation-delay: 2.05s; /* 소녀가 도착한 후 실행 */
}
.top_visual .img_ground .left_t_box .box{

}
.top_visual .img_ground .left_t_box .text01{
	position: absolute;
    top: -12%;
    width: 51%;
    left: 23%;
}
.top_visual .img_ground .left_t_box .text02{
    position: absolute;
    top: 8%;
    width: 51%;
    left: 23%;
}

/* 말풍선 등장 */
@keyframes left_t_box {
    0% {
        opacity: 0;
        transform: rotate(-17deg) scale(0.5);
    }
    100% {
        opacity: 1;
        transform: rotate(-17deg) scale(1);
    }
}

/* 위아래로 흔들리는 효과 */
@keyframes left_t_box_float {
    0% {
        transform: rotate(-17deg) translateY(0%);
    }
    50% {
        transform: rotate(-17deg) translateY(-1%);
    }
    100% {
        transform: rotate(-17deg) translateY(0%);
    }
}
.top_visual .img_ground .left_t_box > .text {
	position: absolute;
	display: flex;
	flex-flow: column;
	gap: 5px;
    width: 52%;
    top: 51%;
    left: 48%;
    transform: translate(-50%, -50%) rotate(358deg);
    z-index: 1;
}

.top_visual .img_ground .right_b_bg {
    position: absolute;
    width: 56%;
    bottom: 0;
    right: 0;
	z-index: 5;
}
.top_visual .img_ground .right_c_bg {
    position: absolute;
	/* width: auto; */
    width: 35.522%;
    height: 100%;
    bottom: 0;
    right: 0;
	z-index: 4;
}
.top_visual .img_ground .right_person {
    position: absolute;
	/* width: auto; */
    width: 18.1%;
    height: 100%;
    bottom: 0;
    right: 13.2%;
    z-index: 4;
    animation: right_person 1.5s linear;
}

@-webkit-keyframes right_person {
    0% {
        opacity: 0;
        transform: translateX(12%);
    }    
    100% {
        opacity: 1;
        transform: translateX(0%);
    }
}

.top_visual .img_ground .right_person > span {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}

.top_visual .img_ground .right_person > span::before {
	position: absolute;
	content: '';
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: url('/images/user/main/ani_images/right_person_eye.svg');
	background-size: 100%;
	z-index: 2;
	animation: person_eye 8s ease-out infinite 2s;
	opacity: 0;
}
@-webkit-keyframes person_eye {
	0%, 20% {
		opacity: 0;		
	}	
	21%, 22%, 29%, 30% {
		opacity: 1;		
	}
	23%, 28%, 31% {
		opacity: 0;		
	}
	100% {
		opacity: 0;		
	}
}

.top_visual .img_ground .right_person > span::after {
	position: absolute;
	content: '';
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: url('/images/user/main/ani_images/right_person_mouse.svg');
	background-size: 100%;
	z-index: 2;
	animation: person_mouse 12s ease-out infinite 2s;
	opacity: 0;
}
@-webkit-keyframes person_mouse {
	0%, 40% {
		opacity: 0;		
	}	
	41%, 60% {
		opacity: 1;		
	}
	61% {
		opacity: 0;		
	}
	100% {
		opacity: 0;		
	}
}

.top_visual .img_ground .right_t_box {
	position: absolute;
    width: 7.882%;
	top: 1%;
    right: 12.5%;
	transform: rotate(12deg);
    z-index: 5;
    animation: right_t_box 0.5s ease-out 1 forwards, right_t_box_float 0.7s ease-in-out infinite alternate;
    animation-delay: 1.5s;
	transform-origin: left bottom;
	opacity: 0;
}
.top_visual .img_ground .right_t_box .box{

}
.top_visual .img_ground .right_t_box .text{

}

/* 말풍선 등장 */
@keyframes right_t_box {
    0% {
        opacity: 0;
        transform: rotate(-17deg) scale(0.5);
    }
    100% {
        opacity: 1;
        transform: rotate(-17deg) scale(1);
    }
}
/* 위아래로 흔들리는 효과 */
@keyframes right_t_box_float {
    0% {
        transform: rotate(1deg) translateY(0);
    }
    100% {
        transform: rotate(-1deg) translateY(0);
    }
}

.top_visual .img_ground .right_t_box > .text {
	position: absolute;
    width: 70%;
    top: -3%;
    left: 8.5%;
    z-index: 1;
    transform: rotate(-4deg);
}
.top_visual .img_ground .right_t_box > .text > span {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;	
}

.top_visual .img_ground .center_c_bg {
    position: absolute;
    width: 26.5%;
    bottom: 0;
    left: 51%;
    z-index: 2;
}
.top_visual .img_ground .center_c_bg > .bg{
	width: 100%;
}
.top_visual .img_ground .center_c_bg > .text {
	position: absolute;
    width: 47.5%;
    top: 20%;
    left: 22%;
    z-index: 1;
	animation: 3.1s ease 2s infinite scale_extend;
}
@keyframes scale_extend {
    0% {
        transform: scale(0.985) ;
    }
    5%, 15%, 25% {
        transform: scale(1);
    }
    10%, 20% {
        transform: scale(0.985);
    }
    100% {

    }
}

@-webkit-keyframes jello-vertical {

}
.top_visual .img_ground .center_c_bg > .text > span {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
}
.top_visual .img_ground .center_c_txt {
	position: absolute;
    width: 25.748%;
	height: 100%;
	bottom: 0;
    left: 50%;
	z-index: 5;
}	
.top_visual .img_ground .center_c_txt .center_text {
	
}
.top_visual .img_ground .center_c_txt .star_c_01 {
	position: absolute;
    width: 11.428%;
	top: 12%;
    left: 11.5%;
	z-index: 5;
	animation: star_c_01 3s ease-out infinite;
}
@-webkit-keyframes star_c_01 {
	0% {
		transform: translate(0px, 0px) scale(100%);
	}
	50% {
		transform: translate(3px, 3px) scale(97%);	
	}
	100% {
		transform: translate(0px, 0px) scale(100%);	
	}
}
.top_visual .img_ground .center_c_txt .star_c_02 { 
	position: absolute;
    width: 12%;
    top: 9%;
    right: 16.5%;
    z-index: 5;
	animation: star_c_02 6s ease-out infinite;
}
@-webkit-keyframes star_c_02 {
	0% {
		transform: translate(0px, 0px) scale(100%);
	}
	50% {
		transform: translate(6px, -6px) scale(95%);	
	}
	100% {
		transform: translate(0px, 0px) scale(100%);	
	}
}
.top_visual .img_ground .center_c_txt .star_c_03 {
	position: absolute;
    width: 9.553%;
	top: 50.2%;
    left: 40%;
	z-index: 5;
	animation: star_c_03 8s ease-out infinite;
}
@-webkit-keyframes star_c_03 {
	0% {
		transform: translate(0px, 0px) scale(100%);
	}
	50% {
		transform: translate(2px, 3px) scale(100%);	
	}
	100% {
		transform: translate(0px, 0px) scale(100%);	
	}
}
.top_visual .img_ground .center_c_txt .star_c_04 {
	position: absolute;
    width: 5.646%;
    top: 41.5%;
    right: 23%;
    z-index: 5;
	animation: star_c_02 4s ease-out infinite;
}
@-webkit-keyframes star_c_02 {
	0% {
		transform: translate(0px, 0px) scale(100%);
	}
	50% {
		transform: translate(-5px, -3px) scale(110%);	
	}
	100% {
		transform: translate(0px, 0px) scale(100%);	
	}
}
.top_visual .img_ground .center_c_txt .star_u_01 { 
	position: absolute;
    width: 5.7%;
    top: 10%;
    left: 31%;
    z-index: 5;
	animation: star_u_01 2s ease-out infinite;
}
@-webkit-keyframes star_u_01 {
	0% {
		transform: scale(100%);
		opacity: 0.5;
	}
	50% {
		transform: scale(105%);	
		opacity: 1;		
	}
	100% {
		opacity: 0.5;
		transform: scale(100%);	
	}
}
.top_visual .img_ground .center_c_txt .star_u_02 {
	position: absolute;
    width: 6.238%;
    top: 53%;
    left: 24.5%;
    z-index: 5;
	animation: star_u_02 1.5s ease-out infinite;
}
@-webkit-keyframes star_u_02 {
	0% {
		transform: scale(100%);
		opacity: 1;
	}
	50% {
		transform: scale(95%);	
		opacity: 0.5;		
	}
	100% {
		opacity: 1;
		transform: scale(100%);	
	}
}
.top_visual .img_ground .center_c_txt .star_u_03 { 
	position: absolute;
    width: 5%;
    top: 24%;
    right: 16%;
    z-index: 5;
	animation: star_u_03 2s ease-out infinite;
}
@-webkit-keyframes star_u_03 {
	0% {
		transform: scale(100%);
		opacity: 1;
	}
	50% {
		transform: scale(95%);	
		opacity: 0.5;		
	}
	100% {
		opacity: 1;
		transform: scale(100%);	
	}
}

.top_visual .img_ground .center_cloud {
	position: absolute;
    width: 25.748%;
	bottom: 0;
    left: 46.8%;
	z-index: 3;	
}
.top_visual .img_ground .center_cloud .cloud_blue {
	position: absolute;
	width: 100%;
	bottom: 0;
	right: 0;
	z-index: 3;
	animation: cloud_blue 15s ease-out infinite 0.5s;
}
@-webkit-keyframes cloud_blue {
	0% {
		transform: rotate(0deg);
	}
	10%, 40%, 70% {
		transform: rotate(0deg) translateY(-5px) translateX(-5px);
	}
	25%, 55% {
		transform: rotate(0deg) translateY(0px) translateX(0px);
	}
	100% {
		transform: rotate(0deg) translateY(0px) translateX(0px);
	}
}
.top_visual .img_ground .center_cloud .cloud_white {
	position: absolute;
	width: 100%;
	bottom: 0;
	right: 0;
	z-index: 2;
	animation: cloud_white 25s ease-out infinite 0.5s;
}
@-webkit-keyframes cloud_white {
	0% {
		transform: rotate(0deg);
	}
	10%, 40%, 70% {
		transform: rotate(0deg) translateY(-5px) translateX(5px);
	}
	25%, 55% {
		transform: rotate(0deg) translateY(2px) translateX(-2px);
	}
	100% {
		transform: rotate(0deg) translateY(0px) translateX(0px);
	}
}

.top_visual .img_ground .center_cloud .cloud_shadow {
	position: absolute;
	width: 100%;
	bottom: 0;
	right: 0;
	z-index: 1;
	animation: cloud_shadow 20s ease-out infinite 0.5s;
}
@-webkit-keyframes cloud_shadow {
	0% {
		transform: rotate(0deg);
	}
	10%, 40%, 70% {
		transform: rotate(0deg) translateY(-3px) translateX(8px);
	}
	25%, 55% {
		transform: rotate(0deg) translateY(5px) translateX(-5px);
	}
	100% {
		transform: rotate(0deg) translateY(0px) translateX(0px);
	}
}

.top_visual .img_ground .center_man {
    position: absolute;
    width: 12%;
    left: 28%;
    bottom: 0.8%;
    z-index: 4;
    animation: center_man 2s ease-out 1;
}

@-webkit-keyframes center_man {
    0% {
        opacity: 0;
        transform: translateX(-10%);
    }   
    50% {
        opacity: 1;
        transform: translateX(-10%);
    }   
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
.top_visual .img_ground .center_woman {
    position: absolute;
    width: 14%;
    bottom: 0.8%;
    left: 37.7%;
    z-index: 4;
    animation: center_woman 2.5s ease-out 1;
}

@-webkit-keyframes center_woman {
    0% {
        opacity: 0;
        transform: translateX(10%);
    }   
    50% {
        opacity: 1;
        transform: translateX(10%);
    }   
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
.top_visual .img_ground .center_t_box {
    position: absolute;
    width: 10.194%;
    top: 2%;
    left: 38.7%;
    z-index: 5;
    transform: rotate(11deg);
    animation: fade-in 1.9s ease-out forwards, heart-beat 2s ease-out infinite 1.9s;
}

/* opacity 애니메이션 */
@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* shake rotate scale 애니메이션 */
@keyframes heart-beat {
    0% {
        transform: scale(0.98) rotate(11deg);
    }
    5%, 15%, 25% {
        transform: scale(1) rotate(10deg);
    }
    10%, 20% {
        transform: scale(0.98) rotate(12deg);
    }
    100% {
        transform: rotate(11deg);
    }
}


.top_visual .img_ground .center_t_box > .text {
	position: absolute;
	width: 72.5%;
	top: 18%;
    left: 16.5%;
    z-index: 1;
	transform: rotate(-5deg);
}

.top_visual .img_ground .center_t_box > .text > span {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
}








/* 왼쪽 캐릭터 */
.character_left {
    width: auto;
    position: fixed;
    top: 21%;
	left: 0%;
	transform: translateX(-100%);
    z-index: 10;
	transition: 0.3s;
	pointer-events: none;
}
.character_left.show{
	transform: translateX(0%);
}
.character_left .in_add{
	transform: translateX(-29%);
}
.character_left .left_character_body{
	width: 100%;
	position: relative;
	z-index: 1;
	width: 235px;
}
@keyframes talk {
	0%, 49% { opacity: 1; }
	50%, 100% { opacity: 0; }
}

.character_left .left_tak_open_mouse {
    position: absolute;
    top: 42%;
    right: 28%;
    z-index: 1;
    width: 25%;
    height: auto;
    animation: talk 4s infinite reverse;
}
.character_left .left_tak_close_mouse {
    position: absolute;
    top: 42%;
    right: 28%;
    z-index: 1;
    width: 25%;
    height: auto;
	animation: talk 4s infinite;
}
.character_left .left_character_arm {
    position: absolute;
    width: 46%;
    height: auto;
    transition: 0.3s;
    z-index: 0;
    top: 54%;
    right: 10.5%;
    transform-origin: left center;
    transform: rotate(0deg);
    animation: left_character_arm 1.5s ease-in-out infinite;
}
@keyframes left_character_arm {
    0% {
        transform: rotate(0deg);
    }
    50% {
		transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}
.character_left .left_character_text01{
    position: absolute;
    top: 0%;
    left: 70%;
    z-index: 1;
    width: 13%;
    height: auto;
    opacity: 0;
}
.character_left .left_character_text02{
    position: absolute;
    top: 6%;
    left: 80%;
    z-index: 1;
    width: 14%;
    height: auto;
    opacity: 0;
}
.character_left .left_character_text03{
    position: absolute;
    top: 14%;
    left: 92%;
    z-index: 1;
    width: 8%;
    height: auto;
    opacity: 0;
}
.character_left.show .left_character_text01{
	animation: textAppear1 0.2s ease-out forwards;
    animation-delay: 0.2s;
}
.character_left.show .left_character_text02{
	animation: textAppear1 0.2s ease-out forwards;
    animation-delay: 0.4s;
}
.character_left.show .left_character_text03{
	animation: textAppear1 0.2s ease-out forwards;
    animation-delay: 0.6s;
}
@keyframes textAppear1 {
    0% { 
        opacity: 0; 
        transform: translateY(5%); /* px에서 %로 변환 */
    }
    100% { 
        opacity: 1; 
        transform: translateY(0); 
    }
}
@media screen and (max-width: 1600px){
	.character_left .left_character_body{
		width: 110px;
		/* display: none; */
	}
}
@media screen and (max-width: 767px){
	.character_left .left_character_body{
		width: 72px;
	}
}






/* 오른쪽 캐릭터 */
.character_right {
    width: auto;
    position: fixed;
    bottom: 15%;
	right: 0%;
	transform: translateX(100%);
    z-index: 10;
	width: 235px;
	transition: 0.3s;
	pointer-events: none;
}
.character_right.show{
	transform: translateX(0%);
}
.character_right .in_add{
    transform: translateX(17%);
}
.character_right .right_character_body{
	width: 100%;
	position: relative;
	z-index: 1;
}

@keyframes talk2_01 {
	0% { opacity: 1; }
	10% { opacity: 0; }
	15%{ opacity: 0;}
	25%{ opacity: 0;}
	30%{ opacity: 1;}
	35%{ opacity: 0;}
	40%{ opacity: 1;}
	70%{ opacity: 1;}
	75%{ opacity: 0;}
	80%{ opacity: 0;}
	85%{ opacity: 1;}
	100% {opacity: 1;}
}

@keyframes talk2_02 {
    0% { opacity: 0; }      
    10% { opacity: 1; }
	15%{ opacity: 1;}
	25%{ opacity: 1;}
	30%{ opacity: 0;}
	35%{ opacity: 1;}
	40%{ opacity: 0;}
	70%{ opacity: 0;}
	75%{ opacity: 1;}
	80%{ opacity: 1;}
	85%{ opacity: 0;}
	100%{ opacity: 0;}
}

.character_right .right_character_mouse_01 {
    position: absolute;
    top: 33%;
    right: 31%;
    z-index: 1;
    width: 18%;
    height: auto;
    animation: talk2_01 3s infinite forwards;
}

.character_right .right_character_mouse_02 {
    position: absolute;
    top: 33%;
    right: 31%;
    z-index: 1;
    width: 18%;
    height: auto;
    animation: talk2_02 3s infinite forwards;

}

.character_right .right_character_arm {
	position: absolute;
    width: 63%;
    height: auto;
    transition: 0.3s;
    z-index: 0;
    top: 55%;
    right: 8.5%;
    transform-origin: right center;
    transform: rotate(0deg);
    animation: right_character_arm 2s ease-in-out infinite;
}
@keyframes right_character_arm {
    0% {
        transform: rotate(0deg);
    }
    50% {
		transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}
.character_right .right_character_text01{
    position: absolute;
    top: -8%;
    left: -2%;
    z-index: 1;
    width: 19%;
    height: auto;
	opacity: 0;
}
.character_right .right_character_text02{
    position: absolute;
    top: -11%;
    left: 14%;
    z-index: 1;
    width: 14%;
    height: auto;
	opacity: 0;
}
.character_right .right_character_text03{
    position: absolute;
    top: -13%;
    left: 29%;
    z-index: 1;
    width: 12%;
    height: auto;
	opacity: 0;
}
.character_right .right_character_text04{
    position: absolute;
    top: -12%;
    left: 44%;
    z-index: 1;
    width: 6%;
    height: auto;
	opacity: 0;
}
.character_right.show .right_character_text01{
	animation: textAppear 0.2s ease-out forwards;
    animation-delay: 0.2s;
}
.character_right.show .right_character_text02{
	animation: textAppear 0.2s ease-out forwards;
    animation-delay: 0.4s;
}
.character_right.show .right_character_text03{
	animation: textAppear 0.2s ease-out forwards;
    animation-delay: 0.6s;
}
.character_right.show .right_character_text04{
	animation: textAppear 0.2s ease-out forwards;
    animation-delay: 0.8s;
}
@keyframes textAppear {
    0% { 
        opacity: 0; 
        transform: translateY(5%); /* px에서 %로 변환 */
    }
    100% { 
        opacity: 1; 
        transform: translateY(0); 
    }
}
@media screen and (max-width: 1600px){
	.character_right{
		width: 110px;
		/* display: none; */
	}
}
@media screen and (max-width: 767px){
	.character_right{
		width: 72px;
	}
}