#about-wrap {} #about-wrap .inner {width: 1440px; margin:0 auto; position: relative; padding: 0 32px;} #about-wrap .visual_cont {width: 100%; height: calc(100vh - 80px); position: relative; } #about-wrap .visual_cont .visual_bg {position: fixed;top: 0; left: 0; width: 100%; height: 100vh; background: url("../../image/new/about_0_1.png") no-repeat center center;} #about-wrap .visual_cont .visual_txt {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);} #about-wrap .visual_cont .visual_animation {color: #FFF; font-size: 100px; line-height: 130px; letter-spacing: -3px; font-weight: 400; text-align: center; opacity: 0;transform: translate3d(0,20%,0);} #about-wrap .visual_cont .visual_animation.active { -webkit-animation: fade_up2 2s forwards; animation: fade_up2 2s forwards; } #about-wrap .visual_cont .visual_animation > label {display: inline-block;font-weight: 700;} #about-wrap .story_cont {background: #FFF; position: relative; z-index: 1; padding: 140px 0 400px; } #about-wrap .story_cont .inner {display: flex;} #about-wrap .story_cont .story_aside {position: sticky; top: 140px; width: 686px; align-self: baseline;} #about-wrap .story_cont .story_title {margin: 0 0 0; opacity: 0; height: 0; } #about-wrap .story_cont .story_title.active {opacity: 1; height: auto;} #about-wrap .story_cont .story_title > dt {height: 42px; line-height: 42px; font-weight: 600; font-size: 28px; letter-spacing: -0.196px; color: #098956;} #about-wrap .story_cont .story_title > dd {margin: 16px 0 0; font-size: 50px; line-height: 65px; letter-spacing: -0.5px; font-weight: 700;} #about-wrap .story_cont .story_text {width: calc(100% - 686px); padding: 140px 0 0;} #about-wrap .story_cont .story_post {height: auto; padding: 0 0 0; margin: 0 0 80px; padding: 0 0 0 36px; position: relative; opacity: 0.2; font-weight: 600; font-size: 28px; line-height: 46px; letter-spacing: -0.196px; transition: opacity 0.5s;} #about-wrap .story_cont .story_post::before {content: ''; display: block; width: 2px; height: calc(100% - 20px); background: #222; position: absolute; left: 0; top: calc(50% - 2px); transform: translateY(-50%);} #about-wrap .story_cont .story_post > label {font-weight: 600;} #about-wrap .story_cont .story_post:last-child {margin: 0 0 140px;} #about-wrap .story_cont .story_post.active {opacity: 1;} #about-wrap .story_cont .story_post.active > label {color: #098956; font-weight: 600;} #about-wrap .story_cont .story_mobile {display: none;} #about-wrap .history_cont {position: relative; background: #FFF; z-index: 1;} #about-wrap .history_cont .history_title {padding: 100px 0 140px; margin: 0 0 0;} #about-wrap .history_cont .history_title > dt {width: 170px; height: 36px; margin: 0 auto; background: url("../../image/new/logo.svg") no-repeat center;} #about-wrap .history_cont .history_title > dd {font-size: 40px; margin: 12px 0 0; color: #595F65; font-size: 40px; font-weight: 700; line-height: 56px; letter-spacing: -0.28px; text-align: center;} #about-wrap .history_cont .history_scroll {} #about-wrap .history_cont .history_group {padding: 0 0 0; display: flex;} #about-wrap .history_cont .history_left { width: 448px; display: flex; position: sticky; top: 0; align-self: baseline; letter-spacing: -0.5px; line-height: 65px; font-size: 50px; font-weight: 700; color: #222; padding: 160px 0 400px;} #about-wrap .history_cont .history_right {width: calc(100% - 448px); padding:160px 0 200px 272px; position: relative;} #about-wrap .history_cont .history_right .history_before {position: absolute; top: 0; left: 240px; width: 1px; height: 100%; display: block; background: #DEDFE0;} #about-wrap .history_cont .history_right .history_after {content: ''; position: absolute; top: 0; left: 240px; width: 2px; height: 100%; display: block; background: #222; transition: height 1s;} #about-wrap .history_cont .history_right.history_0 .history_after {height: 180px;} #about-wrap .history_cont .history_right.history_0 .history_row:nth-child(-n+1)::before {content: ''; border-color: #098956; } #about-wrap .history_cont .history_right.history_0 .history_row:nth-child(-n+1) > dl {opacity: 1;} #about-wrap .history_cont .history_right.history_0 .history_img {top: 280px; background-image: url('../../image/new/about_2_1.png');} #about-wrap .history_cont .history_right.history_1 .history_after {height: 380px;} #about-wrap .history_cont .history_right.history_1 .history_row:nth-child(-n+2)::before {content: ''; border-color: #098956; } #about-wrap .history_cont .history_right.history_1 .history_row:nth-child(-n+2)> dl {opacity: 1;} #about-wrap .history_cont .history_right.history_1 .history_img {top: 400px; background-image: url('../../image/new/about_2_2.png');} #about-wrap .history_cont .history_right.history_2 .history_after {height: 540px;} #about-wrap .history_cont .history_right.history_2 .history_row:nth-child(-n+3)::before {content: ''; border-color: #098956; } #about-wrap .history_cont .history_right.history_2 .history_row:nth-child(-n+3) > dl {opacity: 1;} #about-wrap .history_cont .history_right.history_2 .history_img { top: 520px; background-image: url('../../image/new/about_2_3.png');} #about-wrap .history_cont .history_right.history_3 .history_after { height: 720px;} #about-wrap .history_cont .history_right.history_3 .history_row:nth-child(-n+4)::before {content: ''; border-color: #098956; } #about-wrap .history_cont .history_right.history_3 .history_row:nth-child(-n+4) > dl {opacity: 1;} #about-wrap .history_cont .history_right.history_3 .history_img {top: 640px; background-image: url('../../image/new/about_2_4.png');} #about-wrap .history_cont .history_right.history_all .history_after { height: 100%;} #about-wrap .history_cont .history_right .history_row {line-height: 26px; position: relative;} #about-wrap .history_cont .history_right .history_row::before {content: ''; display: block; position: absolute; top: 8px; left: -42px; width: 16px; height: 16px; border-radius: 50%; background: #FFF; border: 3px solid #B5BABD; z-index: 1;} #about-wrap .history_cont .history_right .history_img {opacity: 1; width: 332px; height: 220px; background-image: url('../../image/new/about_2_1.png'); background-position: center; background-repeat: no-repeat; position: absolute; right: 0; top: 280px; transition: opacity, top, background-image 0.5s;} #about-wrap .history_cont .history_right .history_row > dl {margin: 0 0 40px; opacity: 0.3; transition: opacity 0.5s;} #about-wrap .history_cont .history_right .history_row > dl dt {color: #098956; line-height: 42px; margin: 0 0 8px; font-size: 28px; font-weight: 700; letter-spacing: -0.08px;} #about-wrap .history_cont .history_right .history_row > dl dd {margin: 0 0 0; font-size: 16px; color: #595F65;} #about-wrap .history_cont .history_right .history_row .history_row_img {display: none;} #about-wrap .growth_cont {height: calc(100vh * 14); position: relative; background: #000; z-index: 1;} #about-wrap .growth_cont .growth_group {height: 100vh; position: sticky; top: 0; left: 0;} #about-wrap .growth_cont .growth_group .growth_title {width: 1440px; position: relative; z-index: 2; margin: 0 auto; padding: 140px 32px 0; color: #FFF; font-size: 50px; font-weight: 700; line-height: 65px; letter-spacing: -0.5px;} #about-wrap .growth_cont .growth_group .growth_graph {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} #about-wrap .growth_cont .growth_group .growth_bg {position: absolute; height: 100%; width: 100%; display: flex;} #about-wrap .growth_cont .growth_group .growth_bg > li {width: calc(100% / 6); border-right: 1px solid #222;} #about-wrap .growth_cont .growth_group .growth_bg > li:last-child {border: 0px;} #about-wrap .growth_cont .growth_group .growth_list {position: absolute; height: 100%; width: 100%; display: flex;} #about-wrap .growth_cont .growth_group .growth_list > li {width: calc(100% / 6); position: relative; opacity: 0; transition: opacity 0.5s;} #about-wrap .growth_cont .growth_group .growth_list > li.active {opacity: 1;} #about-wrap .growth_cont .growth_group .growth_list > li svg {width: 100%; position: absolute; left: 0;} #about-wrap .growth_cont .growth_group .growth_list > li svg.growth_mb {display: none;} #about-wrap .growth_cont .growth_group .growth_list > li .growth_info {position: absolute; bottom: 0; left: 50%; width: 100%; height: 88px; z-index: 1;} #about-wrap .growth_cont .growth_group .growth_list > li .growth_info::before {content: ''; display: block; width: 16px; height: 16px; border-radius: 50%; background: #36CD91; position: absolute; top: 40px; left: 50%; transform: translateX(-50%);} #about-wrap .growth_cont .growth_group .growth_list > li .growth_info > dt {display: flex; letter-spacing: -0.5px; line-height: 24px; font-weight: 700; font-size: 24px; color: #FFF; padding: 0 0 0 44px; width: 240px; margin: 0 auto 12px;} #about-wrap .growth_cont .growth_group .growth_list > li .growth_info > dt > label {display: inline-block; font-weight: 500; font-size: 16px; padding: 2px 0 0 4px;} #about-wrap .growth_cont .growth_group .growth_list > li .growth_info > dd {margin: 0 auto 0; line-height: 32px; padding: 20px 0 0; text-align: right; font-size: 32px; font-weight: 700; color: #36CD91; width: 240px;} #about-wrap .growth_cont .growth_group .growth_list > li.growth_row1 svg { bottom: 0;} #about-wrap .growth_cont .growth_group .growth_list > li.growth_row1 .growth_info {bottom: 18px;} #about-wrap .growth_cont .growth_group .growth_list > li.growth_row2 svg { bottom: 58px;} #about-wrap .growth_cont .growth_group .growth_list > li.growth_row2 .growth_info {bottom: 108px;} #about-wrap .growth_cont .growth_group .growth_list > li.growth_row3 svg { bottom: 148px;} #about-wrap .growth_cont .growth_group .growth_list > li.growth_row3 .growth_info {bottom: 218px;} #about-wrap .growth_cont .growth_group .growth_list > li.growth_row4 svg { bottom: 258px;} #about-wrap .growth_cont .growth_group .growth_list > li.growth_row4 .growth_info {bottom: 426px;} #about-wrap .growth_cont .growth_group .growth_list > li.growth_row5 svg { bottom: 468px;} #about-wrap .growth_cont .growth_group .growth_list > li.growth_row5 .growth_info {bottom: 620px;} #about-wrap .growth_cont .growth_group .growth_list > li.growth_row5 .growth_info:after {content: ''; display: block; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); border-radius: 100%; width: 78px; height: 78px; opacity: 0.35;background: radial-gradient(60.9% 60.9% at 50% 50%, #79F6C5 0%, rgba(121, 246, 197, 0.50) 53.71%, rgba(121, 246, 197, 0.00) 100%);filter: blur(10px);} #about-wrap .growth_cont .growth_group .growth_list > li.growth_row6 svg { bottom: 662px;} #about-wrap .client_cont {padding:150px 0; position: relative; z-index: 1; background: #FFF;} #about-wrap .client_cont .inner {height: 100%; display: flex; justify-content: center; align-items: center;} #about-wrap .client_cont .client_group {width: 100%; height: 780px;} #about-wrap .client_cont .client_row {height: 260px; display: flex;align-items: center;gap: 16px;align-self: stretch; border-bottom: 1px solid #DEDFE0;} #about-wrap .client_cont .client_row:last-child {border: 0px;} #about-wrap .client_cont .client_row > li {width: 448px; height: 260px; position: relative;} #about-wrap .client_cont .client_row > li::after {content: ''; display: block; position: absolute; top: 50%; transform: translateY(-50%); right: -8px; width: 1px; height: 236px; background: #DEDFE0;} #about-wrap .client_cont .client_row > li:last-child::after {content: none;} #about-wrap .client_cont .client_tit {} #about-wrap .client_cont .client_tit > dl {width: calc(100% + 16px); height: calc(100% - 1px); background: #FAFAFA; position: absolute; left: -8px; top: 0; text-align: center; display: flex; flex-direction: column;justify-content: center;align-items: flex-start;gap: 8px;flex: 1 0 0;} #about-wrap .client_cont .client_tit > dl > dt {width: 100%; color: #222; font-weight: 700; font-size: 36px; letter-spacing: -0.252px; line-height: 50px;} #about-wrap .client_cont .client_tit > dl > dd {width: 100%; margin: 0 0 0; font-size: 28px; color: #222; font-weight: 600; line-height: 42px; letter-spacing: -0.196px;} #about-wrap .client_cont .client_img {} #about-wrap .client_cont .client_img1 {background: url("../../image/new/about_1_1.png") no-repeat center; animation: changeImage1 8s infinite;} #about-wrap .client_cont .client_img2 {background: url("../../image/new/about_1_2.png") no-repeat center; animation: changeImage2 8s .5s infinite;} #about-wrap .client_cont .client_img3 {background: url("../../image/new/about_1_3.png") no-repeat center; animation: changeImage3 8s infinite;} #about-wrap .client_cont .client_img4 {background: url("../../image/new/about_1_4_1.png") no-repeat center; animation: changeImage4 8s .5s infinite;} #about-wrap .client_cont .client_img5 {background: url("../../image/new/about_1_5.png") no-repeat center; animation: changeImage5 8s .5s infinite;} #about-wrap .client_cont .client_img6 {background: url("../../image/new/about_1_6.png") no-repeat center; animation: changeImage6 8s infinite;} #about-wrap .client_cont .client_img7 {background: url("../../image/new/about_1_7.png") no-repeat center; animation: changeImage7 8s .5s infinite;} #about-wrap .client_cont .client_img8 {background: url("../../image/new/about_1_8.png") no-repeat center; animation: changeImage8 8s infinite;} #about-wrap .message_cont {height: 100vh; position: relative; z-index: 1; background: #FFF;} #about-wrap .message_cont .inner {height: 100%; display: flex; justify-content: center; align-items: center;} #about-wrap .message_title {color: #222; text-align: center; font-weight: 700; font-size: 56px; letter-spacing: -0.56px; line-height: 72px; opacity: 0;transform: translate3d(0,50%,0);} #about-wrap .message_cont.active .message_title { -webkit-animation: fade_up2 2s forwards; animation: fade_up2 2s forwards; } /* ***** TABLET ***** */ @media screen and (max-width:1440px) { #about-wrap .inner {width: 100%;} #about-wrap .growth_cont .growth_group .growth_title {width: 100%;} } @media screen and (max-width:1000px) { #about-wrap .inner {width: 100%; padding: 0 20px;} #about-wrap .visual_cont {} #about-wrap .visual_cont .visual_bg {background-size: cover; background-position: left; position: relative; height: 100%;} #about-wrap .visual_cont .visual_animation {width: max-content; line-height: 84px; font-size: 64px; letter-spacing: -0.64px;} #about-wrap .story_cont {padding: 0 0 0;} #about-wrap .story_cont .story_aside {display: none; } #about-wrap .story_cont .story_text {display: none;} #about-wrap .story_cont .story_mobile {width: 100%; display: block; display: flex;padding: 64px 0;flex-direction: column;align-items: flex-start;gap: 140px;align-self: stretch;} #about-wrap .story_cont .story_mobile_row {display: flex;flex-direction: column;align-items: flex-start;gap: 24px;align-self: stretch;} #about-wrap .story_cont .story_mobile_title {margin: 0 0 0; display: flex;flex-direction: column;align-items: flex-start;gap: 8px;align-self: stretch;} #about-wrap .story_cont .story_mobile_title > dt {color: #098956; letter-spacing: -0.14px; line-height: 22px; font-weight: 700; font-size: 14px;} #about-wrap .story_cont .story_mobile_title > dd {margin: 0 0 0; letter-spacing: -0.168px; line-height: 36px; font-weight: 700; font-size: 24px;} #about-wrap .story_cont .story_mobile_post {letter-spacing: -0.08px; line-height: 26px; font-weight: 600; font-size: 16px; padding: 0 0 0 16px; position: relative;} #about-wrap .story_cont .story_mobile_post::before {content: ''; display: block; width: 1px; height: calc(100% - 16px); background: #222; position: absolute; left: 0; top: calc(50% - 2px); transform: translateY(-50%);} #about-wrap .story_cont .story_mobile_post > label {color: #098956; font-weight: 600;} #about-wrap .history_cont .history_title {padding: 120px 0 120px;} #about-wrap .history_cont .history_title > dt {width: 94px; height: 20px; background-size: contain;} #about-wrap .history_cont .history_title > dd {margin: 8px 0 0; letter-spacing: -0.08px; line-height: 26px; font-size: 16px; font-weight: 600;} #about-wrap .history_cont .history_group {display: block;} #about-wrap .history_cont .history_left { width: 100%; position: relative; top: initial; padding: 0 0 40px; letter-spacing: -0.196px; font-size: 28px; line-height: 42px;} #about-wrap .history_cont .history_right {width: 100%; padding: 0 0 0 32px;} #about-wrap .history_cont .history_right .history_before {display: none;} #about-wrap .history_cont .history_right .history_after { width: 1px; height: calc(100% - 154px); left: 7px; top: 10px;} #about-wrap .history_cont .history_right .history_img {display: none;} #about-wrap .history_cont .history_right .history_row::before {content: '';width: 12px; height: 12px; border-width: 2px; left: -32px;} #about-wrap .history_cont .history_right .history_row > dl {margin: 0 0 16px;} #about-wrap .history_cont .history_right.history_0 .history_after {height: calc(100% - 154px);} #about-wrap .history_cont .history_right.history_0 .history_row::before {content: ''; border-color: #098956; } #about-wrap .history_cont .history_right.history_0 .history_row > dl {opacity: 1;} #about-wrap .history_cont .history_right.history_1 .history_after { height: calc(100% - 154px);} #about-wrap .history_cont .history_right.history_1 .history_row::before {content: ''; border-color: #098956; } #about-wrap .history_cont .history_right.history_1 .history_row > dl {opacity: 1;} #about-wrap .history_cont .history_right.history_2 .history_after {height: calc(100% - 154px);} #about-wrap .history_cont .history_right.history_2 .history_row::before {content: ''; border-color: #098956; } #about-wrap .history_cont .history_right.history_2 .history_row > dl {opacity: 1;} #about-wrap .history_cont .history_right.history_3 .history_after {height: calc(100% - 154px);} #about-wrap .history_cont .history_right.history_3 .history_row::before {content: ''; border-color: #098956; } #about-wrap .history_cont .history_right.history_3 .history_row > dl {opacity: 1;} #about-wrap .history_cont .history_right .history_row .history_row_img {display: block; width: 220px; height: 132px; margin: 0 0 48px; position: relative; overflow: hidden;} #about-wrap .history_cont .history_right .history_row .history_row_img > img {width: 230px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);} #about-wrap .growth_cont {height: 650px;} #about-wrap .growth_cont .growth_group {height: 100%; position: relative; top: initial; left: initial;} #about-wrap .growth_cont .growth_group .growth_title { padding: 80px 20px 0; letter-spacing: -0.196px; line-height: 42px; font-size: 28px;} #about-wrap .growth_cont .growth_group .growth_list > li {opacity: 1;} #about-wrap .growth_cont .growth_group .growth_list > li.growth_row1 svg {bottom: 118px;} #about-wrap .growth_cont .growth_group .growth_list > li.growth_row1 .growth_info {bottom: 104px;} #about-wrap .growth_cont .growth_group .growth_list > li.growth_row2 svg {bottom: 136px;} #about-wrap .growth_cont .growth_group .growth_list > li.growth_row2 .growth_info {bottom: 135px;} #about-wrap .growth_cont .growth_group .growth_list > li.growth_row3 svg {bottom: 168px;} #about-wrap .growth_cont .growth_group .growth_list > li.growth_row3 .growth_info {bottom: 174px;} #about-wrap .growth_cont .growth_group .growth_list > li.growth_row4 svg {bottom: 208px;} #about-wrap .growth_cont .growth_group .growth_list > li.growth_row4 .growth_info {bottom: 282px;} #about-wrap .growth_cont .growth_group .growth_list > li.growth_row5 svg {bottom: 316px;} #about-wrap .growth_cont .growth_group .growth_list > li.growth_row5 .growth_info {bottom: 338px;} #about-wrap .growth_cont .growth_group .growth_list > li.growth_row6 svg {bottom: 372px;} #about-wrap .growth_cont .growth_group .growth_list > li svg.growth_pc {display: none;} #about-wrap .growth_cont .growth_group .growth_list > li svg.growth_mb {display: block;} #about-wrap .growth_cont .growth_group .growth_list > li .growth_info {width: 80px; height: 58px; right: -40px; left: initial;} #about-wrap .growth_cont .growth_group .growth_list > li .growth_info::before {content: ''; width: 10px; height: 10px; top: 20px;} #about-wrap .growth_cont .growth_group .growth_list > li .growth_info > dt {width: 100%; padding: 0 0 0; font-size: 12px; line-height: 18px; margin: 0 0 0;} #about-wrap .growth_cont .growth_group .growth_list > li .growth_info > dt > label {font-size: 10px; line-height: 18px; padding: 0 0 0 2px;} #about-wrap .growth_cont .growth_group .growth_list > li .growth_info > dd {width: 100%; font-size: 16px; line-height: 26px; letter-spacing: -0.08px; padding: 14px 0 0;} #about-wrap .client_cont {padding: 64px 0;} #about-wrap .client_cont .client_group {height: 600px;} #about-wrap .client_cont .client_row {height: 200px;} #about-wrap .client_cont .client_row > li {height: 100%; width: 50%; background-size: 90px;} #about-wrap .client_cont .client_row > li::after {content: ''; height: 184px;} #about-wrap .client_cont .client_row > li.client_tit {width: 100%;} #about-wrap .client_cont .client_row > li.client_tit::after {content: none;} #about-wrap .client_cont .client_tit > dl {background: #FFF;} #about-wrap .client_cont .client_tit > dl > dt {letter-spacing: -0.168px; line-height: 36px; font-size: 24px;} #about-wrap .client_cont .client_tit > dl > dd {letter-spacing: -0.18px; line-height: 26px; font-size: 18px;} #about-wrap .client_cont .client_img2 {display: none;} #about-wrap .client_cont .client_img4 {display: none;} #about-wrap .client_cont .client_img5 {display: none;} #about-wrap .client_cont .client_img7 {display: none;} #about-wrap .message_cont {height: auto; padding: 120px 0;} #about-wrap .message_title {opacity: 1; transform: none; letter-spacing: -0.196px; line-height: 42px; font-size: 28px;} } /* ***** MOBILE ***** */ @media screen and (max-width:720px) { .mb_none {display: none;} #about-wrap .visual_cont {height: calc(100vh - 56px);} #about-wrap .visual_cont .visual_animation {font-size: 40px; line-height: 56px; letter-spacing: -0.28px;} #about-wrap .story_cont .story_mobile_post {word-break: keep-all;} #about-wrap .story_cont .story_mobile_post::before {content: ''; height: calc(100% - 14px); top: calc(50% - 2px);} #about-wrap .history_cont .history_left {font-size: 24px; line-height: 36px;} #about-wrap .growth_cont .growth_group .growth_title {font-size: 24px; line-height: 36px;} #about-wrap .message_title {font-size: 24px; line-height: 36px;} } @keyframes changeImage1 { 0% { background-image: url('../../image/new/about_1_1.png'); } 20% { background-image: url('../../image/new/about_1_2.png'); } 40% { background-image: url('../../image/new/about_1_3.png'); } 60% { background-image: url('../../image/new/about_1_4_1.png'); } 80% { background-image: url('../../image/new/about_1_5.png'); } 100% { background-image: url('../../image/new/about_1_1.png'); } /* 처음 이미지로 복귀 */ } @keyframes changeImage2 { 0% { background-image: url('../../image/new/about_1_2.png'); } 20% { background-image: url('../../image/new/about_1_3.png'); } 40% { background-image: url('../../image/new/about_1_4_1.png'); } 60% { background-image: url('../../image/new/about_1_5.png'); } 80% { background-image: url('../../image/new/about_1_6.png'); } 100% { background-image: url('../../image/new/about_1_2.png'); } /* 처음 이미지로 복귀 */ } @keyframes changeImage3 { 0% { background-image: url('../../image/new/about_1_3.png'); } 20% { background-image: url('../../image/new/about_1_4_1.png'); } 40% { background-image: url('../../image/new/about_1_5.png'); } 60% { background-image: url('../../image/new/about_1_6.png'); } 80% { background-image: url('../../image/new/about_1_7.png'); } 100% { background-image: url('../../image/new/about_1_3.png'); } /* 처음 이미지로 복귀 */ } @keyframes changeImage4 { 0% { background-image: url('../../image/new/about_1_4_1.png'); } 20% { background-image: url('../../image/new/about_1_5.png'); } 40% { background-image: url('../../image/new/about_1_6.png'); } 60% { background-image: url('../../image/new/about_1_7.png'); } 80% { background-image: url('../../image/new/about_1_8.png'); } 100% { background-image: url('../../image/new/about_1_4_1.png'); } /* 처음 이미지로 복귀 */ } @keyframes changeImage5 { 0% { background-image: url('../../image/new/about_1_5.png'); } 20% { background-image: url('../../image/new/about_1_6.png'); } 40% { background-image: url('../../image/new/about_1_7.png'); } 60% { background-image: url('../../image/new/about_1_8.png'); } 80% { background-image: url('../../image/new/about_1_1.png'); } 100% { background-image: url('../../image/new/about_1_2.png'); } /* 처음 이미지로 복귀 */ } @keyframes changeImage6 { 0% { background-image: url('../../image/new/about_1_2.png'); } 20% { background-image: url('../../image/new/about_1_3.png'); } 40% { background-image: url('../../image/new/about_1_4_1.png'); } 60% { background-image: url('../../image/new/about_1_5.png'); } 80% { background-image: url('../../image/new/about_1_6.png'); } 100% { background-image: url('../../image/new/about_1_2.png'); } /* 처음 이미지로 복귀 */ } @keyframes changeImage7 { 0% { background-image: url('../../image/new/about_1_7.png'); } 20% { background-image: url('../../image/new/about_1_8.png'); } 40% { background-image: url('../../image/new/about_1_1.png'); } 60% { background-image: url('../../image/new/about_1_2.png'); } 80% { background-image: url('../../image/new/about_1_3.png'); } 100% { background-image: url('../../image/new/about_1_7.png'); } /* 처음 이미지로 복귀 */ } @keyframes changeImage8 { 0% { background-image: url('../../image/new/about_1_8.png'); } 20% { background-image: url('../../image/new/about_1_1.png'); } 40% { background-image: url('../../image/new/about_1_2.png'); } 60% { background-image: url('../../image/new/about_1_3.png'); } 80% { background-image: url('../../image/new/about_1_4_1.png'); } 100% { background-image: url('../../image/new/about_1_8.png'); } /* 처음 이미지로 복귀 */ } @keyframes fade_up2 { 0% { opacity: 0; -webkit-transform: translate3d(0,50%,0); transform: translate3d(0,50%,0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } }