main section:first-of-type {margin-bottom: 30px; padding: 0 90px; overflow: hidden;}
main section:first-of-type .title-motion {display: flex; justify-content: center; gap: 0 15px; padding: 91px 0 65px;}
main section:first-of-type .title-motion [data-step] {opacity: 0; transition: opacity 1s;}
main section:first-of-type .title-motion.active [data-step] {opacity: 1;}
main section:first-of-type .title-motion [data-step="1"] {transition-delay: .5s;}
main section:first-of-type .title-motion [data-step="2"] {transition-delay: 1.25s;}
main section:first-of-type .title-motion:not(.is-started) [data-step="3"] {transition-delay: 2.25s;}
main section:first-of-type .title-motion.is-started [data-step="3"] {transition-delay: 0s;}
main section:first-of-type .title-motion h2 {order: 2; display: flex; flex-direction: column; gap: 28px 0; justify-content: center;}
main section:first-of-type .title-motion h2 > small {font-family: "Paperlogy"; font-size: 26px; font-weight: 400; color: #111; text-align: center;}
main section:first-of-type .title-motion h2 > span {position: relative;}
main section:first-of-type .title-motion h2 > span b {display: block; position: relative; font-family: "Paperlogy"; font-size: 88px; font-weight: 700; color: #3a9286; min-width: 484px; text-align: center; height: 88px;}
main section:first-of-type .title-motion h2 > span b.is-hide {opacity: 0 !important; transition: opacity .3s;}
main section:first-of-type .title-motion h2 > span b::before {position: absolute; left: 50%; top: calc(50% - 10px); transform: translate(-50%,-50%); z-index: -1;}
main section:first-of-type .title-motion h2 > span b.bg-01::before {content: url('/work/img/bg_title_motion_01.svg');}
main section:first-of-type .title-motion h2 > span b.bg-02::before {content: url('/work/img/bg_title_motion_02.svg');}
main section:first-of-type .title-motion h2 > span b.bg-03::before {content: url('/work/img/bg_title_motion_03.svg');}
main section:first-of-type .title-motion h2 > span b.bg-04::before {content: url('/work/img/bg_title_motion_04.svg');}
main section:first-of-type .title-motion h2 > span b ~ span {position: absolute;}
main section:first-of-type .title-motion h2 > span .row-line {background: url('/work/img/img_row_line.svg') no-repeat; left: 50%; width: calc(100vw - 15px); height: 1px; transform: translateX(-50%);}
main section:first-of-type .title-motion h2 > span .row-top {top: 0;}
main section:first-of-type .title-motion h2 > span .row-bottom {bottom: 0;}
main section:first-of-type .title-motion h2 > span .column-line {background: url('/work/img/img_column_line.svg') no-repeat center / contain; top: 50%; width: 1px; height: 360px; transform: translateY(-50%);}
main section:first-of-type .title-motion h2 > span .column-left {left: 0;}
main section:first-of-type .title-motion h2 > span .column-right {right: 0;}
main section:first-of-type .title-motion > p {font-size: 12px; font-weight: 400; color: #111; line-height: 18px;}
main section:first-of-type .title-motion > p:first-of-type {order: 1; align-self: flex-end; transform: translateY(20px);}
main section:first-of-type .title-motion > p:last-of-type {order: 3; align-self: flex-start;}
main section:first-of-type .title-slide {overflow: hidden; border-radius: 20px;}
main section:first-of-type .title-slide ul {gap: 0 14px; display: flex; transition: transform .8s ease;}
main section:first-of-type .title-slide ul li {overflow: hidden; flex: 0 0 auto; border-radius: 20px; transition: width .8s ease;}
main section:first-of-type .title-slide ul li:not([class*="bg"]) {width: 0;}
main section:first-of-type .title-slide ul li.is-main {width: clamp(492px, calc(44.7vw + 33.9px), 892px);}
main section:first-of-type .title-slide ul li.is-sub1 {width: clamp(250px, calc(37.65vw - 135.95px), 587px);}
main section:first-of-type .title-slide ul li.is-sub2 {width: clamp(100px, calc(14.97vw - 53.46px), 234px);}
main section:first-of-type .title-slide ul li.is-main-next {width: clamp(492px, calc(44.7vw + 33.9px), 892px);}
main section:first-of-type .title-slide ul li.is-sub1-next {width: clamp(250px, calc(37.65vw - 135.95px), 587px);}
main section:first-of-type .title-slide ul li.is-sub2-next {width: clamp(100px, calc(14.97vw - 53.46px), 234px);}
main section:first-of-type .title-slide ul li.is-main img {transform: scale(1.3);}
main section:first-of-type .title-slide ul li.is-main-next img {transform: scale(1.3);}
main section:first-of-type .title-slide ul li img {display: block; width: 100%; height: 382px; max-height: 382px; object-fit: cover; border-radius: 20px; transition: transform .8s ease;}
main section:nth-of-type(2) {background: url('/work/img/bg_main_01.png') no-repeat left top / cover; padding: 107px 0 137px;}
main section:nth-of-type(2) h2 {margin-bottom: 80px;}
main section:nth-of-type(2) h2 b span {background: linear-gradient(92.67deg, #FFFFFF 8.38%, #E9FFE7 80.12%, #CDFFEE 96.97%), #FFFFFF; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;}
main section:nth-of-type(2) ul {display: flex; max-width: 1400px; margin: 0 auto; padding: 0 120px;}
main section:nth-of-type(2) ul li {flex: 1; position: relative; text-align: center; padding: 0 10px;}
main section:nth-of-type(2) ul li:not(:last-child)::after {content: ''; position: absolute; top: calc(50% - -15px); right: 0; width: 2px; height: 30px; background-color: #fff;}
main section:nth-of-type(2) ul li h3 {font-size: 16px; font-weight: 700; color: #ecfaf8; line-height: 28px; margin-bottom: 17px;}
main section:nth-of-type(2) ul li h3 + span {display: block; margin-bottom: 20px; font-size: 18px; font-weight: 300; color: #fff; white-space: nowrap;}
main section:nth-of-type(2) ul li h3 + span b {font-size: 64px; font-weight: 600; line-height: 64px;}
main section:nth-of-type(2) ul li > p {font-size: 17px; font-weight: 400; color: #f0f0f0; line-height: 30px;}
main section:nth-of-type(3) {padding: 210px 0 300px; background: url('/work/img/bg_main_02.png') no-repeat left top / cover;}
main section:nth-of-type(3) > p {margin-bottom: 105px;}
main section:nth-of-type(3) > ul {display: grid; grid-template-columns: repeat(2, 1fr); max-width: 1000px; margin: 0 auto; gap: 130px 0;}
main section:nth-of-type(3) > ul li {padding: 30px 30px 0; background-repeat: no-repeat; background-position: center bottom; background-color: #333; min-height: 581px; border-radius: 10px; text-align: center; transition: transform .5s;}
main section:nth-of-type(3) > ul li:nth-child(1) {background-image: url('/work/img/bg_design_default_01.png');}
main section:nth-of-type(3) > ul li:nth-child(2) {background-image: url('/work/img/bg_design_active_01.png');}
main section:nth-of-type(3) > ul li:nth-child(3) {background-image: url('/work/img/bg_design_default_02.png');}
main section:nth-of-type(3) > ul li:nth-child(4) {background-image: url('/work/img/bg_design_active_02.png');}
main section:nth-of-type(3) > ul li:nth-child(5) {background-image: url('/work/img/bg_design_default_03.png');}
main section:nth-of-type(3) > ul li:nth-child(6) {background-image: url('/work/img/bg_design_active_03.png');}
main section:nth-of-type(3) > ul li > small {display: block; font-size: 13px; font-weight: 200; color: #fff; line-height: 26px; margin-bottom: 20px;}
main section:nth-of-type(3) > ul li h3 {font-size: 26px; font-weight: 600; color: #fff; line-height: 40px; margin-bottom: 20px;}
main section:nth-of-type(3) > ul li > p {font-size: 16px; font-weight: 200; color: #f4f4f4; line-height: 28px;}
main section:nth-of-type(3) > ul li.yesung-style {background-color: #fff; box-shadow: 4.02415px 11.0664px 25.7545px rgba(17, 80, 72, 0.15); border: 1px solid #57968E;}
main section:nth-of-type(3) > ul li.yesung-style > small {color: #000;}
main section:nth-of-type(3) > ul li.yesung-style h3 {color: #3a9286;}
main section:nth-of-type(3) > ul li.yesung-style h3 b {position: relative; z-index: 1;}
main section:nth-of-type(3) > ul li.yesung-style h3 b::after {content: ''; position: absolute; z-index: -1; left: 0; bottom: 0; width: calc(100% + 2px); height: 12px; background-color: #e1f7e4;}
main section:nth-of-type(3) > ul li.yesung-style > p {color: #444;}
main section:nth-of-type(3) > ul li.yesung-style.active {transform: scale(1.166); box-shadow: -4px 10px 60px #64A89F;}
main section:nth-of-type(3) > ul li.yesung-style.active > small {font-size: 16px;}
main section:nth-of-type(3) > ul li.yesung-style.active > h3 {font-size: 36px; font-weight: 700;}
main section:nth-of-type(3) > ul li.yesung-style.active > p {font-size: 18px;}
main section:nth-of-type(4) {background: url('/work/img/bg_main_03.jpg') no-repeat left top / cover; padding: 190px 0 255px;}
main section:nth-of-type(4) > p {margin-bottom: 80px;} 
main section:nth-of-type(4) > ul {display: flex; gap: 20px; max-width: 1660px; margin: 0 auto; justify-content: center; flex-wrap: wrap; padding: 0 20px;}
main section:nth-of-type(4) > ul li {position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; padding: 30px 40px; min-height: 640px; min-width: 340px; max-width: 400px;}
main section:nth-of-type(4) > ul li .back-wrap {position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 84.375%; border-radius: 16px; transition: height .5s; overflow: hidden;}
main section:nth-of-type(4) > ul li:hover .back-wrap {height: 100%;}
main section:nth-of-type(4) > ul li .back-wrap .back-img {background-repeat: no-repeat; width: 100%; height: 100%; transition: transform .5s;}
main section:nth-of-type(4) > ul li:nth-child(1) .back-wrap .back-img {background-image: url('/work/img/bg_solution_01.png');}
main section:nth-of-type(4) > ul li:nth-child(2) .back-wrap .back-img {background-image: url('/work/img/bg_solution_02.png');}
main section:nth-of-type(4) > ul li:nth-child(3) .back-wrap .back-img {background-image: url('/work/img/bg_solution_03.png');}
main section:nth-of-type(4) > ul li:nth-child(4) .back-wrap .back-img {background-image: url('/work/img/bg_solution_04.png');}
main section:nth-of-type(4) > ul li:hover .back-wrap .back-img {transform: scale(1.1);}
main section:nth-of-type(4) > ul li > small {margin-bottom: 14px; font-size: 12px; font-weight: 300; line-height: 16px; color: #fff;}
main section:nth-of-type(4) > ul li h3 {margin-bottom: 30px; font-size: 26px; font-weight: 700; color: #fff;}
main section:nth-of-type(4) > ul li > p {font-size: 16px; font-weight: 500; line-height: 28px; color: #fff;}
main section:nth-of-type(4) > ul li > a {backdrop-filter: blur(8px); margin-top: auto; padding: 0 23px; border: 1px solid #222; background: url('/work/img/btn_solution_arrow.svg') no-repeat right 20px center rgba(255, 255, 255, 0.4);; border-radius: 22px; line-height: 42px; font-size: 15px; font-weight: 500; color: #000; transition: .3s ease;}
main section:nth-of-type(4) > ul li:hover > a {background-image: url('/work/img/btn_solution_arrow_hover.svg'); background-color: rgba(255, 255, 255, 0.2); border-color: #fff; color: #fff;}
main section:nth-of-type(5) {padding: 245px 0 160px;}
main section:nth-of-type(5) .port-slide-wrap {position: relative; padding-left: 12.8%; margin-bottom: 95px;}
main section:nth-of-type(5) .port-slide-wrap .pager-wrap {display: flex; gap: 0 7px; margin: 0 15.65% 0 auto; width: fit-content; margin-bottom: 40px;}
main section:nth-of-type(5) .port-slide-wrap .pager-wrap button {width: 50px; height: 50px; background-repeat: no-repeat;}
main section:nth-of-type(5) .port-slide-wrap .pager-wrap .pager-prev {background-image: url('/work/img/btn_slide_prev.svg');}
main section:nth-of-type(5) .port-slide-wrap .pager-wrap .pager-next {background-image: url('/work/img/btn_slide_next.svg');}
main section:nth-of-type(5) .port-slide-wrap .port-slide {max-height: 334px; overflow: hidden; margin-block-end: 60px;}
main section:nth-of-type(5) .port-slide-wrap .port-slide .swiper-slide img {width: 100%; max-height: 334px;}
main section:nth-of-type(5) .port-slide-wrap .swiper-pagination {max-width: 1430px; height: 2px; position: static; margin-right: 75px;}
main section:nth-of-type(5) .port-slide-wrap .swiper-pagination .swiper-pagination-progressbar-fill {background: #111;}
main section:nth-of-type(6) {padding: 145px 0 170px; grid-template-columns: repeat(2, 1fr); margin-bottom: 55px;}
main section:nth-of-type(6) > h2 + p {margin-bottom: 80px;}
main section:nth-of-type(6) .ticker-wrap {position: relative; height: 334px; overflow: hidden; text-align: center;}
main section:nth-of-type(6) .ticker-wrap::before,
main section:nth-of-type(6) .ticker-wrap::after {content: ""; position: absolute; left: 0; width: 100%; height: 40px; z-index: 1;}
main section:nth-of-type(6) .ticker-wrap::before {top: 0; background: linear-gradient(to bottom, #fff 0%, rgba(255,255,255,0) 100%);}
main section:nth-of-type(6) .ticker-wrap::after {bottom: 0; background: linear-gradient(to top, #fff 0%, rgba(255,255,255,0) 100%);}
main section:nth-of-type(6) .ticker-wrap .ticker-list {display: flex; flex-direction: column; gap: 26px 0; position: absolute; left: 50%; top: 0; height: 100%; transform: translateX(-50%); animation: ticker 10s linear infinite;}
main section:nth-of-type(6) .ticker-wrap .ticker-list img {height: 100%;}

@keyframes ticker {
    0% {
        transform: translate(-50%, 0);
    }
    100% {
        transform: translate(-50%, calc(-100% - 26px));
    }
}

@media screen and (max-width: 1024px) {
    main section:first-of-type {padding: 0 0 0 44px;}
    main section:first-of-type .title-motion {padding: 38px 0;}
    main section:first-of-type .title-motion h2 > span b {font-size: 52px; min-width: 289px; height: 53px;}
    main section:first-of-type .title-motion h2 > span b::before {top: calc(50% - 5px);}
    main section:first-of-type .title-motion h2 > span b.bg-01::before {content: url('/work/img/bg_title_motion_mo_01.svg');}
    main section:first-of-type .title-motion h2 > span b.bg-02::before {content: url('/work/img/bg_title_motion_mo_02.svg');}
    main section:first-of-type .title-motion h2 > span b.bg-03::before {content: url('/work/img/bg_title_motion_mo_03.svg');}
    main section:first-of-type .title-motion h2 > span b.bg-04::before {content: url('/work/img/bg_title_motion_mo_04.svg');}
    main section:first-of-type .title-motion h2 > span .column-line {height: 217px;}
    main section:first-of-type .title-motion > p {display: none;}
    main section:first-of-type .title-slide {margin-bottom: 20px;}
    main section:first-of-type .title-slide ul {gap: 0 4px;}
    main section:first-of-type .title-slide ul li[class*="main"] {width: clamp(276px, calc(48.72vw + 100.60px), 600px);}
    main section:first-of-type .title-slide ul li[class*="sub1"] {width: clamp(181px, calc(14.89vw + 127.41px), 280px);}
    main section:first-of-type .title-slide ul li[class*="sub2"] {width: clamp(50px, calc(7.52vw + 22.93px), 100px);}
    main section:first-of-type .title-slide ul li.is-main-next {width: clamp(276px, calc(48.72vw + 100.60px), 600px);}
    main section:first-of-type .title-slide ul li.is-sub1-next {width: clamp(181px, calc(14.89vw + 127.41px), 280px);}
    main section:first-of-type .title-slide ul li.is-sub2-next {width: clamp(50px, calc(7.52vw + 22.93px), 100px);}
    main section:first-of-type .title-slide ul li img {height: 307px; max-height: 307px;}
    main section:first-of-type > p {font-size: 11px; font-weight: 400; color: #111; line-height: 22px;}
    main section:nth-of-type(2) {background-image: url('/work/img/bg_main_01_mo.png'); padding: 107px 24px 137px;}
    main section:nth-of-type(2) h2 {margin-bottom: 35px;}
    main section:nth-of-type(2) ul {flex-direction: column; padding: 0; gap: 40px 0;}
    main section:nth-of-type(2) ul li:not(:last-child) {padding-bottom: 40px;}
    main section:nth-of-type(2) ul li:not(:last-child)::after {top: initial; right: 50%; bottom: 0; width: 24px; height: 2px; transform: translateX(50%);}
    main section:nth-of-type(3) {padding: 140px 38px; background-image: url('/work/img/bg_main_02_mo.png');}
    main section:nth-of-type(3) > ul {grid-template-columns: repeat(1, 1fr); max-width: 312px; gap: 60px 0;}
    main section:nth-of-type(3) > ul li {padding: 20px 17px 185px; background-size: 250px auto; min-height: initial;}
    main section:nth-of-type(3) > ul li.yesung-style.active {transform: scale(1.1); box-shadow: -2.38924px 5.97309px 35.8386px #64A89F;}
    main section:nth-of-type(3) > ul li.yesung-style.active > small {font-size: 12px;}
    main section:nth-of-type(3) > ul li.yesung-style.active > h3 {font-size: 22px; line-height: 32px;}
    main section:nth-of-type(3) > ul li.yesung-style.active > p {font-size: 17px; font-weight: 300;}
    main section:nth-of-type(4) {padding: 138px 20px 140px;}
    main section:nth-of-type(4) > h2 small {margin: 0 40px 30px;}
    main section:nth-of-type(4) > ul {flex-direction: column; padding: 0;}
    main section:nth-of-type(4) > ul li {min-height: initial; padding: 24px 24px 10px; width: 100%; max-width: 400px; min-width: initial; margin: 0 auto;}
    main section:nth-of-type(4) > ul li .back-wrap {height: 100%;}
    main section:nth-of-type(4) > ul li:hover .back-wrap {height: 100%;}
    main section:nth-of-type(4) > ul li:hover .back-wrap .back-img {transform: initial;}
    main section:nth-of-type(4) > ul li > small {font-size: 11px;}
    main section:nth-of-type(4) > ul li h3 {font-size: 24px; margin-bottom: 20px;}
    main section:nth-of-type(4) > ul li > a {width: calc(100% + 18px); transform: translateX(-9px); margin-top: 47px; line-height: 33px;}
    main section:nth-of-type(5) {padding: 140px 0;}
    main section:nth-of-type(5) > h2 {max-width: 205px; margin: 0 auto 30px;}
    main section:nth-of-type(5) > h2 + p {margin-bottom: 30px;}
    main section:nth-of-type(5) .port-slide-wrap {padding-left: 16.1%;}
    main section:nth-of-type(5) .port-slide-wrap .pager-wrap {display: none;}
    main section:nth-of-type(5) .port-slide-wrap .port-slide {margin-bottom: 30px;}
    main section:nth-of-type(5) .port-slide-wrap {margin-bottom: 63px;}
    main section:nth-of-type(6) {padding: 100px 0 150px; margin-bottom: 0;}
    main section:nth-of-type(6) > h2 + p {margin-bottom: 30px;}
    main section:nth-of-type(6) .ticker-wrap {height: 176px;}
    main section:nth-of-type(6) .ticker-wrap .ticker-list img {content: url('/work/img/img_company_list_mo.jpg');}
}