@charset "utf-8";
@import url("portfolio_com.css?ver=202503111053");

@font-face {
    font-family: 'Copperplategothic';
    font-style: normal;
    font-weight: 700;
    src: url(font/copperplategothic_bold.eot);
    src: url(font/copperplategothic_bold.eot?#iefix) format('embedded-opentype'),
    url(font/copperplategothic_bold.woff2) format('woff2'),
    url(font/copperplategothic_bold.woff) format('woff');
}

@font-face {
    font-family: 'SUIT';
    font-weight : 100;
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Thin.woff2') format('woff2');
    font-style: normal;
}

@font-face {
    font-family: 'SUIT';
    font-weight : 200;
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-ExtraLight.woff2') format('woff2');
    font-style: normal;
}

@font-face {
    font-family: 'SUIT';
    font-weight : 300;
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Light.woff2') format('woff2');
    font-style: normal;
}

@font-face {
    font-family: 'SUIT';
    font-weight : 400;
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2') format('woff2');
    font-style: normal;
}

@font-face {
    font-family: 'SUIT';
    font-weight : 500;
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Medium.woff2') format('woff2');
    font-style: normal;
}

@font-face {
    font-family: 'SUIT';
    font-weight : 600;
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-SemiBold.woff2') format('woff2');
    font-style: normal;
}

@font-face {
    font-family: 'SUIT';
    font-weight : 700;
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Bold.woff2') format('woff2');
    font-style: normal;
}

@font-face {
    font-family: 'SUIT';
    font-weight : 800;
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-ExtraBold.woff2') format('woff2');
    font-style: normal;
}


@font-face {
    font-family: 'SUIT';
    font-weight : 900;
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Heavy.woff2') format('woff2');
    font-style: normal;
}

:root {
    --brand-color : #D0151B;
    --second-color : #7A0F15;
    --begie : #FEECD6;
    --white : #fff;
    --black : #000;
    --copperplate : 'Copperplategothic';
    --suit : 'SUIT';
}


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

.portfolio-09 * {font-family:var(--suit);}
.portfolio-09 .work_wrap {width:100%; overflow:visible; background:#111;}
.portfolio-09 .work_wrap > div:not(.sec-1) {overflow:hidden;}
.portfolio-09 .work_wrap .section > .wrap {width:95%; max-width:1920px; margin:0 auto;}

.portfolio-09 .sec-1 {position:relative; z-index:10;}
.portfolio-09 .sec-1:before {content:""; width:100vw; height:100%; background:var(--white); position:absolute; left:50%; top:0; transform:translateX(-50%); z-index:0;}


.portfolio-09 .sec-2 {width:100%; aspect-ratio:1920/1300; background:url(/img/portfolio/009/sec_02.png) center no-repeat; background-size:cover; padding-top:250px; padding-bottom:180px;}
.portfolio-09 .sec-2 .conts-wrap {width:95%; max-width:1440px; margin:0 auto; height:100%; display:flex; justify-content:space-between; flex-direction:column;}
.portfolio-09 .sec-2 .conts-wrap .title {font-family:var(--copperplate); font-size:80px; font-weight:700; color:#7E0006;}
.portfolio-09 .sec-2 .conts-wrap .conts-box {width:100%; display:flex; gap:var(--gap-16); color:#BE3737; text-align:left;}
.portfolio-09 .sec-2 .conts-wrap .conts-box > * {font-family:var(--suit);}
.portfolio-09 .sec-2 .conts-wrap .conts-box .tlt {font-size:var(--font-30); font-weight:800; width:30%;}
.portfolio-09 .sec-2 .conts-wrap .conts-box .conts {flex:1; font-size:var(--font-20); font-weight:600; line-height:1.7;}

@media screen and (max-width:1280px) {
    .portfolio-09 .sec-2 {height:1000px; padding-top:150px; padding-bottom:100px;}
}

@media screen and (max-width:1024px) {
    .portfolio-09 .sec-2 .conts-wrap .title {font-size:64px;}
    .portfolio-09 .sec-2 .conts-wrap .conts-box .tlt {font-size:var(--font-24);}
    .portfolio-09 .sec-2 .conts-wrap .conts-box .conts {font-size:var(--font-18);}
}

@media screen and (max-width:768px) {
    .portfolio-09 .sec-2 {height:100vh; max-height:1000px; padding-top:calc(var(--gap-60) * 2.5); padding-bottom:calc(var(--gap-60) * 1.5);}
    .portfolio-09 .sec-2 .conts-wrap .title {font-size:52px;}
}

@media screen and (max-width:648px) {
    .portfolio-09 .sec-2 .conts-wrap .title {font-size:42px;}
    .portfolio-09 .sec-2 .conts-wrap .conts-box {flex-direction:column; text-align:center;}
    .portfolio-09 .sec-2 .conts-wrap .conts-box .tlt {width:100%;}
}

@media screen and (max-width:480px) {
    .portfolio-09 .sec-2 {max-height:600px;}
    .portfolio-09 .sec-2 .conts-wrap .title {font-size:30px;}
}



.portfolio-09 .sec-3 {width:100%; padding-top:calc(var(--gap-50) * 5); color:var(--white);}
.portfolio-09 .sec-3 .title-wrap {width:100%; margin-bottom:calc(var(--gap-50) * 2);}
.portfolio-09 .sec-3 .title-wrap h2 {font-size:var(--font-30); font-weight:800; margin-bottom:var(--gap-40);}
.portfolio-09 .sec-3 .title-wrap .conts {width:100%; font-size:var(--font-20); line-height:1.7;}
.portfolio-09 .sec-3 .conts-wrap {width:100%;}
.portfolio-09 .sec-3 .layout-wrap {width:100%; display:flex; gap:40px; justify-content:space-between;}
.portfolio-09 .sec-3 .layout-wrap .layout-box {flex:1; height:800px; background:#222; padding:80px 20px 100px 20px;}
.portfolio-09 .sec-3 .layout-wrap .layout-box > .inner {width:100%; height:100%; display:flex; flex-direction:column; justify-content:space-between; gap:var(--gap-24);}
.portfolio-09 .sec-3 .layout-wrap .layout-box > .inner > * {width:100%;}
.portfolio-09 .sec-3 .layout-wrap .layout-box .title-box {display:flex; flex-direction:column; gap:var(--gap-24);}
.portfolio-09 .sec-3 .layout-wrap .layout-box .title-box em {font-size:var(--font-24);}
.portfolio-09 .sec-3 .layout-wrap .layout-box .title-box span {font-size:var(--font-30); font-weight:600;}
.portfolio-09 .sec-3 .layout-wrap .layout-box .img-box span {display:block; width:100%; margin:0 auto;}
.portfolio-09 .sec-3 .layout-wrap .layout-box .img-box span img {display:block; max-width:100%;}
.portfolio-09 .sec-3 .layout-wrap .layout-box .conts-box {font-size:var(--font-20); line-height:1.7;}
.portfolio-09 .sec-3 .section-img-box {width:100%; position:relative; margin-top:var(--gap-40);}
.portfolio-09 .sec-3 .section-img-box span {display:block; width:100%; height:0; padding-bottom:calc(450 / 1820 * 100%); position:relative; overflow:hidden;}
.portfolio-09 .sec-3 .section-img-box span img {width:100%; height:100%; position:absolute; left:0; top:0; object-fit:cover;}

.portfolio-09 .sec-3 .layout-wrap .layout-box:nth-child(1) .img-box span {width:32%; max-width:180px;}
.portfolio-09 .sec-3 .layout-wrap .layout-box:nth-child(2) .img-box span {width:35%; max-width:200px;}
.portfolio-09 .sec-3 .layout-wrap .layout-box:nth-child(3) .img-box span {width:35%; max-width:200px;}

@media screen and (max-width:1320px) {
    .portfolio-09 .sec-3 .layout-wrap {gap:20px;}
    .portfolio-09 .sec-3 .layout-wrap .layout-box {height:600px; padding:60px 20px 80px 20px;}
}

@media screen and (max-width:1280px) {
    .portfolio-09 .sec-3 .layout-wrap .layout-box .conts-box {font-size:var(--font-16);}
}

@media screen and (max-width:1024px) {
    .portfolio-09 .sec-3 .title-wrap h2 {font-size:var(--font-24);}
    .portfolio-09 .sec-3 .title-wrap .conts {font-size:var(--font-18);}

    .portfolio-09 .sec-3 .layout-wrap .layout-box {height:450px;}
    .portfolio-09 .sec-3 .layout-wrap .layout-box .title-box em {font-size:var(--font-18);}
    .portfolio-09 .sec-3 .layout-wrap .layout-box .title-box span {font-size:var(--font-24);}
    .portfolio-09 .sec-3 .layout-wrap .layout-box .conts-box {font-size:var(--font-16);}
}

@media screen and (max-width:900px) {
    .portfolio-09 .sec-3 .layout-wrap {flex-direction:column; gap:30px;}
    .portfolio-09 .sec-3 .layout-wrap .layout-box {flex:auto; width:100%; max-width:600px; height:100%; margin:0 auto; padding:calc(var(--gap-60)* 1.25) 20px calc(var(--gap-50) * 2) 20px;}
    .portfolio-09 .sec-3 .layout-wrap .layout-box > .inner {gap:var(--gap-60);}
    .portfolio-09 .sec-3 .layout-wrap .layout-box .conts-box {font-size:var(--font-18);}
}



.portfolio-09 .sec-4 .title-wrap {width:100%; padding:calc(var(--gap-50) * 5) 20px; text-align:center;}
.portfolio-09 .sec-4 .title-wrap h2 {font-size:100px; font-weight:800; letter-spacing:-3px; color:var(--white);}

@media screen and (max-width:1280px) {
    .portfolio-09 .sec-4 .title-wrap h2 {font-size:80px; letter-spacing:-1.5px;}
}

@media screen and (max-width:1024px) {
    .portfolio-09 .sec-4 .title-wrap h2 {font-size:60px; letter-spacing:-1px;}
}

@media screen and (max-width:648px) {
    .portfolio-09 .sec-4 .title-wrap h2 {font-size:42px;}
}

@media screen and (max-width:480px) {
    .portfolio-09 .sec-4 .title-wrap {padding:calc(var(--gap-40) * 5) 20px;}
    .portfolio-09 .sec-4 .title-wrap h2 {font-size:30px;}
}

.portfolio-09 .sec-4 .layout-wrap {width:100%; display:flex; flex-wrap:wrap;}
.portfolio-09 .sec-4 .layout-wrap .layout-box {width:50%;}
.portfolio-09 .sec-4 .layout-wrap .layout-box > .inner {width:100%; height:0; padding-bottom:calc(1000 / 960 * 100%); position:relative;}
.portfolio-09 .sec-4 .layout-wrap .layout-box .img-box {width:100%; height:0; padding-bottom:calc(1000 / 960 * 100%); position:relative;}
.portfolio-09 .sec-4 .layout-wrap .layout-box .img-box img {display:block; width:100%; height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); object-fit:cover;}
.portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts {width:100%; height:100%; position:absolute; left:0; top:0; padding:120px 100px; display:flex; align-items:center; justify-content:center;}
.portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .title {font-size:var(--font-20); color:var(--white); position:absolute; left:100px; top:60px;}

.portfolio-09 .sec-4 .layout-wrap .layout-box:nth-child(2) {background:var(--black);}
.portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .color-system {width:53%; max-width:500px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
.portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .color-system .color-system-wrap {width:100%; height:0; padding-bottom:calc(600 / 500 * 100%); position:relative; position:relative;}
.portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .color-system .color-system-wrap .color-system-box {width:100%; height:100%; display:flex; flex-direction:column; position:absolute; left:0; top:0;}
.portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .color-system .color-system-wrap .color-system-box .row {width:100%; flex:1; display:flex;}
.portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .color-system .color-system-wrap .color-system-box .row .col {flex:1; height:100%;}
.portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .color-system .color-system-wrap .color-system-box .row .col .color-box {width:100%; height:100%; position:relative;}
.portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .color-system .color-system-wrap .color-system-box .row .col .color-box .conts {display:flex; flex-direction:column; gap:5px; font-size:14px; color:var(--white); position:absolute; left:30px; bottom:30px; text-align:left; letter-spacing:0;}
.portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .color-system .color-system-wrap .color-system-box .row .col .color-box .conts em {font-weight:700;}
.portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .color-system .color-system-wrap .color-system-box .row .col ul {width:100%; height:100%; display:flex; flex-direction:column;}
.portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .color-system .color-system-wrap .color-system-box .row .col ul li {width:100%; flex:1; display:flex;}

.portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .color-system .color-system-wrap .color-system-box .row .col .color-box[data-id='begie'] .conts,
.portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .color-system .color-system-wrap .color-system-box .row .col .color-box[data-id='black'] .conts {left:50%; transform:translateX(-50%);}

.portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .color-system .color-system-wrap .color-system-box .row .col .color-box[data-id='primary'] {background:#D0151B;}
.portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .color-system .color-system-wrap .color-system-box .row .col .color-box[data-id='white'] {background:var(--white);}
.portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .color-system .color-system-wrap .color-system-box .row .col .color-box[data-id='white'] .conts {color:var(--black);}
.portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .color-system .color-system-wrap .color-system-box .row .col .color-box[data-id='secondary'] {background:#7A0F15;}
.portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .color-system .color-system-wrap .color-system-box .row .col .color-box[data-id='begie'] {background:#FEECD6;}
.portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .color-system .color-system-wrap .color-system-box .row .col .color-box[data-id='begie'] .conts {color:var(--black);}
.portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .color-system .color-system-wrap .color-system-box .row .col .color-box[data-id='black'] {background:var(--black);}


@media screen and (max-width:1280px) {
    .portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts {padding:60px 40px;}
    .portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .title {left:60px; top:30px;}

    .portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .color-system {width:60%;}
    .portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .color-system .color-system-wrap .color-system-box .row .col .color-box .conts {font-size:10px; left:10px; bottom:25px;}
}

@media screen and (max-width:900px) {
    .portfolio-09 .sec-4 .layout-wrap {flex-direction:column;}
    .portfolio-09 .sec-4 .layout-wrap .layout-box {width:100%;}
}

@media screen and (max-width:648px) {
    .portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts {padding:40px;}
    .portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .title {left:40px; font-size:var(--font-18);}

    .portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .color-system {width:70%; top:auto; bottom:40px; transform:translateX(-50%);}
    .portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .color-system .color-system-wrap {padding-bottom:calc(520 / 500 * 100%);}
}


@media screen and (max-width:480px) {
    .portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts {padding:30px;}
    .portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .title {left:30px;}

    .portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .color-system {bottom:30px;}
    .portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .color-system .color-system-wrap .color-system-box .row .col .color-box .conts {font-size:8px; bottom:10px;}
}



.portfolio-09 .sec-4 .layout-wrap .layout-box:nth-child(3) {background:var(--white);}
.portfolio-09 .sec-4 .layout-wrap .layout-box:nth-child(3) .layout-conts .title {color:var(--black);}
.portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .typography-wrap {width:100%; height:100%; display:flex; align-items:flex-end; text-align:left; position:relative;}
.portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .typography-wrap .typography-box {width:100%; height:80%; display:flex; flex-direction:column; justify-content:space-between;}
.portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .typography-wrap .typography-box .example {width:100%; position:absolute; left:0; top:35%; transform:translateY(-50%);}
.portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .typography-wrap .typography-box .example > * {display:block;}
.portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .typography-wrap .typography-box .example em {font-size:200px; font-weight:800; letter-spacing:-5px; line-height:1.3;}
.portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .typography-wrap .typography-box .example span {font-size:30px; font-weight:700; letter-spacing:-0.5px; margin-top:5px;}
.portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .typography-wrap .typography-box .example span:first-child {margin-top:0;}
.portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .typography-wrap .typography-box .conts {font-size:var(--font-20); font-weight:500; line-height:1.6; position:absolute; left:0; bottom:0;}
.portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .typography-wrap .typography-box .conts span {display:block;}


@media screen and (max-width:1600px) {
    .portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .typography-wrap .typography-box .example em {font-size:140px;}
    .portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .typography-wrap .typography-box .example span {font-size:24px;}
    .portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .typography-wrap .typography-box .conts {font-size:16px;}
}

@media screen and (max-width:1280px) {
    .portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .typography-wrap .typography-box .example em {font-size:100px;}
    .portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .typography-wrap .typography-box .example span {font-size:18px;}
    .portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .typography-wrap .typography-box .conts {font-size:12px;}
}

@media screen and (max-width:900px) {
    .portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .typography-wrap .typography-box .example em {font-size:140px;}
    .portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .typography-wrap .typography-box .example span {font-size:24px;}
    .portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .typography-wrap .typography-box .conts {font-size:16px;}
}

@media screen and (max-width:648px) {
    .portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .typography-wrap .typography-box .example em {font-size:100px;}
    .portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .typography-wrap .typography-box .example span {font-size:20px;}
    .portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .typography-wrap .typography-box .conts {font-size:12px;}
}

@media screen and (max-width:480px) {
    .portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .typography-wrap .typography-box .example {top:40%;}
    .portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .typography-wrap .typography-box .example em {font-size:60px;}
    .portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .typography-wrap .typography-box .example span {font-size:14px;}
    .portfolio-09 .sec-4 .layout-wrap .layout-box .layout-conts .typography-wrap .typography-box .conts {font-size:10px;}
}



.portfolio-09 .sec-4 .layout-wrap .layout-box:nth-child(4) {position:relative;}
.portfolio-09 .sec-4 .layout-wrap .layout-box .icon-illust {width:100%; height:100%; position:relative;}
.portfolio-09 .sec-4 .layout-wrap .layout-box .icon-illust-wrap {width:100%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
.portfolio-09 .sec-4 .layout-wrap .layout-box .icon-illust-wrap .list {width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 auto;}
.portfolio-09 .sec-4 .layout-wrap .layout-box .icon-illust-wrap .list span {display:block; flex:1;}
.portfolio-09 .sec-4 .layout-wrap .layout-box .icon-illust-wrap .list span img {display:block; max-width:100%;} 
.portfolio-09 .sec-4 .layout-wrap .layout-box .icon-illust-wrap .icon-list {width:90%; max-width:640px;}
.portfolio-09 .sec-4 .layout-wrap .layout-box .icon-illust-wrap .icon-list span {max-width:40px;}
.portfolio-09 .sec-4 .layout-wrap .layout-box .icon-illust-wrap .illust-list {max-width:700px; margin-top:80px;}
.portfolio-09 .sec-4 .layout-wrap .layout-box .icon-illust-wrap .illust-list span {max-width:100px;}


@media screen and (max-width:648px) {
    .portfolio-09 .sec-4 .layout-wrap .layout-box .icon-illust-wrap .icon-list span {max-width:25px;}
    .portfolio-09 .sec-4 .layout-wrap .layout-box .icon-illust-wrap .illust-list {gap:20px; margin-top:50px;}
    .portfolio-09 .sec-4 .layout-wrap .layout-box .icon-illust-wrap .illust-list span {max-width:42px;}
}



.portfolio-09 .sec-5 {width:100%;}
.portfolio-09 .sec-5 .intro {width:100%; position:relative;}
.portfolio-09 .sec-5 .intro .img-box {width:100%; height:0; padding-bottom:calc(900 / 1920 * 100%); position:relative; z-index:1;}
.portfolio-09 .sec-5 .intro .img-box img {width:100%; height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); object-fit:cover;}
.portfolio-09 .sec-5 .intro .title-wrap {width:100%; color:var(--white); margin-top:-90px; position:relative; z-index:10;}
.portfolio-09 .sec-5 .intro .title-wrap .title {font-size:180px; font-weight:700; letter-spacing:-3px; line-height:1; height:180px; display:flex; align-items:center; justify-content:center;}
.portfolio-09 .sec-5 .intro .title-wrap .txt {font-size:30px; margin-top:var(--gap-16); letter-spacing:0; padding:0 var(--gap-24);}

@media screen and (max-width:1280px) {
    .portfolio-09 .sec-5 .intro .title-wrap {margin-top:-60px;}
    .portfolio-09 .sec-5 .intro .title-wrap .title {font-size:120px; height:120px;}
    .portfolio-09 .sec-5 .intro .title-wrap .txt {font-size:var(--font-24);}
}

@media screen and (max-width:768px) {
    .portfolio-09 .sec-5 .intro .title-wrap {margin-top:-40px;}
    .portfolio-09 .sec-5 .intro .title-wrap .title {font-size:80px; height:80px;}
    .portfolio-09 .sec-5 .intro .title-wrap .txt {font-size:var(--font-18);}
}

@media screen and (max-width:480px) {
    .portfolio-09 .sec-5 .intro .title-wrap {margin-top:-30px;}
    .portfolio-09 .sec-5 .intro .title-wrap .title {font-size:60px; height:60px;}
    .portfolio-09 .sec-5 .intro .title-wrap .txt {font-size:11px;}
}


.portfolio-09 .sec-6 {padding:calc(var(--gap-50) * 4) 0;}
.portfolio-09 .sec-6 .conts-wrap .design-box {width:100%;}
.portfolio-09 .sec-6 .conts-wrap .design-box img {display:block; max-width:100%; margin:0 auto;}


.portfolio-09 .sec-7 {background:#eee; position:relative; padding-bottom:calc(var(--gap-50) * 5); overflow:hidden;}
.portfolio-09 .sec-7:before {content:""; width:100%; height:calc(var(--gap-50) * 3); background:#111; position:absolute; left:0; top:0; z-index:0;}
.portfolio-09 .sec-7 .mobile-design {width:90%; max-width:1450px; margin:0 auto; position:relative;}
.portfolio-09 .sec-7 .mobile-design .design-box {position:relative; margin-bottom:var(--gap-50); filter:drop-shadow(0 var(--gap-50) var(--gap-50) rgba(0,0,0,0.25));}
.portfolio-09 .sec-7 .mobile-design .design-box img {position:relative; z-index:10; display:block; max-width:100%; margin:0 auto;}
.portfolio-09 .sec-7 .mobile-design .main-design-wrap {width:30%; max-width:510px; margin:0 auto; position:relative; z-index:10;}
.portfolio-09 .sec-7 .mobile-design .main-design-wrap .design-box {width:100%;}
.portfolio-09 .sec-7 .mobile-design .main-design-wrap .conts-box {width:80%; color:#666; text-align:left; margin:0 auto; padding-top:var(--gap-50);}
.portfolio-09 .sec-7 .mobile-design .main-design-wrap .conts-box em {display:block; font-size:30px; font-weight:800;}
.portfolio-09 .sec-7 .mobile-design .main-design-wrap .conts-box .conts {font-size:20px; line-height:1.6; margin-top:var(--gap-24); width:90%;}
.portfolio-09 .sec-7 .mobile-design .design-wrap {width:100%; position:absolute; left:0; bottom:0; z-index:0; display:flex; justify-content:space-between;}
.portfolio-09 .sec-7 .mobile-design .design-wrap .design-box {width:23%; max-width:320px;}


@media screen and (max-width:1280px) {
    .portfolio-09 .sec-7 .mobile-design .main-design-wrap {width:35%;}
    .portfolio-09 .sec-7 .mobile-design .main-design-wrap .conts-box em {font-size:24px;}
    .portfolio-09 .sec-7 .mobile-design .main-design-wrap .conts-box .conts {width:100%; font-size:16px;}
    .portfolio-09 .sec-7 .mobile-design .design-wrap .design-box {width:27%;}
}

@media screen and (max-width:900px) {
    .portfolio-09 .sec-7 .mobile-design .main-design-wrap {width:70%;}
    .portfolio-09 .sec-7 .mobile-design .main-design-wrap .conts-box {width:100%;}
    .portfolio-09 .sec-7 .mobile-design .design-wrap {position:relative; margin-top:calc(var(--gap-50) * 2);}
    .portfolio-09 .sec-7 .mobile-design .design-wrap .design-box {width:45%;}
}

@media screen and (max-width:768px) {
    .portfolio-09 .sec-7 .mobile-design .main-design-wrap .conts-box em {font-size:20px;}
    .portfolio-09 .sec-7 .mobile-design .main-design-wrap .conts-box .conts {font-size:14px;}
}

@media screen and (max-width:768px) {
    .portfolio-09 .sec-7 .mobile-design .main-design-wrap .conts-box em {font-size:18px;}
    .portfolio-09 .sec-7 .mobile-design .main-design-wrap .conts-box .conts {font-size:12px;}
}


.portfolio-09 .sec-7 .bg-txt {width:94%; max-width:1788px; position:absolute; left:50%; bottom:-3%; transform:translateX(-50%);}
.portfolio-09 .sec-7 .bg-txt span {display:block; width:100%; height:0; padding-bottom:calc(154 / 1788 * 100%); background:url(/img/portfolio/009/master_of_taste.svg) center no-repeat; background-size:cover; font-size:0;}


@media screen and (max-width:900px) {
    .portfolio-09 .sec-7 .bg-txt {bottom:-1%;}
}



.portfolio-09 .sec-8 .design-wrap {width:100%; display:flex;}
.portfolio-09 .sec-8 .design-wrap .lf-box {width:59%;}
.portfolio-09 .sec-8 .design-wrap .lf-box .design-box {width:100%; height:100%; background:var(--brand-color); display:flex; align-items:center; justify-content:center;}
.portfolio-09 .sec-8 .design-wrap .lf-box .design-box span {display:block; width:70%; max-width:800px; filter:drop-shadow(0 20px 40px rgba(0,0,0,0.25));}
.portfolio-09 .sec-8 .design-wrap .lf-box .design-box span img {display:block; max-width:100%; margin:0 auto;}
.portfolio-09 .sec-8 .design-wrap .rt-box {width:41%; display:flex; flex-direction:column;}
.portfolio-09 .sec-8 .design-wrap .rt-box .design-box {flex:1; width:100%;}
.portfolio-09 .sec-8 .design-wrap .rt-box .design-box span {display:block; width:100%; height:0; padding-bottom:100%; position:relative;}
.portfolio-09 .sec-8 .design-wrap .rt-box .design-box span img {display:block; width:100%; height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); object-fit:cover;}
.portfolio-09 .sec-8 .design-wrap .rt-box .design-box:nth-child(1) {background:#111;}
.portfolio-09 .sec-8 .design-wrap .rt-box .design-box:nth-child(2) {background:var(--white);}



.portfolio-09 .sec-9 {padding:calc(var(--gap-50) * 5) 0 calc((var(--gap-50) * 4) + var(--gap-50) + ((var(--gap-40) * 2) * 2)) 0; background:#000; position:relative;}
.portfolio-09 .sec-9:before,
.portfolio-09 .sec-9:after {content:""; width:100%; height:calc(var(--gap-40) * 2); position:absolute; left:0;}
.portfolio-09 .sec-9:before {background:var(--white); bottom:calc(var(--gap-50) + ((var(--gap-40) * 2)));}
.portfolio-09 .sec-9:after {background:var(--brand-color); bottom:0;}
.portfolio-09 .sec-9 .title-wrap {width:100%; color:var(--white); margin-bottom:calc(var(--gap-50) * 2);}
.portfolio-09 .sec-9 .title-wrap h3 {font-size:var(--font-30); margin-bottom:var(--gap-40);}
.portfolio-09 .sec-9 .title-wrap .conts {font-size:var(--font-20); line-height:1.6;}
.portfolio-09 .sec-9 .conts-wrap {width:100%;}
.portfolio-09 .sec-9 .conts-wrap .design-wrap {width:90%; max-width:1200px; margin:0 auto;}
.portfolio-09 .sec-9 .conts-wrap .design-wrap .design-box {margin-top:var(--gap-50);}
.portfolio-09 .sec-9 .conts-wrap .design-wrap .design-box img {max-width:100%; display:block; margin:0 auto;}
.portfolio-09 .sec-9 .conts-wrap .design-wrap .design-box:nth-child(1) {width:100%; margin-top:0;}
.portfolio-09 .sec-9 .conts-wrap .design-wrap .design-box:nth-child(n+2) {width:84%; max-width:1000px; margin-left:auto; margin-right:auto;}
.portfolio-09 .sec-9 .conts-wrap .point-design-box {width:100%; max-width:1578px; margin:0 auto; margin-top:calc(var(--gap-50) * 2);}
.portfolio-09 .sec-9 .conts-wrap .point-design-box span {display:block;}
.portfolio-09 .sec-9 .conts-wrap .point-design-box span img {display:block; max-width:100%;}



.portfolio-09 .sec-10 {padding:calc(var(--gap-50) * 3) 0 calc(var(--gap-50) * 5) 0;}
.portfolio-09 .sec-10 .title-wrap {width:100%; color:var(--white); margin-bottom:calc(var(--gap-50) * 2); text-align:left; position:absolute; left:0; top:0;}
.portfolio-09 .sec-10 .title-wrap h3 {font-size:var(--font-30); margin-bottom:var(--gap-40);}
.portfolio-09 .sec-10 .title-wrap .conts {font-size:var(--font-20); line-height:1.6;}
.portfolio-09 .sec-10 .conts-wrap {width:100%; max-width:1560px; margin:0 auto; display:flex; align-items:flex-end; gap:100px; flex-direction:row-reverse; justify-content:space-between; position:relative;}
.portfolio-09 .sec-10 .conts-wrap .design-wrap {width:100%;}
.portfolio-09 .sec-10 .conts-wrap .design-wrap .design-box {width:100%;}
.portfolio-09 .sec-10 .conts-wrap .design-wrap .design-box img {max-width:100%; display:block;}
.portfolio-09 .sec-10 .conts-wrap .lf-box {width:65%; max-width:1000px;}
.portfolio-09 .sec-10 .conts-wrap .lf-box .design-wrap .design-box img {margin:0 auto;}
.portfolio-09 .sec-10 .conts-wrap .rt-box {width:calc(35% - 100px);}
.portfolio-09 .sec-10 .conts-wrap .rt-box .design-wrap {width:100%;}
.portfolio-09 .sec-10 .conts-wrap .rt-box .design-wrap .design-box {margin-top:280px; width:80%; max-width:320px;}
.portfolio-09 .sec-10 .conts-wrap .rt-box .design-wrap .design-box:first-child {margin-top:0; margin-left:auto; margin-right:0;}

@media screen and (max-width:1280px) {
    .portfolio-09 .sec-10 .conts-wrap {gap:calc(var(--gap-50) * 2); flex-direction:column;}
    .portfolio-09 .sec-10 .title-wrap {position:relative; left:0; text-align:center;}
    .portfolio-09 .sec-10 .conts-wrap .lf-box,
    .portfolio-09 .sec-10 .conts-wrap .rt-box {width:100%; margin:0 auto;}
    .portfolio-09 .sec-10 .conts-wrap .rt-box .design-wrap {display:flex; gap:var(--gap-32);}
    .portfolio-09 .sec-10 .conts-wrap .rt-box .design-wrap .design-box {margin-top:0; margin:0 auto; flex:1;}
}



.portfolio-09 .sec-11 {width:100%;}
.portfolio-09 .sec-11 .conts-wrap {width:100%; position:relative; padding-bottom:calc(650 / 1920 * 100%);}
.portfolio-09 .sec-11 .conts-wrap .bg-box {width:100%;}
.portfolio-09 .sec-11 .conts-wrap .bg-box span {display:block; width:100%; height:0; padding-bottom:calc(650 / 1920 * 100%); position:relative;}
.portfolio-09 .sec-11 .conts-wrap .bg-box span img {display:block; width:100%; height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); object-fit:cover;}

.portfolio-09 .sec-11 .conts-wrap .conts-box {width:90%; height:100%; position:absolute; left:50%; top:0; transform:translateX(-50%); display:flex; align-items:center; justify-content:center;}
.portfolio-09 .sec-11 .conts-wrap .conts-box .conts-inner {width:100%; display:flex; align-items:flex-end; justify-content:space-between; gap:var(--gap-24); flex-direction:row-reverse;}
.portfolio-09 .sec-11 .conts-wrap .conts-box .conts-inner .design-wrap {width:calc(50% - var(--gap-32)); max-width:740px; display:flex; align-items:center; gap:var(--gap-32); justify-content:space-between;}
.portfolio-09 .sec-11 .conts-wrap .conts-box .conts-inner .design-wrap .design-box {flex:1; max-width:320px;}
.portfolio-09 .sec-11 .conts-wrap .conts-box .conts-inner .design-wrap .design-box span {display:block; width:fit-content; filter:drop-shadow(0 var(--gap-50) var(--gap-50) rgba(0,0,0,0.2));}
.portfolio-09 .sec-11 .conts-wrap .conts-box .conts-inner .design-wrap .design-box span img {display:block; max-width:100%;}
.portfolio-09 .sec-11 .conts-wrap .conts-box .conts-inner .title-wrap {width:50%;}
.portfolio-09 .sec-11 .conts-wrap .conts-box .conts-inner .title-wrap span img {max-width:100%;}


@media screen and (max-width:480px) {
    .portfolio-09 .sec-11 .conts-wrap .conts-box .conts-inner .title-wrap span {width:80%; display:block;}
    .portfolio-09 .sec-11 .conts-wrap .conts-box .conts-inner .design-wrap {gap:10px;}
}






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