@charset "UTF-8";

/* 모션 리셋 */
.reset-y{
	transform:translateY(30px);
	transform:translateY(3rem);
	opacity:0;
}
.reset-y.ui-stagger, .reset-y.ui-entered{
	transition:transform .9s cubic-bezier(0.06, 0.72, 0.47, 1.06), opacity .6s ease-out;
}
.reset-y.ui-stagger.staggered, .reset-y.ui-entered.entered{
	transform:translateY(0);
	opacity:1;
}
.reset-y-reverse{
	transform:translateY(-30px);
	transform:translateY(-3rem);
	opacity:0;
}
.reset-y-reverse.ui-stagger, .reset-y-reverse.ui-entered{
	transition:transform .9s cubic-bezier(0.06, 0.72, 0.47, 1.06), opacity .6s ease-out;
}
.reset-y-reverse.ui-stagger.staggered, .reset-y-reverse.ui-entered.entered{
	transform:translateY(0);
	opacity:1;
}
.reset-x{
	transform:translateX(30px);
	transform:translateX(3rem);
	opacity:0;
}
.reset-x.ui-stagger, .reset-x.ui-entered{
	transition:transform .9s cubic-bezier(0.06, 0.72, 0.47, 1.06), opacity .6s ease-out;
}
.reset-x.ui-stagger.staggered, .reset-x.ui-entered.entered{
	transform:translateX(0);
	opacity:1;
}
.reset-x-reverse{
	transform:translateX(-30px);
	transform:translateX(-3rem);
	opacity:0;
}
.reset-x-reverse.ui-stagger, .reset-x-reverse.ui-entered{
	transition:transform .9s cubic-bezier(0.06, 0.72, 0.47, 1.06), opacity .6s ease-out;
}
.reset-x-reverse.ui-stagger.staggered, .reset-x-reverse.ui-entered.entered{
	transform:translateX(0);
	opacity:1;
}
.reset-scale{
	transform:scale(.8);
	opacity:0;
}
.reset-scale.ui-stagger, .reset-scale.ui-entered{
	transition:transform .9s cubic-bezier(0.06, 0.72, 0.47, 1.06), opacity .6s ease-out;
}
.reset-scale.ui-stagger.staggered, .reset-scale.ui-entered.entered{
	transform:scale(1);
	opacity:1;
}
.reset-scale-reverse{
	transform:scale(1.2);
	opacity:0;
}
.reset-scale-reverse.ui-stagger, .reset-scale-reverse.ui-entered{
	transition:transform .9s cubic-bezier(0.06, 0.72, 0.47, 1.06), opacity .6s ease-out;
}
.reset-scale-reverse.ui-stagger.staggered, .reset-scale-reverse.ui-entered.entered{
	transform:scale(1);
	opacity:1;
}

/* 클래스 CSS형 */
.rbtB {
	font-family:"Roboto-Bold";
}
.rbtM {
	font-family:"Roboto-Medium";
}
.rbtL {
	font-family:"Roboto-Light";
}
.notoB{
	font-family:"NotoSansKR-Bold";
}
.notoM{
	font-family:"NotoSansKR-Medium";
}
.notoR{
	font-family:"NotoSansKR-Regular";
}
.notoL{
	font-family:"NotoSansKR-Light";
}
.iden-color{
	color:#4889ff;
}
.keyword-color{
	color:#3bba19;
}
.gray-color{
	color:#474747;
}
.align-c{
	text-align:center;
}
.align-r{
	text-align:right;
}
.fnt18{
	font-size:18px;
	font-size:1.8rem;
}
.fnt22{
	font-size:22px;
	font-size:2.2rem;
}
.fnt24{
	font-size:24px;
	font-size:2.4rem;
}
.fnt26{
	font-size:26px;
	font-size:2.6rem;
}
.fnt42{
	font-size:42px;
	font-size:4.2rem;
	line-height:1.47;
}
.fnt48{
	font-size:48px;
	font-size:4.8rem;
	line-height:1.8;
}
.fnt60{
	font-size:60px;
	font-size:6rem;
}
.fnt64{
	font-size:64px;
	font-size:6.4rem;
}
.ml55{
	margin-left:55px;
	margin-left:5.5rem;
}
.mt15{
	margin-top:15px;
	margin-top:1.5rem;
}
.mt20{
	margin-top:20px;
	margin-top:2rem;
}
.mt30{
	margin-top:30px;
	margin-top:3rem;
}
.mt40{
	margin-top:40px;
	margin-top:4rem;
}
.mt80{
	margin-top:80px;
	margin-top:8rem;
}
.mt90{
	margin-top:90px;
	margin-top:9rem;
}
.mt100{
	margin-top:100px;
	margin-top:10rem;
}
.mt110{
	margin-top:110px;
	margin-top:11rem;
}
.mt135{
	margin-top:135px;
	margin-top:13.5rem;
}
.mt150{
	margin-top:150px;
	margin-top:15rem;
}
.mt155{
	margin-top:155px;
	margin-top:15.5rem;
}
.mt190{
	margin-top:190px;
	margin-top:19rem;
}
.mt220{
	margin-top:220px;
	margin-top:22rem;
}
.mt290{
	margin-top:290px;
	margin-top:29rem;
}
.mt320{
	margin-top:320px;
	margin-top:32rem;
}
.mt350{
	margin-top:350px;
	margin-top:35rem;
}
.mt410{
	margin-top:410px;
	margin-top:41rem;
}
.mt450{
	margin-top:450px;
	margin-top:45rem;
}
.mt470{
	margin-top:470px;
	margin-top:47rem;
}
.mt530{
	margin-top:530px;
	margin-top:53rem;
}
.mt650{
	margin-top:650px;
	margin-top:65rem;
}
.mt690{
	margin-top:690px;
	margin-top:69rem;
}
.pdr70{
	padding-right:70px;
	padding-right:7.0rem;
}
.pdr75{
	padding-right:75px;
	padding-right:7.5rem;
}
.pdr95{
	padding-right:95px;
	padding-right:9.5rem;
}
.pdr205{
	padding-right:205px;
	padding-right:20.5rem;
}
.pdr185{
	padding-right:185px;
	padding-right:18.5rem;
}
.pdr225{
	padding-right:225px;
	padding-right:22.5rem;
}

.pdl55{
	padding-left:55px;
	padding-left:5.5rem;
}
.pdl115{
	padding-left:115px;
	padding-left:11.5rem;
}
.pdl125{
	padding-left:115px;
	padding-left:11.5rem;
}
.pdl170{
	padding-left:170px;
	padding-left:17rem;
}
.pdl230{
	padding-left:230px;
	padding-left:23rem;
}
.caution-tip{
	padding-left:13px;
	padding-left:1.3rem;
	color:#999999;
	font-size:26px;
	font-size:2.6rem;
	font-family:"NotoSansKR-Regular";
	line-height:1.53;
}
.caution-tip::before{
	content:"*";
	position:absolute;
	top:2px;
	top:.2rem;
	left:0;
}
.clr666{
	color: #666666;
}
.clr999{
	color: #999999;
}


/*! content */

#header{
	position:fixed;
	top:-90px;
	top:-9rem;
	left:0;
	z-index:99;
	width:100%;
	box-shadow:0 0 5px rgba(0,0,0,0.1);
	background:#fff;
}
.header-content{
	display:flex;
	justify-content:space-between;
	align-items:center;
	position:relative;
	width:1460px;
	width:146rem;
	max-width:100%;
	min-width:1024px;
	height:80px;
	height:8rem;
	margin:0 auto;
	padding:0 40px;
	padding:0 4rem;
}
.header-content .logo{
	display:flex;
	margin-top:6px;
	margin-top:.6rem;
}
.header-content .slogan-txt{
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	margin-left:16px;
	margin-left:1.6rem;
	padding-left:16px;
	padding-left:1.6rem;
	border-left:1px solid #ddd;
	height:35px;
	height:3.5rem;
	color:#aaaaaa;
	font-family:"NotoSansKR-Medium";
	font-size:16px;
	font-size:1.6rem;
}
.header-content .ancher-lists{
	display:flex;
	font-size:26px;
	font-size:2.6rem;
	font-family:"NotoSansKR-Regular";
	height:100%;
	transform:translateY(-100%)
}
.header-content .ancher-lists .list {
	display:flex;
	align-items:center;
}
.header-content .ancher-lists .list +.list{
	margin-left:80px;
	margin-left:8rem;
}
.header-content .ancher-lists .list .link{
	color:#aaaaaa;
	transition:color .15s ease-in-out;
}
.header-content .ancher-lists .list .link:hover{
	color:#4888ffc6;
}
.header-content .ancher-lists .list .link.on{
	color:#4889ff;
}


/* 프로모션 탑 배너 영역 */

.main-promotion-top-container{
	overflow:hidden;
	position:relative;
}
.promotion-wrapper{
	position:relative;
	width:1460px;
	max-width:100%;
	height:100vh;
	margin:0 auto;
	padding:0 40px;
	padding:0 4rem;
}
.promotion-wrapper .ancher-lists{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
}
.promotion-wrapper .sequence-area{
	position:absolute;
	right:calc(50% - 275px);
	right:calc(50% - 27.5rem);
	top:calc(50% - 275px);
	top:calc(50% - 27.5rem);
	width:550px;
	width:55rem;
	height:550px;
	height:55rem;
}


/* 인트로 영역 */

.promotion-wrapper .intro-container{
	overflow:hidden;
	position:absolute;
	top:50%;
	right:0;
	/* right:50%;  */
	/* width:200vw;  */
	width:550px;
	width:55rem;
	border-radius:50%;
	background-color:#4889ff;
	/* transform:translate(50% , -50%); */
	transform:translateY(-50%);
}
.promotion-wrapper .intro-container::after{
	content:"";
	display:block;
	position:relative;
	z-index:1;
	padding-top:100%;
	width:100%;
}
.promotion-wrapper .fixed-content{
	position:absolute;
	top:50%;
	left:50%;
	z-index:2;
	text-align:center;
	white-space:nowrap;
	transform:translate(-50%,-50%);
}
.promotion-wrapper .logo-txt{
	position:relative;
	width:350px;
	width:35rem;
	background-color:#fff;
	transform-origin:center;
	transform:scale(540) translate(10px, 6px);
	transform:scale(540) translate(1rem, .6rem);
	/* image-rendering:pixelated; */
}
.promotion-wrapper .slogan{
	display:block;
	color:#fff;
	font-family:"NotoSansKR-Light";
	font-size:80px;
	font-size:8rem;
	font-weight:normal;
}
.promotion-wrapper .slogan.txt01{
	margin-top:40px;
	margin-top:4rem;
}
.promotion-wrapper .slogan.txt02{
	margin-top:20px;
	margin-top:2rem;
}


/* 탑 부분 엥커 영역  */

.promotion-wrapper .ancher-lists .list{
	font-size:44px;
	font-size:4.4rem;
}
.promotion-wrapper .ancher-lists .list *{
	display:inline-block;
}
.promotion-wrapper .ancher-lists .list .notoL{
	display:block;
	font-size:28px;
	font-size:2.8rem;
	margin-bottom:20px;
	margin-bottom:2rem;
}
.promotion-wrapper .ancher-lists .list + .list{
	margin-top:60px;
	margin-top:6rem;
}
.promotion-wrapper .ancher-lists .link strong{
	transition:color .15s ease-out;
}
.promotion-wrapper .ancher-lists .link:hover strong{
	color:#4888ffc6;
}
.promotion-wrapper .ancher-lists .link:hover .icon-ancher{
	/* transform:translate(-7px,-7px);
	transform:translate(-.7rem,-.7rem); */
	transform:translate(0,0);
	opacity:.3;
}
.promotion-wrapper .ancher-lists .link.on strong{
	color:#4889ff;
}
.promotion-wrapper .ancher-lists .icon-ancher{
	vertical-align:3px;
	vertical-align:.3rem;
	transform:translate(-10px,-10px);
	transform:translate(-1rem,-1rem);
	opacity:0;
	transition:transform .45s ease-in-out, opacity .45s ease-in-out;
}
.promotion-wrapper .ancher-lists .link.on .icon-ancher{
	transform:translate(0,0);
	opacity:1;
}


/* 스와이프 모션 부분  */

.promotion-wrapper .sequence-container{
	overflow:visible;
	position:absolute;
	top:calc(50% - 275px);
	top:calc(50% - 27.5rem);
	right:0;
	width:inherit;
	height:inherit;
}
.promotion-wrapper .sequence-container .swiper-slide{
	opacity:0;
}
.promotion-wrapper .sequence-container .sequence-box{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.promotion-wrapper .sequence-container .sequence-pagination{
	position:absolute;
	bottom:-60px;
	bottom:-6rem;
	z-index:10;
	width:100%;
	text-align:center;
}
.promotion-wrapper .sequence-container .swiper-pagination-bullet{
	width:8px;
	width:.8rem;
	height:8px;
	height:.8rem;
	border-radius:4px;
	border-radius:.4rem;
	background-color:#e5e5e5;
	opacity:1;
	transition:background-color .35s ease-out, width .35s ease-out;
}
.promotion-wrapper .sequence-container .swiper-pagination-bullet-active{
	width:16px;
	width:1.6rem;
	height:8px;
	height:.8rem;
	background-color:#4889ff;
}
.promotion-wrapper .sequence-container [class*=icon]{
	position:absolute;
	filter:drop-shadow(0 0 5px rgba(0,0,0,0.2));
	filter:drop-shadow(0 0 .5rem rgba(0,0,0,0.2));
}
.sequence-container .icon-line-small{
	top:calc(50% - 110px);
	top:calc(50% - 11rem);
	left:calc(50% - 110px);
	left:calc(50% - 11rem);
	transform:scale(0);
	opacity:0;
}
.sequence-container .icon-line-small-dash{
	top:calc(50% - 140px);
	top:calc(50% - 14rem);
	left:calc(50% - 140px);
	left:calc(50% - 14rem);
	border:1px dashed #7fadff;
	border-radius:50%;
	width:280px;
	width:28rem;
	height:280px;
	height:28rem;
	transform:scale(0);
	opacity:0;
}
.sequence-container .icon-line-middle{
	top:calc(50% - 199px);
	top:calc(50% - 19.9rem);
	left:calc(50% - 199px);
	left:calc(50% - 19.9rem);
	transform:scale(0);
	opacity:0;
}
.sequence-container .icon-line-out{
	top:calc(50% - 297px);
	top:calc(50% - 29.7rem);
	left:calc(50% - 297px);
	left:calc(50% - 29.7rem);
	transform:scale(0);
	opacity:0;
}
.sequence-container [class*="icon-pop-ball"]{
	top:calc(50% - 199px);
	top:calc(50% - 19.9rem);
	left:calc(50% - 199px);
	left:calc(50% - 19.9rem);
}
.sequence-container [class*="icon-pop-ball"].large{
	top:calc(50% - 297px);
	top:calc(50% - 29.7rem);
	left:calc(50% - 297px);
	left:calc(50% - 29.7rem);
}
.main-promotion-top-container .video-popup-btn{
	position:absolute;
	right:60px;
	right:6rem;
	bottom:100px;
	bottom:10rem;
	z-index:3;
	transform:translateX(300px);
}



/* 슈가핏 */
.sequence-container .icon-sugarfit01_01{
	top:163px;
	top:16.3rem;
	left:160px;
	left:16rem;
}
.sequence-container .icon-sugarfit01_01.on{
	opacity:1;
}
.sequence-container .icon-sugaritem01_01{
	top:30px;
	top:3rem;
	right:40px;
	right:4rem;

}
.sequence-container .icon-sugaritem01_01.on{
	animation:cloudy infinite 5s ease-in-out forwards;
}
.sequence-container .icon-sugaritem01_02{
	bottom:20px;
	bottom:2rem;
	left:30px;
	left:3rem;
}
.sequence-container .icon-sugaritem01_02.on{
	animation:cloudyReverse infinite 5s ease-in-out forwards;
	animation-delay:.3s;
}

/* 편의서비스 */
.sequence-container .icon-service{
	top:100px;
	top:10rem;
	left:90px;
	left:9rem;
}
.sequence-container .icon-service.on{
	opacity:1;
}
.sequence-container .icon-serviceitem01_01{
	bottom:50px;
	bottom:5rem;
	left:0px;
	left:0rem;
}
.sequence-container .icon-serviceitem01_01.on{
	animation:cloudy infinite 5s ease-in-out forwards;
}
.sequence-container .icon-serviceitem01_02{
	top:20px;
	top:2rem;
	right:30px;
	right:3rem;
}
.sequence-container .icon-serviceitem01_02.on{
	animation:cloudyReverse infinite 5s ease-in-out forwards;
	animation-delay:.3s;
}
.sequence-container .icon-serviceitem01_03{
	bottom:30px;
	bottom:3rem;
	right:20px;
	right:2rem;
}
.sequence-container .icon-serviceitem01_03.on{
	animation:cloudy infinite 5s ease-in-out forwards;
}



/* 모션 첫번째 */

.sequence-container [class*="icon-pop-ball"]::after{
	transition:transform 1s cubic-bezier(0.31, 0.71, 0.52, 1.46), opacity .5s cubic-bezier(0.31, 0.71, 0.52, 1.46);
	transform:scale(0.8);
	opacity:0;
}
.sequence-container [class*="icon-pop-ball"].on::after{
	transform:scale(1);
	opacity:1;
}
.sequence-container .icon-balloon01{
	top:250px;
	top:25rem;
	left:110px;
	left:11rem;
}
.sequence-container .icon-balloon01.on .white-dot{
	opacity:1;
	animation:dotdot infinite 2.5s ease-in-out forwards;
}
.sequence-container .icon-balloon01 .white-dot:nth-child(1){
	animation-delay:.25s;
}
.sequence-container .icon-balloon01 .white-dot:nth-child(2){
	animation-delay:.5s;
}
.sequence-container .icon-balloon01 .white-dot:nth-child(3){
	animation-delay:.75s;
}
.sequence-container .icon-balloon02.on .txt span:nth-child(1){
	animation-delay:.1s;
}
.sequence-container .icon-balloon02.on .txt span:nth-child(2){
	animation-delay:.2s;
}
.sequence-container .icon-balloon02.on .txt span:nth-child(3){
	animation-delay:.3s;
}
.sequence-container .icon-balloon02.on .txt span:nth-child(4){
	animation-delay:.4s;
}
.sequence-container .icon-balloon02.on .txt span:nth-child(5){
	animation-delay:.5s;
}
.sequence-container .icon-balloon02.on .txt span:nth-child(6){
	animation-delay:.6s;
}
.sequence-container .icon-balloon02.on .txt span:nth-child(7){
	animation-delay:.9s;
}
.sequence-container .icon-balloon02{
	top:165px;
	top:16.5rem;
	left:190px;
	left:19rem;
}
.sequence-container [class*=icon-item01].on{
	animation:infinite 5s ease-in-out forwards;
}
.sequence-container .icon-item01_01{
	top:0;
	left:30px;
	left:3rem;
}
.sequence-container .icon-item01_02{
	top:65px;
	top:6.5rem;
	right:0;
}
.sequence-container .icon-item01_03{
	bottom:107px;
	bottom:10.7rem;
	left:-20px;
	left:-2rem;
}
.sequence-container .icon-item01_04{
	bottom:2px;
	bottom:.2rem;
	right:42px;
	right:4.2rem;
}
.sequence-container .icon-item01_01.on{
	animation-name:cloudy;
}
.sequence-container .icon-item01_02.on{
	animation-name:cloudy;
	animation-delay:.3s;
}
.sequence-container .icon-item01_03.on{
	animation-name:cloudyReverse;
	animation-delay:.5s;
}
.sequence-container .icon-item01_04.on{
	animation-name:cloudyReverse;
	animation-delay:.7s;
}


/* 모션 두번째 */

.sequence-container .icon-calendar{
	top:calc(50% - 126px);
	top:calc(50% - 12.6rem);
	left:calc(50% - 134px);
	left:calc(50% - 13.4rem);
}
.sequence-container .icon-ribbon01{
	top:240px;
	top:24rem;
	left:60px;
	left:6rem;
	transform-origin:100px 10px;
	transform-origin:10rem 1rem;
	transform:rotate(-35deg) scale(0.8);
	opacity:0;
	transition:transform 1s cubic-bezier(0.51, 0.58, 0.42, 1.5), opacity .25s ease-in-out;
}
.sequence-container .icon-ribbon02{
	top:240px;
	top:24rem;
	right:66px;
	right:6.6rem;
	transform-origin:10px 10px;
	transform-origin:1rem 1rem;
	transform:rotate(35deg) scale(0.8);
	opacity:0;
	transition:transform 1s cubic-bezier(0.51, 0.58, 0.42, 1.5), opacity .25s ease-in-out;
}
.sequence-container .icon-ribbon02.on,.sequence-container .icon-ribbon01.on{
	transform:rotate(0) scale(1);
	opacity:1;
}
.sequence-container .icon-bell{
	top:190px;
	top:19rem;
	right:130px;
	right:13rem;
	transform-origin:40px 0;
	transform-origin:4rem 0;
}
.sequence-container .icon-bell.on{
	animation:ringring infinite 4s ease-in-out forwards;
}
.sequence-container .icon-item02_01{
	top:70px;
	top:7rem;
	right:-30px;
	right:-3rem;
	animation:cloudy infinite 5s ease-in-out forwards;
}
.sequence-container .icon-flag{
	bottom:-10px;
	bottom:-1rem;
	left:-30px;
	left:-3rem;
	animation:cloudyReverse infinite 5s ease-in-out forwards;
}
.sequence-container .icon-care-banners{
	bottom:110px;
	bottom:11rem;
	left:80px;
	left:8rem;
	z-index:2;
}


/* 모션 세번째 */

.sequence-container .icon-phone-mockup{
	top:55px;
	top:5.5rem;
	left:95px;
	left:9.5rem;
}
.sequence-container .icon-pills{
	bottom:0;
	right:115px;
	right:11.5rem;
}
.sequence-container .icon-dumbbell{
	top:120px;
	top:12rem;
	left:calc(50% - 134px);
	left:calc(50% - 13.4rem);
}
.sequence-container .icon-bell{
	top:190px;
	top:19rem;
	right:130px;
	right:13rem;
	transform-origin:40px 0;
	transform-origin:4rem 0;
}
.sequence-container .icon-bell.on{
	animation:ringring infinite 4s ease-in-out forwards;
}
.sequence-container .icon-item02_01{
	top:70px;
	top:7rem;
	right:-30px;
	right:-3rem;
	animation:cloudy infinite 5s ease-in-out forwards;
}
.sequence-container .icon-flag{
	bottom:-10px;
	bottom:-1rem;
	left:-30px;
	left:-3rem;
	animation:cloudyReverse infinite 5s ease-in-out forwards;
}


/* 모션 세번째 */

.sequence-container .icon-dumbbell{
	top:120px;
	top:12rem;
	left:-55px;
	left:-5.5rem;
}
.sequence-container .icon-dumbbell.on{
	animation:cloudy infinite 5s ease-in-out forwards;
}
.gauge-box{
	position:absolute;
	top:calc(50% - 70px);
	top:calc(50% - 7rem);
	left:calc(50% - 174px);
	left:calc(50% - 17.4rem);
	border-radius:30px;
	border-radius:3rem;
	width:348px;
	width:34.8rem;
	height:100px;
	height:10rem;
	background-color:#41d1be;
}
.gauge-box .gauge-area{
	position:absolute;
	top:calc(50% - 8px);
	top:calc(50% - .8rem);
	left:37px;
	left:3.7rem;
	border-radius:5px;
	border-radius:.5rem;
	width:calc(100% - 74px);
	width:calc(100% - 7.4rem);
	height:16px;
	height:1.6rem;
	background-color:#039d89;
}
.gauge-box .gauge-line{
	position:absolute;
	top:0;
	left:0;
	border-radius:5px;
	border-radius:.5rem;
	width:0;
	height:100%;
	background-color:#fff;
}
.gauge-box .icon-gauge-arrow{
	position:absolute;
	top:-16px;
	top:-1.6rem;
	right:-41px;
	right:-4.1rem;
}
.gauge-box .icon-shoes{
	bottom:40px;
	bottom:4rem;
	right:-33px;
	right:-3.3rem;
	transform:translateY(-15px);
	transform:translateY(-1.5rem);
	opacity:0;
}
/* AI 건강관상 */
.sequence-container [class*=icon-item05].on{
	animation:infinite 5s ease-in-out forwards;
}
.sequence-container .icon-item05_01{
	top:65px;
	top:6.5rem;
	right:0;
}
.sequence-container .icon-item05_02{
	bottom:107px;
	bottom:10.7rem;
	left:-20px;
	left:-2rem;
}
.sequence-container .icon-item05_03{
	bottom:2px;
	bottom:.2rem;
	right:42px;
	right:4.2rem;
}
.sequence-container .icon-item05_01.on{
	animation-name:cloudy;
}
.sequence-container .icon-item05_02.on{
	animation-name:cloudy;
	animation-delay:.3s;
}
.sequence-container .icon-item05_03.on{
	animation-name:cloudyReverse;
	animation-delay:.5s;
}
.sequence-container .icon-physiognomy{
	top:177px;
	top:17.7rem;
	left:184px;
	left:18.4rem;
}
.sequence-container .icon-physiognomy.on{
	opacity:1;
}
.sequence-container .icon-timer{
	top:347px;
	top:34.7rem;
	left:324px;
	left:32.4rem;
	animation:tictoc infinite 2s ease-in-out forwards;
}
.sequence-container .icon-timer.on {
	opacity:1;
}


/* 모션 네번째 */

.sequence-container .icon-smile{
	bottom:130px;
	bottom:13rem;
	left:156px;
	left:15.6rem;
	z-index:2;
}
.sequence-container .icon-animal{
	bottom:130px;
	bottom:13rem;
	left:48px;
	left:4.8rem;
	z-index:2;
	animation:charAni infinite 5s ease-in-out forwards;
}
.sequence-container .icon-animal.on{
	animation:charAni infinite 4s ease-in-out forwards;
}
.sequence-container .icon-hand{
	top:225px;
	top:22.5rem;
	left:50%;
	z-index:5;
	animation:handAni infinite 5s ease-in-out forwards;
}
.sequence-container .icon-hand.on{
	z-index:5;
	animation:handAni infinite 4s ease-in-out forwards;
}


/*  메인 컨텐츠 시작 */

.section{
	width:1460px;
	padding:0 40px;
	padding:0 4rem;
	max-width:100%;
	margin:0 auto;
	position:relative;
	line-height:1.4;
}
.section.area01,.section.area02,.section.area03,.section.area04{
	padding-top:100px;
	padding-top:10rem;
}
.section.mt100{
	margin-top:100px;
	margin-top:10rem;
}
.section.mt250{
	margin-top:250px;
	margin-top:25rem;
}
.section .box{
	display:flex;
	position:relative;
}
.section .box.column-type{
	flex-direction:column;
}
.section .txt-box{
	flex:0 0 auto;
}
.section .img-box{
	flex:1 0 auto;
	position:relative;
}
.section .img-box img{
	position:absolute;
	max-width:100%;
}
.section .img-box.relative img{
	position:relative;
}

/* 슈가핏 컨텐츠 */
.area00 .box01{
	height:470px;
	height:47rem;
}
.area00 .box02{
	height:540px;
	height:54rem;
}
.area00 .box02 .txtpd{
	padding-top: 170px;
	padding-top: 17rem;
}
.area00 .box03{
	height:690px;
	height:69rem;
}
.area00 .box03 .txtpd{
	padding: 250px 0 0 118px;
	padding: 25rem 0 0 11.8rem;
}
.area00 .box04{
	height:540px;
	height:54rem;
}
.area00 .box04 .txtpd{
	padding-top: 180px;
	padding-top: 18rem;
}
.area00 .box05{
	height:712px;
	height:71.2rem;
}
.area00 .box05 .txtpd{
	padding: 230px 0 0 118px;
	padding: 23rem 0 0 11.8rem;
}
.area00 .box06{
	height:560px;
	height:56rem;
}
.area00 .box06 .txtpd{
	padding-top: 160px;
	padding-top: 16rem;
}
.area00 .box07{
	height:700px;
	height:70rem;
}
.area00 .box07 .txtpd{
	padding: 150px 0 0 118px;
	padding: 15rem 0 0 11.8rem;
}
.area00 .box08{
	margin-top: 180px;
	margin-top: 18rem;
	height:1000px;
	height:100rem;
}
.area00 .box08 .img-box{
	margin-top: 60px;
	height: 651px;
	height: 65.1rem;
}
.area00 .box08 .img{
	left: 50%;
	margin-left: -455px;
	margin-left: -45.5rem;
}

/* 건강체크 컨텐츠 */

.area01 .box01{
	height:790px;
	height:79rem;
}
.area01 .box01 .img03{
	top:0;
	right:30px;
	right:3rem;
	z-index:2;
}
.area01 .box01 .img04{
	right:330px;
	right:33rem;
	top:300px;
	top:30rem;
	z-index:3;
}
.area01 .box01 .signal-box{
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
	position:absolute;
	bottom:65px;
	bottom:6.5rem;
	right:230px;
	right:23rem;
	z-index:1;
	width:444px;
	width:44.4rem;
	height:343px;
	height:34.3rem;
}
.area01 .box01 .signal-box [class*=line]{
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
	border-radius:10px;
	border-radius:1rem;
	width:73px;
	width:7.3rem;
	height:20%;
	background-color:#f8f8f8;
}
.area01 .box01 .signal-box [class*=line]{
	border-radius:10px;
	border-radius:1rem;
	box-shadow:0 0 20px 0 rgba(0,0,0,0.1);
	width:73px;
	width:7.3rem;
	height:0;
	background-color:#f8f8f8;
	transition:height 1.2s ease-in-out;
}
.area01 .box01 .signal-box .line01.staggered{
	height:20%;
}
.area01 .box01 .signal-box .line02.staggered{
	height:40%;
	transition-delay:.1s;
}
.area01 .box01 .signal-box .line03.staggered{
	height:60%;
	transition-delay:.2s;
}
.area01 .box01 .signal-box .line04.staggered{
	height:80%;
	transition-delay:.3s;
}
.area01 .box01 .signal-box .line05.staggered{
	height:100%;
	transition-delay:.4s;
}
.area01 .img01{
	top:-360px;
	top:-36rem;
	left:50px;
	left:5rem;
}
.area01 .img02{
	top:-60px;
	top:-6rem;
	left:320px;
	left:32rem;
}
/* .area01 .box03{
	height:1000px;
	height:100rem;
}
.area01 .box03 .img06{
	right:240px;
	right:24rem;
	top:70px;
	top:7rem;
	transition-delay:.6s;
}
.area01 .box03 .img07{
	top:80px;
	top:8rem;
	right:245px;
	right:24.5rem;
	transition-delay:.2s;
}
.area01 .box03 .img08{
	top:310px;
	top:31rem;
	left:140px;
	left:14rem;
	transition-delay:.5s;
}
.area01 .box03 .img09{
	bottom:-40px;
	bottom:-4rem;
	right:100px;
	right:10rem;
	transition-delay:.8s;
}
.area01 .box03 .img05{
	top:250px;
	top:25rem;
	left:80px;
	left:8rem;
}  */
.area01 .box03{
	height:680px;
	height:68rem;
}
.area01 .box03 .img04{
	right:100px;
	right:10rem;
	top:-70px;
	top:-7rem;
}
.area01 .box03 .img11{
	top:-40px;
	top:-4rem;
	right:80px;
	right:8rem;
	z-index:2;
}
.area01 .box04 .img05{
	right:180px;
	right:18rem;
	top:-442px;
	top:-44.2rem;
}
.area01 .box04 .img12{
	top:-390px;
	top:-39rem;
	right:50px;
	right:5rem;
	z-index:2;
}
.area01 .box05{
	margin-bottom:100px;
	margin-bottom:10rem;
	height:840px;
	height:84rem;
}
.area01 .box05 .swiper-container img{
	position:relative;
	transform:scale(.57);
	transition:transform .35s cubic-bezier(0.43, -0.12, 0.13, 1.12);;
}
.area01 .box05 .swiper-container .scale-on img{
	position:relative;
	transform:scale(1);
	transition:transform .5s cubic-bezier(0.43, -0.12, 0.13, 1.12);;
}
.area01 .box05 .img10{
	top:40px;
	top:4rem;
	left:calc(50% - 225px);
	left:calc(50% - 22.5rem);
}
.area01 .box05 .swiper-container{
	position:absolute;
	top:275px;
	top:27.5rem;
	left:calc(50% - 365px);
	left:calc(50% - 36.5rem);
	width:720px;
	width:72rem;
}
.area01 .box05 .swiper-container::after{
	content:"";
	position:absolute;
	top:0;
	left:0;
	z-index:1;
	width:40px;
	width:4rem;
	height:100%;
	background:linear-gradient(to right, rgba(255,255,255,.8) 35%,rgba(255,255,255,0) 100%);
}
.area01 .box05 .swiper-container::before{
	content:"";
	position:absolute;
	top:0;
	right:0;
	z-index:1;
	width:40px;
	width:4rem;
	height:100%;
	background:linear-gradient(to left, rgba(255,255,255,.8) 35%,rgba(255,255,255,0) 100%);
}
.area01 .box05 .swiper-slide{
	text-align:center;
}


/* 두번째 컨텐츠 */

.area02 .box02 .img-box{
	display:flex;
	align-items:center;
	justify-content:flex-start;
}
.area02 .box02 .img-box .count-up-box {
	display:flex;
	align-items:center;
	position:relative;
	padding-left:110px;
	padding-left:11rem;
}
.area02 .box02 .img-box .count-up-box .img01{
	position:absolute;
	top:33px;
	top:3.3rem;
	left:0;
	z-index:1;
}
.area02 .box02 .img-box .ui-count-up-area{
	display:flex;
	align-items:center;
	font-family:"Roboto-Bold";
	font-size:130px;
	font-size:13rem;
}
.area02 .box02 .img-box .ui-count-up-area .count{
	border-radius:30px;
	border-radius:3rem;
	box-shadow:5px 5px 30px rgba(0,0,0,0.1);
	width:138px;
	width:13.8rem;
	height:187px;
	height:18.7rem;
	text-align:center;
	background-color:#fff;
}
.area02 .box02 .img-box .txt{
	margin-left:5px;
}
.area02 .box02 .img-box .ui-count-up-area .count + .count{
	margin-left:12px;
	margin-left:1.2rem;
}
.area02 .box02 .img-box img + img{
	margin-left:20px;
	margin-left:2rem;
}
.area02 .box02 .img-box img:nth-child(2) {
	transition-delay:.1s;
}
.area02 .box02 .img-box img:nth-child(3) {
	transition-delay:.2s;
}
.area02 .box02 .img-box .count-up-box .ui-stagger:nth-child(1) {
	transition-delay:.3s;
}
.area02 .box02 .img-box .count-up-box .ui-stagger:nth-child(2) {
	transition-delay:.4s;
}
.area02 .box02 .img-box .count-up-box .ui-stagger:nth-child(3) {
	transition-delay:.5s;
}
.area02 .box02 .img-box .ml55{
	margin-left:55px;
	margin-left:5.5rem;
}
.area02 .box02 .img-box .ml55{
	margin-left:55px;
	margin-left:5.5rem;
}
.area02 .box03 .img01{
	top:-140px;
	top:-14rem;
	left:50px;
	left:5rem;
}
.area02 .box03 .img02 {
	top:0;
	left:207px;
	left:20.7rem;
	transform:rotate(0);
	transition:transform 2s cubic-bezier(0.44, -0.35, 0.15, 1.32);
}
.area02 .box03 .img02.staggered{
	transform:rotate(360deg);
}
.area02 .box03 .skeleton-line-box {
	position:absolute;
	top:150px;
	top:15rem;
	left:150px;
	left:15rem;
}
.area02 .box03 .skeleton-line-box .line01{
	border-radius:6px;
	border-radius:.6rem;
	width:0;
	height:26px;
	height:2.6rem;
	background-color:#f3f3f3;
	transition:width .8s ease-out;
}
.area02 .box03 .skeleton-line-box .line02{
	margin-top:20px;
	margin-top:2rem;
	border-radius:6px;
	border-radius:.6rem;
	width:0;
	width:0;
	height:26px;
	height:2.6rem;
	background-color:#f3f3f3;
	transition:width .8s ease-out;
}
.area02 .box03 .skeleton-line-box .line01.staggered{
	width:237px;
	width:23.7rem;
}
.area02 .box03 .skeleton-line-box .line02.staggered{
	width:169px;
	width:16.9rem;
}
.area02 .box03 .img02 {
	top:-10px;
	top:-1rem;
	left:207px;
	left:20,7rem;
}
.area02 .box03 .health-box{
	overflow:hidden;
	position:absolute;
	top:270px;
	top:27rem;
	left:108px;
	left:10.8rem;
	padding:0 42px;
	padding:0 4.2rem;
	width:1140px;
	width:114rem;
	/* width:32.8rem;  */
}
.area02 .box03 .health-wrapper{
	display:flex;
	flex-wrap:nowrap;
}
.area02 .box03 .health-box .health-wrapper >div{
	display:flex;
	flex-wrap:nowrap;
	flex:1 0 auto;
	justify-content:space-between;
	width:100%;
}
.area02 .box03 .health-box img{
	flex:0 0 auto;
	position:relative;
	transition:transform .8s ease-in-out;
}
.area02 .box03 .health-box img.ui-stagger{
	transform:rotateX(90deg);
	/* transform:rotateX(90.8rem); */
}
.area02 .box03 .health-box img.ui-stagger.staggered{
	transform:rotateX(0);
	/* transform:rotateX(90.8rem); */
}
.area02 .box03 .health-box .health-wrapper.staggered .group1{
	animation:lineMoveWay 10s .5s infinite linear;
}
.area02 .box03 .health-box .health-wrapper.staggered .group2{
	margin-left:54px;
	margin-left:5.4rem;
	animation:lineMoveWay 10s .5s infinite linear;
}
/*.area02 .box03 .health-box img + img{
	margin-left:54px;
	margin-left:5.4rem;
}*/
.area02 .box03 .health-box .shadow{
	position:absolute;
	top:-5px;
	top:-.5rem;
	z-index:1;
	width:48px;
	width:4.8rem;
	height:calc(100% + 10px);
	height:calc(100% + 1rem);
}
.area02 .box03 .health-box .shadow.left{
	left:0;
	box-shadow:inset 24px 0 10px rgba(255,255,255,1);
	box-shadow:inset 2.4rem 0 1rem rgba(255,255,255,1);
}
.area02 .box03 .health-box .shadow.right{
	left:280px;
	left:28rem;
	box-shadow:inset -24px 0 10px rgba(255,255,255,1);
	box-shadow:inset -2.4rem 0 1rem rgba(255,255,255,1);
}
.area02 .box03 .health-box .shadow.right.ended{
	right:0;
	left:auto;
	box-shadow:inset -50px 0 25px rgba(255,255,255,1);
	/* box-shadow:inset -2.4rem 0 1rem rgba(255,255,255,1);  */
	width:100px;
	width:10rem;
}
.area02 .box04{
	align-items:center;
}
.area02 .box04 .img-box{
	flex-basis:auto;
	width:830px;
	width:83rem;
	height:240px;
	height:24rem;
}
.area02 .box04 .flow-box{
	position:absolute;
	top:calc(50% - 100px);
	top:calc(50% - 10rem);
	left:calc(50% - 15px);
	left:calc(50% - 1.5rem);
}
.area02 .box04 [class*="icon-flower-powder"]{
	position:absolute;
}
.area02 .box04 [class*="flower-arounder"]{
	position:absolute;
	height:30px;
	height:3rem;
}
.area02 .box04 [class*="flower-arounder"].right{
	position:absolute;
	height:30px;
	height:3rem;
	transform-origin:right 15px;
	transform-origin:right 1.5rem;
}
.area02 .box04 .right [class*="icon-flower-powder"]{
	right:0;
}
.area02 .box04 [class*="flower-arounder"].left{
	position:absolute;
	left:0;
	height:30px;
	height:3rem;
	transform-origin:left 15px;
	transform-origin:left 1.5rem;
}
.area02 .box04 .flower-arounder01{
	left:-210px;
	left:-21rem;
	width:210px;
	width:21rem;
	/* transform:rotate(15deg); */
	transform:rotate(0);
}
.area02 .box04 .flower-arounder02{
	left:-420px;
	left:-42rem;
	width:420px;
	width:42rem;
	/* transform:rotate(15deg); */
	transform:rotate(-10deg);
}
.area02 .box04 .flower-arounder03{
	left:-420px;
	left:-42rem;
	width:420px;
	width:42rem;
	transform:rotate(-25deg);
}
.area02 .box04 .flower-arounder04{
	left:-260px;
	left:-26rem;
	width:260px;
	width:26rem;
	transform:rotate(-43deg);
}
.area02 .box04 .flower-arounder05{
	width:420px;
	width:42rem;
	/* transform:rotate(-15deg); */
	transform:rotate(-5deg);
}
.area02 .box04 .flower-arounder05 i{
	right:420px;
	right:42rem;
}
.area02 .box04 .flower-arounder06{
	width:310px;
	width:31rem;
	transform:rotate(31deg);
}
.area02 .box04 .flower-arounder06 i{
	right:310px;
	right:31rem;
}
.area02 .box04 .flower-arounder07{
	width:450px;
	width:45rem;
	transform:rotate(25deg);
}
.area02 .box04 .flower-arounder07 i{
	right:450px;
	right:45rem;
}
.area02 .box04 .flower-arounder08{
	left:-350px;
	left:-35rem;
	width:350px;
	width:35rem;
	/* transform:rotate(15deg); */
	transform:rotate(0);
}
.area02 .box04 .flower-arounder09{
	left:-310px;
	left:-31rem;
	width:310px;
	width:31rem;
	transform:rotate(-22deg);
}
.area02 .box04 .flower-arounder10{
	left:-140px;
	left:-14rem;
	width:140px;
	width:14rem;
	transform:rotate(-22deg);
}
.area02 .box04 .flower-arounder11{
	width:250px;
	width:25rem;
	/* transform:rotate(-15deg); */
	transform:rotate(-7deg);
}
.area02 .box04 .flower-arounder11 i{
	right:250px;
	right:25rem;
}
.area02 .box04 .flower-arounder12{
	width:390px;
	width:39rem;
	transform:rotate(15deg);
}
.area02 .box04 .flower-arounder12 i{
	right:390px;
	right:39rem;
}
.area02 .box04 .flower-arounder13{
	width:230px;
	width:23rem;
	transform:rotate(15deg);
}
.area02 .box04 .flower-arounder13 i{
	right:230px;
	right:23rem;
}
.area02 .box04 .flower-arounder14{
	width:230px;
	width:23rem;
	transform:rotate(50deg);
}
.area02 .box04 .flower-arounder14 i{
	right:230px;
	right:23rem;
}
.area02 .box04 .gauge-box{
	flex-basis:auto;
	position:absolute;
	top:calc(50% - 85px);
	top:calc(50% - 8.5rem);
	left:calc(50% - 300px);
	left:calc(50% - 30rem);
	border-radius:60px;
	border-radius:6rem;
	width:600px;
	width:60rem;
	height:170px;
	height:17rem;
	background-color:#e9f1ff;
}
.area02 .box04 .gauge-area{
	position:absolute;
	top:calc(50% - 12px);
	top:calc(50% - 1.2rem);
	left:50px;
	left:5rem;
	border-radius:15px;
	border-radius:1.5rem;
	width:calc(100% - 100px);
	width:calc(100% - 10rem);
	height:24px;
	height:2.4rem;
	background-color:#fff;
}
.area02 .box04 .gauge-line{
	border-radius:15px;
	border-radius:1.5rem;
	background-color:#4889ff;
}
.area02 .box04 .gauge-area .icon-gauge-fire{
	position:absolute;
	top:-30px;
	top:-3rem;
	right:-70px;
	right:-7rem;
}
.area02 .box04 .guage-count{
	display:flex;
	justify-content:center;
	align-items:center;
	position:absolute;
	top:-36px;
	top:-3.6rem;
	left:calc(50% - 90px);
	left:calc(50% - 9rem);
	border-radius:72px;
	border-radius:7.2rem;
	width:180px;
	width:18rem;
	height:72px;
	height:7.2rem;
	color:#fff;
	font-family:"Roboto-Medium";
	font-size:32px;
	font-size:3.2rem;
	background-color:#222222;
}
.area02 .box04 .guage-count .count{
	color:#7aa9ff;
}
.area02 .box04 .guage-count .slash{
	margin:0 7px;
	margin:0 .7rem;
	color:#656565;
}
/* AI 건강관상 */
.area02 .ai-box.box01 {
	justify-content:space-between;
}
.area02 .ai-box.box01 .img-box {
	flex:none;
	width:328px;
	width:32.8rem;
	margin-right:133px;
	margin-right:13.3rem;
}
.area02 .ai-box.box01 .img-box .icon-scanner {
	position:absolute;
}
.area02 .ai-box.box01 .img-box .icon-scanner01,
.area02 .ai-box.box01 .img-box .icon-scanner02,
.area02 .ai-box.box01 .img-box .icon-scanner03,
.area02 .ai-box.box01 .img-box .icon-scanner04,
.area02 .ai-box.box01 .img-box .icon-scanner05{
	position:absolute;
	top:0;
	left:0;
	opacity:0;
}
.area02 .ai-box.box01 .img-box .icon-scanner01.staggered {
	animation:opacity01 4s linear;
	transition:animation 2s;
}
.area02 .ai-box.box01 .img-box .icon-scanner02.staggered {
	animation:opacity02 4s linear;
	transition:animation 2s;
}
.area02 .ai-box.box01 .img-box .icon-scanner03.staggered {
	animation:opacity03 4s linear;
	transition:animation 2s;
}
.area02 .ai-box.box01 .img-box .icon-scanner04.staggered {
	animation:opacity04 4s linear;
	transition:animation 2s;
}
.area02 .ai-box.box01 .img-box .icon-scanner05.staggered {
	animation:opacity05 4s linear;
	transition:animation 2s;
	opacity:1;
}
.area02 .ai-box.box02 .img-box {
	display:block;
}
.area02 .ai-box.box02 .img-box [class^="icon-gauge-bar"] {
	display:block;
	margin:0 auto;
}
.area02 .ai-box.box02 .img-box [class^="icon-gauge-bar"] + [class^="icon-gauge-bar"] {
	margin:22px auto 0;
	margin:2.2rem auto 0;
}
.area02 .ai-box.box03 {
	margin-top:80px;
	margin-top:8rem;
}
.area02 .ai-box.box03 .screen-box {
	overflow:hidden;
	position:relative;
	top:10%;
	margin-right:112px;
	margin-right:11.2rem;
	border-radius:40px;
	border-radius:4rem;
	width:328px;
	width:32.8rem;
	height:580px;
	height:58rem;
	transform:translateY(-50%);
	filter:drop-shadow(5px 12px 80px rgba(0,12,35,.12));
	filter:drop-shadow(.5rem 1.2rem 8rem rgba(0,12,35,.12));
}
.area02 .ai-box.box03 [class^="icon-screen"] {
	position:absolute;
	left:0;
}
.area02 .ai-box.box03 .icon-screen-header {
	top:0;
	z-index:2;
}
.area02 .ai-box.box03 .icon-screen-content {
	top:54px;
	top:5.4rem;
	z-index:1;
}
.area02 .ai-box.box03 .icon-screen-content.staggered {
	transform:translateY(-1790px);
	transform:translateY(-179rem);
	transition:transform 2.5s cubic-bezier(0.26, 0.38, 0.21, 1.0);
}

/* 편의서비스 */
.area02 .box02.servicebox{
	padding-top: 180px;
	padding-top: 18rem;
	height: 720px;
	height: 72rem;
}
.area02 .box02.servicebox .txtpd{
	padding-top: 170px;
	padding-top: 17rem;
}
.area02 .box03.servicebox{
	height: 690px;
	height: 69rem;
}
.area02 .box03.servicebox .img01{
	position: static;
}
.area02 .box03.servicebox .txtpd{
	padding: 250px 0 0 118px;
	padding: 25rem 0 0 11.8rem;
}
.area02 .box04.servicebox{
	height: 540px;
	height: 54rem;
}
.area02 .box04.servicebox .txtpd{
	padding: 0 0 0 118px;
	padding: 0 0 0 11.8rem;
}
.area02 .box04.servicebox .img-box{
	width: 686px;
	width: 68.6rem;
	height: auto;
}
.area02 .box04.servicebox .img-box img{
	position: static;
}
.area02 .box05.servicebox{
	height: 710px;
	height: 71rem;
}
.area02 .box05.servicebox .img01{
	position: static;
}
.area02 .box05.servicebox .txtpd{
	width: 686px;
	width: 68.6rem;
	padding: 220px 0 0 118px;
	padding: 22rem 0 0 11.8rem;
}

/* 세번째 컨텐츠 */

.area03.mt280{
	margin-top:280px;
	margin-top:28rem;
}
.area03 .box02 .img01{
	top:-230px;
	top:-23rem;
	right:120px;
	right:12rem;
}
.area03 .box02 .gauge-box {
	top:165px;
	top:16.5rem;
	left:auto;
	right:105px;
	right:10.5rem;
	width:329px;
	width:32.9rem;
	box-shadow:10px 10px 30px rgba(0,0,0,0.2);
	box-shadow:1rem 1rem 3rem rgba(0,0,0,0.2);
	background-color:#4889ff;
}
.area03 .box02 .gauge-area{
	background-color:#1762ea;
}
.area03 .box02 .gauge-area .icon-shoes02{
	position:absolute;
	top:-130px;
	top:-13rem;
	left:-33px;
	left:-3.3rem;
	transition-delay:.2s;
}
.area03 .box03 .img02{
	top:-260px;
	top:-26rem;
	left:120px;
	left:12rem;
}
.area03 .box04{
	height:760px;
	height:76rem;
}
.area03 .box04 .present-box{
	position:absolute;
	top:calc(50% - 280px);
	top:calc(50% - 28rem);
	left:calc(50% - 170px);
	left:calc(50% - 17rem);
	z-index:2;
	border-radius:50%;
	width:340px;
	width:34rem;
	height:340px;
	height:34rem;
	box-shadow:0 0 50px rgba(0,0,0,0.1),inset 0 0 5px rgba(255,255,255,0.1);
	box-shadow:0 0 5rem rgba(0,0,0,0.1),inset 0 0 .5rem rgba(255,255,255,0.1);
	backdrop-filter:blur(10px);
	backdrop-filter:blur(1rem);
	background-color:rgba(255,255,255,0.1);
	opacity:0;
	transform:scale(1.2);
}
.area03 .box04 .ball-img{
	top:calc(50% - 190px);
	top:calc(50% - 19rem);
	left:calc(50% - 80px);
	left:calc(50% - 8rem);
	opacity:0;
}
.area03 .box04 .img01_new{
	transform:translate(-150px, 180px);
	transform:translate(-15rem, 18rem);
}
.area03 .box04 .img02_new{
	transform:translate(40px, 90px);
	transform:translate(4rem, 9rem);
}
.area03 .box04 .img03_new{
	transform:translateX(300px);
	transform:translateX(30rem);
}
.area03 .box04 .img04_new{
	transform:translate(780px, 200px);
	transform:translate(78rem, 20rem);
}
.area03 .box04 .img05_new{
	transform:translate(1080px, 80px);
	transform:translate(108rem, 8rem);
}



.area03 .box04 .img01{
	transform:translateX(-610px);
	transform:translateX(-61rem);
}
.area03 .box04 .img02{
	transform:translateX(-415px);
	transform:translateX(-41.5rem);
}
.area03 .box04 .img03{
	transform:translateX(-220px);
	transform:translateX(-22rem);
}
.area03 .box04 .img04{
	transform:translateX(220px);
	transform:translateX(22rem);
}
.area03 .box04 .img05{
	transform:translateX(415px);
	transform:translateX(41.5rem);
}
.area03 .box04 .img06{
	transform:translateX(610px);
	transform:translateX(61rem);
}
.area03 .box04 .present-box .coin-box{
	position:absolute;
	top:calc(50% - 45px);
	top:calc(50% - 4.5rem);
	left:calc(50% - 45px);
	left:calc(50% - 4.5rem);
	width:90px;
	width:9rem;
	height:90px;
	height:9rem;
}
.area03 .box04 .present-box .coin-box.front{
	z-index:2;
}
.area03 .box04 .present-box [class*=icon-coin]{
	position:absolute;
	top:calc(50% - 45px);
	top:calc(50% - 4.5rem);
	left:calc(50% - 45px);
	left:calc(50% - 4.5rem);
	transform:translate(0) rotate(0.8);
	opacity:0;
	filter:drop-shadow(0 0 0 rgba(0,0,0,0.2));
	transition:transform .7s cubic-bezier(0.27, 0.1, 0.4, 1.15), opacity .8s ease-out, filter .8s ease-out;
}
.area03 .box04 .present-box [class*=icon-coin].on{
	filter:drop-shadow(5px 5px 10px rgba(0,0,0,0.2));
	filter:drop-shadow(.5rem .5rem 1rem rgba(0,0,0,0.2));
}
.area03 .box04 .present-box .icon-coin01.on{
	transform:translate(-90px, -170px) rotateZ(720deg);
	transform:translate(-9rem, -17rem) rotateZ(720deg);
	transition-delay:.2s;
	opacity:1;
}
.area03 .box04 .present-box .icon-coin02.on{
	transform:translate(100px, -140px) rotateZ(1080deg);
	transform:translate(10rem, -14rem) rotateZ(1080deg);
	transition-delay:.1s;
	opacity:1;
}
.area03 .box04 .present-box .icon-coin03.on{
	transform:translate(-200px, -50px) rotateZ(1080deg);
	transform:translate(-20rem, -5rem) rotateZ(1080deg);
	opacity:1;
}
.area03 .box04 .present-box .icon-coin04.on{
	transform:translate(-145px, -60px) rotateZ(720deg);
	transform:translate(-14.5rem, -6rem) rotateZ(720deg);
	transition-delay:.3s;
	opacity:1;
}
.area03 .box04 .present-box .icon-coin05.on{
	transform:translate(-106px, -30px) rotateZ(720deg);
	transform:translate(-10.6rem, -3rem) rotateZ(720deg);
	opacity:1;
}
.area03 .box04 .present-box .icon-coin06.on{
	transform:translate(200px, -86px) rotateZ(1080deg);
	transform:translate(20rem, -8.6rem) rotateZ(1080deg);
	transition-delay:.1s;
	opacity:1;
}
.area03 .box04 .present-box .icon-coin07.on{
	transform:translate(170px, 50px) rotateZ(720deg);
	transform:translate(17rem, 5rem) rotateZ(720deg);
	opacity:1;
}
.area03 .box04 .present-box .icon-coin08.on{
	transform:translate(-75px, 90px) rotateZ(720deg);
	transform:translate(-7.5rem, 9rem) rotateZ(720deg);
	transition-delay:.4s;
	opacity:1;
}
.area03 .box04 .present-box .icon-coin09.on{
	transform:translate(-145px, 130px) rotateZ(1080deg);
	transform:translate(-14.5rem, 13rem) rotateZ(1080deg);
	opacity:1;
}
.area03 .box04 .present-box .icon-coin10.on{
	transform:translate(140px, 180px) rotateZ(720deg);
	transform:translate(14rem, 18rem) rotateZ(720deg);
	transition-delay:.3s;
	opacity:1;
}
.area03 .box04 .present-box .icon-coin11.on{
	transform:translate(90px, 150px) rotateZ(720deg);
	transform:translate(9rem, 15rem) rotateZ(720deg);
	opacity:1;
}
.area03 .box04 .present-box .img_present{
	position:absolute;
	top:70px;
	top:7rem;
	left:75px;
	left:7.5rem;
	width:193px;
	width:19.3rem;
	text-align:center;
}
.area03 .box04 .present-box .img_present img{
	position:relative;
}
.area03 .box04 .present-box .img_present .present-head{
	transform-origin:10px 67px;
	transform-origin:1rem 6.7rem;
	z-index:2;
}
.area03 .box04 .present-box .img_present .present-head.on{
	transform:rotate(-15deg) translate(-15px, 10px);
	transform:rotate(-15deg) translate(-1.5rem, 1rem);
}
.area03 .box04 .present-box .img_present .present-body{
	margin-top:-5px;
}
.area03 .box04 .point-txt{
	position:absolute;
	top:calc(50% - 65px);
	top:calc(50% - 6.5rem);
	width:100%;
	text-align:center;
	line-height:1;
}
.area03 .box04 .point-txt .rbtR{
	color:#aaaaaa;
	font-size:22px;
	font-size:2.2rem;
	letter-spacing:.24em;
	opacity:.2;
}
.area03 .box04 .point-txt .rbtB{
	margin-top:18px;
	margin-top:1.8rem;
	color:#4889ff;
	font-size:80px;
	font-size:8rem;
}


/* 큐알 네번째 컨텐츠 */

.area05 .accordion-container{
	width:1140px;
	width:114rem;
	max-width:100%;
	margin:80px auto 0;
	margin:8rem auto 0;
}
.area05 .accordion-list + .accordion-list{
	margin-top:20px;
	margin-top:2rem;
}
.area05 .bullet-lists{
	padding:0 40px 35px;
	padding:0 4rem 3.5rem;
	line-height:1.83;
}
.area05 .from-when{
	margin-top:30px;
	margin-top:3rem;
	text-align:right;
}
.area05 .from-when .txt{
	color:#aaa;
	font-family:"NotoSansKR-Regular";
	font-size:18px;
	font-size:1.8rem;
}
.bullet-lists .list{
	position:relative;
	padding-left:12px;
	padding-left:1.2rem;
	color:#666666;
	word-break:keep-all;
}
.bullet-lists .list::before{
	content:"";
	display:inline-block;
	position:absolute;
	top:14px;
	top:1.4rem;
	left:0;
	border-radius:4px;
	border-radius:.4rem;
	width:4px;
	width:.4rem;
	height:4px;
	height:.4rem;
	background-color:#aaaaaa;
}


/* 탑버튼 */

.top-btn-area{
	position:relative;
	width:100%;
	height:60px;
	height:6rem;
}
.top-btn-area .top-btn{
	/* display:inline-block; */
	display:none;
	position:absolute;
	bottom:50px;
	bottom:5rem;
	right:50px;
	right:5rem;
	z-index:2;
	width:60px;
	width:6rem;
	height:60px;
	height:6rem;
	opacity:0;
}
.top-btn-area .top-btn.fixed{
	position:fixed;
}
.qrcode-box{
	display:none;
	position:fixed;
	top:140px;
	top:14rem;
	right:60px;
	right:6rem;
	z-index:2;
	transform:translateX(305px);
	transform:translateX(30.5rem);
}


/* 푸터 */

#footer{
	background-color:#f8f8f8;
	text-align:center;
}
.footer-container{
	position:relative;
	margin:0 auto;
	padding:55px 40px 0;
	padding:5.5rem 4rem 0;
	width:1460px;
	max-width:100%;
	height:190px;
	height:19rem;
}
.footer-container .infomation-area{
	display:flex;
	align-items:center;
	justify-content:space-between;
}
.footer-container .comp-info{
	flex:1 0 auto;
	font-size:0;
}
.footer-container .comp-info .each{
	display:inline-block;
	position:relative;
	padding:0 10px;
	padding:0 1rem;
	font-size:18px;
	font-size:1.8rem;
	line-height:18px;
	line-height:1.8rem;
}
.footer-container .comp-info span{
	vertical-align:-8px;
	vertical-align:-.8rem;
}
.footer-container .comp-info a{
	vertical-align:-7px;
	vertical-align:-.7rem;
}
.footer-container .comp-info .each + .each::after{
	content:"";
	position:absolute;
	top:0px;
	left:0;
	width:1px;
	height:100%;
	background-color:#aaa;
}
.footer-container .comp-info .notoR + .notoR::after{
	top:1px;
}
.footer-container .family-site-area{
	flex:0 0 auto;
	position:relative;
	width:145px;
	width:14.5rem;
	height:40px;
	height:4rem;
	text-align:left;
}
.footer-container .family-site-area .accordion-item{
	display:flex;
	flex-direction:column-reverse;
	position:absolute;
	bottom:0;
	border-radius:8px;
	border-radius:.8rem;
	width:100%;
}
.footer-container .family-site-area .notoR{
	display:block;
	padding:8px 4px 8px 15px;
	padding:.8rem .4rem .8rem 1.5rem;
	/* border:1px solid #dddddd; */
	border-radius:8px;
	border-radius:.8rem;
	height:auto;
	font-size:16px;
	font-size:1.6rem;
	text-align:left;
}
.footer-container .family-site-area .accordion-util .txt{
	color:#666666;
	font-size:16px;
	font-size:1.6rem;
}
.footer-container .family-site-area .accordion-content{
	padding-top:7px;
	padding-top:.7rem;
	word-break:keep-all;
}
.footer-container .family-site-area .accordion-content .rbtM{
	display:block;
	padding:7px 0 7px 15px;
	padding:.7rem 0 .7rem 1.5rem;
	height:auto;
	font-size:16px;
	font-size:1.6rem;
	line-height:1;
}
.footer-container .family-site-area .accordion-item.active {
	border-color:#002222;
	box-shadow:5px 5px 15px rgba(0,0,0,0.1);
	box-shadow:.5rem .5rem 1.5rem rgba(0,0,0,0.1);
	background-color:#fff;
}
.footer-container .copyright{
	margin-top:10px;
	margin-top:1rem;
	color:#aaaaaa;
	font-size:16px;
	font-size:1.6rem;
}


/* 팝업 */

.popup-container{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.6);
	display:none;
	opacity:0;
	z-index:101;
}
.popup-container .popup-wrapper{
	position:absolute;
	top:50%;
	left:50%;
	border-radius:0 0 24px 24px;
	border-radius:0 0 2.4rem 2.4rem;
	min-width:900px;
	min-width:90rem;
	min-height:580px;
	min-height:58rem;
	transform:translate(-50%,-50%);
}
.popup-container .popup-header{
	display:flex;
	align-items:center;
	padding-left:30px;
	padding-left:3rem;
	border-radius:24px 24px 0 0;
	border-radius:2.4rem 2.4rem 0 0;
	width:100%;
	height:70px;
	height:7rem;
	background-color:#fff;
}
.popup-container .popup-content{
	overflow:hidden;
	margin-top:-1px;
	border-radius:0 0 24px 24px;
	border-radius:0 0 2.4rem 2.4rem;
	width:100%;
	height:510px;
	height:51rem;
	background-color:#fff;
}
.popup-container .close-btn{
	display:flex;
	justify-content:center;
	align-items:center;
	position:absolute;
	top:0;
	right:0;
	width:80px;
	width:8rem;
	height:70px;
	height:7rem;
}
.popup-container .popup-content iframe{
	width:100%;
	height:100%;
}


/* 신규가입 이벤트 */

.popup-container01{
	position:fixed;
	top:0;
	left:0;
	z-index:101;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.6);
	opacity:1;
}
.popup-container01 .popup-wrapper{
	position:absolute;
	top:50%;
	left:50%;
	border-radius:0 0 24px 24px;
	border-radius:0 0 2.4rem 2.4rem;
	min-width:500px;
	min-width:50rem;
	min-height:820px;
	min-height:82rem;
	transform:translate(-50%,-50%);
}
.popup-container01 .close-btn{
	display:flex;
	align-items:center;
	justify-content:center;
	position:absolute;
	top:0;
	right:0;
	width:80px;
	width:8rem;
	height:70px;
	height:7rem;
}
.event-area01{
	position:relative;
}
.event-area01 .btn-go{
	position:absolute;
	left:50%;
	bottom:30px;
	transform:translateX(-50%);
}


/* 네번째 컨텐츠 */

.area04 .box01{
	height:790px;
	height:79rem;
}
.area04 .box01 .img01{
	top:0;
	right:30px;
	right:3rem;
	z-index:2;
}
.area04 .box02{
	height:390px;
	height:39rem;
}
.area04 .box02 .img01{
	top:-20px;
	top:-2rem;
	left:130px;
	left:13rem;
	filter:drop-shadow(0 0 23px rgba(0,0,0,0.2));
}
.area04 .box02 .img02{
	top:110px;
	top:11rem;
	left:300px;
	left:30rem;
	transition-delay:.5s;
}
.area04 .box02 .tit-bg{
	display:flex;
	position:absolute;
	bottom:5px;
	bottom:.5rem;
	right:230px;
	right:23rem;
	z-index:1;
	width:584px;
	width:58.4rem;
	height:184px;
	height:18.4rem;
}
.area04 .box02 .tit-bg .section-tit{
	opacity:0;
}
.area04 .box02 .tit-bg .section-tit.staggered{
	transition-delay:.3s;
	opacity:1;
}
.area04 .box03 .motion-area-wrap{
	top:-442px;
	top:-44.2rem;
	right:180px;
	right:18rem;
}
.area04 .box03 .motion-area{
	position:relative;
	height:230px;
	height:23rem;
}
.area04 .box03 .motion-area .icon-desc-info01{
	position:absolute;
	z-index:10;
}
.area04 .box03 .motion-area .icon-info-point{
	position:absolute;
	top:125px;
	top:12.5rem;
	left:54px;
	left:5.4rem;
	z-index:50;
}
.area04 .box03 .motion-area .icon-info-bg{
	position:absolute;
	top:70px;
	top:7rem;
	left:183px;
	left:18.3rem;
	z-index:5;
}
.area04 .box03 .motion-area .icon-desc-info02{
	position:absolute;
	left:295px;
	left:29.5rem;
	z-index:10;
}
.area04 .box03 .motion-desc-txt.staggered{
	transition-delay:.2s;
}
.area04 .box03 .motion-desc-txt{
	display:flex;
	margin-top:30px;
	margin-top:3rem;
	width:50rem;
}
.area04 .box03 .motion-desc-txt .emj{
	margin-left:5px;
	margin-right:.5rem;
	font-style:normal;
	font-size:20px;
	font-size:2rem;
}
.area04 .box03 .motion-desc-txt .motion-bg{
	display:inline-block;
	margin-right:15px;
	margin-right:1.5rem;
	padding:0 20px;
	padding:0 2rem;
	border-radius:15px;
	border-radius:1.5rem;;
	box-sizing:border-box;
	width:340px;
	width:34rem;
	height:52px;
	height:5.2rem;
	color:#fff;
	font-family:"NotoSansKR-Bold";
	font-size:18px;
	font-size:1.8rem;
	line-height:52px;
	line-height:5.2rem;
	background:linear-gradient(to right,#5da5f9,#6989fb);
}
.area04 .box03 .motion-desc-txt .motion-bg .motion-txt{
	margin-left:10px;
	margin-left:1rem;
	font-family:"NotoSansKR-regular";
}
.area04 .box03 .motion-desc-txt .motion-bg .motion-txt.staggered{
	transition-delay:.1s;
}
.area04 .box03 .motion-desc-txt .btn-area-wrap.staggered{
	animation:bounce .4s linear;
	animation-delay:.9s;
	animation-iteration-count:1;
	transition:animation .3s;
}
.area04 .box03 .motion-desc-txt .btn-area-wrap .btn-txt{
	display:inline-block;
	padding:13px 30px;
	padding:1.3rem 3rem;
	border:2px solid #678afc;
	border-radius:16px;
	border-radius:1.6rem;
	box-sizing:border-box;
	height:52px;
	height:5.2rem;
	color:#678afc;
	font-family:"NotoSansKR-Bold";
	font-size:16px;
	font-size:1.6rem;
}
.area04 .mt280{
	margin-top:280px;
}
.area04 .box03 .img-box{
	flex-basis:auto;
	position:relative;
	margin-top:-20px;
	margin-top:-2rem;
	width:420px;
	width:42rem;
	height:240px;
	height:24rem;
}
.area04 .box03 .img-box .flow-box-wrap{
	position:absolute;
	top:236px;
	top:23.6rem;
	left:220px;
	left:22rem;
}
.area04 .box03 .flow-box{
	position:absolute;
	top:calc(50% - 100px);
	top:calc(50% - 10rem);
	left:calc(50% - 15px);
	left:calc(50% - 1.5rem);
	z-index:30;
}
.area04 .box03 .flow-box .flow-box-wrap{
	position:relative;
}
.area04 .box03 [class*="icon-flower-powder"]{
	position:absolute;
}
.area04 .box03 [class*="flower-arounder"]{
	position:absolute;
	height:20px;
	height:2rem;
}
.area04 .box03 [class*="flower-arounder"].right{
	position:absolute;
	height:20px;
	height:2rem;
	transform-origin:right 15px;
	transform-origin:right 1.5rem;
}
.area04 .box03 .right [class*="icon-flower-powder"]{
	right:0;
}
.area04 .box03 [class*="flower-arounder"].left{
	position:absolute;
	height:20px;
	height:2rem;
	transform-origin:left 15px;
	transform-origin:left 1.5rem;
}
.area04 .box03 .flower-arounder12{
	bottom:-20px;
	bottom:-2rem;
	left:-185px;
	left:-18.5rem;
	z-index:50;
	width:100px;
	width:10rem;
	transform:rotate(3deg);
}
.area04 .box03 .flower-arounder13{
	bottom:-50px;
	bottom:-5rem;
	left:-195px;
	left:-19.5rem;
	z-index:50;
	width:110px;
	width:11rem;
	transform:rotate(0deg);
}
.area04 .box03 .flower-arounder14{
	bottom:-70px;
	bottom:-7rem;
	left:-220px;
	left:-22rem;
	z-index:50;
	width:130px;
	width:13rem;
	transform:rotate(0deg);
}
.area04 .box03 .flower-arounder15{
	bottom:-75px;
	bottom:-7.5rem;
	left:-210px;
	left:-21rem;
	width:120px;
	width:12rem;
	transform:rotate(-3deg);
}
.area04 .box03 .flower-arounder16{
	bottom:-60px;
	bottom:-6rem;
	left:-180px;
	left:-18rem;
	width:100px;
	width:10rem;
	transform:rotate(-15deg);
}
.area04 .box03 .flower-arounder17{
	bottom:-20px;
	bottom:-2rem;
	left:-130px;
	left:-13rem;
	width:100px;
	width:10rem;
	transform:rotate(0deg);
}
.area04 .box03 .flower-arounder18{
	bottom:-50px;
	bottom:-5rem;
	left:-100px;
	left:-10rem;
	width:90px;
	width:9rem;
	transform:rotate(0deg);
}
.area04 .box03 .flower-arounder19{
	bottom:-50px;
	bottom:-5rem;
	left:-120px;
	left:-12rem;
	width:90px;
	width:9rem;
	transform:rotate(8deg);
}
.area04 .box03 .flower-arounder20{
	bottom:-60px;
	bottom:-6rem;
	left:-154px;
	left:-15.4rem;
	width:150px;
	width:15rem;
	transform:rotate(7deg);
}
.area04 .box03 .flower-arounder21{
	bottom:-70px;
	bottom:-7rem;
	left:-120px;
	left:-12rem;
	width:70px;
	width:7rem;
	transform:rotate(16deg);
}
.area04 .box04 .img01{
	top:-90px;
	top:-9rem;
	left:50px;
	left:5rem;
}
.area04 .box04 .card-txt{
	position:absolute;
	top:50px;
	top:5rem;
	left:157px;
	left:15.7rem;
}
.area04 .box04 .img02 {
	top:0;
	left:207px;
	left:20.7rem;
	transform:rotate(0);
	transition:transform 2s cubic-bezier(0.44, -0.35, 0.15, 1.32);
}
.area04 .box04 .img02.staggered{
	transform:rotate(360deg);
}
.area04 .box04 .img02 {
	top:-10px;
	top:-1rem;
	left:207px;
	left:20,7rem;
}
.area04 .box04 .health-box{
	overflow:hidden;
	position:absolute;
	top:300px;
	top:30rem;
	left:108px;
	left:10.8rem;
	padding:0 42px;
	padding:0 4.2rem;
	width:1140px;
	width:114rem;
}
.area04 .box04 .health-wrapper{
	display:flex;
	flex-wrap:nowrap;
}
.area04 .box04 .health-box .health-wrapper >div{
	display:flex;
	flex:1 0 auto;
	flex-wrap:nowrap;
	justify-content:space-between;
	width:100%;
}
.area04 .box04 .health-box img{
	flex:0 0 auto;
	position:relative;
	transition:transform .8s ease-in-out;
}
.area04 .box04 .health-box img.ui-stagger{
	transform:rotateX(90deg);
}
.area04 .box04 .health-box img.ui-stagger.staggered{
	transform:rotateX(0);
}
.area04 .box04 .health-box .health-wrapper.staggered .group1{
	animation:lineMoveWay 10s .5s infinite linear;
}
.area04 .box04 .health-box .health-wrapper.staggered .group2{
	margin-left:54px;
	margin-left:5.4rem;
	animation:lineMoveWay 10s .5s infinite linear;
}
.area04 .box04 .health-box .shadow{
	position:absolute;
	top:-5px;
	top:-.5rem;
	z-index:1;
	width:48px;
	width:4.8rem;
	height:calc(100% + 10px);
	height:calc(100% + 1rem);
}
.area04 .box04 .health-box .shadow.left{
	left:0;
	box-shadow:inset 24px 0 10px rgba(255,255,255,1);
	box-shadow:inset 2.4rem 0 1rem rgba(255,255,255,1);
}
.area04 .box04 .health-box .shadow.right{
	left:280px;
	left:28rem;
	box-shadow:inset -24px 0 10px rgba(255,255,255,1);
	box-shadow:inset -2.4rem 0 1rem rgba(255,255,255,1);
}
.area04 .box04 .health-box .shadow.right.ended{
	right:0;
	left:auto;
	box-shadow:inset -50px 0 25px rgba(255,255,255,1);
	width:100px;
	width:10rem;
}
.area04 .box05 .tit-bg02{
	display:flex;
	position:absolute;
	bottom:260px;
	bottom:26rem;
	right:260px;
	right:26rem;
	z-index:1;
	width:578px;
	width:57.8rem;
	height:184px;
	height:18.4rem;
}
.area04 .box05 .tit-bg02 .section-tit02{
	opacity:0;
}
.area04 .box05 .tit-bg02 .section-tit02.staggered{
	transition-delay:2s;
	opacity:1;
}
.area04.mt690{
	margin-top:700px;
	margin-top:70rem;
}
.area04 .box05 .img01{
	top:-230px;
	top:-23rem;
	right:90px;
	right:9rem;
	transition-delay:1s;
}
.area04 .box05 .img02 {
	opacity:0;
}
.area04 .box05 .img03{
	opacity:0;
}
.area04 .box05 .img04 {
	opacity:0;
}
.area04 .box05 .img05 {
	opacity:0;
}
.area04 .box05 .img02.staggered{
	top:30px;
	top:3rem;
	right:387px;
	right:38.7rem;
	transition-delay:.5s;
	transition-duration:1s;
	opacity:1;
}
.area04 .box05 .img03.staggered{
	top:30px;
	top:3rem;
	right:305px;
	right:30.5rem;
	transition-delay:.8s;
	transition-duration:1s;
	opacity:1;
}
.area04 .box05 .img04.staggered{
	top:31px;
	top:3.1rem;
	right:224px;
	right:22.4rem;
	transition-delay:1.2s;
	transition-duration:1s;
	opacity:1;
}
.area04 .box05 .img05.staggered{
	top:147px;
	top:14.7rem;
	right:485px;
	right:38.5rem;
	transition-delay:1.5s;
	transition-duration:1s;
	opacity:1;
}
.area04 .mt400{
	margin-top:400px;
	margin-top:40rem;
}
.service-info .service-info-list li .info-tit{
	display:inline-block;
	margin-top:35px;
	margin-top:3.5rem;
	color:#222;
	font-family:"NotoSansKR-Bold";
	font-size:24px;
	font-size:2.4rem;
}
.service-info .service-info-list li .info-txt{
	display:inline-block;
	margin-top:20px;
	margin-top:2rem;
	color:#666;
	font-family:"NotoSansKR-Regular";
	font-size:18px;
	font-size:1.8rem;
}
.service-info .img-group{
	display:flex;
	margin-top:25px;
	margin-top:2.5rem;
}
.service-info .img-group img{
	position:relative;
	margin-left:10px;
	margin-left:1rem;
}


/* 키 프레임 영역 */

@keyframes opacity01 {
	0% {
		opacity:0;
	}
	20% {
		opacity:1;
	}
	40% {
		opacity:0;
	}
	60% {
		opacity:0;
	}
	80% {
		opacity:0;
	}
	100% {
		opacity:0;
	}
}
@keyframes opacity02 {
	0% {
		opacity:0;
	}
	20% {
		opacity:0;
	}
	40% {
		opacity:1;
	}
	60% {
		opacity:0;
	}
	80% {
		opacity:0;
	}
	100% {
		opacity:0;
	}
}
@keyframes opacity03 {
	0% {
		opacity:0;
	}
	20% {
		opacity:0;
	}
	40% {
		opacity:0;
	}
	60% {
		opacity:1;
	}
	80% {
		opacity:0;
	}
	100% {
		opacity:0;
	}
}
@keyframes opacity04 {
	0% {
		opacity:0;
	}
	20% {
		opacity:0;
	}
	40% {
		opacity:0;
	}
	60% {
		opacity:0;
	}
	80% {
		opacity:1;
	}
	100% {
		opacity:0;
	}
}
@keyframes opacity05 {
	0% {
		opacity:0;
	}
	20% {
		opacity:0;
	}
	40% {
		opacity:0;
	}
	60% {
		opacity:0;
	}
	80% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}
@keyframes dotdot{
	0%,60%{
		transform:scale(1);
		opacity:1;
	}
	30%{
		opacity:0;
		transform:scale(.9);
	}
}

@keyframes typingMotion{
	0%,60%{
		transform:rotate(0);
	}
	30%{
		transform:rotate(-10deg);
	}
}
@keyframes cloudy{
	0%,100%{
		transform:translateY(0);
	}
	50%{
		transform:translateY(-15px);
		transform:translateY(-1.5rem);
	}
}
@keyframes cloudyReverse{
	0%,100%{
		transform:translateY(0);
	}
	50%{
		transform:translateY(15px);
		transform:translateY(1.5rem);
	}
}
@keyframes ringring{
	0%,70%{
		transform:rotate(0);
	}
	10%,30%,50%{
		transform:rotate(-7deg);
	}
	20%,40%,60%{
		transform:rotate(7deg);
	}
}
@keyframes lineMoveWay{
	0%{
		transform:translateX(0);
	}
	100%{
		transform:translateX(calc(-100% - 54px));
		transform:translateX(calc(-100% - 5.4rem));
	}
}
@keyframes handAni{
	0%,100%{
		transform:rotate(0);
	}
	50%{
		transform:rotate(-30deg);
	}
}
@keyframes tictoc{
	0%,100%{
		transform:rotate(15deg);
	}
	50%{
		transform:rotate(-15deg);
	}
}
@keyframes charAni{
	0%,100%{
		transform:translateY(0);
	}
	50%{
		transform:translateY(20px);
		transform:translateY(2rem);
	}
}
@keyframes bounce{
	0%,100%{
		transform:translateY(0);
	}
	50%{
		transform:translateY(12px);
		transform:translateY(1.2rem);
	}
}