@charset "utf-8";
@import url("portfolio_com.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Shippori+Mincho+B1:wght@400;500;600;700;800&display=swap');
:root {
    --white : #fff;
    --black : #000;
    --main-color : #E83A29;
    --secondary : #FFE8DA;
    --noto: "Noto Sans KR", sans-serif;
    --mincho : "Shippori Mincho B1", serif;
    --open : "Open Sans", sans-serif;

    --vwpx: 0.052vw;
}

@media screen and (max-width:1024px) {
  :root {
        --font-16 : 14px;
		--font-18 : 16px;
		--font-20 : 18px;
		--font-24 : 20px;
		--font-30 : 24px;
		--font-40 : 28px;

		--gap-40 : 20px;
		--gap-50 : 30px;
		--gap-60 : 40px;
		--gap-80 : 60px;
  }
}
@media screen and (max-width:768px) {

}
@media screen and (max-width:480px) {

}

.rb-section {background:#FFFEEF !important;}

#cursor.hover-pf25::before {width: 150px; height: 150px;}

.portfolio-025 .preview img {width:100%; max-width:100%; display:block; margin:0 auto;}
.portfolio-025 * {font-family:'Noto Sans KR'; line-height:1.5; color: var(--main-color);}

.portfolio-025 .text-raise {overflow: hidden; }
.portfolio-025 .text-raise,
.portfolio-025 .ani-wrapper {font-family: inherit; color: inherit;}

.portfolio-025 .work-section {width:100%;}
.portfolio-025 .work-section .section {width:100%;}
.portfolio-025 .work-section .section .sec-wrap {width:90%; max-width:1760px; margin:0 auto;}

.portfolio-025 .work-section .section .title-wrap {display: flex; flex-direction: column; width:100%;  text-align:left;}
.portfolio-025 .work-section .section .title-wrap .section-name {font-size: var(--font-20); font-weight: 400; font-family: var(--open); margin-bottom: 1em;}
.portfolio-025 .work-section .section .title-wrap .head {font-size:85px; font-family: var(--mincho); font-weight: 600; line-height: 1;}
.portfolio-025 .work-section .section .title-wrap .conts {font-size:var(--font-18); font-weight:400; margin-top: 30px;}
.portfolio-025 .work-section .section .title-wrap .conts p {transition-delay: 0.4s, 0.4s;}

/* ani */
.portfolio-025 .work-section .ani-target .fade-up {opacity: 0; transform: translateY(min(50%, 80px));  transition-property: opacity, transform; transition-duration: 1s, 1s; }
.portfolio-025 .work-section .ani-target .ani-wrapper {transform: translateY(105%); transition: transform 1s; display: block;}

.portfolio-025 .work-section .ani-target.ani-start .fade-up {opacity: 1; transform: translateY(0);}
.portfolio-025 .work-section .ani-target.ani-start .ani-wrapper {transform: translateY(0); }

/* rolling banner */
.portfolio-025 .work-section .rolling-banner {width: 100%; overflow: hidden; border: solid rgba(232,58,41,0.5); border-width: 1px 0 1px 0; display: flex; align-items: center; padding: max(calc(var(--vwpx)*30), 30px) 0; font-size: 0;}
.portfolio-025 .work-section .rolling-banner .roll-wrap {width: max-content; animation: rollingBnrAni 120s linear infinite; display: flex; align-items: center;}
.portfolio-025 .work-section .rolling-banner .roll-wrap .item {width: fit-content; padding: 0 max(calc(var(--vwpx)*75), 75px);}
.portfolio-025 .work-section .rolling-banner img {height: max(calc(var(--vwpx)*35), 35px);}

.portfolio-025 .work-section .rolling-banner.ty2 {border: none; background: var(--secondary);}
.portfolio-025 .work-section .rolling-banner.dlr .roll-wrap {animation: rollingBnrLtRAni 120s linear infinite;}

@keyframes rollingBnrAni {
    0% {transform: translateX(0%);}
    100% {transform: translateX(-50%);}
}
@keyframes rollingBnrLtRAni {
    0% {transform: translateX(-50%);}
    100% {transform: translateX(0%);}
}

/* lye style */
.portfolio-025 .work-section .tag-box {display: flex; gap: 10px; flex-wrap: wrap; }
.portfolio-025 .work-section .tag-box span {min-height: 40px; border-radius: 20px; padding: 7px 20px; display: flex; align-items: center; justify-content: center; font-size: 16px; border: 1px solid rgba(232,58,41,0.5); width: fit-content; text-align: center; color: var(--main-color); background-color: rgba(0,0,0,0); line-height: 1.5; transition: none;}

.portfolio-025 .work-section .pagination {display: flex; justify-content: start; gap: 15px; align-items: center;}
.portfolio-025 .work-section .pagination a {width: 40px; height: 40px;}
.portfolio-025 .work-section .pagination .arr {font-size: 0; background-position: center; background-repeat: no-repeat; background-size: cover; }
.portfolio-025 .work-section .pagination .arr.first {background-image: url(/img/portfolio/025/pagination_first.svg);}
.portfolio-025 .work-section .pagination .arr.prev {background-image: url(/img/portfolio/025/pagination_prev.svg);}
.portfolio-025 .work-section .pagination .arr.next {background-image: url(/img/portfolio/025/pagination_next.svg);}
.portfolio-025 .work-section .pagination .arr.last {background-image: url(/img/portfolio/025/pagination_last.svg);}
.portfolio-025 .work-section .pagination ul {display: flex; gap: 10px; }
.portfolio-025 .work-section .pagination ul a {display: flex; line-height: 1; align-items: center; justify-content: center; font-size: var(--font18); border-radius: 50%;}
.portfolio-025 .work-section .pagination ul a.on {background: var(--main-color); color: #FFFEEF;}

.portfolio-025 .work-section .cate-box {width: 100%; display: flex; justify-content: start; align-items: start; gap: 10px; flex-wrap: wrap;  overflow: hidden; }
.portfolio-025 .work-section .cate-box .cate {height: 43px; display: flex; border-radius: 8px; border: 1px solid rgba(232,58,41,0.5); align-items: center; justify-content: center; padding: 0 20px; font-weight: 600;  line-height: 1.5; font-size: var(--font-18); color: var(--main-color); }
.portfolio-025 .work-section .cate-box .cate.on {color: #fff; background: var(--main-color); }

.portfolio-025 .work-section .button.size-s {height: 60px; padding: 0; font-size: 0;}
.portfolio-025 .work-section .button.size-m {height: 80px; padding: 0; font-size: 0;}
.portfolio-025 .work-section .button.arrow-btn {display: block;  aspect-ratio: 1;  border: 1px solid rgba(232,58,41,0.5); position: relative; border-radius: 50%; overflow: hidden; transition: background-color 0.3s;}
.portfolio-025 .work-section .button.arrow-btn span {display: flex; justify-content: end; align-items: center; width: 200%; height: 100%; transform: translateX(-50%); transition: transform 0.6s cubic-bezier(0.83, 0, 0.17, 1);}
.portfolio-025 .work-section .button.arrow-btn span::before,
.portfolio-025 .work-section .button.arrow-btn span::after {content: ""; width: 50%; height: 100%; background-image: url(/img/portfolio/025/arrow_r_red.svg); background-size: 48% auto; background-repeat: no-repeat;   background-position: center;}

.portfolio-025 .work-section .button.arrow-btn.down span {width: 100%; height: 200%; transform: translateY(-50%); flex-direction: column;}
.portfolio-025 .work-section .button.arrow-btn.down span::before,
.portfolio-025 .work-section .button.arrow-btn.down span::after {content:""; width: 100%; height: 50%; background-image: url(/img/portfolio/025/arrow_d_red.svg);}
.portfolio-025 .work-section .button.arrow-btn.up span {width: 100%; height: 200%; transform: translateY(0%); flex-direction: column;}
.portfolio-025 .work-section .button.arrow-btn.up span::before,
.portfolio-025 .work-section .button.arrow-btn.up span::after {content:""; width: 100%; height: 50%; background-image: url(/img/portfolio/025/arrow_d_red.svg); transform: scaleY(-1);}

.portfolio-025 .work-section .button.arrow-btn.hover {background: var(--main-color);}
.portfolio-025 .work-section .button.arrow-btn.hover span {transform: translateX(0); }
.portfolio-025 .work-section .button.arrow-btn.hover span::before,
.portfolio-025 .work-section .button.arrow-btn.hover span::after {background-image: url(/img/portfolio/025/arrow_r_white.svg);}
.portfolio-025 .work-section .button.arrow-btn.down.hover span::before,
.portfolio-025 .work-section .button.arrow-btn.down.hover span::after {background-image: url(/img/portfolio/025/arrow_d_white.svg);}

@media screen and (max-width:1260px){
    .portfolio-025 .work-section .section .title-wrap .head {font-size: 68px;}
}
@media screen and (max-width:1024px){
    .portfolio-025 .work-section .section .title-wrap .head {font-size: 58px;}

    .portfolio-025 .work-section .button.size-m {height: 40px;}
    .portfolio-025 .work-section .button.size-s {height: 30px;}
}
@media screen and (max-width:768px){
    .portfolio-025 .work-section .section .title-wrap .head {font-size: 45px;}

    .portfolio-025 .work-section .rolling-banner {padding: 20px 0;}
    .portfolio-025 .work-section .rolling-banner .roll-wrap .item {padding: 0 20px;}
    .portfolio-025 .work-section .rolling-banner img {height: 24px;}

    .portfolio-025 .work-section .tag-box span {min-height: 36px; border-radius: 18px; font-size: 14px;}

  .portfolio-025 .work-section .pagination {gap: 8px;}
  .portfolio-025 .work-section .pagination a {width: 32px; height: 32px;}
  .portfolio-025 .work-section .pagination ul {gap: 6px; }
  .portfolio-025 .work-section .pagination ul a {font-size: 14px;}

  .portfolio-025 .work-section .cate-box .cate {font-size: 15px; padding: 0 1em; height: 32px;}
}
@media screen and (max-width:480px){

    .portfolio-025 .work-section .section .title-wrap .conts {font-size: 15px;}

    .portfolio-025 .work-section .cate-box {gap: 8px; }
    .portfolio-025 .work-section .cate-box .cate {font-size: 14px;}

    .portfolio-025 .work-section .tag-box span {font-size: 13px;}

    .portfolio-025 .work-section .pagination a {width: 30px; height: 30px;}
}



@media screen and (max-width:1024px) {
    .portfolio-025 .work-section .section .title-wrap {flex-direction:column;}
}

/* sect1 */
.portfolio-025 .work-section .sec-1 {padding: calc(var(--gap-50)*4) 0 calc(var(--gap-50)*4.5);}
.portfolio-025 .work-section .sec-1 .sec-wrap {position: relative; padding: 0 40px;}
.portfolio-025 .work-section .sec-1 .sec-wrap .deco {aspect-ratio: 1; position: absolute; }
.portfolio-025 .work-section .sec-1 .sec-wrap .deco span {background: url(/img/portfolio/025/about_icon.svg) center no-repeat; background-size: cover; animation: imgRotate 5s linear 0.1s infinite; display: block; width: 100%; height: 100%;}
.portfolio-025 .work-section .sec-1 .sec-wrap .deco.item1 {width: 180px; left: 0; bottom: 0; transform: translate(0, 100px);}
.portfolio-025 .work-section .sec-1 .sec-wrap .deco.item2 {width: 110px; left: 0; bottom: 0; transform: translate(150px, -30px);}
.portfolio-025 .work-section .sec-1 .title-wrap {flex-direction: column; gap: calc(var(--gap-50)*2.4);}
.portfolio-025 .work-section .sec-1 .title-wrap .conts {max-width: 763px; margin-left: auto; width: 100%; }

@media screen and (max-width:1260px){
    .portfolio-025 .work-section .sec-1 .title-wrap .conts {max-width: 100%; width: calc(100% - 240px); }
}
@media screen and (max-width:1024px){

}
@media screen and (max-width:768px) {
    .portfolio-025 .work-section .sec-1 {}
    .portfolio-025 .work-section .sec-1 .sec-wrap {padding: 0; padding-bottom: 200px;}
    .portfolio-025 .work-section .sec-1 .title-wrap .conts {width: 100%;}
}
@media screen and (max-width:480px){
    .portfolio-025 .work-section .sec-1 {padding: 60px 0 90px;  }
    .portfolio-025 .work-section .sec-1 .title-wrap {gap: 50px; }
    .portfolio-025 .work-section .sec-1 .title-wrap .conts {margin-top: 0;}

    .portfolio-025 .work-section .sec-1 .sec-wrap .deco.item1 {width: 140px; transform: translate(0, 30px);}
    .portfolio-025 .work-section .sec-1 .sec-wrap .deco.item2 {width: 90px; transform: translate(140px, -50px); }
}

/* sect2 */
.portfolio-025 .work-section .sec-2 {background: #CD1200; }
.portfolio-025 .work-section .sec-2 .overview-wrap {position: relative; width: 100%; padding: calc(var(--gap-50)*2) 0 var(--gap-80);}
.portfolio-025 .work-section .sec-2 .overview-wrap .deco {position: absolute; bottom: 0; max-width: 590px; font-size: 0; width: 45%; transition: opacity 0.6s, transform 0.6s; }
.portfolio-025 .work-section .sec-2 .overview-wrap .deco img {width: 100%;}
.portfolio-025 .work-section .sec-2 .overview-wrap .deco.left {left: 0; transform: translateX(-50%); opacity: 0;}
.portfolio-025 .work-section .sec-2 .overview-wrap .deco.right {right: 0; transform: translateX(50%); opacity: 0;}
.portfolio-025 .work-section .sec-2 .overview-wrap .view-box {margin: 0 auto; max-width: 900px; width: 85%; aspect-ratio: 1/0.84; background: url(/img/portfolio/025/sec2_frame.png) center no-repeat; background-size: cover; font-size: 0; position: relative; z-index: 5;}
.portfolio-025 .work-section .sec-2 .overview-wrap .view-box .frame-wrap {width: 100%; padding-top: 2.05%;}
.portfolio-025 .work-section .sec-2 .overview-wrap .view-box .frame {width: 96%; aspect-ratio: 1/0.561; margin: 0 auto; overflow: hidden;}
.portfolio-025 .work-section .sec-2 .overview-wrap .view-box .frame img {width: 100%;}

/* .portfolio-025 .work-section .sec-2 .overview-wrap .view-box .frame .scrollbox {animation: scrollAni 25s linear infinite alternate;} */

.portfolio-025 .work-section .sec-2 .overview-wrap.ani-start .deco.left {transform: translateX(0); opacity: 1;}
.portfolio-025 .work-section .sec-2 .overview-wrap.ani-start .deco.right {transform: translateX(0); opacity: 1;}

@keyframes scrollAni {
    0% {transform: translateY(0%);}
    5% {transform: translateY(0%);}
    95% {transform: translateY(-91%);}
    100% {transform: translateY(-91%);}
}

@media screen and (max-width:480px) {
    .portfolio-025 .work-section .sec-2 .overview-wrap {padding: 100px 0;}
}

/* sect3 */
.portfolio-025 .work-section .sec-3 {padding: calc(var(--gap-50)*3.6) 0 calc(var(--gap-50)*2.6);}
.portfolio-025 .work-section .sec-3 .sec-wrap {position: relative;}
.portfolio-025 .work-section .sec-3 .title-wrap {position: relative;z-index: 1;}
.portfolio-025 .work-section .sec-3 .title-wrap .head {}
.portfolio-025 .work-section .sec-3 .title-wrap .head .line {}
.portfolio-025 .work-section .sec-3 .title-wrap .head .line:nth-child(1) {padding-left: 5%;}
.portfolio-025 .work-section .sec-3 .title-wrap .head .line:nth-child(2) {padding-left: 30%;}
.portfolio-025 .work-section .sec-3 .title-wrap .head .line:nth-child(3) {padding-left: 55%;}

.portfolio-025 .work-section .sec-3 .title-wrap .head .line:nth-child(2) .ani-wrapper {transition-delay: 0.2s;}
.portfolio-025 .work-section .sec-3 .title-wrap .head .line:nth-child(3) .ani-wrapper {transition-delay: 0.4s;}

.portfolio-025 .work-section .sec-3 .title-wrap .conts {margin-top: calc(var(--gap-50)*3);}
.portfolio-025 .work-section .sec-3 .title-wrap .conts p {max-width: 750px; margin-left: auto; padding-right: calc(var(--gap-50)*2.4); transition-delay: 0.6s;}
.portfolio-025 .work-section .sec-3 .cont-wrap {margin-top: calc(var(--gap-50)*4.5); position: relative; z-index: 1;}
.portfolio-025 .work-section .sec-3 .cont-wrap .line {display: flex; align-items: center; gap: 35px;}
.portfolio-025 .work-section .sec-3 .cont-wrap .line + .line {margin-top: 30px;}
.portfolio-025 .work-section .sec-3 .cont-wrap .line .round {border: 1px solid var(--main-color); border-radius: 50%;}
.portfolio-025 .work-section .sec-3 .cont-wrap .line p {font-size: var(--font-18); }
.portfolio-025 .work-section .sec-3 .cont-wrap .line.box1 {padding-left: 4%;}
.portfolio-025 .work-section .sec-3 .cont-wrap .line.box1 .round {width: 70px; height: 25px;}
.portfolio-025 .work-section .sec-3 .cont-wrap .line.box2 {padding-left: 12%; transition-delay: 0.2s;}
.portfolio-025 .work-section .sec-3 .cont-wrap .line.box2 .round {width: 157px; height: 34px;}
.portfolio-025 .work-section .sec-3 .cont-wrap .line.box3 {padding-left: 20%; transition-delay: 0.4s;}
.portfolio-025 .work-section .sec-3 .cont-wrap .line.box3 .round {width: 230px; height: 36px;}

.portfolio-025 .work-section .sec-3 .img-wrap .img-box {position: absolute;  font-size: 0; --size:1px;}
.portfolio-025 .work-section .sec-3 .img-wrap .img-box span {display: block; width: 100%; overflow: hidden; border-radius: 10px;}
.portfolio-025 .work-section .sec-3 .img-wrap .img-box.box1 {width: calc(var(--size)*245); left: 0; top: 0; transform: translateY(280px);}
.portfolio-025 .work-section .sec-3 .img-wrap .img-box.box2 {width: calc(var(--size)*310); left: 0; top: 0; transform: translate(calc(var(--size)*190), calc(280px + (var(--size)*230)));}
.portfolio-025 .work-section .sec-3 .img-wrap .img-box.box3 {width: calc(var(--size)*265); right: 0; top: 40px;}
.portfolio-025 .work-section .sec-3 .img-wrap .img-box.box4 {width: calc(var(--size)*500); right: 0; bottom: 0;}

@media screen and (max-width:1480px) {
    .portfolio-025 .work-section .sec-3 .img-wrap .img-box {--size:0.7px;}
    .portfolio-025 .work-section .sec-3 .img-wrap .img-box.box4 {width: calc(var(--size)*400);}

    .portfolio-025 .work-section .sec-3 .title-wrap .conts p {padding-right: 0; max-width: 60%; }

    .portfolio-025 .work-section .sec-3 .cont-wrap .line {gap: 20px;}
}
@media screen and (max-width:1024px){
    .portfolio-025 .work-section .sec-3 .img-wrap .img-box {--size:0.5px; }
    .portfolio-025 .work-section .sec-3 .img-wrap .img-box.box4 {display: none;}
}
@media screen and (max-width:768px){
    .portfolio-025 .work-section .sec-3 .title-wrap .section-name {margin-bottom: 80px;}
    .portfolio-025 .work-section .sec-3 .title-wrap .head .line:nth-child(1) {padding-left: 0;}
    .portfolio-025 .work-section .sec-3 .title-wrap .head .line:nth-child(2) {padding-left: 15%;}
    .portfolio-025 .work-section .sec-3 .title-wrap .conts {margin-top: 240px;}
    .portfolio-025 .work-section .sec-3 .title-wrap .conts p {max-width: 100%; }

    .portfolio-025 .work-section .sec-3 .cont-wrap {margin-top: 50px;}
    .portfolio-025 .work-section .sec-3 .cont-wrap .line.box1 {padding: 0;}
    .portfolio-025 .work-section .sec-3 .cont-wrap .line.box1 .round {width: 50px; height: 18px;}
    .portfolio-025 .work-section .sec-3 .cont-wrap .line.box2 {padding: 0;}
    .portfolio-025 .work-section .sec-3 .cont-wrap .line.box2 .round {width: 112px; height: 24px;}
    .portfolio-025 .work-section .sec-3 .cont-wrap .line.box3 {padding: 0;}
    .portfolio-025 .work-section .sec-3 .cont-wrap .line.box3 .round {width: 165px; height: 25px;}

    .portfolio-025 .work-section .sec-3 .img-wrap .img-box {--size:0.45px; border-radius: 5px;}
    .portfolio-025 .work-section .sec-3 .img-wrap .img-box.box3 {top: 0;}
}
@media screen and (max-width:480px){
    .portfolio-025 .work-section .sec-3 .title-wrap .head .line:nth-child(2) {padding-left: 7%;}
    .portfolio-025 .work-section .sec-3 .title-wrap .head .line:nth-child(3) {padding: 0; text-align: right;}

    .portfolio-025 .work-section .sec-3 .cont-wrap .line {gap: 16px; }
    .portfolio-025 .work-section .sec-3 .cont-wrap .line p {font-size: 15px;}
}

/* sect4 */
.portfolio-025 .work-section .sec-4 {padding: calc(var(--gap-50)*3) 0 calc(var(--gap-50)*2.6);}
.portfolio-025 .work-section .sec-4 .title-wrap {margin-bottom: calc(var(--gap-50)*2.4);}
.portfolio-025 .work-section .sec-4 .title-wrap .conts {margin-top: calc(var(--gap-50)*0.9); }
.portfolio-025 .work-section .sec-4 .cont-wrap .json-box {display: flex; gap: 85px; }
.portfolio-025 .work-section .sec-4 .cont-wrap .json-box .item {flex: 1 1 0;}
.portfolio-025 .work-section .sec-4 .cont-wrap .json-box .img-box {border: 1px solid rgba(232, 58, 41, 0.5); border-radius: 10px; overflow: hidden; aspect-ratio: 1/0.64; font-size: 0; display: flex; align-items: center; justify-content: center;}
.portfolio-025 .work-section .sec-4 .cont-wrap .json-box .img-box .lottie {height: 55%; max-width: 80%;}
.portfolio-025 .work-section .sec-4 .cont-wrap .json-box .text-box {font-size: var(--font-20); margin-top: 1em; display: flex; align-items: baseline; gap: 0.75em; }
.portfolio-025 .work-section .sec-4 .cont-wrap .json-box .text-box .tit {font-family: var(--mincho); font-size: 1.2em; font-weight: 600;}
.portfolio-025 .work-section .sec-4 .cont-wrap .json-box .text-box p {font-size: 0.9em; }

@media screen and (max-width:1260px) {
    .portfolio-025 .work-section .sec-4 .cont-wrap .json-box {gap: 28px;}
    .portfolio-025 .work-section .sec-4 .cont-wrap .json-box .text-box {font-size: 15px;}
}
@media screen and (min-width:1025px){
    .portfolio-025 .work-section .sec-4 .cont-wrap .json-box .item:nth-child(2) .box {transition-delay: 0.2s;}
    .portfolio-025 .work-section .sec-4 .cont-wrap .json-box .item:nth-child(3) .box {transition-delay: 0.4s;}
}
@media screen and (max-width:1024px){
    .portfolio-025 .work-section .sec-4 .cont-wrap .json-box {flex-direction: column; gap: 50px; }
    .portfolio-025 .work-section .sec-4 .cont-wrap .json-box .item {width: 90%; max-width: 530px; flex: unset; }
    .portfolio-025 .work-section .sec-4 .cont-wrap .json-box .item:nth-child(2) {margin-left: auto;}
}
@media screen and (max-width:768px){

}

/* sect5 */
.portfolio-025 .work-section .sec-5 {padding: calc(var(--gap-50)*2) 0 calc(var(--gap-50)*3);}
.portfolio-025 .work-section .sec-5 .title-wrap {text-align: center; margin-bottom: var(--gap-80);}
.portfolio-025 .work-section .sec-5 .design-system-wrap {}
.portfolio-025 .work-section .sec-5 .design-system-wrap .color-wrap {border-bottom: 1px solid #FFE8DA; margin-bottom: calc(var(--gap-50)*2.4);}
.portfolio-025 .work-section .sec-5 .design-system-wrap .color-wrap .line {height: 150px; display: flex; align-items: center;}
.portfolio-025 .work-section .sec-5 .design-system-wrap .color-wrap .line.mini {height: 60px;}
.portfolio-025 .work-section .sec-5 .design-system-wrap .color-wrap .line .text-wrap {max-width: 1700px; margin: 0 auto; display: flex; width: 90%; justify-content: space-between; align-items: center; font-size: var(--font-24);}
.portfolio-025 .work-section .sec-5 .design-system-wrap .color-wrap .line:first-child .text-wrap span {color: #FFFEEF;  }

.portfolio-025 .work-section .sec-5 .design-system-wrap .color-wrap .line.fade-up {transition-duration: 0.5s, 0.5s;}
.portfolio-025 .work-section .sec-5 .design-system-wrap .color-wrap .line:nth-child(2) {transition-delay: 0.15s;}
.portfolio-025 .work-section .sec-5 .design-system-wrap .color-wrap .line:nth-child(3) {transition-delay: 0.3s;}
.portfolio-025 .work-section .sec-5 .design-system-wrap .color-wrap .line:nth-child(4) {transition-delay: 0.45s;}
.portfolio-025 .work-section .sec-5 .design-system-wrap .color-wrap .line:nth-child(5) {transition-delay: 0.6s;}
.portfolio-025 .work-section .sec-5 .design-system-wrap .color-wrap .line:nth-child(6) {transition-delay: 0.75s;}

.portfolio-025 .work-section .sec-5 .design-system-wrap .font-wrap {max-width: 1760px; margin: calc(var(--gap-50)*2.4) auto calc(var(--gap-50)*6); width: 90%;}
.portfolio-025 .work-section .sec-5 .design-system-wrap .font-box {display: flex; gap: 30px; align-items: start;}
.portfolio-025 .work-section .sec-5 .design-system-wrap .font-box .font-item {width: 260px;}
.portfolio-025 .work-section .sec-5 .design-system-wrap .font-box .font-item .img-box {font-size: 0; }
.portfolio-025 .work-section .sec-5 .design-system-wrap .font-box .font-item .img-box span {display: block; overflow: hidden;}
.portfolio-025 .work-section .sec-5 .design-system-wrap .font-box .font-item .img-box img {width: 100%;}
.portfolio-025 .work-section .sec-5 .design-system-wrap .font-box .font-item .text-box {margin-top: var(--font-20); text-align: center; font-size: var(--font-20);}
.portfolio-025 .work-section .sec-5 .design-system-wrap .font-box .font-item .text-box span {font-family: var(--open); font-size: 1em; margin-bottom: 0.75em; display: block;}
.portfolio-025 .work-section .sec-5 .design-system-wrap .font-box .font-item .text-box p {line-height: 1; font-size: 1.4em; }
.portfolio-025 .work-section .sec-5 .design-system-wrap .font-box .font-item.mincho .text-box p {font-size: 1.2em; }

.portfolio-025 .work-section .sec-5 .design-system-wrap .font-box .font-item:nth-child(2) {transition-delay: 0.2s;}
.portfolio-025 .work-section .sec-5 .design-system-wrap .font-box .font-item:nth-child(3) {transition-delay: 0.4s;}

.portfolio-025 .work-section .sec-5 .design-system-wrap .icon-wrap {max-width: 1760px; width: 90%; margin: 0 auto;}
.portfolio-025 .work-section .sec-5 .design-system-wrap .icon-wrap .flex-box {display: flex; align-items: start; justify-content: space-between; gap: var(--gap-80); }
.portfolio-025 .work-section .sec-5 .design-system-wrap .icon-wrap .left {max-width: 600px; width: 50%;}
.portfolio-025 .work-section .sec-5 .design-system-wrap .icon-wrap .left p {font-size: var(--font-20); margin-bottom: 1em; text-align: left;}

.portfolio-025 .work-section .sec-5 .design-system-wrap .icon-wrap .left .button.arrow-btn:hover {background-color: var(--main-color); }
.portfolio-025 .work-section .sec-5 .design-system-wrap .icon-wrap .left .button.arrow-btn:hover span {transform: translateX(0);}
.portfolio-025 .work-section .sec-5 .design-system-wrap .icon-wrap .left .button.arrow-btn:hover span::before,
.portfolio-025 .work-section .sec-5 .design-system-wrap .icon-wrap .left .button.arrow-btn:hover span::after {background-image: url(/img/portfolio/025/arrow_r_white.svg);}
.portfolio-025 .work-section .sec-5 .design-system-wrap .icon-wrap .left .mouse-area {border-radius: 20px; border: 1px solid rgba(232, 58, 41, 0.7); height: 320px; display: flex; align-items: center; justify-content: center;}

.portfolio-025 .work-section .sec-5 .design-system-wrap .icon-wrap .right {}
.portfolio-025 .work-section .sec-5 .design-system-wrap .icon-wrap .right .line + .line {margin-top: var(--gap-50); }
.portfolio-025 .work-section .sec-5 .design-system-wrap .icon-wrap .right .arrow-box {display: flex; align-items: center; gap: 30px; justify-content: start; }

@media screen and (max-width:1024px){
    .portfolio-025 .work-section .sec-5 .design-system-wrap .color-wrap .line {height: 100px;}
    .portfolio-025 .work-section .sec-5 .design-system-wrap .color-wrap .line.mini {height: 52px;}

    .portfolio-025 .work-section .sec-5 .design-system-wrap .font-box .font-item {width: 200px;}

    .portfolio-025 .work-section .sec-5 .design-system-wrap .icon-wrap .left {display: none;}
    
}
@media screen and (max-width:768px){
    .portfolio-025 .work-section .sec-5 .design-system-wrap .font-box {flex-wrap: wrap; }
    .portfolio-025 .work-section .sec-5 .design-system-wrap .font-box .font-item {width: 160px;}
    .portfolio-025 .work-section .sec-5 .design-system-wrap .font-box .font-item .text-box {font-size: 14px;}

    .portfolio-025 .work-section .sec-5 .design-system-wrap .icon-wrap .right .arrow-box {gap: 16px;}

}
@media screen and (max-width:480px){
    .portfolio-025 .work-section .sec-5 .design-system-wrap .color-wrap .line {height: 60px;}
    .portfolio-025 .work-section .sec-5 .design-system-wrap .color-wrap .line.mini {height: 24px;}

    .portfolio-025 .work-section .sec-5 .design-system-wrap .color-wrap .line .text-wrap {font-size: 15px;}

    .portfolio-025 .work-section .sec-5 .design-system-wrap .font-box .font-item {width: 150px;}
    
}

/* sect6 */
.portfolio-025 .work-section .sec-6 {background: #CD1200; padding: calc(var(--gap-50)*2.4) 0 calc(var(--gap-50)*3.2); position: relative; overflow: hidden;}
.portfolio-025 .work-section .sec-6 .back {position: absolute; width: 110%; left: 50%; bottom: 0; transform: translate(-50%,50%); font-size: 0; opacity: 0.4; min-width: 870px;}
.portfolio-025 .work-section .sec-6 .back img {width: 100%;}
.portfolio-025 .work-section .sec-6  .sec-wrap {max-width: 1500px; }
.portfolio-025 .work-section .sec-6 .title-wrap {text-align: center; margin-bottom: var(--gap-80);}
.portfolio-025 .work-section .sec-6 .title-wrap .head {color: #FFFEEF; }
.portfolio-025 .work-section .sec-6 .title-wrap .conts, 
.portfolio-025 .work-section .sec-6 .title-wrap .conts p {color: #FFFEEF;}

/* coming soon */
.portfolio-025 .work-section .sec-6 .preview {width: 100%; aspect-ratio: 1/0.5625; position: relative; background: #FFFEEF; border-radius: 20px; overflow: hidden; }
.portfolio-025 .work-section .sec-6 .preview .preview-wrap {width: 100%; height: 100%;  display: flex; align-items: center; justify-content: center; color: var(--main-color); text-align: center; }

.portfolio-025 .work-section .sec-6 .preview .cont { width: 100%; padding: 6% 0 4%; border: solid rgba(232,58,41,0.6); border-width: 1px 0 1px 0; text-align: center;}
.portfolio-025 .work-section .sec-6 .preview .cont .box {position: relative; transform: scale(0.8);}
.portfolio-025 .work-section .sec-6 .preview .cont .box img {width: 83px; will-change: transform;}
.portfolio-025 .work-section .sec-6 .preview .cont .box .line {position: absolute; left: 50%; top: 40%; transform: translate(-50%,-50%);}
.portfolio-025 .work-section .sec-6 .preview .cont .box .line svg {mask-image: url(/img/portfolio/025/vector2.svg); stroke-dasharray: 240; stroke-dashoffset: 240; stroke-width: 2;}

.portfolio-025 .work-section .sec-6 .preview .cont .box .dot {position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); font-size: 0;}
.portfolio-025 .work-section .sec-6 .preview .cont .box .dot svg g {opacity: 0;}
.portfolio-025 .work-section .sec-6 .preview .cont .text {margin: 60px 0 100px;}
.portfolio-025 .work-section .sec-6 .preview .cont .text .title {font-family: var(--mincho); font-weight: 800; font-size: 62px; line-height: 1.3;}
.portfolio-025 .work-section .sec-6 .preview .cont .text .desc {font-size: 15px; margin-top: 2.5em;}
.portfolio-025 .work-section .sec-6 .preview .cont .text .desc .ko { font-family: var(--noto); }
.portfolio-025 .work-section .sec-6 .preview .cont .logo {font-size: 0; height: 24px; text-align: center;}
.portfolio-025 .work-section .sec-6 .preview .cont .logo img {height: 100%;}

@media screen and (max-width:1260px) {
    .portfolio-025 .work-section .sec-6 .preview .cont .text  {margin: 40px 0 54px;}
    .portfolio-025 .work-section .sec-6 .preview .cont .text .title {font-size: 38px;}
}

@media screen and (max-width:1024px){
    .portfolio-025 .work-section .sec-6 .preview {aspect-ratio: 1/1.3;}
    .portfolio-025 .work-section .sec-6 .preview .cont {padding: 12% 0 8%; }
    .portfolio-025 .work-section .sec-6 .preview .cont .text .title .mo-br {display: block;}
}
@media screen and (max-width:768px){
    .portfolio-025 .work-section .sec-6 .preview {aspect-ratio: 1/2.1; width: 70%; max-width: 400px; margin: auto;}
  .portfolio-025 .work-section .sec-6 .preview .cont {padding: 16% 0 12%; }
  .portfolio-025 .work-section .sec-6 .preview .cont .box {transform: scale(0.8);}
  .portfolio-025 .work-section .sec-6 .preview .cont .text {margin: 10% 0 20%; }
  .portfolio-025 .work-section .sec-6 .preview .cont .text .desc { font-size: 15px; margin-top: 40px;}
  .portfolio-025 .work-section .sec-6 .preview .cont .text .desc .ko {font-size: 15px;}
  .portfolio-025 .work-section .sec-6 .preview .cont .logo {height: 25px;}

  .portfolio-025 .work-section .sec-6 .preview .cont .text .title .mo-br {display: block;}
}
@media screen and (max-width:480px){
    .portfolio-025 .work-section .sec-6 .title-wrap .conts br {display: none;}
    .portfolio-025 .work-section .sec-6 .preview .cont .text .title {font-size: 26px;}
    .portfolio-025 .work-section .sec-6 .preview .cont .text .desc .ko {font-size: 11px;}
}


/* sect7 */
.portfolio-025 .work-section .sec-7 {}
.portfolio-025 .work-section .sec-7 .inbox1 {background: var(--secondary); padding: calc(var(--gap-50)*2.4) 0 calc(var(--gap-50)*2.4);}
.portfolio-025 .work-section .sec-7 .inbox1 .title-wrap {text-align: center; margin-bottom: calc(var(--gap-50)*1.8); }
.portfolio-025 .work-section .sec-7 .inbox1 .title-wrap .head {margin-bottom: 30px;}
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box {display: flex; flex-wrap: wrap; gap: 120px 150px; justify-content: center;}
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .action-item.half {width: calc((100% - 150px)/2); max-width: 600px; }
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .action-item.half .item-box {aspect-ratio: 3/2; position: relative;}
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .action-item.full {width: 100%; max-width: 1500px; }
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .action-item {}
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .action-item .item-box {overflow: hidden; border-radius: 10px; border: 1px solid rgba(232, 58, 41, 0.5); background: #FFFEEF; }
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .action-item p {font-family: var(--open); font-size: var(--font-20); margin-top: 1em; text-align: left;}

.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .rotation {}
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .rotation .rotate-item {aspect-ratio: 1; position: absolute;}
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .rotation .rotate-item img {width: 100%; animation: imgRotate 5s linear 0.1s infinite;}

.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .rotation .rotate-item.big {width: 40%; left: 15%; top: 25%;}
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .rotation .rotate-item.small {width: 20%; left: 62%; top: 12%;}


.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .popping  {--size:1px; margin-top: 225px;}
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .popping .img-area { height: calc(100% - 60px); display: flex; align-items: end; justify-content: center; position: relative; font-size: var(--size);}
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .popping .img-area .icon,
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .popping .img-area .tw-icon {position: absolute; left: 50%; }
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .popping .img-area .tw-icon {bottom: 0;}
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .popping .img-area img {width: 100%; font-size: 0;}
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .popping .img-area .hole {width: calc(var(--size)*265);}
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .popping .img-area .icon1 {width: calc(var(--size)*50); }
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .popping .img-area .icon2 {width: calc(var(--size)*26); }
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .popping .img-area .icon3 {width: calc(var(--size)*80); }
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .popping .img-area .icon4 {width: calc(var(--size)*130); opacity: 0;}
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .popping .img-area .icon5 {width: calc(var(--size)*70); opacity: 0;}
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .popping .img-area .icon5 span {transform: scaleX(-1); display: block;}

.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .popping .img-area .icon1 img {animation: imgAni 2s linear infinite alternate;}
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .popping .img-area .icon2 img {animation: imgAni 1.6s linear infinite alternate;}
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .popping .img-area .icon3 img {animation: imgAni 2.5s linear infinite alternate;}
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .popping .img-area .icon4 img {animation: imgAni2 4s linear infinite alternate;}
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .popping .img-area .icon5 img {animation: imgAni2 3.8s linear infinite alternate;}

@keyframes imgAni {
  0% {transform: translateY(0);}
  100% {transform: translateY(30%);}
}
@keyframes imgAni2 {
  0% {transform: translateX(-10%);}
  100% {transform: translateX(10%);}
}

.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .location {}
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .location {padding-top: 580px; position: relative; margin-top: 40px; transform: scale(0.8);}
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .location .globe {position: absolute; left: 50%; top: 60px; transform: translateX(-50%); font-size: 0; width: 420px;}

.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .location .map-box {width: 100%; height: 510px; position: absolute; left: 0; top: 0;}
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .location .map-box .branch {position: absolute;}
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .location .map-box .branch .title {position: absolute; text-align: left;}
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .location .map-box .branch .title div {font-family: var(--mincho); margin-bottom: 28px; font-weight: 700; font-size: 30px; }
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .location .map-box .branch .title ul {font-size: var(--font16); min-height: 3em; }
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .location .map-box .branch .title li {font-family: var(--noto);  position: relative; padding-left: 1.5em;}
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .location .map-box .branch .title li::before {content:""; width: 0.25em; height: 0.25em; border-radius: 50%; position: absolute; left: 0.6em; top: 0.65em; background: var(--primary);}
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .location .map-box .branch .img-wrap {display: flex; gap: 16px; align-items: end; flex-direction: row-reverse;}
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .location .map-box .branch .loca {width: 185px; font-size: 0; border: 1px solid rgba(232, 58, 41, 0.5);}
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .location .map-box .branch .tag-box {flex-direction: column; align-items: start;}
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .location .map-box .branch .tag-box .tag {font-family: var(--noto);}

.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .location .map-box .branch .line {position: absolute; font-size: 0;}
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .location .map-box .branch .line svg {vector-effect: non-scaling-stroke; width: 100%;}
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .location .map-box .branch .line .point {position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--primary); box-sizing: border-box; display: flex; align-items: center; justify-content: center;  background: #FFFEEF;}
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .location .map-box .branch .line .point::before {content:""; width: 10px; height: 10px; border-radius: 50%; background: var(--main-color); }

.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .location .map-box .branch.sk {right: 50%; top: 145px; transform: translateX(-520px);}
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .location .map-box .branch.sk .title {right: max(calc(var(--vwpx)*-242),-240px); top: 21px;}
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .location .map-box .branch.sk .img-wrap {flex-direction: row;}
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .location .map-box .branch.sk .tag-box {align-items: end;}
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .location .map-box .branch.sk .line {right: 0; transform: translateX(calc(100% - 75px)); top: 79px; width: 472px;}
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .location .map-box .branch.sk .line .point {right: -4px; top: -10px;}
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .location .map-box .branch.sk svg {stroke-dasharray: 466; stroke-dashoffset: 466;}

.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .location .map-box .branch.ch {left: 50%; top: 0; transform: translateX(440px);}
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .location .map-box .branch.ch .title {left: -170px; top: 30px;}
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .location .map-box .branch.ch .loca {height: 144px; display: flex; align-items: center;}
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .location .map-box .branch.ch .line {left: 0; transform: translateX(calc(-100% + 30px)); top: 87px; width: 380px;}
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .location .map-box .branch.ch .line .point {left: -4px; bottom: -4px;}
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .location .map-box .branch.ch svg {stroke-dasharray: 465; stroke-dashoffset: 465;}

.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .location .map-box .branch.vt {left: 50%; bottom: 0px; transform: translateX(470px);}
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .location .map-box .branch.vt .title {left: -220px; bottom: 0px;}
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .location .map-box .branch.vt .line {left: 0; transform: translateX(calc(-100% + 95px)); bottom: 62px; width: 498px;}
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .location .map-box .branch.vt .line .point {left: -4px; top: -10px;}
.portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .location .map-box .branch.vt svg {stroke-dasharray: 520; stroke-dashoffset: 520;}

.portfolio-025 .work-section .sec-7 .inbox2 {margin-top: calc(var(--gap-50)*3);}
.portfolio-025 .work-section .sec-7 .inbox2 .title-wrap {margin-bottom: calc(var(--font-20)*1.5); }

.portfolio-025 .work-section .sec-7 .inbox2 .wrap1 {}
.portfolio-025 .work-section .sec-7 .inbox2 .mission-box {max-width: 1510px; width: 100%; margin: auto; display: flex; --gap:90px; gap: var(--gap); align-items: center; justify-content: center;}
.portfolio-025 .work-section .sec-7 .inbox2 .mission-box .frame {border-radius: 10px; border: 1px solid rgba(232, 58, 41, 0.5); overflow: hidden; position: relative; font-size: 0;}
.portfolio-025 .work-section .sec-7 .inbox2 .mission-box .frame img {width: 100%;}
.portfolio-025 .work-section .sec-7 .inbox2 .mission-box .frame .ani-box {position: absolute; left: 0; top: 0;}
.portfolio-025 .work-section .sec-7 .inbox2 .mission-box .frame .ani-box img {animation: imgRotate 3s linear 0.1s infinite; }

.portfolio-025 .work-section .sec-7 .inbox2 .mission-box .frame.pc {width: calc((100% - var(--gap))*0.775);}
.portfolio-025 .work-section .sec-7 .inbox2 .mission-box .frame.pc .ani-box {width: 18%; left: 16%; top: 39%;}
.portfolio-025 .work-section .sec-7 .inbox2 .mission-box .frame.mo {width: calc((100% - var(--gap))*0.225);}
.portfolio-025 .work-section .sec-7 .inbox2 .mission-box .frame.mo .ani-box {width: 31%; left: 30%; top: 45%;}

@keyframes imgRotate {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

.portfolio-025 .work-section .sec-7 .inbox2 .rolling-banner {margin: calc(var(--gap-50)*3.2) 0 calc(var(--gap-50)*3);}

.portfolio-025 .work-section .sec-7 .inbox2 .card-list { --item:4; /*--vw: 0.052vw;*/ --vw:0.77px; --gap:calc(var(--vw)*30); --width: calc(var(--vw)*370); overflow: hidden;}
.portfolio-025 .work-section .sec-7 .inbox2 .card-list ul {display: flex; /*gap: var(--gap);*/ --width:calc(var(--vw)*370); margin: auto; justify-content: center;  }
.portfolio-025 .work-section .sec-7 .inbox2 .card-list ul li { width: var(--width);  position: relative;}
.portfolio-025 .work-section .sec-7 .inbox2 .card-list ul li .size {font-size: var(--font-18); margin-top: 15px; text-align: left;}
.portfolio-025 .work-section .sec-7 .inbox2 .card-list .card-item {width: 100%;  border: 1px solid rgba(232,58,41,0.5); display: flex; height: calc(var(--vw)*555); position: relative; }
.portfolio-025 .work-section .sec-7 .inbox2 .card-list .card-item .left {padding: calc(var(--vw)*40); width: var(--width); position: absolute; left: 0; top: 0; height: 100%;}
.portfolio-025 .work-section .sec-7 .inbox2 .card-list .card-item .right {width: 0; overflow: hidden; position: relative; width: var(--width); height: 100%; padding: calc(var(--vw)*40); padding-left: 0; position: absolute; right: 0; top: 0; opacity: 0; text-align: left;}
.portfolio-025 .work-section .sec-7 .inbox2 .card-list .card-item .icon-box {width: 100%; margin-bottom: var(--gap);  font-size: 0;}
.portfolio-025 .work-section .sec-7 .inbox2 .card-list .card-item .icon-box img {width: 100%;}
.portfolio-025 .work-section .sec-7 .inbox2 .card-list .card-item .text-box {overflow: hidden;}
.portfolio-025 .work-section .sec-7 .inbox2 .card-list .card-item .text-box .num {font-size: calc(var(--vw)*18); font-weight: 600; text-align: left;}
.portfolio-025 .work-section .sec-7 .inbox2 .card-list .card-item .text-box .title {box-sizing: border-box; text-align: center; font-family: var(--mincho); font-size: calc(var(--vw)*28); font-weight: 700; border: solid rgba(232,58,41,0.5); padding: calc(var(--vw)*15) 0; border-width: 1px 0 1px 0;  margin: 1em 0; overflow: hidden;}
.portfolio-025 .work-section .sec-7 .inbox2 .card-list .card-item .text-box .tag-box {gap: calc(var(--vw)*10);}
.portfolio-025 .work-section .sec-7 .inbox2 .card-list .card-item .text-box .tag-box span {min-height: calc(var(--vw)*40); border-radius: calc(var(--vw)*20); padding: 0 calc(var(--vw)*20); font-size: calc(var(--vw)*16);}
.portfolio-025 .work-section .sec-7 .inbox2 .card-list .card-item .desc-box { width: calc(var(--width) - calc(var(--vw)*40)); font-size: calc(var(--vw)*18); }
.portfolio-025 .work-section .sec-7 .inbox2 .card-list .card-item .desc-box .desc-ko {margin-top: 1.6em; }
.portfolio-025 .work-section .sec-7 .inbox2 .card-list .card-item .deco {position: absolute;  bottom: calc(var(--vw)*40); opacity: 0; font-size: 0; width: calc(var(--vw)*80); left: calc(var(--vw)*40);}
.portfolio-025 .work-section .sec-7 .inbox2 .card-list .card-item .deco img {width: 100%;}

.portfolio-025 .work-section .sec-7 .inbox2 .card-list .card-item .bookspine {width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; padding: calc(var(--vw)*40); display: flex; justify-content: end; }
.portfolio-025 .work-section .sec-7 .inbox2 .card-list .card-item .bookspine .name {font-size: calc(var(--vw)*28); width: 2.5em;  display: flex;  }
.portfolio-025 .work-section .sec-7 .inbox2 .card-list .card-item .bookspine .name p { white-space: nowrap; line-height: 2.5em; border: solid rgba(232,58,41,0.5); border-width: 1px 0 1px 0; padding: 0 0.7em; transform-origin: 1.25em 50%; transform: rotate(90deg); height: 2.5em; font-family: var(--mincho); font-weight: 700;}

.portfolio-025 .work-section .sec-7 .inbox2 .card-list.normal ul {justify-content: start;}
.portfolio-025 .work-section .sec-7 .inbox2 .card-list.size ul {justify-content: end; margin-top: var(--gap-80);}


.portfolio-025 .work-section .sec-7 .inbox2 .card-list .size-xs {width: calc(var(--vw)*151);}
.portfolio-025 .work-section .sec-7 .inbox2 .card-list .size-xs .card-item {}
.portfolio-025 .work-section .sec-7 .inbox2 .card-list .size-xs .card-item .deco {opacity: 1;  }
.portfolio-025 .work-section .sec-7 .inbox2 .card-list .size-xs .card-item .bookspine {opacity: 1;}

.portfolio-025 .work-section .sec-7 .inbox2 .card-list .size-s {width: calc(var(--vw)*246);}
.portfolio-025 .work-section .sec-7 .inbox2 .card-list .size-s .card-item .deco {opacity: 1; }
.portfolio-025 .work-section .sec-7 .inbox2 .card-list .size-s .card-item .bookspine {opacity: 1;}

.portfolio-025 .work-section .sec-7 .inbox2 .card-list .size-l {width: calc(var(--width)*2); }
.portfolio-025 .work-section .sec-7 .inbox2 .card-list .size-l .card-item {background: var(--secondary); }
.portfolio-025 .work-section .sec-7 .inbox2 .card-list .size-l .card-item .left .icon-box {background: #FFFEEF; }
.portfolio-025 .work-section .sec-7 .inbox2 .card-list .size-l .card-item .right {opacity: 1;}
.portfolio-025 .work-section .sec-7 .inbox2 .card-list .size-l .card-item .desc {opacity: 1;}
.portfolio-025 .work-section .sec-7 .inbox2 .card-list .size-l .card-item .deco {left: unset; right:calc(var(--vw)*40); }

.portfolio-025 .work-section .sec-7 .inbox2 .card-list ul li:nth-child(2) .fade-up {transition-delay: 0.15s;}
.portfolio-025 .work-section .sec-7 .inbox2 .card-list ul li:nth-child(3) .fade-up {transition-delay: 0.3s;}
.portfolio-025 .work-section .sec-7 .inbox2 .card-list ul li:nth-child(4) .fade-up {transition-delay: 0.45s;}


.portfolio-025 .work-section .sec-7 .inbox3 {font-size: 0; display: flex; align-items: stretch; margin-top: calc(var(--gap-50)*3.6);}
.portfolio-025 .work-section .sec-7 .inbox3 > div {width: 50%;}
.portfolio-025 .work-section .sec-7 .inbox3 .left img {width: 100%;}
.portfolio-025 .work-section .sec-7 .inbox3 .right {display: flex; align-items: center; justify-content: center; background: linear-gradient(to bottom, #FFE8DA, #F39181 21%, #E83A29 40%, #E83A29 58%, #F39181 78%, #FFE8DA);}
.portfolio-025 .work-section .sec-7 .inbox3 .right span {display: block; width: 70%;}
.portfolio-025 .work-section .sec-7 .inbox3 .right span img {width: 100%;}

@media screen and (max-width:1580px){
    .portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .location .map-box .branch .tag-box {display: none;}
}
@media screen and (max-width:1460px) {
    .portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .location .map-box .branch .tag-box {--size: 0.8px; }
    .portfolio-025 .work-section .sec-7 .inbox2 .card-list {--vw:0.6px; }
}
@media screen and (max-width:1260px){
    .portfolio-025 .work-section .sec-7 .inbox1 .interaction-box {gap: 120px 80px; }
    .portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .action-item.half {width: calc((100% - 80px)/2);}
    .portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .popping {--size:0.6px}
    .portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .location {transform: scale(0.6); }

    .portfolio-025 .work-section .sec-7 .inbox2 .mission-box {--gap:48px;}
}
@media screen and (max-width:1100px){
    .portfolio-025 .work-section .sec-7 .inbox2 .card-list {--vw:0.56px; }
}
@media screen and (max-width:1024px){

    .portfolio-025 .work-section .sec-7 .inbox1 .interaction-box {flex-direction: column; align-items: center;}
    .portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .action-item.half {width: 100%;}

    .portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .popping {margin-top: 0; --size:0.9px;}
    .portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .action-item.map {display: none;}

    .portfolio-025 .work-section .sec-7 .inbox2 .card-list.size ul {justify-content: start;}

    .portfolio-025 .work-section .sec-7 .inbox2 .mission-box {flex-direction: column; }
    .portfolio-025 .work-section .sec-7 .inbox2 .mission-box .frame.pc {width: 100%;}
    .portfolio-025 .work-section .sec-7 .inbox2 .mission-box .frame.mo {width: 100%; max-width: 480px; }
    
}
@media screen and (max-width:768px){
    .portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .action-item .item-box {border-radius: 5px;}
    .portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .popping {margin-top: 0; --size:0.67px;}

    .portfolio-025 .work-section .sec-7 .inbox2 .mission-box .frame {border-radius: 5px;}

    .portfolio-025 .work-section .sec-7 .inbox2 .card-list {padding-bottom: 1px;}


    .portfolio-025 .work-section .sec-7 .inbox3 {flex-direction: column;}
    .portfolio-025 .work-section .sec-7 .inbox3 > div {width: 100%;}
    .portfolio-025 .work-section .sec-7 .inbox3 .right {padding: var(--gap-80) 0;}
}
@media screen and (max-width:480px){
    .portfolio-025 .work-section .sec-7 .title-wrap .conts br {display: none;}
    .portfolio-025 .work-section .sec-7 .inbox1 .interaction-box .popping .img-area {margin-top: 10%;}
    .portfolio-025 .work-section .sec-7 .inbox2 .card-list {--vw:0.5px; }
}


/* sect8 */
.portfolio-025 .work-section .sec-8 {padding: calc(var(--gap-50)*2.6) 0 calc(var(--gap-50)*7);}
.portfolio-025 .work-section .sec-8 .title-wrap {text-align: center; margin-bottom: calc(var(--gap-50)*2.6);}
.portfolio-025 .work-section .sec-8 .cont-wrap {display: flex; gap: 90px; justify-content: center;}
.portfolio-025 .work-section .sec-8 .cont-wrap .img-box {border-radius: 10px; border: 1px solid rgba(232, 58, 41, 0.5); font-size: 0; overflow: hidden;}
.portfolio-025 .work-section .sec-8 .cont-wrap .right .img-box {margin-top: 13%; transition-delay: 0.2s;}

@media screen and (max-width:1280px) {
    .portfolio-025 .work-section .sec-8 .cont-wrap {gap: 48px;}
}
@media screen and (max-width:768px) {
    .portfolio-025 .work-section .sec-8 .title-wrap .conts br {display: none;}
    .portfolio-025 .work-section .sec-8 .title-wrap .conts p {max-width: 420px; margin: auto;}
    .portfolio-025 .work-section .sec-8 .cont-wrap {flex-direction: column; align-items: center;}
    .portfolio-025 .work-section .sec-8 .cont-wrap > div {max-width: 480px; }
    .portfolio-025 .work-section .sec-8 .cont-wrap .right .img-box {transition-delay: 0s; }
}

/* sect9 */
.portfolio-025 .work-section .sec-9 {position: relative; background: linear-gradient(45deg, #862B2C 5%, #441414); font-size: 0;}
.portfolio-025 .work-section .sec-9 img {width: 100%;}
.portfolio-025 .work-section .sec-9 .logo {font-size: 0; max-width: 1440px; position: absolute; left: 50%; top: 0; transform: translate(-50%,-50%); width: 90%;}
.portfolio-025 .work-section .sec-9 .logo span.fade-up {display: block; transition: opacity 1.4s, transform 1.4s;}
.portfolio-025 .work-section .sec-9 .com-img-box {width: 100%; font-size: 0;}
.portfolio-025 .work-section .sec-9 .com-img-box span {display: block; transition: opacity 1.4s 0.3s, transform 1.4s 0.3s; }




:root {
    --font-gap : 40px;
    --color-gap : 20px;
    --color-box-gap : 40px;
}

@media screen and (max-width:1280px) {
    :root {
        --font-gap : 30px;
    }
}

@media screen and (max-width:1024px) {
    :root {
        --color-gap : 15px;
        --color-box-gap : 30px;
    }
}

@media screen and (max-width:648px) {
    :root {
        --font-gap : 20px;
    }
}

@media screen and (max-width:480px) {
    :root {
        --font-gap : 15px;
        --color-gap : 10px;
        --color-box-gap : 20px;
    }
}