@charset "utf-8";
@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css);

:root {
    --SpoqaHanSansNeo : 'Spoqa Han Sans Neo', 'sans-serif';
    --white : #fff;
    --black : #000;
    --pj-key-color : #1F4A75;
    --pj-sub-color : #EDF1F6;

    --font-16 : 16px;
    --font-18 : 18px;
    --font-20 : 20px;
    --font-24 : 25px;
    --font-30 : 30px;
    --font-40 : 40px;

    --gap-20 : 20px;
    --gap-40 : 40px;
    --gap-50 : 50px;
    --gap-60 : 60px;
    --gap-80 : 80px;
}

@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-20 : 16px;
		--gap-40 : 24px;
		--gap-50 : 42px;
		--gap-60 : 54px;
		--gap-80 : 72px;
  }
}
@media screen and (max-width:768px) {
    :root {
        --font-16 : 13px;
		--font-18 : 15px;
		--font-20 : 17px;
		--font-24 : 18px;
		--font-30 : 22px;
		--font-40 : 26px;

        --gap-20 : 14px;
		--gap-40 : 20px;
		--gap-50 : 36px;
		--gap-60 : 46px;
		--gap-80 : 60px;
    }

}
@media screen and (max-width:480px) {
    root {
        --font-16 : 12px;
		--font-18 : 14px;
		--font-20 : 16px;
		--font-24 : 17px;
		--font-30 : 20px;
		--font-40 : 24px;

        --gap-20 : 12px;
		--gap-40 : 16px;
		--gap-50 : 30px;
		--gap-60 : 40px;
		--gap-80 : 50px;
  }

}

.rb-section {background:var(--pj-key-color); }

.portfolio-15 {min-width:280px;}

.portfolio-15 .section .sec-title {color:var(--pj-key-color);}
.portfolio-15 .section .sec-title .head {container-type:inline-size;}
.portfolio-15 .section .sec-title .head span {font-size:var(--font-20);}
.portfolio-15 .section .sec-title .head .title {font-size:clamp(28px, 7cqw, 75px); font-weight:500; line-height:1.2;}
.portfolio-15 .section .sec-title .conts-box .conts {font-size:var(--font-18);}

.portfolio-15 .sec-1 {background:#EDF1F6; padding-bottom:calc(var(--gap-50) * 5);}
.portfolio-15 .sec-1 .conts-1 .conts-wrap {width:100%;}
.portfolio-15 .sec-1 .conts-1 .conts-wrap .main-img {width:100%; aspect-ratio:1920/1280; position:relative;}
.portfolio-15 .sec-1 .conts-1 .conts-wrap .main-img .img-box {width:100%; height:100%; position:absolute; left:50%; top:50%; z-index:0; overflow:hidden; transform:translate(-50%,-50%);}
.portfolio-15 .sec-1 .conts-1 .conts-wrap .main-img .img-box span {display:block; width:100%; height:100%; position:relative;}
.portfolio-15 .sec-1 .conts-1 .conts-wrap .main-img .img-box span img {display:block; width:100%; height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); object-fit:cover;}
.portfolio-15 .sec-1 .conts-1 .conts-wrap .main-img .video-box {width:100%; height:100%; position:absolute; left:50%; top:50%; z-index:10; overflow:hidden; transform:translate(-50%,-50%);}
.portfolio-15 .sec-1 .conts-1 .conts-wrap .main-img .video-box span {display:block; width:100%; height:100%; position:relative;}
.portfolio-15 .sec-1 .conts-1 .conts-wrap .main-img .video-box span video {display:block; width:100%; height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); object-fit:cover; z-index:10;}

.portfolio-15 .sec-1 .conts-2 .conts-wrap {display:flex; flex-direction:column; gap:calc(var(--gap-50) * 2);}
.portfolio-15 .sec-1 .conts-2 .conts-wrap {width:90%; max-width:1410px; margin:0 auto;}
.portfolio-15 .sec-1 .conts-2 .conts-wrap .sec-title {display:flex; flex-direction:column; gap:var(--gap-80); align-items:center; justify-content:center;}
.portfolio-15 .sec-1 .conts-2 .conts-wrap .sec-title .head {width:100%; display:flex; flex-direction:column; gap:var(--gap-20);}
.portfolio-15 .sec-1 .conts-2 .conts-wrap .sec-title .conts-box {width:100%; max-width:1000px; display:flex; justify-content:flex-end;}
.portfolio-15 .sec-1 .conts-2 .conts-wrap .sec-title .conts-box .conts {width:45%; display:flex; flex-direction:column; gap:5px; text-align:left;}

@media screen and (max-width:1024px){
    .portfolio-15 .sec-1 .conts-2 .conts-wrap .sec-title .conts-box {justify-content:center;}
    .portfolio-15 .sec-1 .conts-2 .conts-wrap .sec-title .conts-box .conts {width:80%; max-width:400px; text-align:center;}
}

.portfolio-15 .sec-1 .conts-2 .conts-wrap .obj-wrap {width:100%;}
.portfolio-15 .sec-1 .conts-2 .conts-wrap .obj-wrap .overview-wrap {width:100%; display:flex; align-items:stretch;}
.portfolio-15 .sec-1 .conts-2 .conts-wrap .obj-wrap .overview-wrap .overview-box {width:50%;}
.portfolio-15 .sec-1 .conts-2 .conts-wrap .obj-wrap .overview-wrap .overview-box .obj-box {position:relative;}
.portfolio-15 .sec-1 .conts-2 .conts-wrap .obj-wrap .overview-wrap .overview-box .obj-box img {display:block; width:100%; height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); object-fit:cover;}
.portfolio-15 .sec-1 .conts-2 .conts-wrap .obj-wrap .overview-wrap .overview-box .obj-box.obj-1 {width:87%; max-width:613px; aspect-ratio:613/418;}
.portfolio-15 .sec-1 .conts-2 .conts-wrap .obj-wrap .overview-wrap .overview-box .obj-box.obj-2 {width:35%; max-width:243px; aspect-ratio:243/195; margin-left:13%;}
.portfolio-15 .sec-1 .conts-2 .conts-wrap .obj-wrap .overview-wrap .overview-box .obj-box.obj-3 {width:61%; max-width:429px; aspect-ratio:429/293; margin:var(--gap-60) 0 0 auto;}
.portfolio-15 .sec-1 .conts-2 .conts-wrap .obj-wrap .overview-wrap .overview-box.rt {padding-top:var(--gap-80);}

@media screen and (max-width:480px){
    .portfolio-15 .sec-1 .conts-2 .conts-wrap .obj-wrap .overview-wrap {flex-direction:column; gap:var(--gap-60);}
    .portfolio-15 .sec-1 .conts-2 .conts-wrap .obj-wrap .overview-wrap .overview-box {width:100%;}
    .portfolio-15 .sec-1 .conts-2 .conts-wrap .obj-wrap .overview-wrap .overview-box .obj-box.obj-1 {width:90%;}
    .portfolio-15 .sec-1 .conts-2 .conts-wrap .obj-wrap .overview-wrap .overview-box .obj-box.obj-2 {width:45%;}
    .portfolio-15 .sec-1 .conts-2 .conts-wrap .obj-wrap .overview-wrap .overview-box .obj-box.obj-3 {width:70%;}
    .portfolio-15 .sec-1 .conts-2 .conts-wrap .obj-wrap .overview-wrap .overview-box.rt {padding-top:0;}
}


.portfolio-15 .sec-2 {width:100%; height:calc(var(--nvh) * 2); transform:none !important;}
.portfolio-15 .sec-2 .conts-1 {width:100%; height:var(--nvh);}
.portfolio-15 .sec-2 .conts-1 .conts-wrap {width:100%; height:100%; position:relative;}
.portfolio-15 .sec-2 .conts-1 .conts-wrap .taehyo-wrap {width:100%; height:100%; position:relative; z-index:2;}
.portfolio-15 .sec-2 .conts-1 .conts-wrap .taehyo-wrap .bg-box {width:100%; height:100%; position:absolute; left:0; top:0; inset:0; opacity:0;}
.portfolio-15 .sec-2 .conts-1 .conts-wrap .taehyo-wrap .bg-box span {display:block; width:100%; height:100%; position:relative;}
.portfolio-15 .sec-2 .conts-1 .conts-wrap .taehyo-wrap .bg-box:first-child {opacity:1;}
.portfolio-15 .sec-2 .conts-1 .conts-wrap .taehyo-wrap .bg-box span {width:100%; height:100%; position:relative;}
.portfolio-15 .sec-2 .conts-1 .conts-wrap .taehyo-wrap .bg-box img {display:block; width:100%; height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); object-fit:cover;}
.portfolio-15 .sec-2 .conts-1 .conts-wrap .logo-wrap {width:100%; height:100%; position:absolute; left:0; top:0; z-index:10; display:flex; align-items:center; justify-content:center; z-index:10;}
.portfolio-15 .sec-2 .conts-1 .conts-wrap .logo-wrap .logo-txt-wrap {width:80%; max-width:1071px; display:flex; align-items:center; justify-content:center; gap:10px;}
.portfolio-15 .sec-2 .conts-1 .conts-wrap .logo-wrap .logo-txt-wrap .char {position:relative;}
.portfolio-15 .sec-2 .conts-1 .conts-wrap .logo-wrap .logo-txt-wrap .char img {display:block; width:100%; height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); object-fit:cover;}
.portfolio-15 .sec-2 .conts-1 .conts-wrap .logo-wrap .logo-txt-wrap .char img.color {z-index:1;}
.portfolio-15 .sec-2 .conts-1 .conts-wrap .logo-wrap .logo-txt-wrap .char img.gray {opacity:0; z-index:2;}
.portfolio-15 .sec-2 .conts-1 .conts-wrap .logo-wrap .logo-txt-wrap .char.char-1 {width:15%; max-width:157px; aspect-ratio:157/185;}
.portfolio-15 .sec-2 .conts-1 .conts-wrap .logo-wrap .logo-txt-wrap .char.char-2 {width:14%; max-width:143px; aspect-ratio:143/185; margin-right:10px;}
.portfolio-15 .sec-2 .conts-1 .conts-wrap .logo-wrap .logo-txt-wrap .char.char-3 {width:18%; max-width:188px; aspect-ratio:188/144;}
.portfolio-15 .sec-2 .conts-1 .conts-wrap .logo-wrap .logo-txt-wrap .char.char-4 {width:11%; max-width:115px; aspect-ratio:115/129;}
.portfolio-15 .sec-2 .conts-1 .conts-wrap .logo-wrap .logo-txt-wrap .char.char-5 {width:12%; max-width:120px; aspect-ratio:120/135;}
.portfolio-15 .sec-2 .conts-1 .conts-wrap .logo-wrap .logo-txt-wrap .char.char-6 {width:12%; max-width:120px; aspect-ratio:120/128;}
.portfolio-15 .sec-2 .conts-1 .conts-wrap .logo-wrap .logo-txt-wrap .char.char-7 {width:11%; max-width:115px; aspect-ratio:115/129;}

@media screen and (max-width:768px){
    .portfolio-15 .sec-2 .conts-1 .conts-wrap .logo-wrap .logo-txt-wrap {gap:6px;}
}

@media screen and (max-width:480px){
    .portfolio-15 .sec-2 .conts-1 .conts-wrap .logo-wrap .logo-txt-wrap .char.char-2 {margin-right:8px;}
    .portfolio-15 .sec-2 .conts-1 .conts-wrap .logo-wrap .logo-txt-wrap {gap:3px;}
}


.portfolio-15 .sec-3 .conts-1 .conts-wrap .ci-wrap {width:100%; display:flex; align-items:stretch;}
.portfolio-15 .sec-3 .conts-1 .conts-wrap .ci-wrap .ci-box {width:50%; aspect-ratio:1; display:flex; align-items:center; justify-content:center;}
.portfolio-15 .sec-3 .conts-1 .conts-wrap .ci-wrap .ci-box.ci-1 {background:#fff;}
.portfolio-15 .sec-3 .conts-1 .conts-wrap .ci-wrap .ci-box.ci-2 {background:var(--pj-key-color);}
.portfolio-15 .sec-3 .conts-1 .conts-wrap .ci-wrap .ci-box span {display:block; width:65%; aspect-ratio:620/425; position:relative;}
.portfolio-15 .sec-3 .conts-1 .conts-wrap .ci-wrap .ci-box span img {display:block; width:100%; height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); object-fit:cover;}

@media screen and (max-width:648px){
    .portfolio-15 .sec-3 .conts-1 .conts-wrap .ci-wrap {flex-direction:column;}
    .portfolio-15 .sec-3 .conts-1 .conts-wrap .ci-wrap .ci-box {width:100%;}
}



.portfolio-15 .sec-4 {background:var(--pj-sub-color); padding:calc(var(--gap-50) * 3) 0;}
.portfolio-15 .sec-4 .conts-1 {width:100%;}
.portfolio-15 .sec-4 .conts-1 .conts-wrap {width:90%; max-width:1760px; margin:0 auto; display:flex; flex-direction:column; gap:calc(var(--gap-50) * 2); align-items:center;}
.portfolio-15 .sec-4 .conts-1 .conts-wrap .sec-title {width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:var(--gap-20);}
.portfolio-15 .sec-4 .conts-1 .conts-wrap .sec-title .head {container-type:unset;}
.portfolio-15 .sec-4 .conts-1 .conts-wrap .sec-title .conts {text-align:left;}

@media screen and (max-width:900px){
    .portfolio-15 .sec-4 .conts-1 .conts-wrap .sec-title {flex-direction:column;}
    .portfolio-15 .sec-4 .conts-1 .conts-wrap .sec-title > *  {width:100%; text-align:center;}
    .portfolio-15 .sec-4 .conts-1 .conts-wrap .sec-title .conts {text-align:center;}
}


.portfolio-15 .sec-4 .conts-1 .conts-wrap .logo-wrap {--logo-gap:30px; width:82%; display:flex; align-items:stretch; gap:var(--logo-gap); justify-content:space-between;}
.portfolio-15 .sec-4 .conts-1 .conts-wrap .logo-wrap .logo-box {width:calc((100% - (var(--logo-gap) * 2)) / 3); max-width:376px; display:flex; flex-direction:column; gap:var(--gap-20);}
.portfolio-15 .sec-4 .conts-1 .conts-wrap .logo-wrap .logo-box .img-box {width:100%; aspect-ratio:1; position:relative; background:var(--pj-key-color);}
.portfolio-15 .sec-4 .conts-1 .conts-wrap .logo-wrap .logo-box .img-box .img {width:100%; height:100%; position:relative; overflow:hidden; z-index:1;}
.portfolio-15 .sec-4 .conts-1 .conts-wrap .logo-wrap .logo-box .img-box .img img {display:block; width:100%; height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); object-fit:cover;}
.portfolio-15 .sec-4 .conts-1 .conts-wrap .logo-wrap .logo-box .img-box .obj {width:100%; height:100%; position:absolute; left:0; top:0; display:flex; align-items:center; justify-content:center; z-index:2;}
.portfolio-15 .sec-4 .conts-1 .conts-wrap .logo-wrap .logo-box .img-box .obj span {display:block; position:relative; overflow:hidden;}
.portfolio-15 .sec-4 .conts-1 .conts-wrap .logo-wrap .logo-box .img-box .obj span img {display:block; width:100%; height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); object-fit:cover;}
.portfolio-15 .sec-4 .conts-1 .conts-wrap .logo-wrap .logo-box.analysis .img-box .img img {opacity:0.5;}
.portfolio-15 .sec-4 .conts-1 .conts-wrap .logo-wrap .logo-box.analysis .img-box .obj span {width:32%; max-width:118px; aspect-ratio:118/190;}
.portfolio-15 .sec-4 .conts-1 .conts-wrap .logo-wrap .logo-box.design .img-box .obj span {width:63%; max-width:234px; aspect-ratio:234/136;}
.portfolio-15 .sec-4 .conts-1 .conts-wrap .logo-wrap .logo-box .txt {width:100%; text-align:center; font-weight:600; color:var(--pj-key-color); container-type:inline-size; font-size:clamp(12px, 2cqw, 18px);}

@media screen and (max-width:768px){
    .portfolio-15 .sec-4 .conts-1 .conts-wrap .logo-wrap {--logo-gap:20px;}
}

@media screen and (max-width:648px){
    .portfolio-15 .sec-4 .conts-1 .conts-wrap .logo-wrap {max-width:70%; flex-direction:column;}
    .portfolio-15 .sec-4 .conts-1 .conts-wrap .logo-wrap .logo-box {width:100%;}
    .portfolio-15 .sec-4 .conts-1 .conts-wrap .logo-wrap .logo-box .txt {font-size:clamp(13px, 5cqw, 18px);}
}



.portfolio-15 .sec-5 .conts-1 .conts-wrap .typography-wrap {width:100%; display:flex; align-items:stretch;}
.portfolio-15 .sec-5 .conts-1 .conts-wrap .typography-wrap .layout-box {width:50%; aspect-ratio:1; position:relative;}
.portfolio-15 .sec-5 .conts-1 .conts-wrap .typography-wrap .layout-box.box-1 {background:#111;}
.portfolio-15 .sec-5 .conts-1 .conts-wrap .typography-wrap .layout-box.box-2 {background:#fff;}
.portfolio-15 .sec-5 .conts-1 .conts-wrap .typography-wrap .layout-box > .inner {width:100%; height:100%; display:flex; align-items:center; justify-content:center;}
.portfolio-15 .sec-5 .conts-1 .conts-wrap .typography-wrap .layout-box .conts-box {width:90%; height:100%; position:relative;}

.portfolio-15 .sec-5 .conts-1 .conts-wrap .typography-wrap .layout-box.box-1 .conts-box .main-conts {width:100%; display:flex; flex-direction:column; container-type:inline-size; font-family:var(--SpoqaHanSansNeo); text-align:center; position:absolute; left:0; top:50%; transform:translateY(-50%);}
.portfolio-15 .sec-5 .conts-1 .conts-wrap .typography-wrap .layout-box.box-1 .conts-box .main-conts .font {width:100%; font-size:clamp(30px, 7cqw, 100px); color:#fff;}
.portfolio-15 .sec-5 .conts-1 .conts-wrap .typography-wrap .layout-box.box-1 .conts-box .main-conts .weight {width:100%; font-size:clamp(14px, 2cqw, 30px); color:#999;}
.portfolio-15 .sec-5 .conts-1 .conts-wrap .typography-wrap .layout-box.box-1 .conts-box .ex {width:100%; container-type:inline-size; font-family:var(--SpoqaHanSansNeo); font-size:clamp(16px, 1.3cqw, 45px); color:#4E5154; line-height:1.3; position:absolute; left:0; bottom:8%;}

.portfolio-15 .sec-5 .conts-1 .conts-wrap .typography-wrap .layout-box.box-2 .conts-box {display:flex; align-items:center;}
.portfolio-15 .sec-5 .conts-1 .conts-wrap .typography-wrap .layout-box.box-2 .conts-box .example {width:100%; container-type:inline-size; font-family:var(--SpoqaHanSansNeo); font-size:clamp(50px, 24cqw, 800px); color:#111; font-weight:500; text-align:center;}

@media screen and (max-width:648px){
    .portfolio-15 .sec-5 .conts-1 .conts-wrap .typography-wrap {flex-direction:column;}
    .portfolio-15 .sec-5 .conts-1 .conts-wrap .typography-wrap .layout-box {width:100%;}

    .portfolio-15 .sec-5 .conts-1 .conts-wrap .typography-wrap .layout-box.box-1 .conts-box .main-conts .font {font-size:clamp(27px, 10cqw, 50px);}
    .portfolio-15 .sec-5 .conts-1 .conts-wrap .typography-wrap .layout-box.box-1 .conts-box .main-conts .weight {font-size:clamp(12px, 4cqw, 30px);}
    .portfolio-15 .sec-5 .conts-1 .conts-wrap .typography-wrap .layout-box.box-1 .conts-box .ex {font-size:clamp(13px, 3.2cqw, 40px);}

    .portfolio-15 .sec-5 .conts-1 .conts-wrap .typography-wrap .layout-box.box-2 .conts-box .example {font-size:clamp(50px, 55cqw, 400px);}
}




.portfolio-15 .sec-6 .conts-1 .conts-wrap {width:100%; display:flex; align-items:stretch; flex-direction:row-reverse;}
.portfolio-15 .sec-6 .conts-1 .conts-wrap .img-box {width:65%;}
.portfolio-15 .sec-6 .conts-1 .conts-wrap .img-box .img {display:block; width:100%; aspect-ratio:1236/979; position:relative; overflow:hidden;}
.portfolio-15 .sec-6 .conts-1 .conts-wrap .img-box .img span {display:block; width:100%; height:100%; position:relative; overflow:hidden;}
.portfolio-15 .sec-6 .conts-1 .conts-wrap .img-box .img span img {display:block; width:100%; height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); object-fit:cover;}
.portfolio-15 .sec-6 .conts-1 .conts-wrap .color-wrap {width:35%; display:flex; align-items:stretch; container-type:inline-size;}
.portfolio-15 .sec-6 .conts-1 .conts-wrap .color-wrap .row {width:50%; height:100%; display:flex; flex-direction:column;}
.portfolio-15 .sec-6 .conts-1 .conts-wrap .color-wrap .row .color-box {padding:15px; text-align:left;}
.portfolio-15 .sec-6 .conts-1 .conts-wrap .color-wrap .row .color-box span {font-size:clamp(10px, 1.8cqw, 14px); letter-spacing:0;}

.portfolio-15 .sec-6 .conts-1 .conts-wrap .color-wrap .row.key-color .color-box {width:100%; height:100%; background:#4478A6; color:rgba(255,255,255,0.5);}
.portfolio-15 .sec-6 .conts-1 .conts-wrap .color-wrap .row.sub-color .color-box {width:100%; height:33.333%;}
.portfolio-15 .sec-6 .conts-1 .conts-wrap .color-wrap .row.sub-color .color-box.color-1 {background:#fff; color:rgba(31,74,117,0.5);}
.portfolio-15 .sec-6 .conts-1 .conts-wrap .color-wrap .row.sub-color .color-box.color-2 {background:#1F4A75; color:rgba(255,255,255,0.5);}
.portfolio-15 .sec-6 .conts-1 .conts-wrap .color-wrap .row.sub-color .color-box.color-3 {background:#111; color:rgba(255,255,255,0.5);}

@media screen and (max-width:648px){
    .portfolio-15 .sec-6 .conts-1 .conts-wrap {flex-direction:column;}
    .portfolio-15 .sec-6 .conts-1 .conts-wrap .img-box {width:100%;}
    .portfolio-15 .sec-6 .conts-1 .conts-wrap .color-wrap {width:100%; flex-direction:column;}
    .portfolio-15 .sec-6 .conts-1 .conts-wrap .color-wrap .row {width:100%; height:100px; flex-direction:row;}
    .portfolio-15 .sec-6 .conts-1 .conts-wrap .color-wrap .row .color-box {padding:8px;}

    .portfolio-15 .sec-6 .conts-1 .conts-wrap .color-wrap .row.sub-color .color-box {flex:1; height:100%;}
}




.portfolio-15 .sec-7 {width:100%; background:url(/img/portfolio/015/main_mockup_bg.jpg) no-repeat center / cover; position:relative}
.portfolio-15 .sec-7:before {content:''; width:100%; height:100%; background:rgba(0,0,0,0.5); position:absolute; left:0; top:0; z-index:1;}
.portfolio-15 .sec-7 .conts-1 {width:100%; position:relative; z-index:10;}
.portfolio-15 .sec-7 .conts-1 .conts-wrap {width:100%; min-height:var(--nvh); display:flex; align-items:center; justify-content:center; padding:var(--gap-40) 0;}
.portfolio-15 .sec-7 .conts-1 .conts-wrap .mockup {width:90%; max-width:1097px;}
.portfolio-15 .sec-7 .conts-1 .conts-wrap .mockup span {display:block; width:100%; aspect-ratio:1097/608; position:relative; overflow:hidden}
.portfolio-15 .sec-7 .conts-1 .conts-wrap .mockup span img {display:block; width:100%; height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); object-fit:cover;}




.portfolio-15 .sec-8 {width:100%; background:#1F4A75; background: linear-gradient(176deg, rgba(31, 74, 117, 1) 0%, rgba(78, 122, 167, 1) 47%, rgba(35, 80, 125, 1) 100%);}
.portfolio-15 .sec-8 .conts-1 {width:100%; padding:calc(var(--gap-50) * 4) 0;}
.portfolio-15 .sec-8 .conts-1 .conts-wrap {width:90%; max-width:1400px; margin:0 auto;}
.portfolio-15 .sec-8 .conts-1 .conts-wrap .design-wrap {width:100%; display:flex; --box-gap-1:50px; gap:var(--box-gap-1); justify-content:space-between; align-items:flex-end;}
.portfolio-15 .sec-8 .conts-1 .conts-wrap .design-wrap .design-box {width:calc((100% - var(--box-gap-1)) / 2); max-width:600px;}
.portfolio-15 .sec-8 .conts-1 .conts-wrap .design-wrap .design-box span {display:block; width:100%; box-shadow:0 0 10px rgba(0,25,50,0.5);}
.portfolio-15 .sec-8 .conts-1 .conts-wrap .design-wrap .design-box span img {display:block; width:100%;}
.portfolio-15 .sec-8 .conts-1 .conts-wrap .design-wrap .design-box:first-child {margin-bottom:calc(var(--gap-60) * 4);}

@media screen and (max-width:648px){
    .portfolio-15 .sec-8 .conts-1 .conts-wrap .design-wrap {--box-gap-1:30px;}
}


@media screen and (max-width:480px){
    .portfolio-15 .sec-8 .conts-1 .conts-wrap .design-wrap {flex-direction:column; --box-gap-1:var(--gap-80); align-items:flex-start;}
    .portfolio-15 .sec-8 .conts-1 .conts-wrap .design-wrap .design-box {width:80%;}
    .portfolio-15 .sec-8 .conts-1 .conts-wrap .design-wrap .design-box:first-child {margin-bottom:0;}
    .portfolio-15 .sec-8 .conts-1 .conts-wrap .design-wrap .design-box:last-child {margin-left:auto; margin-right:0;}
}


.portfolio-15 .sec-8 .conts-2 {width:100%; padding:0 0 calc(var(--gap-50) * 6) 0; position:relative;}
.portfolio-15 .sec-8 .conts-2:before {content:''; width:100%; height:55%; background:url(/img/portfolio/015/design_bg.jpg) no-repeat center / cover; position:absolute; left:0; top:calc(var(--gap-50) * 4); z-index:1;}
.portfolio-15 .sec-8 .conts-2:after {content:''; width:100%; height:55%; background:rgba(0,0,0,0.5); position:absolute; left:0; top:calc(var(--gap-50) * 4); z-index:2;}
.portfolio-15 .sec-8 .conts-2 .conts-wrap {width:95%; max-width:1450px; margin:0 auto; position:relative; z-index:10;}
.portfolio-15 .sec-8 .conts-2 .conts-wrap .design-wrap {width:100%; display:flex; --box-gap-2:50px; gap:var(--box-gap-2); justify-content:space-between; align-items:flex-start;}
.portfolio-15 .sec-8 .conts-2 .conts-wrap .design-wrap .design-box {width:calc((100% - (var(--box-gap-2) * 2)) / 3); max-width:280px;}
.portfolio-15 .sec-8 .conts-2 .conts-wrap .design-wrap .design-box span {display:block; width:100%;}
.portfolio-15 .sec-8 .conts-2 .conts-wrap .design-wrap .design-box span img {display:block; width:100%;}
.portfolio-15 .sec-8 .conts-2 .conts-wrap .design-wrap .design-box:nth-child(2) {margin-top:calc(45% + (var(--gap-50) * 5));}
.portfolio-15 .sec-8 .conts-2 .conts-wrap .design-wrap .design-box:nth-child(3) {margin-top:50%;}

@media screen and (max-width:768px){
    .portfolio-15 .sec-8 .conts-2:before,
    .portfolio-15 .sec-8 .conts-2:after {height:45%;}
}

@media screen and (max-width:648px){
    .portfolio-15 .sec-8 .conts-2:before,
    .portfolio-15 .sec-8 .conts-2:after {height:35%;}
    .portfolio-15 .sec-8 .conts-2 .conts-wrap .design-wrap {--box-gap-2:30px;}
}

@media screen and (max-width:480px){
    .portfolio-15 .sec-8 .conts-2:before,
    .portfolio-15 .sec-8 .conts-2:after {height:60%;}
    .portfolio-15 .sec-8 .conts-2 .conts-wrap {width:90%;}
    .portfolio-15 .sec-8 .conts-2 .conts-wrap .design-wrap {flex-direction:column; --box-gap-2:calc(var(--gap-50) * 3);}
    .portfolio-15 .sec-8 .conts-2 .conts-wrap .design-wrap .design-box {width:45%;}
    .portfolio-15 .sec-8 .conts-2 .conts-wrap .design-wrap .design-box:nth-child(2) {margin-top:0; margin:0 auto;}
    .portfolio-15 .sec-8 .conts-2 .conts-wrap .design-wrap .design-box:nth-child(3) {margin-top:0; margin-left:auto; margin-right:0;}
}



.portfolio-15 .sec-9 {width:100%; padding:calc(var(--gap-50) * 4) 0; background:#EDF1F6;}
.portfolio-15 .sec-9 .conts-1 .conts-wrap .rolling-wrap {width:100%; overflow:hidden; position:relative;}
.portfolio-15 .sec-9 .conts-1 .conts-wrap .rolling-wrap .rolling-track {display:flex; width:max-content; gap:var(--gap-80); flex-wrap:nowrap; will-change:transform;}
.portfolio-15 .sec-9 .conts-1 .conts-wrap .rolling-wrap .rolling-track .rolling-item {flex-shrink:0; width:27vw; max-width:651px;}
.portfolio-15 .sec-9 .conts-1 .conts-wrap .rolling-wrap .rolling-track .rolling-item img {display:block; width:100%;}

@media screen and (max-width:1024px){
    .portfolio-15 .sec-9 .conts-1 .conts-wrap .rolling-wrap .rolling-track {gap:30px;}    
}

@media screen and (max-width:648px){
    .portfolio-15 .sec-9 .conts-1 .conts-wrap .rolling-wrap .rolling-track {gap:20px;}
    .portfolio-15 .sec-9 .conts-1 .conts-wrap .rolling-wrap .rolling-track .rolling-item {width:30vw;}
}

@media screen and (max-width:480px){
    .portfolio-15 .sec-9 .conts-1 .conts-wrap .rolling-wrap .rolling-track .rolling-item {width:40vw;}
}



.portfolio-15 .sec-10 {width:100%; padding:calc(var(--gap-50) * 11) 0; background:url(/img/portfolio/015/mobile_bg.jpg) no-repeat center / cover;}
.portfolio-15 .sec-10 .conts-1 .conts-wrap .mobile-design {width:90%; margin:0 auto;}
.portfolio-15 .sec-10 .conts-1 .conts-wrap .mobile-design .phone-mockup {width:450px; margin:0 auto; position:relative;}
.portfolio-15 .sec-10 .conts-1 .conts-wrap .mobile-design .phone-mockup .phone-frame {width:100%; height:auto; position:relative; display:block; z-index:2; pointer-events:none;}
.portfolio-15 .sec-10 .conts-1 .conts-wrap .mobile-design .phone-mockup .phone-frame img {width:100%; display:block; margin:0 auto;}
.portfolio-15 .sec-10 .conts-1 .conts-wrap .mobile-design .phone-mockup .phone-screen {width:402px; height:821px; background:transparent; position:absolute; left:24px; top:76px; overflow:hidden; z-index:1; border-radius:3px 3px 58px 58px;}
.portfolio-15 .sec-10 .conts-1 .conts-wrap .mobile-design .phone-mockup .phone-screen .screen-scroll-img {display:block; width:100%; height:auto; will-change:transform; transform:translateY(0);}
.portfolio-15 .sec-10 .conts-1 .conts-wrap .mobile-design .phone-mockup .screen-track {width:100%; will-change:transform;}

@media screen and (max-width:768px){
    .portfolio-15 .sec-10 .conts-1 .conts-wrap .mobile-design .phone-mockup {width:320px;}
    .portfolio-15 .sec-10 .conts-1 .conts-wrap .mobile-design .phone-mockup .phone-screen {width:286px; height:584px; left:17px; top:54px; border-radius:1px 1px 45px 45px;}
}

@media screen and (max-width:480px){
    .portfolio-15 .sec-10 .conts-1 .conts-wrap .mobile-design .phone-mockup {width:240px;}
    .portfolio-15 .sec-10 .conts-1 .conts-wrap .mobile-design .phone-mockup .phone-screen {width:214px; height:439px; left:13px; top:40px; border-radius:1px 1px 34px 34px;}
}



.portfolio-15 .sec-11 .conts-1 .conts-wrap .img-box {width:100%; aspect-ratio:1920/1080; overflow:hidden;}
.portfolio-15 .sec-11 .conts-1 .conts-wrap .img-box span {display:block; width:100%; height:100%; position:relative;}
.portfolio-15 .sec-11 .conts-1 .conts-wrap .img-box span img {display:block; width:100%; height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); object-fit:cover;}