@charset "UTF-8";

/* 모션 리셋 */
.reset-y{
    transform:translateY(15px);
    transform:translateY(1.5rem);
    opacity:0;
}
.reset-y.ui-stagger, .reset-y.ui-entered{
    transition:transform .6s cubic-bezier(0.06, 0.72, 0.47, 1.06), opacity .3s ease-out;
}
.reset-y.ui-stagger.staggered, .reset-y.ui-entered.entered{
    transform:translateY(0);
    opacity:1;
}
.reset-y-reverse{
    transform:translateY(-15px);
    transform:translateY(-1.5rem);
    opacity:0;
}
.reset-y-reverse.ui-stagger, .reset-y-reverse.ui-entered{
    transition:transform .6s cubic-bezier(0.06, 0.72, 0.47, 1.06), opacity .3s ease-out;
}
.reset-y-reverse.ui-stagger.staggered, .reset-y-reverse.ui-entered.entered{
    transform:translateY(0);
    opacity:1;
}
.reset-x{
    transform:translateX(15px);
    transform:translateX(1.5rem);
    opacity:0;
}
.reset-x.ui-stagger, .reset-x.ui-entered{
    transition:transform .6s cubic-bezier(0.06, 0.72, 0.47, 1.06), opacity .3s ease-out;
}
.reset-x.ui-stagger.staggered, .reset-x.ui-entered.entered{
    transform:translateX(0);
    opacity:1;
}
.reset-x-reverse{
    transform:translateX(-15px);
    transform:translateX(-1.5rem);
    opacity:0;
}
.reset-x-reverse.ui-stagger, .reset-x-reverse.ui-entered{
    transition:transform .6s cubic-bezier(0.06, 0.72, 0.47, 1.06), opacity .3s 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 .6s cubic-bezier(0.06, 0.72, 0.47, 1.06), opacity .3s 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 .6s cubic-bezier(0.06, 0.72, 0.47, 1.06), opacity .3s 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;
}
.fnt16{
    font-size:16px;
    font-size:1.6rem;
}
.fnt22{
    font-size:22px;
    font-size:2.2rem;
}
.fnt29{
    font-size:29px;
    font-size:2.9rem;
}
.fnt30{
    font-size:30px;
    font-size:3rem;
    line-height:1.36;
}
.fnt26{
    font-size:26px;
    font-size:2.6rem;
}
.fnt24{
    font-size:24px;
    font-size:2.4rem;
    line-height:1.47;
    white-space:nowrap;
}
.fnt20{
    font-size:20px;
    font-size:2rem;
    line-height:1.47;
    white-space:nowrap;
}
.fnt42{
    font-size:42px;
    font-size:4.2rem;
    line-height:1.5;
}
.fnt14{
    font-size:14px;
    font-size:1.4rem;
}
.fnt15{
    font-size:15px;
    font-size:1.5rem;
}
.ml55{
    margin-left:55px;
    margin-left:5.5rem;
}
.mt15{
    margin-top:15px;
    margin-top:1.5rem;
}
.mt35{
    margin-top:35px;
    margin-top:3.5rem;
}
.mt40{
    margin-top:40px;
    margin-top:4rem;
}
.mt60{
    margin-top:60px;
    margin-top:6rem;
}
.mt80{
    margin-top:80px;
    margin-top:8rem;
}
.mt85{
    margin-top:85px;
    margin-top:8.5rem;
}
.mt90{
    margin-top:90px;
    margin-top:9rem;
}
.mt110{
    margin-top:110px;
    margin-top:11rem;
}
.mt130{
    margin-top:130px;
    margin-top:13rem;
}
.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;
}
.mt410{
    margin-top:410px;
    margin-top:41rem;
}
.mt470{
    margin-top:470px;
    margin-top:47rem;
}
.mt530{
    margin-top:530px;
    margin-top:53rem;
}
.mt690{
    margin-top:690px;
    margin-top:69rem;
}
.pdr70{
    padding-right:70px;
    padding-right:7.0rem;
}
.pdr75{
    padding-right:75px;
    padding-right:7.5rem;
}
.pdr225{
    padding-right:225px;
    padding-right:22.5rem;
}
.pdr205{
    padding-right:205px;
    padding-right:20.5rem;
}
.pdl230{
    padding-left:230px;
    padding-left:23rem;
}
.pdl115{
    padding-left:115px;
    padding-left:11.5rem;
}
.caution-tip{
    padding-left:1px;
    padding-left:1rem;
    font-size:16px;
    font-size:1.6rem;
    color:#999999;
    font-family:"NotoSansKR-Regular";
    line-height:1.375;
}
.caution-tip::before{
    content:"*";
    position:absolute;
    top:2px;
    top:.2rem;
    left:0;
}

/*! content */
#header{
    position:fixed;
    top:-45px;
    top:-4.5rem;
    left:0;
    z-index:99;
    width:100%;
}
.header-content{
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:relative;
    max-width:100%;
    height:60px;
    height:6rem;
    margin:0 auto;
    padding:0 20px;
    padding:0 2rem;
    background-color:transparent;
    transition:background-color .2s ease-out;
}
.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:10px;
    margin-left:1rem;
    padding-left:10px;
    padding-left:1rem;
    border-left:1px solid #ddd;
    height:23px;
    height:2.3rem;
    color:#aaaaaa;
    font-family:"NotoSansKR-Medium";
    font-size:11px;
    font-size:1.1rem;
    letter-spacing:0;
    transition:color .2s ease-out , border-color .2s ease-out;
}
.header-content .logo a{
    position:relative;
}
.header-content .white-logo {
    position:absolute;
    top:0;
    left:0;
    opacity:0;
    transition:opacity .2s ease-out;
}
.header-content.on .white-logo {
    opacity:1;
}
.header-content.on .slogan-txt{
    color:#fff;
    border-color:#fff;
    transition:color .3s ease-out;
}
.header-content .slogan-txt .iden-color{
    transition:color .3s ease-out;
}
.header-content.on .slogan-txt .iden-color{
    color:#ffe44c;
}
.header-content.on{
    background-color:#4889ff;
}


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

.main-promotion-top-container{
    overflow:hidden;
    position:relative;

}
.promotion-wrapper{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    position:relative;
    padding:0 20px 60px;
    padding:0 2rem 6rem;
    margin:0 auto;
    max-width:100%;
    height:auto;
    min-height:100vh;
}
.promotion-wrapper .sequence-area{
    position:relative;
    margin:95px auto 0;
    margin:9.5rem auto 0;
    width:275px;
    width:27.5rem;
    height:275px;
    height:27.5rem;
}


/* 인트로 영역 */
/* 인트로 영역 */
/* 인트로 영역 */

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

/* 탑 부분 엥커 영역  */
/* 탑 부분 엥커 영역  */
/* 탑 부분 엥커 영역  */
.promotion-wrapper .ancher-lists{
    margin-top:50px;
    margin-top:5rem;
}
.promotion-wrapper .ancher-lists .list *{
    display:inline-block;
}
.promotion-wrapper .ancher-lists .list + .list{
    margin-top:18px;
    margin-top:1.8rem;
}
.promotion-wrapper .ancher-lists .link {
    display:block;
    position:relative;
}
.promotion-wrapper .ancher-lists .link .notoL{
    display:block;
    font-size:14px;
    font-size:1.4rem;
}
.promotion-wrapper .ancher-lists .link strong{
    display:block;
    font-size:26px;
    font-size:2.6rem;
    transition:color .15s ease-out;
}
.promotion-wrapper .ancher-lists .link .item{
    display:block;
    margin-top:9px;
    margin-top:0.9rem;
}
.promotion-wrapper .ancher-lists .link.on strong{
    color:#4889ff;
}
.promotion-wrapper .ancher-lists .link.on .icon-ancher{
    background-image:url("../images/mo/img_01.png");
}
.promotion-wrapper .ancher-lists .icon-ancher{
    bottom:6px;
    bottom:.6rem;
    right:0;
    position:absolute;
}
.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% - 137px);
    top:calc(50% - 13.7rem);
    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:relative;
    z-index:10;
    margin-top:26px;
    margin-top:2.6rem;
    width:100%;
    text-align:center;
}
.promotion-wrapper .sequence-container .swiper-pagination-bullet{
    border-radius:4px;
    border-radius:.4rem;
    width:6px;
    width:.6rem;
    height:6px;
    height:.6rem;
    background-color:#e5e5e5;
    opacity:1;
    transition:background-color .35s ease-out, width .35s ease-out;
}
.promotion-wrapper .sequence-container .swiper-pagination-bullet-active{
    width:13px;
    width:1.3rem;
    background-color:#4889ff;
}
.promotion-wrapper .sequence-container [class*=icon]{
    position:absolute;
    filter:drop-shadow(0 0 2.5px rgba(0,0,0,0.2));
    filter:drop-shadow(0 0 .25rem rgba(0,0,0,0.2));
}
.sequence-container .icon-line-small{
    top:calc(50% - 55px);
    top:calc(50% - 5.5rem);
    left:calc(50% - 55px);
    left:calc(50% - 5.5rem);
    transform:scale(0);
    opacity:0;
}
.sequence-container .icon-line-small-dash{
    top:calc(50% - 65px);
    top:calc(50% - 6.5rem);
    left:calc(50% - 65px);
    left:calc(50% - 6.5rem);
    border:1px dashed #7fadff;
    border-radius:50%;
    width:130px;
    width:13rem;
    height:130px;
    height:13rem;
    transform:scale(0);
    opacity:0;
}
.sequence-container .icon-line-middle{
    top:calc(50% - 100px);
    top:calc(50% - 10rem);
    left:calc(50% - 100px);
    left:calc(50% - 10rem);
    transform:scale(0);
    opacity:0;
}
.sequence-container .icon-line-out{
    top:calc(50% - 149px);
    top:calc(50% - 14.9rem);
    left:calc(50% - 149px);
    left:calc(50% - 14.9rem);
    transform:scale(0);
    opacity:0;
}
.sequence-container [class*="icon-pop-ball"]{
    top:calc(50% - 100px);
    top:calc(50% - 10rem);
    left:calc(50% - 100px);
    left:calc(50% - 10rem);
}
.sequence-container [class*="icon-pop-ball"].large{
    top:calc(50% - 149px);
    top:calc(50% - 14.9rem);
    left:calc(50% - 149px);
    left:calc(50% - 14.9rem);
}


/* 슈가핏 */
.sequence-container .icon-sugarfit01_01{
    top:80px;
    top:8rem;
    left:80px;
    left:8rem;
}
.sequence-container .icon-sugarfit01_01.on{
    opacity:1;
}
.sequence-container .icon-sugaritem01_01{
    top:10px;
    top:1rem;
    right:20px;
    right:2rem;

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


/* 모션 첫번째 */
.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:125px;
    top:12.5rem;
    left:55px;
    left:5.5rem;
}
.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:82px;
    top:8.2rem;
    left:95px;
    left:9.5rem;
}
.sequence-container [class*=icon-item01].on{
    animation:infinite 5s ease-in-out forwards;
}
.sequence-container .icon-item01_01{
    top:0;
    left:15px;
    left:1.5rem;
}
.sequence-container .icon-item01_02{
    top:32px;
    top:3.2rem;
    right:0;
}
.sequence-container .icon-item01_03{
    bottom:53px;
    bottom:5.3rem;
    left:-10px;
    left:-1rem;
}
.sequence-container .icon-item01_04{
    bottom:1px;
    bottom:.1rem;
    right:21px;
    right:2.1rem;
}
.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% - 63px);
    top:calc(50% - 6.3rem);
    left:calc(50% - 67px);
    left:calc(50% - 6.7rem);
}
.sequence-container .icon-ribbon01{
    top:120px;
    top:12rem;
    left:30px;
    left:3rem;
    transform-origin:50px 5px;
    transform-origin:5rem .5rem;
    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:120px;
    top:12rem;
    right:33px;
    right:3.rem;
    transform-origin:5px 5px;
    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:-50px;
    bottom:-5rem;
    left:-40px;
    left:-4rem;
    z-index:2;
}


/* 모션 세번째 */
/* 모션 세번째 */
/* 모션 세번째 */

.sequence-container .icon-phone-mockup{
    top:55px;
    top:5.5rem;
    left:95px;
    left:9.5rem;
}
.sequence-container .icon-dumbbell{
    top:60px;
    top:6rem;
    left:-30px;
    left:-3rem;
}
.sequence-container .icon-bell{
    top:95px;
    top:9.5rem;
    right:65px;
    right:6.5rem;
    transform-origin:20px 0;
    transform-origin:2rem 0;
}
.sequence-container .icon-bell.on{
    animation:ringring infinite 4s ease-in-out forwards;
}
.sequence-container .icon-item02_01{
    top:35px;
    top:3.5rem;
    right:-15px;
    right:-1.5rem;
    animation:cloudy infinite 5s ease-in-out forwards;
}
.sequence-container .icon-flag{
    bottom:-5px;
    bottom:-.5rem;
    left:-15px;
    left:-1.5rem;
    animation:cloudyReverse infinite 5s ease-in-out forwards;
}
.sequence-container .icon-phone-mockup{
    top:27px;
    top:2.7rem;
    left:47px;
    left:4.7rem;
}
.sequence-container .icon-pills{
    bottom:-15px;
    bottom:-1.5rem;
    right:57px;
    right:5.7rem;
}
.gauge-box{
    position:absolute;
    top:calc(50% - 35px);
    top:calc(50% - 3.5rem);
    left:calc(50% - 87px);
    left:calc(50% - 8.7rem);
    border-radius:15px;
    border-radius:1.5rem;
    width:174px;
    width:17.4rem;
    height:50px;
    height:5rem;
    background-color:#41d1be;
}
.gauge-box .gauge-area{
    position:absolute;
    top:calc(50% - 4px);
    top:calc(50% - .4rem);
    left:19px;
    left:1.9rem;
    border-radius:4px;
    border-radius:.4rem;
    width:calc(100% - 38px);
    width:calc(100% - 3.8rem);
    height:7px;
    height:.7rem;
    background-color:#039d89;
}
.gauge-box .gauge-line{
    position:absolute;
    top:0;
    left:0;
    border-radius:4px;
    border-radius:.4rem;
    width:0;
    height:100%;
    background-color:#fff;
}
.gauge-box .icon-gauge-arrow{
    position:absolute;
    top:-8px;
    top:-.8rem;
    right:-20px;
    right:-2rem;
}
.gauge-box .icon-shoes{
    bottom:20px;
    bottom:2rem;
    right:-18px;
    right:-1.8rem;
    transform:translateY(-7px);
    transform:translateY(-.7rem);
    opacity:0;
}


/* 편의서비스 */
.sequence-container .icon-itemservice05_01{
    top:65px;
    top:6.5rem;
    right:0;
}
.sequence-container .icon-itemservice05_02{
    bottom:107px;
    bottom:10.7rem;
    left:-20px;
    left:-2rem;
}
.sequence-container .icon-itemservice05_03{
    bottom:2px;
    bottom:.2rem;
    right:42px;
    right:4.2rem;
}
.sequence-container .icon-itemservice05_01.on{
    animation-name:cloudy;
}
.sequence-container .icon-itemservice05_02.on{
    animation-name:cloudy;
    animation-delay:.3s;
}
.sequence-container .icon-itemservice05_03.on{
    animation-name:cloudyReverse;
    animation-delay:.5s;
}
.sequence-container .icon-service{
    left: 50%;
    top: 50%;
    margin: -84px 0 0 -93px;
    margin: -8.4rem 0 0 -9.3rem;
}
.sequence-container .icon-service.on{
    opacity:1;
}
.sequence-container .icon-care{
    left: 50%;
    top: 50%;
    margin: -84px 0 0 -86px;
    margin: -8.4rem 0 0 -8.6rem;
    z-index:2;
}




/* AI 건강관상 */
/* 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{
    bottom:98px;
    bottom:9.8rem;
    left:92px;
    left:9.2rem;
}
.sequence-container .icon-physiognomy.on{
    opacity:1;
}
.sequence-container .icon-timer{
    top:165px;
    top:16.5rem;
    left:164px;
    left:16.4rem;
    animation:tictoc infinite 2s ease-in-out forwards;
}
.sequence-container .icon-timer.on {
    opacity:1;
}


/* 모션 네번째 */
/* 모션 네번째 */
/* 모션 네번째 */

.sequence-container .icon-smile{
    bottom:68px;
    bottom:6.8rem;
    left:72px;
    left:7.2rem;
    z-index:2;
}
.sequence-container .icon-animal{
    bottom:70px;
    bottom:7rem;
    left:18px;
    left:1.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:112px;
    top:11.2rem;
    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{
    position:relative;
    margin:0 auto;
    padding:0 20px;
    padding:0 2rem;
    max-width:100%;
    line-height:1.4;
}
.section.mt60{
    margin-top:60px;
    margin-top:6rem;
}
.section.mt205{
    margin-top:205px;
    margin-top:20.5rem;
}
.section.mt180{
    margin-top:180px;
    margin-top:18rem;
}
.section .box{
    display:flex;
    position:relative;
    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;
}
.ancher-list-area{
    padding:0 20px;
    padding:0 2rem;
    height:50px;
    height:5rem;
    width:100%;
}
.ancher-list-area .ancher-lists{
    display:flex;
    align-items:stretch;
    justify-content:center;
    z-index:10;
    box-shadow:0 0 0 rgba(0,0,0,0);
    width:100%;
    height:50px;
    height:5rem;
    background-color:#fff;
    transition:box-shadow .2s ease-out;
}
.ancher-list-area .ancher-lists .list{
    display:flex;
    align-items:center;
    font-size:15px;
    font-size:1.5rem;
}
.ancher-list-area .ancher-lists .link{
    display:flex;
    align-items:center;
    height:100%;
    color:#aaaaaa;
    transition:color .2s ease-out;
}
.ancher-list-area .ancher-lists .link span + span {
    margin-left:4px;
    margin-left:0.4rem
}
.ancher-list-area .ancher-lists .list + .list{
    margin-left:15px;
    margin-left:1.5rem;
}

.ancher-list-area .ancher-lists .link.on{
    font-size:15px;
    font-size:1.5rem;
    color:#4889ff;
}
.ancher-list-area.sticky .ancher-lists{
    position:fixed;
    top:6rem;
    left:0;
    box-shadow:0 3px 5px rgba(0,0,0,0.1);
    box-shadow:0 .3rem .5rem rgba(0,0,0,0.1);
}


/* 슈가핏 컨텐츠 */
.area00 .box02 .img-box .img01,
.area00 .box03 .img-box .img01,
.area00 .box04 .img-box .img01,
.area00 .box05 .img-box .img01,
.area00 .box06 .img-box .img01,
.area00 .box07 .img-box .img01,
.area00 .box08 .img-box .img01{
    position: relative;
}
.area00 .img-box{
    text-align: center;
}
.area00 .box02 .img-box .img02{
    left: 74px;
    left: 7.4rem;
    top: 200px;
    top: 20rem;
}
.area00 .box02 .img-box .img03{
    left: 160px;
    left: 16rem;
    top: 130px;
    top: 13rem;
}
.area00 .box03 .img-box .img02{
    left: 20px;
    left: 2rem;
    top: 160px;
    top: 16rem;
}
.area00 .box03 .img-box .img03{
    right: 0;
    top: 60px;
    top: 6rem;
}
.area00 .box05 .img-box .img02{
    left: 0;
    top: 30px;
    top: 3rem;
}
.area00 .box05 .img-box .img03{
    left: 190px;
    left: 19rem;
    top: 190px;
    top: 19rem;
}
.area00 .box06 .img-box .img02{
    left: 50px;
    left: 5rem;
    top: 65px;
    top: 6.5rem;
}
.area00 .box06 .img-box .img03{
    left: 180px;
    left: 18rem;
    top: 130px;
    top: 13rem;
}
.area00 .box07 .fnt14{
    color: #666666;
    font-family:"NotoSansKR-regular";
    letter-spacing: -0.08em;
}
.area00 .box07 .img-box .img02{
    left: 180px;
    left: 18rem;
    top: 140px;
    top: 14rem;
}
.area00 .box07 .img-box .img03{
    left: 130px;
    left: 13rem;
    top: 220px;
    top: 22rem;
}
.area00 .box08 .fnt14{
    color: #666666;
    font-family:"NotoSansKR-regular";
    letter-spacing: -0.1em;
}
.area00 .box08 .img-box{
    margin-top: 30px;
    margin-top: 3rem;
}

/* 첫번째 컨텐츠 */
/* 첫번째 컨텐츠 */
/* 첫번째 컨텐츠 */

.area01 .box01{
    height:230px;
    height:23rem;
}
.area01 .box02 .fnt20{
    letter-spacing:-1px;
    letter-spacing:-.1rem;
}
.area01 .box02 .signal-box{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    position:absolute;
    bottom:320px;
    bottom:32rem;
    right:60px;
    right:6rem;
    z-index:1;
    width:222px;
    width:22.2rem;
    height:171px;
    height:17.1rem;
}
.area01 .box02 .signal-box [class*=line]{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    border-radius:5px;
    border-radius:.5rem;
    width:36px;
    width:3.6rem;
    height:20%;
    background-color:#f8f8f8;
}
.area01 .box02 .signal-box [class*=line]{
    border-radius:5px;
    border-radius:.5rem;
    box-shadow:0 0 10px 0 rgba(0,0,0,0.1);
    box-shadow:0 0 1rem 0 rgba(0,0,0,0.1);
    width:36px;
    width:3.6rem;
    height:0;
    background-color:#f8f8f8;
    transition:height 1.2s ease-in-out;
}
.area01 .box02 .signal-box .line01.staggered{
    height:20%;
}
.area01 .box02 .signal-box .line02.staggered{
    height:40%;
    transition-delay:.1s;
}
.area01 .box02 .signal-box .line03.staggered{
    height:60%;
    transition-delay:.2s;
}
.area01 .box02 .signal-box .line04.staggered{
    height:80%;
    transition-delay:.3s;
}
.area01 .box02 .signal-box .line05.staggered{
    height:100%;
    transition-delay:.4s;
}
.area01 .box02{
    height:680px;
    height:68rem;
}
.area01 .box02 .img03{
    top:20px;
    top:2rem;
    left:-15px;
    left:-1.5rem;
    z-index:3;
}
.area01 .box02 .img04{
    top:87px;
    top:8.7rem;
    left:130px;
    left:13rem;
    z-index:3;
}
.area01 .box02 .img01{
    top:185px;
    top:18.5rem;
    right:-26px;
    right:-2.6rem;
    z-index:2;
}
.area01 .box02 .img02{
    top:355px;
    top:35.5rem;
    right:130px;
    right:13rem;
    z-index:2;
}
.area01 .box03{
    height:610px;
    height:61rem;
}
.area01 .box03 .img06{
    top:20px;
    top:2rem;
    right:120px;
    right:0;
    z-index:4;
}
.area01 .box03 .img07{
    top:40px;
    top:4rem;
    right:17px;
    right:-1.7rem;
    transition-delay:.2s;
}
.area01 .box03 .img08{
    top:112px;
    top:11.2rem;
    left:-24px;
    left:-2.4rem;
    transition-delay:.5s;
}
.area01 .box03 .img09{
    bottom:56px;
    bottom:5.6rem;
    right:0;
    transition-delay:.8s;
}
.area01 .box03 .img11{
    top:90px;
    top:9rem;
    left:-15px;
    left:-1.5rem;
    z-index:2;
}
.area01 .box03 .img12{
    bottom:120px;
    bottom:12rem;
    right:-20px;
    right:-2rem;
    z-index:3;
}
.area01 .box03 .img05{
    top:60px;
    top:6rem;
    left:-5px;
    left:-.5rem;
    z-index:1;
}
.area01 .box04{
    height:630px;
    height:63rem;
}
.area01 .box04 .swiper-container img{
    position:relative;
    transform:scale(.57);
    transition:transform .35s cubic-bezier(0.43, -0.12, 0.13, 1.12);;
}
.area01 .box04 .swiper-container .scale-on img{
    position:relative;
    transform:scale(1);
    transition:transform .5s cubic-bezier(0.43, -0.12, 0.13, 1.12);;
}
.area01 .box04 .img10{
    top:20px;
    top:2rem;
    left:calc(50% - 105px);
    left:calc(50% - 10.5rem);
}
.area01 .box04 .swiper-container{
    position:absolute;
    top:138px;
    top:13.8rem;
    left:calc(50% - 175px);
    left:calc(50% - 17.5rem);
    width:360px;
    width:36rem;
}
.area01 .box04 .swiper-container::after{
    content:"";
    position:absolute;
    top:0;
    left:0;
    z-index:1;
    width:20px;
    width:2rem;
    height:100%;
    background:linear-gradient(to right, rgba(255,255,255,.8) 35%,rgba(255,255,255,0) 100%);
}
.area01 .box04 .swiper-container::before{
    content:"";
    position:absolute;
    top:0;
    right:0;
    z-index:1;
    width:20px;
    width:2rem;
    height:100%;
    background:linear-gradient(to left, rgba(255,255,255,.8) 35%,rgba(255,255,255,0) 100%);
}
.area01 .box04 .swiper-slide{
    text-align:center;
}


/* 두번째 컨텐츠 */
/* 두번째 컨텐츠 */
/* 두번째 컨텐츠 */

.area02 .box02 .img-box{
    display:flex;
    align-items:flex-start;
    flex-wrap:wrap;
    justify-content:center;
}
.area02 .box02 .img-box .count-up-box {
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    width:100%;
    margin-top:25px;
    margin-top:2.5rem;
    padding-left:40px;
    padding-left:4rem;
}
.area02 .box02 .img-box .count-up-box .img01{
    position:absolute;
    top:16px;
    top:1.6rem;
    left:calc(50% - 125px);
    left:calc(50% - 12.5rem);
    z-index:1;
}
.area02 .box02 .img-box .ui-count-up-area{
    display:flex;
    align-items:center;
    font-family:"Roboto-Bold";
    font-size:65px;
    font-size:6.5rem;
}
.area02 .box02 .img-box .ui-count-up-area .count{
    border-radius:15px;
    border-radius:1.5rem;
    box-shadow:3px 3px 15px rgba(0,0,0,0.1);
    box-shadow:.3rem .3rem 1.5rem rgba(0,0,0,0.1);
    width:69px;
    width:6.9rem;
    height:93px;
    height:9.3rem;
    text-align:center;
    background-color:#fff;
}
.area02 .box02 .img-box .txt{
    margin-left:5px;
    font-size:32px;
    font-size:3.2rem;
}
.area02 .box02 .img-box .ui-count-up-area .count + .count{
    margin-left:5px;
    margin-left:.5rem;
}
.area02 .box02 .img-box img + img{
    margin-left:10px;
    margin-left:1rem;
}
.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:27px;
    margin-left:2.7rem;
}
.area02 .box03 {
    height:500px;
    height:50rem;
}
.area02 .box03 .img01{
    top:20px;
    top:2rem;
    left:calc(50% - 110px);
    left:calc(50% - 11rem)
}
.area02 .box03 .img02 {
    top:70px;
    top:7rem;
    left:calc(50% - 33px);
    left:calc(50% - 3.3rem);
    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:158px;
    top:15.8rem;
    left:calc(50% - 57px);
    left:calc(50% - 5.7rem);
}
.area02 .box03 .skeleton-line-box .line01{
    border-radius:3px;
    border-radius:.3rem;
    width:0;
    height:13px;
    height:1.3rem;
    background-color:#f3f3f3;
    transition:width .8s ease-out;
}
.area02 .box03 .skeleton-line-box .line02{
    margin-top:10px;
    margin-top:1rem;
    border-radius:3px;
    border-radius:.3rem;
    width:0;
    width:0;
    height:13px;
    height:1.3rem;
    background-color:#f3f3f3;
    transition:width .8s ease-out;
}
.area02 .box03 .skeleton-line-box .line01.staggered{
    width:118px;
    width:11.8rem;
}
.area02 .box03 .skeleton-line-box .line02.staggered{
    width:84px;
    width:8.4rem;
}
.area02 .box03 .health-box{
    overflow:hidden;
    position:absolute;
    top:230px;
    top:22.23rem;
    left:-20px;
    left:-2rem;
    padding:0 21px;
    padding:0 2.1rem;
    width:calc(100% + 40px);
    width:calc(100% + 4rem);
}
.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;
}
.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:27px;
    margin-left:2.7rem;
    animation:lineMoveWay 10s .5s infinite linear;
}
.area02 .box03 .health-box img + img{
    margin-left:27px;
    margin-left:2.7rem;
}
.area02 .box03 .health-box .shadow{
    position:absolute;
    top:-2px;
    top:-.2rem;
    z-index:1;
    width:24px;
    width:2.4rem;
    height:calc(100% + 5px);
    height:calc(100% + .5rem);
}
.area02 .box03 .health-box .shadow.left{
    left:calc(50% - 81px);
    left:calc(50% - 8.1rem);
    box-shadow:inset 10px 0 10px rgb(255 255 255);
    box-shadow:inset 1rem 0 1rem rgb(255 255 255);
}
.area02 .box03 .health-box .shadow.right{
    left:calc(50% + 59px);
    left:calc(50% + 5.9rem);
    box-shadow:inset -10px 0 10px rgb(255 255 255);
    box-shadow:inset -1rem 0 1rem rgb(255 255 255)
}
.area02 .box04{
    align-items:center;
}
.area02 .box04 .img-box{
    flex-basis:auto;
    width:100%;
    height:85px;
    height:8.5rem;
}
.area02 .box04 .flow-box{
    position:absolute;
    top:calc(50% - 50px);
    top:calc(50% - 5rem);
    left:calc(50% - 7px);
    left:calc(50% - .7rem);
}
.area02 .box04 [class*="icon-flower-powder"]{
    position:absolute;
}
.area02 .box04 [class*="flower-arounder"]{
    position:absolute;
    height:15px;
    height:1.5rem;
}
.area02 .box04 [class*="flower-arounder"].right{
    position:absolute;
    height:15px;
    height:1.5rem;
    transform-origin:right 7px;
    transform-origin:right 0.7rem;
}
.area02 .box04 .right [class*="icon-flower-powder"]{
    right:0;
}
.area02 .box04 [class*="flower-arounder"].left{
    position:absolute;
    left:0;
    height:15px;
    height:1.5rem;
    transform-origin:left 7px;
    transform-origin:left .7rem;
}
.area02 .box04 .flower-arounder01{
    left:-105px;
    left:-10.5rem;
    width:105px;
    width:10.5rem;
    transform:rotate(0);
}
.area02 .box04 .flower-arounder02{
    left:-210px;
    left:-21rem;
    width:210px;
    width:21rem;
    transform:rotate(-10deg);
}
.area02 .box04 .flower-arounder03{
    left:-180px;
    left:-18rem;
    width:180px;
    width:18rem;
    transform:rotate(-30deg);
}
.area02 .box04 .flower-arounder04{
    left:-120px;
    left:-12rem;
    width:120px;
    width:12rem;
    transform:rotate(-43deg);
}
.area02 .box04 .flower-arounder05{
    width:180px;
    width:18rem;
    transform:rotate(-5deg);
}
.area02 .box04 .flower-arounder05 i{
    right:180px;
    right:18rem;
}
.area02 .box04 .flower-arounder06{
    width:185px;
    width:18.5rem;
    transform:rotate(36deg);
}
.area02 .box04 .flower-arounder06 i{
    right:185px;
    right:18.5rem;
}
.area02 .box04 .flower-arounder07{
    width:225px;
    width:22.5rem;
    transform:rotate(25deg);
}
.area02 .box04 .flower-arounder07 i{
    right:225px;
    right:22.5rem;
}
.area02 .box04 .flower-arounder08{
    left:-175px;
    left:-17.5rem;
    width:175px;
    width:17.5rem;
    transform:rotate(0);
}
.area02 .box04 .flower-arounder09{
    left:-155px;
    left:-15.5rem;
    width:155px;
    width:15.5rem;
    transform:rotate(-22deg);
}
.area02 .box04 .flower-arounder10{
    left:-70px;
    left:-7rem;
    width:70px;
    width:7rem;
    transform:rotate(-22deg);
}
.area02 .box04 .flower-arounder11{
    width:125px;
    width:12.5rem;
    /* transform:rotate(-15deg); */
    transform:rotate(-7deg);
}
.area02 .box04 .flower-arounder11 i{
    right:125px;
    right:12.5rem;
}
.area02 .box04 .flower-arounder12{
    width:195px;
    width:19.5rem;
    transform:rotate(15deg);
}
.area02 .box04 .flower-arounder12 i{
    right:195px;
    right:19.5rem;
}
.area02 .box04 .flower-arounder13{
    width:115px;
    width:11.5rem;
    transform:rotate(15deg);
}
.area02 .box04 .flower-arounder13 i{
    right:115px;
    right:11.5rem;
}
.area02 .box04 .flower-arounder14{
    width:115px;
    width:11.5rem;
    transform:rotate(42deg);
}
.area02 .box04 .flower-arounder14 i{
    right:115px;
    right:11.5rem;
}
.area02 .box04 .gauge-box{
    flex-basis:auto;
    position:absolute;
    top:calc(50% - 42px);
    top:calc(50% - 4.2rem);
    left:calc(50% - 150px);
    left:calc(50% - 15rem);
    border-radius:30px;
    border-radius:3rem;
    width:300px;
    width:30rem;
    height:85px;
    height:8.5rem;
    background-color:#e9f1ff;
}
.area02 .box04 .gauge-area{
    position:absolute;
    top:calc(50% - 6px);
    top:calc(50% - .6rem);
    left:25px;
    left:2.5rem;
    border-radius:7px;
    border-radius:.7rem;
    width:calc(100% - 50px);
    width:calc(100% - 5rem);
    height:12px;
    height:1.2rem;
    background-color:#fff;
}
.area02 .box04 .gauge-line{
    background-color:#4889ff;
    border-radius:7px;
    border-radius:.7rem;
}
.area02 .box04 .gauge-area .icon-gauge-fire{
    position:absolute;
    top:-15px;
    top:-1.5rem;
    right:-35px;
    right:-3.5rem;
}
.area02 .box04 .guage-count{
    display:flex;
    justify-content:center;
    align-items:center;
    position:absolute;
    top:-18px;
    top:-1.8rem;
    left:calc(50% - 45px);
    left:calc(50% - 4.5rem);
    border-radius:36px;
    border-radius:3.6rem;
    width:90px;
    width:9rem;
    height:36px;
    height:3.6rem;
    color:#fff;
    font-family:"Roboto-Medium";
    font-size:16px;
    font-size:1.6rem;
    background-color:#222222;
}
.area02 .box04 .guage-count .count{
    color:#7aa9ff;
}
.area02 .box04 .guage-count .slash{
    margin:0 3px;
    margin:0 .3rem;
    color:#656565;
}
/* AI 건강관상 */
.area02 .ai-box.box02 .img-box .scanner-box {
    position:relative;
    z-index:2;
    margin:0 auto 87px;
    margin:0 auto 8.7rem;
    width:164px;
    width:16.4rem;
    height:290px;
    height:29rem;
}
.area02 .ai-box.box02 .img-box .icon-scanner {
    position:absolute;
}
.area02 .ai-box.box02 .img-box .icon-scanner01,
.area02 .ai-box.box02 .img-box .icon-scanner02,
.area02 .ai-box.box02 .img-box .icon-scanner03,
.area02 .ai-box.box02 .img-box .icon-scanner04,
.area02 .ai-box.box02 .img-box .icon-scanner05{
    position:absolute;
    top:0;
    left:0;
    opacity:0;
}
.area02 .ai-box.box02 .img-box .icon-scanner01.staggered {
    animation:opacity01 4s linear;
    transition:animation 2s;
}
.area02 .ai-box.box02 .img-box .icon-scanner02.staggered {
    animation:opacity02 4s linear;
    transition:animation 2s;
}
.area02 .ai-box.box02 .img-box .icon-scanner03.staggered {
    animation:opacity03 4s linear;
    transition:animation 2s;
}
.area02 .ai-box.box02 .img-box .icon-scanner04.staggered {
    animation:opacity04 4s linear;
    transition:animation 2s;
}
.area02 .ai-box.box02 .img-box .icon-scanner05.staggered {
    animation:opacity05 4s linear;
    transition:animation 2s;
    opacity:1;
}
.area02 .ai-box.box02 .icon-gauge-box {
    position:absolute;
    bottom:0;
    z-index:1;
    left:-80px;
    left:-8rem;
}
.area02 .ai-box.box02 [class^="icon-gauge-bar"] + [class^="icon-gauge-bar"] {
    margin:10px auto 0;
    margin:1rem auto 0;
}
.area02 .ai-box.box03 .screen-box {
    overflow:hidden;
    position:relative;
    margin:0 auto;
    border-radius:20px;
    border-radius:2rem;
    width:164px;
    width:16.4rem;
    height:290px;
    height:29rem;
    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(-925px);
    transform:translateY(-92.5rem);
    transition:transform 2.5s cubic-bezier(0.26, 0.38, 0.21, 1.0);
}
/* 편의서비스 컨텐츠 */
.area02 .box02 .img-box .img01,
.area02 .box03 .img-box .img01,
.area02 .box04 .img-box .img01,
.area02 .box05 .img-box .img01{
    position: static;
}
.area02 .box03{
    height: auto;
}
.area02 .box03 .img-box{
    text-align: center;
}
.area02 .box04 .img-box{
    width: auto;
    height: auto;
}
.area02 .box05{
    align-items: center;
}


/* 세번째 컨텐츠 */
/* 세번째 컨텐츠 */
/* 세번째 컨텐츠 */

.area03.mt200{
    margin-top:200px;
    margin-top:20rem;
}
.area03 .box02 {
    height:500px;
    height:50rem;
}
.area03 .box02 .img01{
    top:20px;
    top:2rem;
    left:calc(50% - 110px);
    left:calc(50% - 11rem);
}
.area03 .box02 .gauge-box {
    top:215px;
    top:21.5rem;
    left:calc(50% - 20px);
    left:calc(50% - 2rem);
    width:165px;
    width:16.5rem;
    background-color:#4889ff;
}
.area03 .box02 .gauge-area{
    background-color:#1762ea;
}
.area03 .box02 .gauge-area .icon-shoes02{
    position:absolute;
    top:-65px;
    top:-6.5rem;
    left:-16px;
    left:-1.6rem;
    transition-delay:.2s;
}
.area03 .box03 {
    height:500px;
    height:50rem;
}
.area03 .box03 .img02{
    top:0;
    left:calc(50% - 145px);
    left:calc(50% - 14.5rem);
}
.area03 .box04{
    height:465px;
    height:46.5rem;
}
.area03 .box04 .present-box{
    position:absolute;
    top:calc(50% - 140px);
    top:calc(50% - 14rem);
    left:calc(50% - 85px);
    left:calc(50% - 8.5rem);
    z-index:2;
    border-radius:50%;
    width:170px;
    width:17rem;
    height:170px;
    height:17rem;
    box-shadow:0 0 25px rgba(0,0,0,0.1),inset 0 0 2px rgba(255,255,255,0.1);
    box-shadow:0 0 2.5rem rgba(0,0,0,0.1),inset 0 0 .2rem rgba(255,255,255,0.1);
    backdrop-filter:blur(5px);
    backdrop-filter:blur(.5rem);
    background-color:rgba(255,255,255,0.1);
    transform:scale(1.2);
    opacity:0;
}
.area03 .box04 .ball-img{
    top:calc(50% - 95px);
    top:calc(50% - 9.5rem);
    left:calc(50% - 40px);
    left:calc(50% - 4rem);
    opacity:0;
}
.area03 .box04 .img01{
    transform:translateX(-305px);
    transform:translateX(-30.5rem);
}
.area03 .box04 .img02{
    transform:translateX(-207px);
    transform:translateX(-20.7rem);
}
.area03 .box04 .img03{
    transform:translateX(-110px);
    transform:translateX(-11rem);
}
.area03 .box04 .img04{
    transform:translateX(110px);
    transform:translateX(11rem);
}
.area03 .box04 .img05{
    transform:translateX(207px);
    transform:translateX(20.7rem);
}
.area03 .box04 .img06{
    transform:translateX(305px);
    transform:translateX(30.5rem);
}
.area03 .box04 .present-box .coin-box{
    position:absolute;
    top:calc(50% - 22px);
    top:calc(50% - 2.2rem);
    left:calc(50% - 22px);
    left:calc(50% - 2.2rem);
    width:45px;
    width:4.5rem;
    height:45px;
    height:4.5rem;
}
.area03 .box04 .present-box .coin-box.front{
    z-index:2;
}
.area03 .box04 .present-box [class*=icon-coin]{
    position:absolute;
    top:calc(50% - 22px);
    top:calc(50% - 2.2rem);
    left:calc(50% - 22px);
    left:calc(50% - 2.2rem);
    transform:translate(0) rotate(0.8);
    transition:transform .7s cubic-bezier(0.27, 0.1, 0.4, 1.15), opacity .2s ease-out;
    opacity:0;
}
.area03 .box04 .present-box .icon-coin01.on{
    transform:translate(-45px, -85px) rotateZ(720deg);
    transform:translate(-4.5rem, -8.5rem) rotateZ(720deg);
    transition-delay:.2s;
    opacity:1;
}
.area03 .box04 .present-box .icon-coin02.on{
    transform:translate(50px, -70px) rotateZ(1080deg);
    transform:translate(5rem, -7rem) rotateZ(1080deg);
    transition-delay:.1s;
    opacity:1;
}
.area03 .box04 .present-box .icon-coin03.on{
    transform:translate(-100px, -25px) rotateZ(1080deg);
    transform:translate(-10rem, -2.5rem) rotateZ(1080deg);
    opacity:1;
}
.area03 .box04 .present-box .icon-coin04.on{
    transform:translate(-72px, -30px) rotateZ(720deg);
    transform:translate(-7.2rem, -3rem) rotateZ(720deg);
    transition-delay:.3s;
    opacity:1;
}
.area03 .box04 .present-box .icon-coin05.on{
    transform:translate(-53px, -15px) rotateZ(720deg);
    transform:translate(-5.3rem, -1.5rem) rotateZ(720deg);
    opacity:1;
}
.area03 .box04 .present-box .icon-coin06.on{
    transform:translate(100px, -43px) rotateZ(1080deg);
    transform:translate(10rem, -4.3rem) rotateZ(1080deg);
    transition-delay:.1s;
    opacity:1;
}
.area03 .box04 .present-box .icon-coin07.on{
    transform:translate(85px, 25px) rotateZ(720deg);
    transform:translate(8.5rem, 2.5rem) rotateZ(720deg);
    opacity:1;
}
.area03 .box04 .present-box .icon-coin08.on{
    transform:translate(-37px, 45px) rotateZ(720deg);
    transform:translate(-3.7rem, 4.5rem) rotateZ(720deg);
    transition-delay:.4s;
    opacity:1;
}
.area03 .box04 .present-box .icon-coin09.on{
    transform:translate(-72px, 65px) rotateZ(1080deg);
    transform:translate(-7.2rem, 6.5rem) rotateZ(1080deg);
    opacity:1;
}
.area03 .box04 .present-box .icon-coin10.on{
    transform:translate(70px, 90px) rotateZ(720deg);
    transform:translate(7rem, 9rem) rotateZ(720deg);
    transition-delay:.3s;
    opacity:1;
}
.area03 .box04 .present-box .icon-coin11.on{
    transform:translate(45px, 75px) rotateZ(720deg);
    transform:translate(4.5rem, 7.5rem) rotateZ(720deg);
    opacity:1;
}
.area03 .box04 .present-box .img_present{
    position:absolute;
    top:35px;
    top:3.5rem;
    left:37px;
    left:3.7rem;
    width:96px;
    width:9.6rem;
    text-align:center;
}
.area03 .box04 .present-box .img_present img{
    position:relative;
}
.area03 .box04 .present-box .img_present .present-head{
    transform-origin:5px 33px;
    transform-origin:.5rem 3.3rem;
    z-index:2;
}
.area03 .box04 .present-box .img_present .present-head.on{
    transform:rotate(-15deg) translate(-7px, 5px);
    transform:rotate(-15deg) translate(-.7rem, .5rem);
}
.area03 .box04 .present-box .img_present .present-body{
    margin-top:-5px;
}
.area03 .box04 .point-txt{
    position:absolute;
    top:calc(50% - 32px);
    top:calc(50% - 3.2rem);
    width:100%;
    text-align:center;
    line-height:1;
}
.area03 .box04 .point-txt .rbtR{
    color:#aaaaaa;
    font-size:11px;
    font-size:1.1rem;
    letter-spacing:.24em;
    opacity:.2;
}
.area03 .box04 .point-txt .rbtB{
    margin-top:9px;
    margin-top:.9rem;
    color:#4889ff;
    font-size:40px;
    font-size:4rem;
}

/* 편의서비스 컨텐츠 */
.area03 .box03{
    align-items: center;
}
.area03 .box03 .img-box .img02{
    position: static;
}
.area03 .box03 .img-box .img03{
    left: -10px;
    left: -1rem;
    bottom: 30px;
    bottom: 3rem;
}
.area03 .box04{
    height: 500px;
    height: 50rem;
}
.area03 .box04 .img-box .img01{
    left: -80px;
    top: 0;
    transform: translate(0,0);
}
.area03 .box04 .img-box .img02{
    right: -110px;
    top: 90px;
    transform: translate(0,0);
}
.area03 .box04 .img-box .img03{
    right: -90px;
    bottom: -80px;
    transform: translate(0,0);
}
.area03 .box04 .img-box .img04{
    left: -150px;
    bottom: -90px;
    transform: translate(0,0);
}
.area03 .box04 .img-box .img05{
    left: 50%;
    top: 50%;
    transform: translate(-155px, -30px);
}


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

.area04 .box01{
    height:340px;
    height:34rem;
}
.area04 .box02{
    height:220px;
    height:22rem;
}
.area04 .box02 .img01{
    top:40px;
    top:4rem;
    left:calc(50% - 88px);
    left:calc(50% - 8.8rem);
    filter:drop-shadow(0 0 23px rgba(0,0,0,0.2));
}
.area04 .box02 .img02{
    top:120px;
    top:12rem;
    left:calc(50% - 8px);
    left:calc(50% - .8rem);
    transition-delay:.5s;
}
.area04 .box03 .tit-bg{
    display:flex;
    position:absolute;
    top:0;
    left:calc(50% - 147px);
    left:calc(50% - 14.7rem);
    z-index:1;
    width:289px;
    width:28.9rem;
    height:90px;
    height:9rem;
}
.area04 .box03 .tit-bg .section-tit{
    opacity:0;
}
.area04 .box03 .tit-bg .section-tit.staggered{
    transition-delay:.3s;
    opacity:1;
}
.area04 .box03 .motion-area-wrap{
    top:-222px;
    top:-22.2rem;
    right:90px;
    right:9rem;
}
.area04 .box03 .motion-area{
    position:relative;
    height:125px;
    height:12.5rem;
}
.area04 .box03 .motion-area .icon-desc-info01{
    position:absolute;
    left:calc(50% - 128px);
    left:calc(50% - 12.8rem);
    z-index:10;
}
.area04 .box03 .motion-area .icon-info-point{
    position:absolute;
    top:62.5px;
    top:6.25rem;
    left:calc(50% - 99px);
    left:calc(50% - 9.9rem);
    z-index:50;
}
.area04 .box03 .motion-area .icon-info-bg{
    position:absolute;
    top:35px;
    top:3.5rem;
    left:calc(50% - 35px);
    left:calc(50% - 3.5rem);
    z-index:5;
}
.area04 .box03 .motion-area .icon-desc-info02{
    position:absolute;
    right:calc(50% - 122px);
    right:calc(50% - 12.2rem);
    z-index:10;
}
.area04 .box03 .motion-desc-txt.staggered{
    animation-delay:.2s;
}
.area04 .box03 .motion-desc-txt{
    display:flex;
    margin:10px auto 0;
    margin:1rem auto 0;
    width:250px;
    width:25rem;
}
.area04 .box03 .motion-desc-txt .emj{
    margin-left:2px;
    margin-right:.2rem;
    font-size:10px;
    font-size:1rem;
    font-style:normal;
}
.area04 .box03 .motion-desc-txt .motion-bg{
    display:inline-block;
    margin-right:7px;
    margin-right:.7rem;
    padding:0 10px;
    padding:0 1rem;
    border-radius:7px;
    border-radius:.7rem;;
    box-sizing:border-box;
    width:170px;
    width:17rem;
    height:26px;
    height:2.6rem;
    color:#fff;
    font-family:"NotoSansKR-Bold";
    font-size:9px;
    font-size:.9rem;
    line-height:26px;
    line-height:2.6rem;
    background:linear-gradient(to right,#5da5f9,#6989fb);
}
.area04 .box03 .motion-desc-txt .motion-bg .motion-txt{
    margin-left:5px;
    margin-left:.5rem;
    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:.5s;
    animation-iteration-count:1;
    transition:animation .3s;
}
.area04 .box03 .motion-desc-txt .btn-area-wrap .btn-txt{
    display:inline-block;
    padding:5px 15px;
    padding:.5rem 1.5rem;
    border:1px solid #678afc;
    border-radius:8px;
    border-radius:.8rem;
    box-sizing:border-box;
    height:26px;
    height:2.6rem;
    color:#678afc;
    font-family:"NotoSansKR-Bold";
    font-size:8px;
    font-size:.8rem;
}
.area04 .box03 .img-box{
    flex-basis:auto;
    position:relative;
    margin-top:140px;
    margin-top:1.4rem;
    height:220px;
    height:22rem;
}
.area04 .box03 .flow-box{
    position:absolute;
    top:calc(50% - 80px);
    top:calc(50% - 8rem);
    right:calc(50% - 63px);
    right:calc(50% - 6.3rem);
    z-index:30;
    opacity:0;
}
.area04 .box03 .flow-box.staggered {
    opacity:1;
}
.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:10px;
    height:1rem;
}
.area04 .box03 [class*="flower-arounder"].right{
    position:absolute;
    height:10px;
    height:1rem;
    transform-origin:right 8px;
    transform-origin:right .8rem;
}
.area04 .box03 .right [class*="icon-flower-powder"]{
    right:0;
}
.area04 .box03 [class*="flower-arounder"].left{
    position:absolute;
    height:10px;
    height:1rem;
    transform-origin:left 40px;
    transform-origin:left 4rem;
}
.area04 .box03 .flower-arounder12{
    bottom:-45px;
    bottom:-4.5rem;
    left:-185px;
    left:-18.5rem;
    z-index:50;
    width:50px;
    width:5rem;
    transform:rotate(10deg);
}
.area04 .box03 .flower-arounder13{
    left:-189px;
    left:-18.9rem;
    bottom:-60px;
    bottom:-6rem;
    z-index:50;
    width:70px;
    width:7rem;
    transform:rotate(0deg);
}
.area04 .box03 .flower-arounder14{
    bottom:-65px;
    bottom:-6.5rem;
    left:-202px;
    left:-20.2rem;
    z-index:50;
    width:80px;
    width:8rem;
    transform:rotate(0deg);
}
.area04 .box03 .flower-arounder15{
    bottom:-77px;
    bottom:-7.7rem;
    left:-201px;
    left:-20.1rem;
    width:75px;
    width:7.5rem;
    transform:rotate(-1deg);
}
.area04 .box03 .flower-arounder16{
    bottom:-70px;
    bottom:-7rem;
    left:-180px;
    left:-18rem;
    width:50px;
    width:5rem;
    transform:rotate(-19deg);
}
.area04 .box03 .flower-arounder17{
    bottom:-43px;
    bottom:-4.3rem;
    left:-202px;
    left:-20.2rem;
    width:110px;
    width:11rem;
    transform:rotate(-2deg);
}
.area04 .box03 .flower-arounder18{
    bottom:-50px;
    bottom:-5rem;
    left:-220px;
    left:-22rem;
    width:130px;
    width:13rem;
    transform:rotate(4deg);
}
.area04 .box03 .flower-arounder19{
    bottom:-60px;
    bottom:-6rem;
    left:-200px;
    left:-20rem;
    width:100px;
    width:10rem;
    transform:rotate(3deg);
}
.area04 .box03 .flower-arounder20{
    bottom:-70px;
    bottom:-7rem;
    left:-200px;
    left:-20rem;
    width:110px;
    width:11rem;
    transform:rotate(3deg);
}
.area04 .box03 .flower-arounder21{
    bottom:-60px;
    bottom:-6rem;
    left:-199px;
    left:-19.9rem;
    width:80px;
    width:8rem;
    transform:rotate(13deg);
}
.area04 .box04 {
    font-weight:600;
}
.area04 .box05 {
    height:400px;
    height:40rem;
    font-weight:600;
}
.area04 .box05 .img01{
    position:relative;
    top:20px;
    top:2rem;
    left:calc(50% - 110px);
    left:calc(50% - 11rem);
}
.area04 .box05 .img-box {
    flex:1 0 auto;
    margin:0;
}
.area04 .box05 .card-box {
    position:absolute;
    top:85px;
    top:8.5rem;
    left:calc(50% - 115px);
    left:calc(50% - 11.5rem);
}
.area04 .box05 .card-box .card-tit {
    margin-bottom:8px;
    margin-bottom:.8rem;
    font-size:13px;
    font-size:1.3rem;
}
.area04 .box05 .card-box .card-txt {
    font-size:21px;
    font-size:2.1rem;
}
.area04 .box05 .health-box{
    overflow:hidden;
    position:absolute;
    top:220px;
    top:22rem;
    left:-20px;
    left:-2rem;
    padding:0 21px;
    padding:0 2.1rem;
    width:calc(100% + 40px);
    width:calc(100% + 4rem);
}
.area04 .box05 .health-wrapper{
    display:flex;
    flex-wrap:nowrap;
}
.area04 .box05 .health-box .health-wrapper >div{
    display:flex;
    flex-wrap:nowrap;
    flex:1 0 auto;
    justify-content:space-between;
}
.area04 .box05 .health-box img{
    flex:0 0 auto;
    position:relative;
    transition:transform .8s ease-in-out;
}
.area04 .box05 .health-box img.ui-stagger{
    transform:rotateX(90deg);
}
.area04 .box05 .health-box img.ui-stagger.staggered{
    transform:rotateX(0);
}
.area04 .box05 .health-box .health-wrapper.staggered .group1{
    animation:lineMoveWay 10s .5s infinite linear;
}
.area04 .box05 .health-box .health-wrapper.staggered .group2{
    margin-left:27px;
    margin-left:2.7rem;
    animation:lineMoveWay 10s .5s infinite linear;
}
.area04 .box05 .health-box img + img{
    margin-left:27px;
    margin-left:2.7rem;
}
.area04 .box05 .health-box .shadow{
    position:absolute;
    top:-2px;
    top:-.2rem;
    z-index:1;
    width:24px;
    width:2.4rem;
    height:calc(100% + 5px);
    height:calc(100% + .5rem);
}
.area04 .box05 .health-box .shadow.left{
    left:calc(50% - 81px);
    left:calc(50% - 8.1rem);
    box-shadow:inset 10px 0 10px rgb(255 255 255);
    box-shadow:inset 1rem 0 1rem rgb(255 255 255);
}
.area04 .box05 .health-box .shadow.right{
    left:calc(50% + 59px);
    left:calc(50% + 5.9rem);
    box-shadow:inset -10px 0 10px rgb(255 255 255);
    box-shadow:inset -1rem 0 1rem rgb(255 255 255)
}
.area04 .box05 {
    height:400px;
    height:40rem;
}
.area04 .box06 .tit-bg02{
    display:flex;
    position:absolute;
    top:8px;
    top:.8rem;
    left:calc(50% - 77px);
    left:calc(50% - 7.7rem);
    z-index:1;
    width:289px;
    width:28.9rem;
    height:90px;
    height:9rem;
}
.area04 .box06 .tit-bg02 .section-tit02{
    opacity:0;
}
.area04 .box06 .tit-bg02 .section-tit02.staggered{
    animation-delay:2s;
    opacity:1;
}
.area04 .box06 .img01{
    top:0;
    left:calc(50% - 120px);
    left:calc(50% - 12rem);
    animation-delay:1.2s;
}
.area04 .box06 .img02 {
    opacity:0;
}
.area04 .box06 .img03{
    opacity:0;
}
.area04 .box06 .img04 {
    opacity:0;
}
.area04 .box06 .img05 {
    opacity:0;
}
.area04 .box06 .img02.staggered{
    top:140px;
    top:14rem;
    left:calc(50% - 71px);
    left:calc(50% - 7.1rem);
    transition-delay:.5s;
    transition-duration:1s;
    opacity:1;
}
.area04 .box06 .img03.staggered{
    top:140px;
    top:14rem;
    left:calc(50% - 28px);
    left:calc(50% - 2.8rem);
    transition-delay:.8s;
    transition-duration:1s;
    opacity:1;
}
.area04 .box06 .img04.staggered{
    top:140px;
    top:14rem;
    right:calc(50% - 54px);
    right:calc(50% - 5.4rem);
    transition-delay:1.2s;
    transition-duration:1s;
    opacity:1;
}
.area04 .box06 .img05.staggered{
    top:202px;
    top:20.2rem;
    left:calc(50% - 72px);
    left:calc(50% - 7.2rem);
    transition-delay:1.5s;
    transition-duration:1s;
    opacity:1;
}


/* 큐알 다섯번째 컨텐츠 */
/* 큐알 다섯번째 컨텐츠 */
/* 큐알 다섯번째 컨텐츠 */

.area05 .video-popup-btn{
    display:block;
    width:100%;
    text-align:center;
}
.area05 .video-popup-btn img{
    box-shadow:2px 2px 15px rgba(0,0,0,0.1);
    width:100%;
    max-width:640px;
}
.area05 .accordion-list + .accordion-list{
    margin-top:15px;
    margin-top:1.5rem;
}
.area05 .bullet-lists{
    padding:0 20px 25x;
    padding:0 2rem 2.5rem;
    line-height:1.5;
}
.area05 .accordion-container{
    margin-top:25px;
    margin-top:2.5rem;
}
.area05 .from-when{
    margin-top:20px;
    margin-top:2rem;
    text-align:center;
    letter-spacing:0;
}
.area05 .from-when .txt{
    color:#aaa;
    font-size:12px;
    font-size:1.2rem;
}
.area05 .video-area{
    position:relative;
    padding-bottom:58%;
    width:100%;
    height:0;
}
.area05 .video-area iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
.bullet-lists .list{
    position:relative;
    padding-left:6px;
    padding-left:.6rem;
    color:#666666;
    word-break:keep-all;
}
.bullet-lists .list + .list{
    margin-top:5px;
    margin-top:.5rem;
}
.bullet-lists .list::before{
    content:"";
    display:inline-block;
    position:absolute;
    top:9px;
    top:.9rem;
    left:0;
    border-radius:3px;
    border-radius:.3rem;
    width:3px;
    width:.3rem;
    height:3px;
    height:.3rem;
    background-color:#aaaaaa;
}


/* 탑버튼 */
/* 탑버튼 */
/* 탑버튼 */

.top-btn-area{
    position:relative;
    width:100%;
    height:140px;
    height:14rem;
}
.top-btn-area .top-btn{
    /* display:inline-block; */
    display:none;
    position:absolute;
    bottom:105px;
    bottom:10.5rem;
    right:25px;
    right:2.5rem;
    z-index:6;
    width:30px;
    width:3rem;
    height:30px;
    height:3rem;
    transform:translateY(145px);
    transform:translateY(14);
}
.top-btn-area .top-btn.fixed{
    position:fixed;
    transform:translateY(145px);
    transform:translateY(14.5rem);
}
.join-area{
    position:absolute;
    bottom:0;
    z-index:5;
    width:100%;
    height:165px;
    height:16.5rem;
    background-image:url("../../resource/images/mo/join_us_bg_gradient.png");
    background-size:100% auto;
}
.join-us{
    display:flex;
    justify-content:center;
    align-items:center;
    position:absolute;
    bottom:25px;
    bottom:2.5rem;
    left:20px;
    left:2rem;
    border:1px solid #4889ff;
    border-radius:60px;
    border-radius:6rem;
    box-shadow:none;
    width:calc(100% - 40px);
    width:calc(100% - 4rem);
    height:60px;
    height:6rem;
    color:#4889ff;
    font-size:17px;
    font-size:1.7rem;
    transition:box-shadow .2s ease-out;
    background-color:#fff;
}
.join-area.fixed{
    position:fixed;
    transform:translateY(145px);
    transform:translateY(14.5rem);
}


/* 푸터 */
/* 푸터 */
/* 푸터 */

#footer{
    background-color:#f8f8f8;
    text-align:center;
}
.footer-container{
    position:relative;
    z-index:7;
    margin:0 auto;
    padding:30px 0 40px;
    padding:3rem 0 4rem;
    max-width:100%;
}
.footer-container .infomation-area{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.footer-container .comp-info{
    flex:1 0 auto;
    font-size:0;
}
.footer-container .comp-info .each{
    display:block;
    position:relative;
    padding:0 5px;
    padding:0 .5rem;
    font-size:12px;
    font-size:1.2rem;
    line-height:12px;
    line-height:1.2rem;
}
.footer-container .comp-info .each + .each{
    margin-top:8px;
    margin-top:.8rem;
}
.footer-container .comp-info span{
    vertical-align:-4px;
    vertical-align:-.4rem;
}
.footer-container .comp-info a{
    vertical-align:-3px;
    vertical-align:-.3rem;
}
.footer-container .family-site-area{
    position:relative;
    margin:0 auto 20px;
    margin:0 auto 2rem;
    width:auto;
    width:103px;
    width:10.3rem;
    height:30px;
    height:3rem;
    text-align:left;
}
.footer-container .family-site-area .accordion-item{
    display:flex;
    flex-direction:column-reverse;
    position:absolute;
    bottom:0;
    border-radius:4px;
    border-radius:.4rem;
    width:100%;
    letter-spacing:0;
}
.footer-container .family-site-area .notoR{
    /* border:1px solid #dddddd; */
    display:block;
    padding:6px 2px 6px 9px;
    padding:.6rem .2rem .6rem .9rem;
    border-radius:4px;
    border-radius:.4rem;
    height:auto;
    font-size:8px;
    font-size:.8rem;
    text-align:left;
}
.footer-container .family-site-area .accordion-util .txt{
    color:#666666;
    font-size:12px;
    font-size:1.2rem;
}
.footer-container .family-site-area .accordion-content{
    padding-top:3px;
    padding-top:.3rem;
    word-break:keep-all;
}
.footer-container .family-site-area .accordion-content .rbtM{
    display:block;
    padding:6px 0 6px 9px;
    padding:.6rem 0 .6rem .9rem;
    height:auto;
    font-size:12px;
    font-size:1.2rem;
    line-height:1;
}
.footer-container .family-site-area .accordion-item.active {
    border-color:#002222;
    box-shadow:2px 2px 7px rgba(0,0,0,0.1);
    box-shadow:.2rem .2rem .7rem rgba(0,0,0,0.1);
    background-color:#fff;
}
.footer-container .copyright{
    margin-top:17px;
    margin-top:1.7rem;
    color:#aaaaaa;
    font-size:11px;
    font-size:1.1rem;
    letter-spacing:0;
}

/* 팝업 */
.popup-container{
    display:none;
    position:fixed;
    top:0;
    left:0;
    z-index:101;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.6);
    opacity:0;
}
.popup-container img{
    width:100%;
}
.popup-container .popup-wrapper{
    position:absolute;
    top:50%;
    left:20px;
    left:2rem;
    border-radius:0 0 12px 12px;
    border-radius:0 0 1.2rem 1.2rem;
    width:calc(100% - 40px);
    width:calc(100% - 4rem);
    transform:translateY(-50%);
}
.popup-container .popup-header{
    display:flex;
    align-items:center;
    padding-left:15px;
    padding-left:1.5rem;
    border-radius:12px 12px 0 0;
    border-radius:1.2rem 1.2rem 0 0;
    width:100%;
    height:35px;
    height:3.5rem;
    font-size:14px;
    font-size:1.4rem;
    background-color:#fff;
}
.popup-container .popup-content{
    overflow:hidden;
    margin-top:-1px;
    border-radius:0 0 12px 12px;
    border-radius:0 0 1.2rem 1.2rem;
    width:100%;
    height:auto;
    /* height:25.5rem; */
    background-color:#fff;
}
.popup-container .close-btn{
    display:flex;
    justify-content:center;
    align-items:center;
    position:absolute;
    top:0;
    right:0;
    width:40px;
    width:4rem;
    height:35px;
    height:3.5rem;
}
.popup-container .popup-content iframe{
    width:100%;
    height:100%;
}


/* 신규가입 이벤트 */
/* 신규가입 이벤트 */
/* 신규가입 이벤트 */

.popup-container01{
    display:none;
    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{
    overflow-y:auto;
    position:absolute;
    top:50%;
    left:50%;
    width:100%;
    max-width:320px;
    max-width:32rem;
    max-height:100vh;
    transform:translate(-50%, -50%);
}
.popup-container01 .close-btn{
    display:flex;
    justify-content:center;
    align-items:center;
    position:absolute;
    top:20px;
    top:2rem;
    right:20px;
    right:2rem;
    width:18px;
    width:1.8rem;
    height:18px;
    height:1.8rem;
}
.popup-container01 .close-btn a{
    display:block;
}
.popup-container01 .close-btn img{
    width:100%;
}
.event-area01{
    position:relative;
    /* max-height:100%;
    overflow-y:auto; */
    /* transform:scale(0.8); */
    margin:0 auto;
    max-width:320px;
    max-width:32rem;
}
.event-area01 img{
    width:100%;
    vertical-align:top;
}
.event-area01 .btn-go{
    margin:0;
    padding:0;
    border:none;
    vertical-align:top;
    width:100%;
}
.event-area01 .btn-go img{
    margin-top:-1px;
}


/* 키 프레임 영역 */
@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% - 27px));
        transform:translateX(calc(-100% - 2.7rem));
    }
}


@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(10px);
        transform:translateY(1rem);
    }
}
@keyframes bounce{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(6px);
        transform:translateY(0.6rem);
    }
}
/* 프로모션 챌린지 section 추가 수정 작업 2023-04-07 (e) */