


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

#section01{
    background-color: #ffffff;
    background-image: url("../images/section01/mainvisual.jpg");
    background-repeat: no-repeat;
    background-position: center;
    height:2460px;
    position: relative;
}
#section01 >div {
   text-align: center;
}
#section01 >div {
    position: absolute;
}
#section01 .right_upon {
    right: 0;
    top: 10px;
}
#section01 .right_under {
    right: 10px;
    top: 10px;
}
#section01 .left_upon {
    left: 116px;
    top: 45px;
}
#section01 .left_under {
    left: 100px;
    top: 200px;
}


#section02{
    background: #ffffff;
    height: 1348px;
}

#section02 > div {
    text-align: center;
    opacity: 0;
    transform:translate(50px,0);
}




#section03{
    background: #ffffff;
    height:500vh;
}

#section03 .trigger-this-03 {
    height: 100%;
}

#section03 .fix-this-03 {
    width: 100vw;
    height:100vh;
}



#section03 .overview_text {
    padding-top: 50px;
    width: 1584px;
    margin: 115px auto 200px auto;
}


#section03 .overview_img {
    position: absolute;
    left: 50%;
    top:50px;
    margin-left:-375px;
    transform: translateY(1000px);
    z-index: 999999;
}




#section03 >div .overview_title {
    margin-bottom:30px;
    text-align: center;
    transform: translateY(500px);
    opacity: 0;
}

#section03 .overview_project {
    margin-left:585px;
    position: relative;
}
#section03 .overview_project .duration {
    transform: translateY(500px);
    opacity: 0;
}

#section03 .overview_project .goal {
    opacity: 0;
    /*transition-delay: 1s;*/
    transform: translateY(500px);
    position:absolute;
    top:0;
    left: 0;

}

#section04{
    background: #ffffff;
    height:400vh;
}

#section04 .trigger-this-04 {
    height: 100%;
}

#section04 .fix-this-04 {
    width: 100vw;
    height: 100vh;
    position: relative;
}


#section04 .wrap{
    background:#40c64a;
    height: 1050px;
    position: relative;
}

#section04 .wrap .deskresearch_title {
    position: absolute;
    left: 200px;
    top:102px;
}

#section04 .wrap .deskresearch {
    position: absolute;
    left: 200px;
    top:208px;
}



#section05{
    background: #ffffff;
    height:800vh;
}

#section05 .trigger-this-05 {
    height:100%;
}

#section05 .fix-this-05 {
    width:100vw;
    height:100vh;
}


#section05 .userresearch_title {
    text-align: center;
    padding-top:180px;
}


#section05 .userresearch {
    display: flex;
    justify-content: space-between;
    width: 1523px;
    padding: 100px 0 100px;
    margin:0 auto;
    position: absolute;
    left:50%;
    top:240px;
    transform:translate(-50%, 1000px);
    background: #fff;
}

#section05 #europe_group {
    transform:translate(-50%, 0px);
}



#section05 #europe_group .europe_img {
    transform:translateY(1000px);
}

#section05 .userresearch .inner {
    width: 830px;

}

#section05 .userresearch .userresearch_img {

    position: absolute;
    right: 96px;
    top:272px;
    margin-top: -225px;
    transform:translateY(1000px);

}





#section06 {
    background: white;
    height: 1360px;}

#section06 .inner {
    width: 1520px;
    margin:0 auto;
}

#section06 #row01 {
    width: 1520px;
    height: 343px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
#section06 .text{
    margin-right: 257px;
    align-self: flex-start;
}

#section06 #interviewee01 {
    position:relative;
    margin-right: 20px;
}


#section06 #interviewee01 .blurred {
    position: absolute;
    left: 0;
    top:0 ;
    margin-right: 20px;
}

#section06 .profile .blurred {
    transition: all 1s;
}

#section06 .profile:hover .blurred {
    opacity: 0;
}


#section06 #interviewee02 {
    position:relative;
}

#section06 #row02 {
    width: 1520px;
    height: 528px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: space-between;
}

#section06 #row02 .profile {
    position:relative;
}
#section06 .blurred {
    position: absolute;
    left: 0;
    top:0 ;
}
#row02 .text_interview01 {
    width: 236px;
    height: 254px;
    position: relative;
}

#row02 .text_interview01 > div {
    position: absolute;
    left: 0;
    top:0;
    opacity: 0;
    transition: all 1s;
}

#row02 .text_interview01 > div.on {
    opacity: 1;
}

#row02 .text_interview02 {
    width: 236px;
    height: 254px;
    background: white;
    text-align: center;
    font-family: pretendard, sans-serif;
    font-style: normal;
    font-weight: 200;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;

}

#section07 {
    background-color: white;
    height:600vh;

}

#section07 .trigger-this-07 {
    height:100%;
}

#section07 .fix-this-07 {
    width:100vw;
    height:100vh;
    position: relative;
}

#section07 .img_background {
    transform:scale(0.4);
}

#section07 .img_background > img {
    border-radius: 40px;
}

#section07 .cul {
    position:absolute;
    left: 200px;
    bottom: 471px;

}
#section07 .ture {
    position:absolute;
    bottom: 471px;
    right: 200px;
}



#section07 .text_purpose {
    opacity: 0;
    position:absolute;
    left:50%;
    top:577px;
    transform: translateX(-50%);
}

#section08 {
    height:100vh;
    background: white;
}

#section08  .hover_box {
    background-color: #343434;
    height:100vh;
}


#section08  .text_box {
    font-size: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

#section08  .content {
    background: #fff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#section08  .hidden-content {
    --x: 0px;
    --y: 0px;
    --size: 5px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #a1a1a1;

    color: var(--bg);
    --mask: radial-gradient(
            circle at var(--x) var(--y),
            black var(--size),
            transparent 0
    );
    -webkit-mask-image: var(--mask);
    mask-image: var(--mask);
    pointer-events: none;
    visibility: hidden;
}

#section09 {
    height: 1600px;
    background: white;
    text-align: center;
}

#section09 .inner {
    width: 1520px;
    height: 810px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: space-between;
}

#section09 .title {
    padding-top: 300px;
    margin-bottom: 90px;
}
#section09 .inner .app{
    position: relative;
}

#section09 .inner .app > div:nth-child(1){
    position: absolute;
    left: 0;
    top: 0;
    transition: all 0.5s;
}
#section09 .inner .app:hover .before {
    opacity: 0;
}



#section10 {
    background: white;
    height:600vh;
}

#section10 .trigger-this-10-pro {
    height: 100%;
}

#section10 .fix-this-10-pro {
    width: 100vw;
    height:100vh;
}


#section10 .inner {
    padding-top: 80px;

    margin: 0 auto;
    width: 1520px;
}

#section10 .inner .contents {
    display: flex;
    justify-content: space-between;
}


#section10 .inner .contents .contents_right .image {
    margin-bottom: 30px;
}

#section10 #pro {
    margin-bottom: 250px;
}

#section11 {
    height: 1120px;
    background: #343434;
    text-align: center;
}

#section11 .title {
    padding-top:165px;
    margin-bottom: 150px;

}

#section11 .inner {
    height: 657px;
    width: 1520px;
    margin:0 auto;
}
#section11 .inner .title{
    margin-bottom: 150px;
}

#section11 .inner .insight {
    display: flex;
    align-items: center;
    margin-bottom: 50px;
    padding-bottom: 15px;
    position: relative;
}

#section11 .insight .insight_eng {
    width: 1160px;
    text-align: left;
}
#section11 .insight .illust {
    position: absolute;
    right: 13px;
    top: -30px;
    transition: all 1s;
    opacity: 0;
    z-index: 9999;
}
#section11 .insight:hover .illust{
    opacity: 1;
}
#section11 .insight .illust04 {
    position: absolute;
    right: 5px;
    top: -20px;
}
#section11 .insight .illust05 {
    position: absolute;
    right: 60px;
    top: -50px;
}
#section11 .inner .insight::after {
    position: absolute;
    left: 0;
    bottom:0;
    width:0;
    height:4px;
    content: '';
    background: #fff;
    transition: all 1s;
}

#section11 .inner .insight:hover::after {
    width:100%;
}


#section12 {
    height: 1050px;
    background: white;
    --bg: white;
    overflow: hidden;
}

#section12 .title {
    position: absolute;
    left: 50%;
    top:0;
    transform: translateX(-50%);
}

#section12  .hover_box {
    background-color: #343434;
    height:100vh;
}


#section12  .text_box {
    font-size: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

#section12  .content {
    background: #fff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#section12  .hidden-content {
    --x: 0px;
    --y: 0px;
    --size: 5px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #a1a1a1;

    color: var(--bg);
    --mask: radial-gradient(
            circle at var(--x) var(--y),
            black var(--size),
            transparent 0
    );
    -webkit-mask-image: var(--mask);
    mask-image: var(--mask);
    pointer-events: none;
    visibility: hidden;
}


#section13 {
    height: 1240px;
    background-color: white;
    background-image: url("../images/section13/background_cloud.jpg");
    background-repeat: no-repeat;
    background-position: center;
    position: relative;

}
#section13 .title {
    margin-left: 200px;
    margin-bottom: 125px;
}
#section13 .week_title {
    text-align: center;
    padding-top: 35px;
    position: relative;
}
#section13 .week_title .after_week {
    position: absolute;
    left: 223px;
    top: 35px;
    opacity: 0;
    transition: all 1s;
}

#section13 .inner >div.on .after_week {
    opacity: 1;
}
#section13 .inner >div.on .before_week,#section13 .inner >div.on .before {
    opacity: 0;
}

#section13 .inner {
    width: 1520px;
    margin:0 auto 55px;
    display: flex;
}

#section13 .inner > div {
    width: 500px;
    height: 566px;
    border-radius:25px;
    transition: all 1s;
}


#section13 .inner > div.on {
    background-color: rgba(174, 174, 174, 0.6);
}

#week01 .before {
    padding-top: 90px;
}
#week02 .before {
    padding-top: 210px;
}
#week03 .before {
    padding-top: 330px;
}
#section13 #week01 ,#week02 ,#week03 {
    position: relative;
    width: 500px;
}


#section13 #week02 {
    margin: 0 11px;
}

#section13 #week01 .after{
    position: absolute;
    left: 0;
    top: 141px;
}

#section13 #week02 .after{
    position: absolute;
    left: 0;
    top: 260px;
}

#section13 #week03 .after{
    position: absolute;
    left: 0;
    bottom: 47px;
}

#section13 .inner > div .after{
    transition: all 1s;
    opacity: 0;
}

#section13 .inner > div.on .after{
    opacity: 1;
}



#section13 .txt_box {
    position:  relative;
    margin-left: 200px;

}

#section13 .txt_box > div {
    position: absolute;
    left: 0;
    top:0;
    opacity: 0;
    transition:all 1s;
}


#section13 .txt_box > div.on {
    opacity: 1;
}


#section14 {
    height: 1975px;
    background:white;}

#section14 .wrap {
    width: 100vw;
    height: 1065px;
    background: #343434;

}
#section14 .wrap .inner {
    width: 1520px;
    margin: 0 auto;

    display: flex;
    padding-top: 180px;
}

#section14 #group02 ,#group03 ,#group04 {
    margin-left:20px;
}
#section14 .wrap .inner >article .card >div {
    margin-bottom: 20px;
}
#section14 .wrap .inner .group_name {
    margin-bottom: 80px;
}
#section14 #group01 .card .a {
    opacity: 0;
    transform: translateY(-140px);
}
#section14 #group01 .card .b,#group01 .card .c ,#group01 .card .d,#group01 .card .e ,#group01 .card .f ,#group01 .card .g{
    opacity: 0;
    transform: translateY(-79px);
}
#section14 #group02 .card .a {
    opacity: 0;
    transform: translateY(-140px);
}
#section14 #group02 .card .b, #group02 .card .c ,#group02 .card .d,#group02 .card .e ,#group02 .card .f ,#group02 .card .g{
    opacity: 0;
    transform: translateY(-79px);
}

#section14 #group03 .card .a {
    opacity: 0;
    transform: translateY(-140px);
}
#section14 #group03 .card .b, #group03 .card .c ,#group03 .card .d,#group03 .card .e ,#group03 .card .f ,#group03 .card .g{
    opacity: 0;
    transform: translateY(-79px);
}




#section14 #group04 .card .a {
    opacity: 0;
    transform: translateY(-140px);
}
#section14 #group04 .card .b, #group04 .card .c ,#group04 .card .d,#group04 .card .e ,#group04 .card .f ,#group04 .card .g{
    opacity: 0;
    transform: translateY(-79px);
}


#section14 .hypothesis {
    width: 100vw;
    padding-bottom: 135px;
    background: #343434;
    text-align: center;
}


#section15 {
    background: white;
    height:800vh;
}

#section15 .trigger-this-15 {
    height: 100%;
}

#section15 .fix-this-15 {
    width: 100vw;
    height:100vh;
}

#section15 .main_interviewee {
    position: absolute;
    left: 804px;
    opacity: 0;
}

#section15 .main_interviewee.active  {
    transform:scale(1.2);
    z-index: 999999;
}

#section15 .main_interviewee01 {
    top:-189px;
}
#section15 .main_interviewee02 {
    top:252px;
    z-index: 99999;
}
#section15 .main_interviewee03 {
    top:693px;
    z-index: 9999;
}



#section15 .main_interview_text {
    opacity: 0;
}


#section15 .main_interview_text > div{
    position: absolute;
    right: 220px;
    top: 110px;
    opacity: 0;
    transition: all 1s;
}

#section15 .main_interview_text > div.active {
    opacity: 1;
    z-index: 999;
}

#section15 .wrap {
    transform:translateY(-189px);
    clip-path: inset(0% 0% 0% 0%);
}

#section15 .interviewee {
    margin-bottom: 20px;
    display: flex;
}

#section15 .interviewee >div {
    margin-right: 20px;
}
#section .interviewee >div :nth-child(last) {
    margin-right: 0;
}

#section15 #interviewee_a {
    transform: translateX(-1783px);
}

#section15 #interviewee_c {
    transform: translateX(-1783px);
}


#section16 {
    height: 300vh;
    background: white;
    position: relative;
}
#section16 .trigger-this-16 {
    height: 100%;
}

#section16 .fix-this-16 {
    width: 100vw;
    height: 100vh;
    position: relative;
}
#section16 .contents {
    position: relative;
    display: flex;
    justify-content: space-between;
}

#section16 .contents .wrap {
    position: relative;
}

#section16 .contents .wrap .before {
    position: absolute;
    left: 0;
    top: 0;
    transition: all 1s;
}

#section16 .contents .wrap:hover .before {
    opacity: 0;
}

#section17 {
    height: 200vh;
    background-color: white;
}
#section17 .trigger-this-17 {
    height: 100%;
}

#section17 .fix-this-17 {
    width: 100vw;
    height: 100vh;
}


#section17 .inner {
    background-image: url("../images/section17/image_background.jpg");
    height: 990px;


}
#section17 .inner .text {
    transform: translateY(50px);
    opacity: 0;
    padding-top: 600px ;
    margin-left: 200px;
}


#section18 {
    width: 1920px;
    height: 1405px;
    background-color: white;
    background-image: url("../images/section18/img_bakground.png");
}

#section18 .wrap {
    padding-top: 73px;
    text-align: center;
}

#section18 .wrap .text {
    margin-bottom: 37px ;
    opacity: 0;
    transform: translateY(50px);
}

#section19 {
    height: 1315px;
    background-color: white;
    background-image: url("../images/section19/img_background.jpg");
    background-repeat: no-repeat;
}

#section20 {
    height: 1085px;
    background-color: white;
}
#section20 .wrap {
    display: flex;
}
#section20 .wrap .contents_right {
    position: relative;
    margin-left: 15px;
}


#section20 .wrap .contents_right .se02_slide {
    width: 950px;
    height: 921px;
}


#section20 .wrap .contents_right .se02_slide .slick-dots {
    display: flex !important;
    position: absolute;
    left: 0;
    bottom:-59px;
}

#section20 .wrap .contents_right .se02_slide .slick-dots > li {
    transition: all 1s;
}

#section20 .wrap .contents_right .se02_slide .slick-dots > li:nth-child(1) {
    background: url("../images/section20/icon_typo_gray.png") no-repeat;
    width: 191px;
    height: 58px;
    margin-right: 30px;
}

#section20 .wrap .contents_right .se02_slide .slick-dots > li:nth-child(1).slick-active {
    background: url("../images/section20/icon_typo_green.png") no-repeat;
}
#section20 .wrap .contents_right .se02_slide .slick-dots > li:nth-child(2) {
    background: url("../images/section20/icon_icons_gray.png") no-repeat;
    width: 114px;
    height: 58px;
}

#section20 .wrap .contents_right .se02_slide .slick-dots > li:nth-child(2).slick-active {
    background: url("../images/section20/icon_icons_green.png") no-repeat;

}

#section20 .wrap .contents_right .se02_slide .slick-dots > li > button {
    display: none;
}





#section20 .wrap .contents_right .text_typography {
    /*margin-bottom: 158px;*/
    /*position: absolute;*/
    /*left: 0;*/
    /*top: 0;*/
}


/*#section20 .wrap .contents_right .button {*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*    width: 334px;*/
/*    height: 58px;*/
/*    position: relative;*/
/*}*/

/*#section20 .wrap .contents_right .button .button_green_typo {*/
/*    position: absolute;*/
/*    left: 0;*/
/*    top: 0;*/
/*}*/
/*#section20 .wrap .contents_right .button .button_gray_icon {*/
/*    position: absolute;*/
/*    left: 220px;*/
/*    top: 0;*/
/*}*/


#section21 {
    height: 2620px;
    background-color: white;
}

#section21 #color_inspiration {
    display: flex;
    margin-bottom: 20px;
}
#section21 #color_inspiration .img_inspiration {
    margin-right: 10px;
}

#section21 #color_system{
    display: flex;
}
#section21 #color_system .contents_left {
    width: 950px;
    height: 993px;
    position:relative;
    background-color: #40c64a;
    margin-right: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#section21 #color_system .contents_left .button:nth-child(2) {
    margin-top: 20px;
    margin-bottom: 20px;
}

#section21 #color_system .contents_right {
    width: 951px;
    height: 994px;
    position: relative;
}


#section21 #color_system .contents_right .slick-dots {
    position: absolute;
    left: -600px;
    top:390px;
}
#section21 #color_system .contents_right .slick-dots > li{
    display: flex;
    align-items: center;
}
#section21 #color_system .contents_right .slick-dots > li:nth-child(1)  {
    background:url("../images/section21/button_subcolor.png") center no-repeat;
    width: 260px;
    height:58px;
}
#section21 #color_system .contents_right .slick-dots > li.slick-active:nth-child(1) {
    background:url("../images/section21/button_subcolor_white.png") center no-repeat;
    width: 260px;
    height:58px;
}

#section21 #color_system .contents_right .slick-dots > li:nth-child(2)  {
    margin: 20px auto;
    background:url("../images/section21/button_sementic.png") center no-repeat;
    width: 236px;
    height:58px;
}
#section21 #color_system .contents_right .slick-dots > li.slick-active:nth-child(2) {
    background:url("../images/section21/button_sementic_white.png") center no-repeat;
    width: 263px;
    height:58px;
}

#section21 #color_system .contents_right .slick-dots > li:nth-child(3)  {
    margin: 0 auto;
    background:url("../images/section21/button_grayscale.png") center no-repeat;
    width: 161px;
    height:58px;
}

#section21 #color_system .contents_right .slick-dots > li.slick-active:nth-child(3) {
    background:url("../images/section21/button_grayscale_white.png") center no-repeat;
    width: 161px;
    height:58px;
}




#section21 #color_system .contents_right .slick-dots > li > button {
    display: none;
}


#section22 {
    height: 1810px;
    background-color: white;
    position:relative;

}
#section22 .title {
    text-align: center;
    margin-bottom: 110px;
}
#section22 .background {
    width: 1920px;
    height: 904px;
    background-image: url("../images/section22/img_background.jpg");
    overflow: hidden;
}

#section22 .screen {
    position: absolute;
    left: 0;
    top: 0;
}
#section22 .wrap {
    display: flex;
    position: absolute;
    right: 66px;
    bottom: 333px;
    justify-content: space-between;
    width: 530px;
}

#section22 .screen {
    margin-left: 200px;
    padding-top: 528px;
}


#section23 {
    height: 2880px;
    background-color: white;
    /*position: relative;*/
}

#onboarding, #simplification {
    position: relative;
}
#section23 #onboarding .img_background {
    margin-left: 457px;
    margin-bottom: 66px;
}
#section23 #onboarding .screen {
    width: 296px;
    height: 642px;
    border-radius: 25px;
    background: white;
    position: absolute;
    top:204px;
    left:242px;
    box-shadow: 24px 18px 33px 11px rgba(0,0,0,0.1);
}




#section23 #onboarding .text_title ,#simplification .text_title {
    margin-left: 328px;
    margin-bottom: 35px;
    opacity: 0;
    transform: translateY(50px);
}

#section23 #onboarding .text_text ,#simplification .text_text {
    margin-left: 328px;
    margin-bottom: 120px;
    opacity: 0;
    transform: translateY(50px);
}

#section23 #simplification .img_background {
    margin-bottom: 66px;
}

#section23 #simplification .screen {
    width: 296px;
    height: 642px;
    border-radius: 25px;
    background: white;
    position: absolute;
    top:204px;
    right:258px;
    box-shadow: 24px 18px 33px 11px rgba(0,0,0,0.1);
}

#section24 {
    background-image: url("../images/section24/img_background.jpg");
    background-repeat: no-repeat;
    height: 2588px;
    background-color: white;
}

#section24 .title {
    padding-top: 258px;
    margin-left: 437px;
    height: 66px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 67px;
}

#section24 .screen {
    display: flex;
    width: 1000px;
    justify-content: space-between;
    margin-left: 437px;
    margin-bottom: 138px;
}
#section24 .wrap {
    width: 1394px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 107px;
    margin-left: 200px;
}

#section24 .image02 {
    margin-left: 200px;
}
#section24 .describe{
    opacity: 0;
    transition: all 1s;
    transition-timing-function: ease;
}

#section25 {
    background-color: white;
    height: 4485px;
}
#section25 .contents01 {
    margin-bottom: 40px;
    position: relative;
}
#section25 .wrap_miniscreen {
    padding-top: 365px;
    text-align: right;
    margin-right: 227px;
    margin-bottom: 373px;
}
#section25 .wrap_screen {
    position: absolute;
    left: 522px;
    top: 0;
    display: flex;
}

#section25 .wrap_screen .screen02 {
    padding-top: 160px;
    margin-left: 50px;
}
#section25 .screen03 {
    margin-left: 1030px;
}
#section25 .contents02 {
    display: flex;
}

#section25 .contents02 .wrap_text {

    margin: 0 434px 275px 265px;
    padding-top: 175px;

}
#section25 .contents02 .wrap_text .text_title {
    margin-bottom: 30px;
}
#section25 .contents02 .wrap_text .text_text {
    opacity: 0;
    transform: translateY(80px);

    margin-bottom: 180px;
}
#section25 .image_deco {
    text-align: right;
    margin-right: 330px;
}

#section26 {
    background-image: url("../images/section26/ima_background.jpg");
    background-color: white;
    background-repeat: no-repeat;
    height: 883px;
}

#section27 {
    height: 2465px;
    background-color: white;
}

#section27 .text {
    margin-left: 200px;
    margin-bottom: 45px;
}

#section27 .text .text_eng {
    margin-top: 35px;
    margin-bottom: 20px;
}
#section27 .text .inhalt {
    opacity: 0;
    transform: translateY(50px);
}

#section27 .screen {
    margin-left: 693px;
}

#section28 {
    height: 3225px;
    background-color: white;
    background-image: url("../images/section28/img_background.jpg");
    background-repeat: no-repeat;
}

#section28 .contents01 {
    padding-top: 108px;
    margin-bottom: 55px;
}

#section28 .contents01 .text {
    margin-left: 200px;
}

#section28 .contents01 .text .title {
    margin-bottom: 35px;
}
#section28 .contents01 .text .inhalt {
    margin-bottom: 20px;
}
#section28 .contents01 .text .inhalt {
    opacity: 0;
    transform: translateY(50px);
}

#section28 .contents01 .deco {
    padding-top: 463px;
    margin-left: 183px;
    display: flex;
    position: relative;
}
#section28 .contents01 .deco_illust01 {
    padding-top: 44px;
    margin-right: 535px;
}

#section28 .contents01 .deco_illust02 {
    position: absolute;
    right: 210px;
    bottom: -84px;
}


#section28 .contents02 .wrap {
    display: flex;
    margin-left: 582px;
    position: relative;
}

#section28 .contents02 .wrap .src_eng {
    width: 390px;
    height: 393px;
    box-shadow: 24px 18px 33px 11px rgba(0,0,0,0.1);
    position: absolute;
    left: -360px;
    top: 630px;
    opacity: 0;
    transform: translateX(410px);
}
#section28 .contents02 .wrap .src_kr {
    width: 390px;
    height: 393px;
    box-shadow: 24px 18px 33px 11px rgba(0,0,0,0.1);
    position: absolute;
    left: 50px;
    top: 630px;
}

#section28 .contents02 .popup {
    position:absolute;
    left: 1540px;
    bottom: 100px;
}

#section29 {
    height: 1426px;
    background-color: white;
    background-image: url("../images/section29/img_background.jpg");
    background-repeat: no-repeat;
}

#section29 .text {
    padding-top: 108px;
    margin-left: 200px;
    margin-bottom: 144px;
}
#section29 .text .title {
    margin-bottom: 41px;
}
#section29 .text .ihhalt {
    opacity: 0;
    transform: translateY(50px);
}

#section29 .screen {
    text-align: center;
}

#section30 {
    height: 2486px;
    background-image: url("../images/section30/img_background.jpg");
    position: relative;
}

#section30 .text {
    padding-top: 108px;
    margin-right: 200px;
    text-align: right;
}
#section30 .text .text_title {
    margin-bottom: 41px;
}
#section30 .text .text_eng {
    margin-bottom: 20px;
}
#section30 .text .text_kr {
    margin-bottom: 17px;
}
#section30 .text .inhalt {
    opacity: 0;
    transform: translateY(50px);
}
#section30_contents {
    position: relative;
    width: 1520px;
    margin: 0 auto;
}
#section30_contents .screen_full {
    text-align: center;
}
#section30_contents .wrap_speech_bubble_green ,#section30_contents .wrap_miniscreen{
    position: absolute;
}

#section30_contents .wrap_speech_bubble_green {
    left: 618px;
    top: 0;
}
#section30 .wrap_miniscreen {
    position: absolute;
    right: 83px;
    bottom:50px;
}
#section30 .text_miniscreen {
    margin-left: 200px;
    padding-top: 30px;
}
#section30_contents .deco_bubble01 {
    opacity: 0;
    position: absolute;
    right: 0;
    top: 214px;
}
#section30_contents .deco_bubble02 {
    opacity: 0;
    position: absolute;
    left: -58px;
    top: 1290px;
}



#section31 {
    height: 1448px;
    background-color: white;
    display: flex;

}

#section31 .left {
    margin-right: 20px;
}
#section31 .right {
    background-color: #edfff0;
    height: 1080px;
    width: 952px;
    position: relative;
    overflow: hidden;
}
#section31 .right .slide {
    background-color: #edfff0;
    height: 1080px;
    width: 952px;

}
#section31 .slide{
    margin: 0 10px 0 80px;
    padding-top: 302px;
    display: flex;
}


#section31 .popup01 .screen, #section31 .popup02 .screen, #section31 .popup03 .screen ,#section31 .popup04 .screen{
    margin-right: 20px;
}

#section31 .right .title {
    padding-top: 115px;
   margin-bottom: 37px;
}




#section32 {
    height: 3600px;
    background-color: white;
}
#section32 .contents01{
    height: 1828px;
    position: relative;
}
#section32 .contents01 .text {
    margin-left: 200px;
    margin-bottom: 58px;
}
#section32 .contents01 .text .title {
    margin-bottom: 41px;
}

#section32 .wrap_change_profile {
    opacity: 0;
    transform: translateY(50px);
}

#section32 .contents01 .screen {
    text-align: center;
}
#section32 .contents01 .wrap_change_profile {
    position: absolute;
    left: 710px;
    top: 240px;

}
#section32 .contents01 .wrap_change_profile .profile_photos {
    width: 262px;
    height: 76px;
    display: flex;
    justify-content: space-between;
    margin-left: 20px;
}
#section32 .contents01 .wrap_change_profile .pr01, #section32 .contents01 .wrap_change_profile .pr02,#section32 .contents01 .wrap_change_profile .pr03 {
    opacity: 0;
    transform: translateX(-94px);
}
#section32 .contents01 .deco {
    position: absolute;
    bottom: 206px;
    right: 613px;
}
#section32 .contents02 {
    background-repeat: no-repeat;
    height: 1770px;
    background-color: white;
    display: flex;
    position: relative;
}

#section32 .contents02 .text {
    margin-left: 200px;
}
#section32 .contents02 .text .title {
    margin-bottom: 41px;
}
#section32 .contents02 .text .text_ai {
    margin-bottom: 20px;
}

#section32 .contents02 .deco_bubble02 {
    opacity: 0;
    transform: translateY(50px);
    position: absolute;
    right: 160px;
    top: 65px;
}

#section32 .contents02 .describe {
    width: 370px;
    position: absolute;
    left: 619px;
    bottom: 734px;
}
#section32 .contents02 .describe .deco_bubble03 {
    opacity: 0;
    transform: translateY(50px);
}

#section32 .contents02 .screen_small {
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(-35px);
}
#section32 .contents02 .describe .book {
    opacity: 0;
    transform: translateY(-35px);
}


#section33 {
    height: 1360px;
    background-color: white;
    position: relative;
}
#section33 .wrap_columns {
    display: flex;
}
#section33 .column01 {
    padding-top: 276px;
    margin-left: 200px;
    margin-right: 31px;
}
#section33 .column01 .text_mypage {
    margin-bottom: 350px;
}
#section33 .column01 .popup01 {
    margin-left: 43px;
}

#section33 .wrap_miniscreen {
    width: 740px;
    display: flex;
    justify-content: space-between;
    position: absolute;
    left: 294px;
    top: 440px;
}
#section33 .wrap_miniscreen .miniscreen {
    opacity: 0;
    transform: translateX(380px);
}

#section33 .column02 .text {
    position: absolute;
    left: 1053px;
    top: 22px;
}
#section33 .column02 .text .title {
    margin-bottom: 41px;
}


#section33 .wrap_columns .deco .deco_illust02 {
    position: absolute;
    left: 238px;
    bottom: 380px;
}

#section33 .wrap_columns .deco .deco_illust01 {
    position: absolute;
    right: 423px;
    top: 200px;
}
#section33 .wrap_columns .deco .deco_bubble_mypage {
    position: absolute;
    right: 80px;
    top: 508px;
}

#section34 {
    height: 2080px;
    background-color: white;
}

#section34 .trigger-this-34 {
    height: 100%;
}
#section34 .fix-this-34 {
    width: 100vw;
    height: 100vh;
}

#section34 .title_Insights {
    margin-bottom: 81px;
    text-align: center}

#section34 .contents01 {
    width: 1520px;
    display: flex;
    margin:0 auto;
    justify-content: left;
}

#section34 .contents01 .main_image {
    margin-right: 20px;
    margin-bottom: 108px;
}

#section34 .contents01 .wrap_text .text_main {
    padding-top: 41px;
    margin-bottom: 21px;
}
#ab_test .wrap_text {
    margin-left: 200px;
    margin-bottom: 84px;
}
#ab_test .wrap_text .title {
    margin-bottom: 41px;
}
#ab_test .wrap_text:nth-child(1) {
    margin-bottom: 20px;
}
#ab_test .wrap_text .txt_eng, #ab_test .wrap_text .txt_kr  {
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(50px);
}
#ab_test .contents {
    display: flex;
}
#ab_test .img_abtest {
    margin-left: 200px;
    margin-right: 61px;
}
#ab_test .contents .right {
    padding-top: 72px;
}
#ab_test .contents .right >div {
    margin-bottom: 20px;
}

#ab_test .contents .right .txt_detail {
    margin-bottom: 167px;
    margin-left: 30px;
    opacity: 0;
    transition: all 1s;
}


#section35 {
    height: 1263px;
    background-color: white;
}
#section35 .wrap_contents {
    width: 1520px;
    margin-left: 200px;
    position: relative;

}
#section35 .wrap_contents .text{
    text-align: right;
    margin-bottom: 108px;
}

#section35 .wrap_contents .text .title {
    margin-bottom: 41px;
}
#section35 .wrap_contents .text .txt_eng {
    margin-bottom: 20px;
    /*opacity: 0;*/
    /*transform: translateY(50px);*/
}



#section35 .wrap_contents .screen {
    display: flex;
    position: absolute;
    left: 0;
    top: 302PX;
}
#section35 .wrap_contents .screen_mini {
    display: flex;
    margin-left: 844px;
    padding-top: 137px;
    margin-bottom: 70px;
    opacity: 0;
}
#section35 .wrap_contents .screen_mini> div:nth-child(1) {
    margin-right: 10px;
}
#section35 .wrap_contents .wrap_boxes {
    text-align: right;
    opacity: 0;
    transform: translateY(20px);
}
#section35 .wrap_contents .wrap_boxes .box{
    margin-bottom: 18px;
}
#section35 .wrap_contents .wrap_boxes .text {
    margin-right: 42px;
}

#section36 {
    height: 1261px;
    background-color: white;
}
#section36 .wrap_contents {

    margin-left: 200px;
    position: relative;

}
#section36 .wrap_contents .text{
    margin-bottom: 50px;
}

#section36 .wrap_contents .text .title {
    margin-bottom: 41px;
}
#section36 .wrap_contents .text .text {
    margin-bottom: 20px;
}
#section36 .wrap_contents .bubble01 {
    text-align: right;
    margin-right: 450px;
    opacity: 0;
    transform: translateY(-50px);
}
#section36 .wrap_contents .screens {
    height: 717px;
    display: flex;
    align-items: center;
}
#section36 .wrap_contents .screens .column01 {
    display: flex;
    width: 426px;
    justify-content: space-between;
    align-items: center;
}

#section36 .wrap_contents .screens .deco_line {
    clip-path: inset(0 100% 0 0);
}

#section36 .wrap_contents .screens .column02 {
    margin-right: 256px;
}

#section36 .wrap_contents .popup01 {
    position: absolute;
    left: 750px;
    top: 280px;
}
#section36 .wrap_contents .popup02 {
    position: absolute;
    left: 750px;
    top: 650px;
}
#section36 .column03 .bubble02 {
    margin-left:90px ;
    opacity: 0;
    transform: translateY(50px);
}
#section36 .wrap_contents .box {
    text-align: right;
    margin-right: 200px;
    padding-top: 40px;
}




#section37 {
    background-color: white;
    height: 1654px;
}
#section37 .contents {
    margin-left:200px ;
    position: relative;

}
#section37 .wrap_text {
    margin-bottom: 350px;
}
#section37 .wrap_text .title {
    margin-bottom: 50px;
}
#section37 .wrap_text .text {
    margin-bottom: 41px;
}
#section37 .wrap_screen {
    display: flex;
    position: relative;
    margin-left: 162px;
}
#section37 .contents .popup {
    transform: translate(174px, 365px) scale(0.47);
    position: absolute;
    left: 360px;
    top: 260px;

}
#section37 .wrap_screen .screen {
    position: absolute;
    left: 454px;
    top: -223px;
    width: 361px;
    height: 772px;
    border-radius: 32px;
    background: white;
    box-shadow: 24px 18px 33px 11px rgba(0,0,0,0.1);
}
#section37 .wrap_screen .box {
    position: absolute;
    right: 200px;
    top: 0;
}

#section38 {
    padding-top: 200px;
    background-color: white;
    height: 2050px;
}

#section38 .deco {
    text-align: center;
    margin-bottom: 142px;
}
#section38 .title {
    margin-left: 200px;
    margin-bottom: 107px;
}
#section38 .wrap01 {
    width: 1520px;
    margin-left: 200px;
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 310px;
}

#section38 .wrap01 .ui, #section38 .wrap01 .ux {
    height: 449px;
    width: 749px;
    background-color: #e9e9e9;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
#section38 .wrap01 .name {
    position: absolute;
    left: 50px;
    top: -25px;
    transform: rotate(180deg);
}

#section38 .img {
    text-align: center;
}













