.startPoint {
    /*width: 50px;*/
    /*height: 50px;*/
    position: fixed;
    right: 100px;
    bottom: 100px;
    z-index: 899998989;
    /*background: black;*/
    border: none;
    outline: none;
    cursor: pointer;

}


#container {
    background: #fedf2d;
}

#section01 {
    width: 100vw;
    height: 1450px;
}


.main .phone {
    position: absolute;
    top: 100px;
    left: 50%;
    margin-left: -495px;
    transform: scale(0.6);
    opacity: 0;
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);

}

.main.on .phone {
    transform: scale(1);
    opacity: 1;
}

.main .character {
    position: absolute;
    top: 135px;
    left: 50%;
    margin-left: -624px;
    transform: scale(0.8);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
    opacity: 0;
    transition-delay: 0.2s;
}

.main.on .character {
    transform: scale(1);
    opacity: 1;
}


#section02 {
    width: 100vw;
    height: 2135px;
    background: #fedf2d;
}

.lean_canvas .bg {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transform: translateY(80px);
    transition: all 1s;
    pointer-events: none;
}

.lean_canvas .lean_button{
    position: absolute;
    top: 243px;
    left: 428px;
    width: 1385px;
    height: 1353px;
    transform: translateY(-80px);
    transition: all 1s;
    opacity: 0;
}

.lean_canvas .lean_button.on{
    opacity: 1;
    transform: translateY(0);
}

.lean_canvas .lean_button01{
    position: absolute;
    top: 0;
    left: 0;
}
.lean_canvas .lean_button02{
    position: absolute;
    top: 0;
    left: 319px;
}

.lean_canvas .lean_button03{
    position: absolute;
    top: 0;
    left: 668px;
}

.lean_canvas .lean_button04{
    position: absolute;
    top: 0;
    left: 999px;
}

.lean_canvas .lean_button05{
    position: absolute;
    top: 0;
    left: 1331px;
}

.lean_canvas .lean_button06{
    position: absolute;
    top: 449px;
    left: 1331px;
}

.lean_canvas .lean_button07{
    position: absolute;
    top: 418px;
    left: 999px;
}

.lean_canvas .lean_button08{
    position: absolute;
    top: 417px;
    left: 319px;
}

.lean_canvas .lean_button09{
    position: absolute;
    top: 771px;
    left: 668px;
}

.lean_canvas .lean_button10{
    position: absolute;
    top: 771px;
    left: 0;
}

.lean_canvas.on .bg {
    opacity: 1;
    transform: translateX(0);
}

.overview {
    width: 100vw;
    height: 750px;
    position: absolute;
    top: 1386px;
    left: 0;
    opacity: 0;
    transform: translateY(80px);
    transition: all 1s;
    pointer-events: none;
}

.overview.on {
    opacity: 1;
    transform: translateX(0);
}

.overview_arrow {
    position: absolute;
    top: -118px;
    right: 321px;
}

#section03 {
    width: 100vw;
    height: 2573px;
    background: #fedf2d;
}

.desk_research .bg {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transform: translateY(80px);
    transition: all 1s;
    pointer-events: none;
}

.desk_research.on .bg {
    opacity: 1;
    transform: translateX(0);
}


.desk_research .desk_graph > div {
    transform: scale(0);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

.desk_research .desk_graph.on > div {
    transform: scale(1);
}


.desk_research .bg .blackbox {
    position: absolute;
    top: 507px;
    left: 200px;
    transition-delay: 0.2s;
}

.desk_research .bg .bar01 {
    position: absolute;
    bottom: 204px;
    right: 824px;
    transition-delay: 0.6s;
}


.desk_research .bg .bar02 {
    position: absolute;
    bottom: 239px;
    right: 278px;
    transition-delay: 0.6s;
}


.desk_research .bg .circle01 {
    position: absolute;
    bottom: 553px;
    right: 762px;
    transition-delay: 0.4s;
}


.desk_research .bg .circle02 {
    position: absolute;
    bottom: 553px;
    right: 252px;
    transition-delay: 0.4s;
}


.swot .swot_bg {
    position: absolute;
    top: 1400px;
    left: 0;
    opacity: 0;
    transform: translateY(80px);
    transition: all 1s;
    pointer-events: none;
}

.swot .swot_bg.on {
    opacity: 1;
    transform: scale(1);
}

.swot .swot-body {
    position: absolute;
    top: 410px;
    left: 50%;
    margin-left: -967px;
    opacity: 0;
    transform: scale(0.6);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

.swot .swot-body.on {
    opacity: 1;
    transform: scale(1);
}
.swot_bg .swot_character{
    width: 600px;
    height: 250px;
    position: absolute;
    top: 0;
    right: 0;
}
.swot_character .avocado {
    position: absolute;
    top: 23px;
    right: 207px;
    z-index: 10000;
    opacity: 0;
    transform: rotate(50deg);
    transition: all 2s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

.swot_character.on .avocado{
    opacity: 1;
    transform: rotate(0deg);

}

.swot .banana {
    position: absolute;
    top: -87px;
    right: 116px;
    z-index: 9999;
}

.swot .tree {
    position: absolute;
    top: 122px;
    right: 46px;
}

.swot-body .yellow_box {
    position: absolute;
    bottom: -235px;
    left: 556px;
    opacity: 0;
    transform: translateY(-80px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
    pointer-events: none;
}

.swot-body .yellow_box.on {
    opacity: 1;
    transform: translateX(0);
}


#section05 {
    width: 100vw;
    height: 1384px;
    background: #fedf2d;
}

.position .position_bg {
    position: absolute;
    top: -2px;
    left: 0;
    opacity: 0;
    transform: translateY(80px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
    pointer-events: none;

}

.position .position_bg.on {
    opacity: 1;
    transform: translateX(0);
}

.position_body > div {
    opacity: 0;
    transform: scale(0.6);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

.position_body.on > div {
    opacity: 1;
    transform: scale(1);
}


.position_body .left {
    position: absolute;
    top: 430px;
    left: 205px;
    transition-delay: 0.2s;

}

.position_body .right {
    position: absolute;
    top: 430px;
    right: 153px;
    transition-delay: 0.4s;

}


#section06 {
    width: 100vw;
    height: 1473px;
    background: #fedf2d;
}

.affinity .affinity_bg {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transform: translateY(80px);
    transition: all 1s;
    pointer-events: none;

}

.affinity .affinity_bg.on {
    opacity: 1;
    transform: translateX(0);

}

.affinity_bg .body01 {
    position: absolute;
    top: 510px;
    left: 50%;
    transform: translate(-50%);
}

.affinity_bg .affinity_body02 {
    position: absolute;
    bottom: 134px;
    left: 188px;
    opacity: 0;
    transform: translateY(80px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

.affinity_bg .affinity_body02.on {
    opacity: 1;
    transform: translateX(0);
}

.affinity_bg .key {
    position: absolute;
    top: 77px;
    right: 255px;
}

#section07 {
    width: 100vw;
    height: 1335px;
    background: #fedf2d;
}

.user_interview .user_interview_bg {
    position: absolute;
    top: -2px;
    left: 0;
    opacity: 0;
    transform: translateY(80px);
    transition: all 1s;
    pointer-events: none;
}

.user_interview .user_interview_bg.on {
    opacity: 1;
    transform: translateX(0);
}

.user_interview_bg .question_txt {
    position: absolute;
    top: 480px;
    left: 50%;
    margin-left: -670px;
    opacity: 0;
    transform: translateY(80px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
    pointer-events: none;

}

.user_interview_bg .question_txt.on {
    opacity: 1;
    transform: translateX(0);
}

.user_interview_bg .thoughts.on {
    opacity: 1;
    transform: translateX(0);
}

.user_interview_bg .thoughts {
    position: absolute;
    bottom: 114px;
    left: 50%;
    margin-left: -757px;
    opacity: 0;
    transform: translateY(80px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
    pointer-events: none;

}

.user_interview .character {
    width: 400px;
    height: 170px;
    position: absolute;
    top: 131px;
    right: 75px;
    opacity: 0;
    transform: translateX(150px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
    pointer-events: none;
    transition-delay: 0.2s;
}

.user_interview_bg.on .character {
    opacity: 1;
    transform: translateX(0);
}

.user_interview .character .finger {
    position: absolute;
    top: 0;
    right: 370px;

}

.user_interview .character .qmark01 {
    position: absolute;
    top: 0;
    right: 490px;
}

.user_interview .character .qmark02 {
    position: absolute;
    top: 0;
    right: 310px;
}

.user_interview .character .qmark03 {
    position: absolute;
    top: -30px;
    right: 465px;
}

.user_interview .character .grass {
    position: absolute;
    top: 4px;
    right: 75px;
}

#section08 {
    width: 100vw;
    height: 2203px;
    background: #fedf2d;
}

.persona .persona_bg {
    position: absolute;
    top: -3px;
    left: 0;
    opacity: 0;
    transform: translateY(80px);
    transition: all 1s;
    pointer-events: none;
}

.persona .persona_bg.on {
    opacity: 1;
    transform: translateX(0);
}

.persona_bg .persona01 {
    position: absolute;
    top: 500px;
    left: 207px;
    opacity: 0;
    transform: translateY(80px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
    pointer-events: none;
}

.persona_bg .persona01.on {
    opacity: 1;
    transform: translateX(0);
}

.persona_bg .persona02 {
    position: absolute;
    top: 1070px;
    left: 207px;
    transform: translateY(80px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
    pointer-events: none;
    opacity: 0;
}

.persona_bg .persona02.on {
    opacity: 1;
    transform: translateX(0);
}

.persona_bg .persona03 {
    position: absolute;
    top: 1520px;
    left: 207px;
    transform: translateY(80px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
    pointer-events: none;
    opacity: 0;
}

.persona_bg .persona03.on {
    opacity: 1;
    transform: translateX(0);
}

.persona_bg .persona04 {
    position: absolute;
    top: 1770px;
    left: 207px;
    transform: translateY(80px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
    pointer-events: none;
    opacity: 0;
}

.persona_bg .persona04.on {
    opacity: 1;
    transform: translateX(0);
}

.persona_bg .persona_tomato {
    position: absolute;
    top: -50px;
    right: 32px;
    transform: rotate(90deg);
    opacity: 0;
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

.persona_bg .persona_tomato.on{
    transform: rotate(0deg);
    opacity: 1;
}

.persona_bg .persona_star01 {
    position: absolute;
    top: 285px;
    right: 92px;
    opacity: 0;
    transform: scale(0);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

.persona_bg .persona_star01.on{
    opacity: 1;
    transform: scale(1);
}

.persona_bg .persona_star02 {
    position: absolute;
    bottom: 102px;
    left: 160px;
    opacity: 0;
    transform: scale(0);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

.persona_bg .persona_star02.on{
    opacity: 1;
    transform: scale(1);
}

#section09 {
    width: 100vw;
    height: 1510px;
    background: #fedf2d;
}

.journey .journey_bg {
    position: absolute;
    top: 0;
    left: -1px;
    opacity: 0;
    transform: translateY(80px);
    transition: all 1s;
    pointer-events: none;
}

.journey .journey_bg.on {
    opacity: 1;
    transform: translateX(0);
}

.journey_bg .journey_content {
    width: 1500px;
    height: 1000px;
    position: absolute;
    top: 450px;
    left: 50%;
    margin-left: -750px;
    opacity: 0;
    transform: translateY(80px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
    pointer-events: none;
}

.journey_bg .journey_content.on {
    opacity: 1;
    transform: translateX(0);
}

.journey_content .content01 {
    position: absolute;
    top: 0;
    left: 0;
}

.journey_content .content02 {
    position: absolute;
    top: 0;
    left: 0;
    margin-top: 90px;
}

.journey_content .content03 {
    position: absolute;
    top: 326px;
    left: 0;

}

.journey_content .content04 {
    position: absolute;
    top: 768px;
    left: 0;
}

#section10 {
    width: 100vw;
    height: 1210px;
    background: #fedf2d;
}

.asis-tobe .as-is_bg {
    position: absolute;
    top: -2px;
    left: 0;
    opacity: 0;
    transform: translateY(80px);
    transition: all 1s;
    /*pointer-events: none;*/
}

.asis-tobe .as-is_bg.on {
    opacity: 1;
    transform: translateX(0);
}

.as-is_bg .asis-tobe_content {
    width: 1530px;
    height: 670px;
    position: absolute;
    top: 390px;
    left: 50%;
    transform: translate(-50%);
}

.asis-tobe_content .as_content01 {
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(0.6);
    opacity: 0;
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

.asis-tobe_content .as_content01.on {
    transform: scale(1);
    opacity: 1;
}

.as-is_bg .as_content02 {
    position: absolute;
    top: 133px;
    right: 9px;
    opacity: 0;
    transform: translateX(100px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
    transition-delay: 0.6s;
}

.as-is_bg .as_content02.on {
    opacity: 1;
    transform: translateX(0);
}

.as-is_button {
    width: 88px;
    height: 419px;
    position: absolute;
    bottom: 180px;
    right: 202px;
    opacity: 0;
    transform: translateX(100px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
    transition-delay: 1s;

}

.as-is_bg .as-is_button.on {
    opacity: 1;
    transform: translateX(0);
}

.as-is_button .as_button01 {
    position: absolute;
    top: 0;
    right: -26px;
}

.as-is_button .as_button02 {
    position: absolute;
    top: 220px;
    right: -26px;
}

.as-is_button .as_button03 {
    position: absolute;
    top: 360px;
    right: -26px;
}

#section11 {
    width: 100vw;
    height: 1484px;
    background: #fedf2d;
}

.stakeholder .stakeholder_bg {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transform: translateY(80px);
    transition: all 1s;
    pointer-events: none;
}

.stakeholder .stakeholder_bg.on {
    opacity: 1;
    transform: translateX(0);
}

.stakeholder_bg .stakeholder_content {
    position: absolute;
    top: 420px;
    left: 50%;
    margin-left: -960px;
    opacity: 0;
    transform: translateY(80px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
    pointer-events: none;
    transition-delay: 0.6s;
}

.stakeholder_bg .stakeholder_content.on {
    opacity: 1;
    transform: translateX(0);
}

.stakeholder_bg .stakeholder_key {
    position: absolute;
    top: 140px;
    right: 250px;
}

#section12 {
    width: 100vw;
    height: 1022px;
    background: #fedf2d;
}

.project_goal .project_goal_bg {
    position: absolute;
    top: -1px;
    left: 0;
    opacity: 0;
    transform: translateY(80px);
    transition: all 1s;
    pointer-events: none;
}

.project_goal .project_goal_bg.on {
    opacity: 1;
    transform: translateX(0);
}

.project_goal_bg > div {
    opacity: 0;
    transform: translateY(80px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

.project_goal_bg.on > div {
    opacity: 1;
    transform: translateX(0);
}

.project_goal_bg .project_goal_content {
    position: absolute;
    top: 360px;
    left: 210px;
    transition-delay: 0.4s;
}

.project_goal_bg .project_goal_character {
    position: absolute;
    top: 188px;
    right: 250px;
    transition-delay: 0.6s;
}

#section13 {
    width: 100vw;
    height: 1102px;
    background: #fedf2d;
}

.insight .insight_bg {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transform: translateY(80px);
    transition: all 1s;
    pointer-events: none;
}

.insight .insight_bg.on {
    opacity: 1;
    transform: translateX(0);
}

.insight_bg .insight_content {
    position: absolute;
    top: 410px;
    left: 50%;
    margin-left: -514px;
    transform: scale(0.6);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
    opacity: 0;
}

.insight_bg .insight_content.on {
    transform: scale(1);
    opacity: 1;
}

.insight_bg .insight_star {
    width: 1533px;
    height: 203px;
    position: absolute;
    bottom: 118px;
    left: 50%;
    margin-left: -766px;
    transform: translateY(20px);
    opacity: 0;
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

.insight_bg .insight_star.on {
    transform: translateX(0);
    opacity: 1;
}

.insight_bg .insight_star01 {
    position: absolute;
    left: 5px;
    top: 5px;

}

.insight_bg .insight_star02 {
    position: absolute;
    right: 32px;
    top: 30px;
}

#section14 {
    width: 100vw;
    height: 4506px;
    background: #fedf2d;
}

.flow_chart .flow_chart_bg {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transform: translateY(80px);
    transition: all 1s;
    pointer-events: none;
}

.flow_chart .flow_chart_bg.on {
    opacity: 1;
    transform: translateX(0);
}

.flow_chart_bg .flow_chart_chart {
    position: absolute;
    top: 530px;
    left: 50%;
    margin-left: -780px;
    opacity: 0;
    transform: translateY(80px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
    pointer-events: none;
    transition-delay: 1s;
}

.flow_chart_bg.on .flow_chart_chart {
    opacity: 1;
    transform: translateX(0);
}

.flow_chart_bg .flow_chart_key {
    position: absolute;
    top: 13px;
    right: -4px;
}

.wire_frame .wire_frame_bg {
    position: absolute;
    top: 2305px;
    left: 0;
    opacity: 0;
    transform: translateY(80px);
    transition: all 1s;
    pointer-events: none;
}

.wire_frame .wire_frame_bg.on {
    opacity: 1;
    transform: translateX(0);
}

.wire_frame_bg .wire_frame_content {
    position: absolute;
    top: 200px;
    left: 50%;
    margin-left: -960px;
    opacity: 0;
    transform: translateY(80px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
    transition-delay: 1s;
}

.wire_frame_bg.on .wire_frame_content {
    opacity: 1;
    transform: translateX(0);
}

.wire_frame .wire_frame_star {
    position: absolute;
    top: -79px;
    right: 118px;
}

#section16 {
    width: 100vw;
    background: #fedf2d;
    height: 2377px;
}

.story_board .story_board_bg {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transform: translateY(80px);
    transition: all 1s;
    z-index: 10000;

}

.story_board .story_board_bg.on {
    opacity: 1;
    transform: translateX(0);
}

.story_board_bg .story_board_content {
    width: 1537px;
    height: 1334px;
    position: absolute;
    top: 373px;
    left: 50%;
    margin-left: -769px;
    opacity: 0;
    transform: translateY(80px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
    transition-delay: 0.6s;
}

.story_board_bg.on .story_board_content {
    opacity: 1;
    transform: translateX(0);
}

.story_board .story_board_left {
    position: absolute;
    left: -44px;
    top: 0;
}

.story_board .story_board_phone {
    position: absolute;
    top: 72px;
    left: 820px;
}

.story_board .story_board_phone_content {
    position: absolute;
    top: 159px;
    right: -10px;
}

.story_board .video_ad{
    width: 100vw;
    height: 792px;
    position: absolute;
    bottom: -39px;
    left: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(80px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

.story_board .video_ad video{
    width: 100%;
    height: 800px;
    transform: scale(1.35);
    position: absolute;
    top: 0;
    left: 0;
}

.story_board .video_ad.on{
    opacity: 1;
    transform: translateX(0);
}

#head01 {
    width: 100vw;
    height: 335px;
    background: #fedf2d;
}

#head01 .head_section {
    position: absolute;
    top: 150px;
    left: 50%;
    margin-left: -187px;
    transform: translateY(80px);
    opacity: 0;
    transition: all 1s;
}

#head01 .head_section.on {
    opacity: 1;
    transform: translateX(0);
}

#section17 {
    width: 100vw;
    height: 1549px;
    background: #fedf2d;
}

.brainstorming .brainstorming_bg {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transform: translateY(80px);
    transition: all 1s;
}

.brainstorming .brainstorming_bg.on {
    opacity: 1;
    transform: translateX(0);
}

.brainstorming .brainstorming_content {
    position: absolute;
    top: 540px;
    left: 50%;
    transform: translate(-50%);
    width: 1018px;
    height: 968px;
}

.brainstorming_content > div {
    transform: scale(0.6);
    opacity: 0;
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

.brainstorming_content.on > div {
    transform: scale(1);
    opacity: 1;
}

.brainstorming_content .brainstorming_content01 {
    width: 1018px;
    height: 968px;
    position: absolute;
    top: 0;
    left: 0;
    transition-delay: 0.4s;
}

.brainstorming_content .brainstorming_content02 {
    width: 1018px;
    height: 968px;
    position: absolute;
    top: -75px;
    left: -69px;
    transition-delay: 0.8s;

}

#section18 {
    width: 100vw;
    height: 2203px;
    background: #fedf2d;
}

.style_guide .style_guide_bg {
    position: absolute;
    top: -2px;
    left: 0;
    opacity: 0;
    transform: translateY(80px);
    transition: all 1s;
}

.style_guide .style_guide_bg.on {
    opacity: 1;
    transform: translateX(0);
}

.style_guide_body .style_guide_color {
    position: absolute;
    top: 292px;
    left: 197px;
    opacity: 0;
    transform: translateY(80px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

.style_guide_body .style_guide_color.on {
    opacity: 1;
    transform: translateX(0);
}

.style_guide_body .style_guide_typo {
    position: absolute;
    top: 815px;
    left: 197px;
    opacity: 0;
    transform: translateY(80px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

.style_guide_body .style_guide_typo.on {
    opacity: 1;
    transform: translateX(0);
}

.style_guide_body .style_guide_logo {
    position: absolute;
    top: 1597px;
    left: 197px;
    opacity: 0;
    transform: translateY(80px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

.style_guide_body .style_guide_logo.on {
    opacity: 1;
    transform: translateX(0);
}

#section19 {
    width: 100vw;
    background: #fedf2d;
    height: 1235px;
}

.illustration .illustration_bg {
    position: absolute;
    top: -1px;
    left: -5px;
    opacity: 0;
    transform: translateY(80px);
    transition: all 1s;
}

.illustration .illustration_bg.on {
    opacity: 1;
    transform: translateX(0);
}

.illustration .illustration_content {
    width: 1150px;
    height: 885px;
    position: absolute;
    top: 216px;
    left: 346px;
}

.illustration .illustration_content01 {
    position: absolute;
    top: 30px;
    left: 0;
    opacity: 0;
    transform: scale(0.6);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

.illustration .illustration_content01.on {
    opacity: 1;
    transform: scale(1);
}

.illustration .illustration_content02 {
    position: absolute;
    top: 544px;
    left: 0;
    opacity: 0;
    transform: scale(0.6);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

.illustration .illustration_content02.on {
    opacity: 1;
    transform: scale(1);
}

#section20 {
    width: 100vw;
    position: relative;
    height: 3002px;
}

.butcon .butcon_bg {
    position: absolute;
    top: -1px;
    left: 0;
    opacity: 0;
    transform: translateY(80px);
    transition: all 1s;
}

.butcon .butcon_bg.on {
    opacity: 1;
    transform: translateX(0);
}

.butcon .butcon_content {
    position: absolute;
    top: 227px;
    left: 207px;
    opacity: 0;
    transform: translateY(80px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

.butcon .butcon_content.on {
    opacity: 1;
    transform: translateX(0);
}

.butcon .butcon_component {
    width: 1493px;
    height: 1482px;
    position: absolute;
    top: 1409px;
    left: 207px;
    opacity: 0;
    transform: translateY(80px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

.butcon .butcon_component.on {
    opacity: 1;
    transform: translateX(0);
}

.butcon_component .butcon_h1 {
    position: absolute;
    top: -15px;
    left: -15px;
}

.butcon_component .butcon_content {
    position: absolute;
    top: 108px;
    left: 0;
}

/*서비스 디자인 구간*/

#head02 {
    width: 100vw;
    height: 335px;
    background: #fedf2d;
}

#head02 .head_section02 {
    position: absolute;
    top: 150px;
    left: 50%;
    margin-left: -207px;
    transform: translateY(80px);
    opacity: 0;
    transition: all 1s;
}

#head02 .head_section02.on {
    opacity: 1;
    transform: translateX(0);
}

#section21 {
    width: 100vw;
    height: 4199px;
    background: #fedf2d;
}

.service_design .service_bg {
    position: absolute;
    top: 0;
    left: -2px;
    opacity: 0;
    transform: translateY(80px);
    transition: all 1s;
}

.service_design .service_bg.on {
    opacity: 1;
    transform: translateX(0);
}

.service_bg .voice_tone{
    position: absolute;
    top: 217px;
    right: 170px;
}

.service_bg .splash {
    position: absolute;
    top: 405px;
    left: 50%;
    transform: translate(-50%);
    width: 1032px;
    height: 928px;
}


.splash .splash_mockup {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -279px;
    opacity: 0;
    transform: scale(0.6);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

.splash .splash_mockup.on {
    opacity: 1;
    transform: scale(1);
}

.splash .splash_star {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -518px;
    opacity: 0;
    transform: scale(0.6);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
    transition-delay: 0.2s;
}

.splash .splash_star.on {
    opacity: 1;
    transform: scale(1);
}

.service_bg .walk {
    width: 1920px;
    height: 1311px;
    position: absolute;
    top: 1690px;
    left: 0;
}

.service_bg .walk > div {
    opacity: 0;
    transform: translateY(-80px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

.service_bg .walk.on > div {
    opacity: 1;
    transform: translateX(0);
}

.service_bg .walk {
    opacity: 1;
}

.walk .walk_line {
    position: absolute;
    top: 615px;
    left: 50%;
    margin-left: -379px;
    z-index: 100;
}

.walk .walk01 {
    position: absolute;
    left: 270px;
    top: 0;
}

.walk .walk01 .video01 {
    width: 400px;
    height: 812px;
    position: absolute;
    top: -67px;
    left: 12px;
    overflow: hidden;
    transform: scale(0.8);
    border-radius: 67px;
}
.walk .walk01 .video01 video{
    position: absolute;
    top: -135px;
    left: -762px;
}

.walk .walk01 .frame01{
    position: absolute;
    left: 0;
    top: 0;
}

.walk .walk02 {
    position: absolute;
    left: 730px;
    top: 230px;

}

.walk .walk02 .video02 {
    width: 400px;
    height: 812px;
    position: absolute;
    top: -67px;
    left: 12px;
    overflow: hidden;
    transform: scale(0.8);
    border-radius: 67px;
}

.walk .walk02 .video02 video{
    position: absolute;
    top: -135px;
    left: -762px;
}

.walk .walk02 .frame02{
    position: absolute;
    left: 0;
    top: 0;
}

.walk .walk03 {
    position: absolute;
    right: 725px;
    top: 438px;
}

.walk .walk03 .video03 {
    width: 400px;
    height: 812px;
    position: absolute;
    top: -67px;
    left: 12px;
    overflow: hidden;
    transform: scale(0.8);
    border-radius: 67px;
}

.walk .walk03 .video03 video{
    position: absolute;
    top: -135px;
    left: -762px;
}

.walk .walk03 .frame03{
    position: absolute;
    left: 0;
    top: 0;
}

.service_bg .voice_tone-01{
    position: absolute;
    bottom: 965px;
    right: 170px;
}

.service_design .login_select {
    position: absolute;
    top: 3369px;
    left: 50%;
    margin-left: -838px;
    opacity: 0;
    transform: translateY(-80px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

.service_design .login_select.on {
    opacity: 1;
    transform: translateX(0);
}

.login_select .login_txt {
    position: absolute;
    top: 367px;
    left: 367px;
}

.login_select .select_txt {
    position: absolute;
    top: 356px;
    right: 389px;
}


/*메인 기능들*/

#section22 {
    width: 100vw;
    background: #fedf2d;
    height: 10112px;
}


#section22 .main_bg01 {
    position: absolute;
    top: -2px;
    left: 0;
}

.main_bg01 .main_function_h1 {
    position: absolute;
    top: 130px;
    left: 50%;
    margin-left: -341px;
    opacity: 0;
    transform: translateY(-80px);
    transition: all 1s;
}

.main_bg01 .main_function_h1.on {
    opacity: 1;
    transform: translateX(0);
}

.main_bg01 .main_bg02 {
    width: 1527px;
    height: 4678px;
    position: absolute;
    top: 420px;
    left: 50%;
    margin-left: -764px;
    opacity: 0;
    transform: translateY(-80px);
    transition: all 1s;
}

.main_bg01 .main_bg02.on {
    opacity: 1;
    transform: translateX(0);
}

.main_bg02 .main_txt {
    position: absolute;
    top: 102px;
    left: 120px;
    opacity: 0;
    transform: translateY(-80px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
    transition-delay: 0.2s;
}

.main_bg02.on .main_txt {
    opacity: 1;
    transform: translateX(0);
}

.main_bg02 .main_mockup {
    position: absolute;
    top: 465px;
    left: 206px;
    z-index: 1000;
    opacity: 0;
    transform: translateY(-80px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

.main_bg02 .main_mockup.on {
    opacity: 1;
    transform: translateX(0);
}

.main_mockup .video01 {
    width: 400px;
    height: 812px;
    position: absolute;
    top: -67px;
    left: 14px;
    overflow: hidden;
    transform: scale(0.8);
    border-radius: 67px;
    z-index: 1000;
}

.main_mockup .video01 video{
    position: absolute;
    top: -135px;
    left: -762px;
}

.main_mockup .main_func_charac {
    position: absolute;
    top: 445px;
    left: -148px;
    opacity: 0;
    transform: translateX(100px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
    transition-delay: 0.6s;
}

.main_mockup .main_func_charac.on {
    opacity: 1;
    transform: translateX(0);
}

.main_mockup .frame04 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
}

.main_bg02 .main_content {
    position: absolute;
    top: 835px;
    left: 231px;
    z-index: 1000;
    opacity: 0;
    transform: translateY(-80px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

.main_bg02 .main_content.on {
    opacity: 1;
    transform: translateX(0);
}

.main_bg02 .circle01 {
    position: absolute;
    top: 584px;
    left: 356px;
    z-index: 999;
    opacity: 0;
    transform: scale(0.5);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

.main_bg02 .circle01.on{
    opacity: 1;
    transform: scale(1);
}

.main_bg02 .circle02 {
    position: absolute;
    bottom: 1805px;
    left: 423px;
    opacity: 0;
    transform: scale(0.6);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

.main_bg02 .circle02.on {
    opacity: 1;
    transform: scale(1.2);
}

.main_bg02 .avocado {
    position: absolute;
    bottom: 1289px;
    left: 812px;
    opacity: 0;
    transform: rotate(0deg);
    transition: all 2s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

.main_bg02 .avocado.on {
    opacity: 1;
    transform: rotate(25deg);

}

/*두가지 메인홈 기능*/


.main_bg02 .voice_tone{
    position: absolute;
    bottom: 1125px;
    right: 110px;
}

.main_bg02 .main_func {
    position: absolute;
    top: 3582px;
    left: 50%;
    margin-left: -312px;
    opacity: 0;
    transform: translateY(-80px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);

}

.main_bg02 .main_func.on {
    opacity: 1;
    transform: translateY(0);
}

.main_bg02 .main_func_mock {
    position: absolute;
    top: 3953px;
    left: 50%;
    margin-left: -762px;
    opacity: 0;
    transform: translateY(-80px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

.main_bg02 .main_func_mock.on {
    opacity: 1;
    transform: translateY(0);
}

.main_func_mock .main_func_txt {
    position: absolute;
    top: 475px;
    left: 50%;
    margin-left: -555px;
    opacity: 0;
    transform: translateY(-80px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
    transition-delay: 0.6s;
}

.main_func_mock.on .main_func_txt {
    opacity: 1;
    transform: translateY(0);
}


/*기다리는 과정 페이지*/

.main_bg02 .start_waiting {
    position: absolute;
    top: 4795px;
    left: 0;
    height: 1616px;
}

.start_waiting .start_waiting_bg {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transform: translateY(-80px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
    transition-delay: 0.6s;
}

.start_waiting .start_waiting_bg.on {
    opacity: 1;
    transform: translateY(0);
}


.start_waiting_bg .voice_tone{
    position: absolute;
    top: 150px;
    right: 120px;
}

.start_waiting .waiting_mk {
    position: absolute;
    top: 500px;
    left: 50%;
    margin-left: -568px;
    opacity: 0;
    transform: scale(0.6);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

.start_waiting .waiting_mk.on {
    opacity: 1;
    transform: scale(1);
}

/*스마트오더*/

.main_bg02 .smart-order {
    position: absolute;
    top: 6525px;
    left: 50%;
    margin-left: -763px;
    opacity: 0;
    transform: translateY(-80px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

.main_bg02 .smart-order.on {
    opacity: 1;
    transform: translateY(0);
}

.smart-bg .smart_txt {
    position: absolute;
    top: 121px;
    left: 50%;
    margin-left: -385px;
    opacity: 0;
    transform: translateY(-80px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

.main_bg02 .smart_txt.on {
    opacity: 1;
    transform: translateY(0);
}

.smart-bg .smart_content03{
    position: absolute;
    top: 445px;
    left: 170px;
    opacity: 0;
    transform: translateY(-80px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

.smart-bg .smart_content03.on{
    opacity: 1;
    transform: translateY(0);
}

.smart-bg .smart_content01 {
    position: absolute;
    top: 600px;
    left: 161px;
    opacity: 0;
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

.smart-bg .smart_content01.on {
    opacity: 1;
    transform: scale(1);
}

.smart-bg .smart_content01 .video01 {
    width: 413px;
    height: 813px;
    position: absolute;
    top: -66px;
    left: -12px;
    overflow: hidden;
    transform: scale(0.752);
    border-radius: 67px;
}

.smart-bg .smart_content01 .video01 video{
    position: absolute;
    top: -135px;
    left: -754px;
}

.smart-bg .smart_content01 .frame05{
    position: absolute;
    left: 0;
    top: 0;
}

.smart-bg .smart_content02 {
    position: absolute;
    top: 600px;
    left: 829px;
    opacity: 0;
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

.smart-bg .smart_content02.on {
    opacity: 1;
    transform: scale(1);
}

.smart-bg .smart_content02 .video02 {
    width: 413px;
    height: 813px;
    position: absolute;
    top: -66px;
    left: -12px;
    overflow: hidden;
    transform: scale(0.752);
    border-radius: 67px;
}

.smart-bg .smart_content02 .video02 video{
    position: absolute;
    top: -126px;
    left: -754px;
    transform: scale(1.02);
}

.smart-bg .smart_content02 .frame06{
    position: absolute;
    left: 0;
    top: 0;
}

.smart-bg .smart-character {
    width: 1522px;
    height: 295px;
    position: absolute;
    top: 960px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
}

.smart-character .apple {
    position: absolute;
    bottom: 0;
    left: 96px;
    transform: scale(1.2);
}

.smart-character .tree01 {
    position: absolute;
    bottom: 0;
    right: 346px;
    transform: scale(1.2);
}

.smart-character .tree02 {
    position: absolute;
    bottom: 0;
    right: 25px;
    transform: scale(1.2);
    z-index: 100;
}

.smart-character .human {
    position: absolute;
    bottom: -14px;
    right: 170px;
    transform: translateX(100px);
    opacity: 0;
    transition: all 2s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

.smart-character .human.on {
    transform: translateX(0);
    opacity: 1;
}


.smart-bg .voice_tone{
    position: absolute;
    top: 1400px;
    right: 120px;
}


/* 페이먼트 구간*/

.smart-bg .payment_content{
    width: 1524px;
    height: 1534px;
    position: absolute;
    top: 1518px;
    left: 0;
}

.smart-bg .payment_content01 {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -723px;
    opacity: 0;
    transform: translateY(-80px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
    pointer-events: none;
}

.smart-bg .payment_content01.on {
    opacity: 1;
    transform: translateY(0);
}

.payment_content .payment_arrow{
    position: absolute;
    top: 200px;
    left: 503px;
    z-index: 1000;
    opacity: 0;
    transform: translateY(-80px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

.payment_content .payment_arrow.on {
    opacity: 1;
    transform: translateY(0);
}


.payment_content .payment_mockup{
    width: 1070px;
    height: 1222px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -535px;
    opacity: 0;
    transform: scale(0.6);
    border-radius: 67px;
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

.payment_content .payment_mockup.on{
    opacity: 1;
    transform: scale(1);
}


.payment_content .payment_content02{
    position: absolute;
    top: 194px;
    left: 9px;
    transition-delay: 0.4s;
}

.payment_content .payment_content02 .video02 {
    width: 413px;
    height: 813px;
    position: absolute;
    top: -90px;
    left: -46px;
    overflow: hidden;
    transform: scale(0.752);
    border-radius: 67px;
}

.payment_content .payment_content02 .video02 video{
    position: absolute;
    top: -135px;
    left: -754px;
    transform: scale(1.01);
}

.payment_content .payment_content02 .frame06{
    position: absolute;
    left: 0;
    top: 0;
}
.payment_content .payment_content03{
    position: absolute;
    top: 355px;
    left: 378px;
    transition-delay: 0.6s;
}

.payment_content .payment_content03 .video03 {
    width: 413px;
    height: 813px;
    position: absolute;
    top: -90px;
    left: -46px;
    overflow: hidden;
    transform: scale(0.752);
    border-radius: 67px;
}

.payment_content .payment_content03 .video03 video{
    position: absolute;
    top: -135px;
    left: -754px;
    transform: scale(1.01);
}

.payment_content .payment_content03 .frame06{
    position: absolute;
    left: 0;
    top: 0;
}

.payment_content .payment_content04{
    position: absolute;
    top: 537px;
    left: 749px;
    transition-delay: 0.8s;
}


.payment_content .payment_content04 .video04 {
    width: 413px;
    height: 813px;
    position: absolute;
    top: -90px;
    left: -46px;
    overflow: hidden;
    transform: scale(0.752);
    border-radius: 67px;
}

.payment_content .payment_content04 .video04 video{
    position: absolute;
    top: -135px;
    left: -754px;
    transform: scale(1.01);
}

.payment_content .payment_content04 .frame06{
    position: absolute;
    left: 0;
    top: 0;
}



/*매거진 구역*/

#section23 {
    width: 100vw;
    height: 2252px;
    background: #fedf2d;
}

#section23 .magazine_bg {
    position: absolute;
    top: 125px;
    left: 50%;
    margin-left: -763px;
    opacity: 0;
    transform: translateY(-80px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

#section23 .magazine_bg.on {
    opacity: 1;
    transform: translateY(0);
}

.magazine_bg .magazine_txt {
    position: absolute;
    top: 121px;
    left: 105px;
    opacity: 0;
    transform: translateY(-80px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

.magazine_bg .magazine_txt.on {
    opacity: 1;
    transform: translateY(0);
}

.magazine_bg .magazine_content{
    width: 1302px;
    height: 1262px;
    position: absolute;
    top: 500px;
    left: 50%;
    margin-left: -651px;

}

.magazine_content .magazine_content01{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transform: translateY(-80px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

.magazine_content .magazine_content01.on {
    opacity: 1;
    transform: translateY(0);
}

.magazine_content .magazine_content01 .video05 {
    width: 352px;
    height: 717px;
    position: absolute;
    top: -84px;
    left: -37px;
    overflow: hidden;
    transform: scale(0.752);
    border-radius: 67px;
}

.magazine_content .magazine_content01 .video05 video{
    position: absolute;
    top: -183px;
    left: -786px;
    transform: scale(0.86);
}

.magazine_content .magazine_content01 .frame06{
    position: absolute;
    left: 0;
    top: 0;
}

.magazine_content .magazine_content02{
    position: absolute;
    top: 347px;
    left: 345px;
    opacity: 0;
    transform: translateY(-80px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

.magazine_content .magazine_content02.on {
    opacity: 1;
    transform: translateY(0);
}

.magazine_content .magazine_content02 .video06 {
    width: 352px;
    height: 717px;
    position: absolute;
    top: -84px;
    left: -37px;
    overflow: hidden;
    transform: scale(0.752);
    border-radius: 67px;
}

.magazine_content .magazine_content02 .video06 video{
    position: absolute;
    top: -183px;
    left: -786px;
    transform: scale(0.86);
}

.magazine_content .magazine_content02 .frame06{
    position: absolute;
    left: 0;
    top: 0;
}


.magazine_content .magazine_content03{
    position: absolute;
    top: -75px;
    left: 683px;
    z-index: 10000;
    opacity: 0;
    transform: translateY(-80px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

.magazine_content .magazine_content03.on {
    opacity: 1;
    transform: translateY(0);
}

.magazine_content .magazine_content03 .video07 {
    width: 352px;
    height: 717px;
    position: absolute;
    top: -84px;
    left: -37px;
    overflow: hidden;
    transform: scale(0.752);
    border-radius: 67px;
}

.magazine_content .magazine_content03 .video07 video{
    position: absolute;
    top: -183px;
    left: -786px;
    transform: scale(0.86);
}

.magazine_content .magazine_content03 .frame06{
    position: absolute;
    left: 0;
    top: 0;
}


.magazine_content .magazine_content04{
    position: absolute;
    top: 632px;
    left: 1020px;
    opacity: 0;
    transform: translateY(-80px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

.magazine_content .magazine_content04.on {
    opacity: 1;
    transform: translateY(0);
}

.magazine_content .magazine_content04 .video08 {
    width: 352px;
    height: 717px;
    position: absolute;
    top: -84px;
    left: -37px;
    overflow: hidden;
    transform: scale(0.752);
    border-radius: 67px;
}

.magazine_content .magazine_content04 .video08 video{
    position: absolute;
    top: -183px;
    left: -786px;
    transform: scale(0.86);
}

.magazine_content .magazine_content04 .frame06{
    position: absolute;
    left: 0;
    top: 0;
}

.magazine_content .magazine_arrow{
    position: absolute;
    top: 155px;
    left: 215px;
    opacity: 0;
    transform: translateY(-80px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
    z-index: 10000;
}

.magazine_content .magazine_arrow.on {
    opacity: 1;
    transform: translateY(0);
}

.magazine_content .magazine_extra_page{
    position: absolute;
    top: 301px;
    left: 632px;
}

.magazine_bg .voice_tone{
    position: absolute;
    bottom: -170px;
    left: 50%;
    transform: translate(-50%);
}


.magazine_bg .magazine_character {
    width: 352px;
    height: 644px;
    position: absolute;
    bottom: 0;
    left: 0;
}

.magazine_bg .magazine_character > div {
    opacity: 0;
    transform: scale(0.6);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

.magazine_bg .magazine_character.on > div {
    opacity: 1;
    transform: scale(1);
}

.magazine_character .character01 {
    position: absolute;
    top: 0;
    left: 0;
    transition-delay: 0.2s;
}

.magazine_character .character02 {
    position: absolute;
    top: 281px;
    left: 0;
    transition-delay: 0.4s;
}

.magazine_character .character03 {
    position: absolute;
    bottom: 0;
    left: 162px;
    transition-delay: 0.6s;
}

/*찜매장*/


#section24 {
    width: 100vw;
    height: 2498px;
    background: #fedf2d;
}

#section24 .store-alarm_bg {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transform: translateY(-80px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

#section24 .store-alarm_bg.on {
    opacity: 1;
    transform: translateX(0);
}

.store-alarm_bg .store_bg {
    position: absolute;
    top: 121px;
    left: 50%;
    margin-left: -762px;
    opacity: 0;
    transform: translateY(-80px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

.store-alarm_bg .store_bg.on {
    opacity: 1;
    transform: translateX(0);
}

.store_bg .store_txt {
    position: absolute;
    top: 100px;
    left: 50%;
    margin-left: -253px;
    opacity: 0;
    transform: translateY(-80px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

.store_bg .store_txt.on {
    opacity: 1;
    transform: translateX(0);
}

.store_bg .store_mockup {
    width: 1100px;
    height: 569px;
    position: absolute;
    top: 450px;
    left: 50%;
    margin-left: -550px;
    opacity: 0;
    transform: scale(0.6);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

.store_bg .store_mockup.on {
    opacity: 1;
    transform: scale(1);
}

.store_mockup >div{
    opacity: 0;
    transform: scale(0.8);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

.store_mockup.on >div{
    opacity: 1;
    transform: scale(1);
}


.store_mockup .store_content01{
    position: absolute;
    top: 0;
    left: 9px;
    transition-delay: 0.6s;
}

.store_mockup .store_content01 .video09 {
    width: 352px;
    height: 717px;
    position: absolute;
    top: -84px;
    left: -37px;
    overflow: hidden;
    transform: scale(0.752);
    border-radius: 67px;
}

.store_mockup .store_content01 .video09 video{
    position: absolute;
    top: -183px;
    left: -786px;
    transform: scale(0.86);
}

.store_mockup .store_content01  .frame06{
    position: absolute;
    left: 0;
    top: 0;
}

.store_mockup .store_content02{
    position: absolute;
    top: 0;
    left: 412px;
    transition-delay: 0.8s;
}

.store_mockup .store_content02 .video10 {
    width: 352px;
    height: 717px;
    position: absolute;
    top: -84px;
    left: -37px;
    overflow: hidden;
    transform: scale(0.752);
    border-radius: 67px;
}

.store_mockup .store_content02 .video10 video{
    position: absolute;
    top: -183px;
    left: -786px;
    transform: scale(0.86);
}

.store_mockup .store_content02  .frame06{
    position: absolute;
    left: 0;
    top: 0;
}

.store_mockup .store_content03{
    position: absolute;
    top: 0;
    left: 825px;
    transition-delay: 1s;
}

.store_mockup .store_content03 .video11 {
    width: 352px;
    height: 717px;
    position: absolute;
    top: -84px;
    left: -37px;
    overflow: hidden;
    transform: scale(0.752);
    border-radius: 67px;
}

.store_mockup .store_content03 .video11 video{
    position: absolute;
    top: -183px;
    left: -786px;
    transform: scale(0.86);
}

.store_mockup .store_content03  .frame06{
    position: absolute;
    left: 0;
    top: 0;
}

.store_mockup .store_content04{
    position: absolute;
    top: -25px;
    left: -193px;
    transition-delay: 1s;
}

/*.magazine_content .magazine_content04.on {*/
/*    opacity: 1;*/
/*    transform: translateY(0);*/
/*}*/








.store_bg .store_character {
    width: 354px;
    height: 290px;
    position: absolute;
    top: 0;
    right: 0;
    transform: rotate(45deg);
    opacity: 0;
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}
.store_bg .store_character.on{
    transform: rotate(0deg);
    opacity: 1;
}

.store_character .character01 {
    position: absolute;
    top: 100px;
    right: 0;
}

.store_character .character02 {
    position: absolute;
    top: 100px;
    right: 262px;
}

.store_character .character03 {
    position: absolute;
    top: 211px;
    right: 311px;
}

#section24 .alarm_bg {
    position: absolute;
    top: 1420px;
    left: 50%;
    margin-left: -764px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-80px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}
#section24 .alarm_bg.on{
    opacity: 1;
    transform: translateX(0);
}
.alarm_bg .voice_tone{
    position: absolute;
    top: 80px;
    right: 80px;
}

.alarm_bg .alarm_txt {
    position: absolute;
    top: 100px;
    left: 107px;
    opacity: 0;
    transform: translateY(-80px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

.alarm_bg .alarm_txt.on{
    opacity: 1;
    transform: translateX(0);
}

.alarm_bg .alarm_mockup {
    position: absolute;
    top: 343px;
    left: 50%;
    margin-left: -251px;
    opacity: 0;
    transform: scale(0.6);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

.alarm_bg .alarm_mockup.on {
    opacity: 1;
    transform: scale(1);
}

.alarm_bg .alarm_character {
    width: 1141px;
    height: 283px;
    position: absolute;
    bottom: 72px;
    left: 50%;
    margin-left: -570px;
    opacity: 0;
    transform: translateY(200px);
    transition: all 1s cubic-bezier(0.07, 0.55, 0.21, 1.02);
}

.alarm_bg .alarm_character.on{
    opacity: 1;
    transform: translateY(0);
}

.alarm_character .character01 {
    position: absolute;
    bottom: 0;
    left: 0;

}

.alarm_character .character02 {
    position: absolute;
    bottom: 0;
    right: 0;
}

.alarm_character .line01 {
    position: absolute;
    bottom: 221px;
    left: 153px;
}

.alarm_character .line02 {
    position: absolute;
    bottom: 143px;
    right: 188px;
}

#section25 {
    width: 100vw;
    height: 1390px;
    background: #fedf2d;
}

#section25 .last_page {
    position: absolute;
    top: 0;
    left: 0;
}


.last_page .video12 {
    width: 100vw;
    height: 949px;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    border-radius: 142px;
}


.last_page .video12 video{
    position: absolute;
    top: -664px;
    left:-957px;
    transform: scale(0.5);
}


.last_page .last_text {
    position: absolute;
    bottom: 745px;
    left: 50%;
    transform: translateX(-50%)
}
.last_page .voice_tone{
    position: absolute;
    bottom: 570px;
    left: 50%;
    transform: translateX(-50%);
}

#section26 {
    width: 100vw;
    height: 154px;
    background: #fedf2d;
}

#section24 .go_back_button{
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
}

.go_back_button02{
    position: absolute;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
}