/* work top visual */
.work_visual {
    padding-top: 310px;
    padding-bottom: 200px;
}
.work_visual p {
    font-family: 'FF Good Pro', 'Spoqa Han Sans Neo', '맑은 고딕', Dotum;
    font-weight: bold;
    font-size: 24px;
    margin-bottom: 26px;
}
.work_visual .main_title {
    font-size: 60px;
    font-weight: 300;
    line-height: 1.5;
}

/* work detail */
.work_detail {
    padding-bottom: 160px;
    padding-top: 0;
}
.work_detail.center {
    padding-top: 0;
}
.work_detail.bottom {
    padding-top: 0;
    padding-bottom: 240px;
}
.work_detail .content_layout {
    display: flex;
    justify-content: space-between;
}
.work_detail .content_layout img {
    width: calc(100% - 420px);
    object-fit: cover;
}
.work_detail .right_area {
    width: 420px;
    padding-left: 4.69vw;
}
.work_detail .right_area .main_text {
    margin-top: 32px;
    margin-bottom: 32px;
    font-family: 'FF Good Pro', 'Spoqa Han Sans Neo', '맑은 고딕', Dotum;
    font-size: 42px;
    font-weight: bold;
    line-height: 1.3;
}
.work_detail .right_area .year {
    font-size: 20px;
    margin-bottom: 40px;
}
.work_detail .right_area .desc {
    word-break: keep-all;
    margin-bottom: 80px;
    color: #757575;
    line-height: 1.8;
}
/* .work_detail .right_area .more_btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #101010;
} */
.work_detail .right_area .more_btn {
    display: flex;
    width: 200px;
    position: relative;
    padding-top: 15px;
    align-items: center;
}
.work_detail .right_area .more_btn span {
    font-family: 'FF Good Pro', 'Spoqa Han Sans Neo', '맑은 고딕', Dotum;
    font-size: 18px;
    font-weight: bold;
}
.work_detail .right_area .more_btn svg {
    width: 18px;
    /* margin-left: 20px;
    transform: rotate(270deg); */
}

/* work list */
.work_list {
    padding-top: 0;
    padding-bottom: 0;
}
.work_list ul {
    display: flex;
    justify-content: space-between;
    margin-bottom: 160px;
    overflow: hidden;
}
.work_list li {
    position: relative;
    width: 30%;
    float: left;
    transition: transform .25s cubic-bezier(.215,.61,.355,1),-webkit-transform .25s cubic-bezier(.215,.61,.355,1);
}
.work_list li img {
    width: 100%;
}
.work_list li img.hover {
    display: none;
}
.work_list li:not(:last-child) {
    margin-right: 0;
}
.work_list li:hover {
    transform: scale(.9);
}
.work_list li:hover .de {
    display: none;
}
.work_list li:hover .hover {
    display: block;
}
.work_list li .text_wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    padding: 1.56vw;
}
.work_list li .text {
    color: #fff;
    line-height: 1.5;
    font-size: 16px;
}
.work_list li .text .brand {
    display: block;
}

.work_list li .text_hover {
    display: none;
}

.work_list li:hover .text {
    display: none;
}
.work_list li:hover .text_hover {
    display: block;
    line-height: 38px;
    font-size: 30px;
    font-weight: bold;
    color: #fff;
}
.work_list li:hover .text_hover .brand {
    display: block;
    line-height: 24px;
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 18px;
}

.work_list li:hover .text_wrap{
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* work history */
.work_history {
    padding-top: 0;
    padding-bottom: 160px;
}
.work_history li {
    position: relative;
    padding: 50px 0;
    border-top: 1px solid #dbdde3;
    transition: background-color 400ms, color 400ms, padding 400ms;
    will-change: background-color, color;
}
.work_history li:hover {
    padding: 50px;
}
.work_history li::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background-color: #000;
    transition: height 400ms cubic-bezier(0.77, 0, 0.175, 1);
    will-change: height;
}
.work_history li:hover::before {
    height: 100%;
}
.work_history li:last-child {
    border-bottom: 1px solid #dbdde3;
}
.work_history li p, .work_history li span {
    position: relative;
    transition: color 400ms;
    will-change: color;
    z-index: 9;
}
.work_history li:hover p, .work_history li:hover span {
    color: #fff;
}
.work_history li .title {
    font-size: 34px;
    margin-bottom: 35px;
    color: #2c2c2c;
    word-break: keep-all;
    line-height: 1.5;
}
.work_history li span {
    font-size: 20px;
    font-weight: 500;
    color: #000;
}
.work_history li .create {
    color: #757575 !important;
    margin-left: 40px;
}
.work_history li .layout {
    float: right;
}



.work_d_visual {
    position: relative;
}
.work_d_visual img {
    width: 100%;
}
.work_d_visual .visual_text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.work_d_visual .visual_text .content_layout {
    font-family: 'FF Good Pro', 'Spoqa Han Sans Neo', '맑은 고딕', Dotum;
    display: flex;
    flex-flow: column;
    height: 100%;
    align-items: flex-start;
    justify-content: center;
}
.work_d_visual .visual_text .content_layout .title {
    font-size: 50px;
    font-weight: bold;
    color: #fff;
}
.work_d_visual .visual_text .content_layout a {
    margin-top: 120px;
    font-size: 18px;
    color: #fff;
    font-weight: bold;
    width: 320px;
    padding: 18px 0;
}
.work_d_visual .visual_text .content_layout a::after {
    background-color: #fff;
}
.work_d_visual .visual_text .content_layout a svg {
    width: 16px;
    color: #fff;
}

.work_d_info {
    padding: 145px 0;
    background-color: #fff;
}
.work_d_info.vans {
    padding: 145px 0 0;
}

.work_d_info h2 {
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 80px;
}
.work_d_info .info_wrap {
    display: flex;
    text-transform: uppercase;
}
.work_d_info .left_area {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.work_d_info .left_area > dl {
    margin-right: 102px;
}
.work_d_info > dl:not(:last-child) {
    /* margin-right: 4.8vw; */
}
.work_d_info .left_area > dl:last-child {
    margin-top: 100px;
    line-height: 1.8;
}
.work_d_info .left_area > dl:last-child dd {
    font-size: 18px;
    word-break: keep-all;
}
.work_d_info .right_area > dl > dt {
    width: 312px;
}
.work_d_info div > dl > dt {
    font-size: 16px;
    font-weight: bold;
    width: 260px;
    border-bottom: 3px solid #000;
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.work_d_info div > dl > dd {
    line-height: 1.5;
    word-break: keep-all;
}

.work_d_info .person_list {
    overflow: hidden;
    margin-bottom: 10px;
}
.work_d_info .person_list.one dl {
    width: 25%;
    float: left;
}
.work_d_info .person_list.one dl dd {
    width: auto;
}
.work_d_info .person_list dl dt {
    margin-bottom: 5px;
}
.work_d_info .person_list dl dd {
    float: left;
    width: 25%;
    margin: 3px 0;
}
.work_d_info .info_image {
    text-align: center;
    padding: 160px 0 100px;
}
.work_d_info .info_image img {
    width: 100%;
}
.work_d_info .info_image > div {
    display: inline-block;
}
.detail_img_list {
    max-width: 1920px;
    margin: 0 auto;
}
.detail_img_list img {
    width: 100%;
}

.detail_img_list .one_section {
    background-size: 100%;
    text-align: center;
}
.detail_img_list.timber .one_section {
    padding-top: 51.67vw;
    background: url(/assets/04_Work/timberland/Ref_timberland_pc_img_02.png) no-repeat;
}
.detail_img_list.nfyo .one_section {
    padding-top: 6.25vw;
    padding-bottom: 6.25vw;
}

.detail_img_list .one_section > div {
    max-width: 1300px;
    width: 67.71vw;
    margin: 0 auto;
}
.detail_img_list .one_section img {
    opacity: 0;
}
.detail_img_list .two_section {
    background: url(/assets/04_Work/timberland/Ref_timberland_pc_img_05.png) no-repeat;
    background-size: 100%;
    height: 85.42vw;
    max-height: 1652px;
    padding-top: 20.31vw;
    box-sizing: border-box;
}
.detail_img_list .two_section img {
    width: 37.50vw;
    max-width: 720px;
    display: inline-block;
    opacity: 0;
}
.detail_img_list .two_section > div > div  img:nth-child(1){
    margin-right: 50px;
}
.detail_img_list .two_section .right {
    text-align: right;
}

/* 3단 */
.detail_img_list .three_section {
    position: relative;
    background-size: 100%;
}

.detail_img_list.timber .three_section {
    background: url(/assets/04_Work/timberland/Ref_timberland_pc_img_10.png) no-repeat;
    min-height: 1360px;
}
.detail_img_list.nfyo .three_section {
    background: url(/assets/04_Work/nfyo/Ref_TNF_pc_img_01.png) no-repeat;
    background-size: 100% 100%;
}
.detail_img_list.nfyo .three_section.second {
    background: url(/assets/04_Work/nfyo/Ref_TNF_pc_img_09.png) no-repeat;
    padding-bottom: 9.38vw;
}
.detail_img_list .three_section .shoes {
    width: 26%;
    max-width: 500px;
    position: absolute;
    top: 13.54vw;
    right: 18.75vw;
    /* top: 260px;
    right: 360px; */
    z-index: 1;
}
.detail_img_list .three_section .shoes img {
    opacity: 0;
}
.detail_img_list .three_section .detail_wrap {
    display: flex;
    justify-content: center;
    align-items: start;
    max-width: 1620px;
    margin: 0 auto;
}

.detail_img_list.timber .three_section .detail_wrap.top {
    padding-top: 32.50vw;
}
.detail_img_list.nfyo .three_section .detail_wrap.top {
    padding-top: 8.85vw;
}

.detail_img_list .three_section .detail_wrap.top .left, .detail_img_list .three_section .detail_wrap.top .right{
    padding-top: 22.92vw;
    /* padding-top: 440px; */
}
.detail_img_list.nfyo .three_section.second .detail_wrap.top .left {
    padding-top: 0;
}
.detail_img_list.nfyo .three_section.second .detail_wrap.top .center {
    padding-top: 15.63vw;
}
.detail_img_list.nfyo .three_section.second .detail_wrap.top .right {
    padding-top: 1.56vw;
}

.detail_img_list .three_section .detail_wrap img {
    width: auto;
    max-width: 580px;
    opacity: 0;
}
.detail_img_list .three_section .detail_wrap.bottom {
    margin-top: 150px;
}


.detail_img_list.nfyo .mokup_section {
    position: relative;
    background: url(/assets/04_Work/nfyo/Ref_TNF_pc_img_14.png) no-repeat;
    background-size: 100%;
    padding-top: 13.02vw;
}
.detail_img_list.nfyo .mokup_section.second {
    padding-top: 0;
    background: url(/assets/04_Work/nfyo/Ref_TNF_pc_img_16.png) no-repeat;
}

.detail_img_list.nfyo .mokup_section .layer_top {
    position: absolute;
    left: 0;
    bottom: 20.31vw;
}
.detail_img_list.nfyo .mokup_section .layer_left {
    position: absolute;
    left: 6.41vw;
    top: 56.61vw;
}
.detail_img_list.nfyo .mokup_section .layer_left img, .detail_img_list.nfyo .mokup_section .layer_right img {
    max-width: 32.29vw;
}
.detail_img_list.nfyo .mokup_section .layer_right {
    position: absolute;
    right: 8.54vw;
    top: 54.17vw;
}


/* 반스 */
.detail_img_list.vans .one_section {
    background: url(/assets/04_Work/vans/Ref_Vans_pc_img_02.png) no-repeat;
    background-size: 100%;
    background-position: top;
    padding-top: 23.44vw;
    margin-bottom: 11.98vw;
    position: relative;
}
.detail_img_list.vans .one_section .top_shoes {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    
}
.detail_img_list.vans .one_section .top_shoes img {
    width: 34.90vw;
}
.detail_img_list.vans .one_section > div {
    max-width: 100%;
    width: 100%;
}

.detail_img_list.vans .one_section.second {
    background: url(/assets/04_Work/vans/Ref_Vans_pc_img_07.png) no-repeat;
    background-size: 100%;
    background-position: top;
    padding-top: 7.29vw;
    margin-bottom: 13.54vw;
}
.detail_img_list.vans .one_section.second img {
    width: auto;
    margin: 0 auto;
}

.detail_img_list.vans .three_section {
    background: url(/assets/04_Work/vans/Ref_Vans_pc_img_09.png) no-repeat;
    background-size: 100%;
    padding-top: 14.58vw;
    padding-bottom: 14.58vw;
}

@media screen and (min-width: 1920px) {
    .detail_img_list.timber .one_section {
        padding-top: 990px;
    }
    .detail_img_list.timber .three_section .detail_wrap.top {
        padding-top: 624px;
    }
    .detail_img_list.timber .three_section .detail_wrap.top .left, .detail_img_list .three_section .detail_wrap.top .right{
        padding-top: 440px;
    }
    .detail_img_list.timber .three_section .shoes {
        top: 260px;
        right: 360px;
    }
}
@media screen and (max-width: 768px) {
    .work_visual {
        padding-top: 38.89vw;
        padding-bottom: 33.33vw;
    }
    .work_visual p {
        font-size: 4.44vw;
        margin-bottom: 6.67vw;
    }
    .work_visual .main_title {
        font-size: 8.33vw;
    }
    
    .work_detail {
        padding: 0;
    }
    .work_detail.bottom {
        padding-bottom: 33.33vw;
    }
    .work_detail.center {
        padding-bottom: 33.33vw;
    }
    .work_detail .content_layout {
        flex-direction: column;
        padding: 0;
    }
    .work_detail .content_layout img {
        width: 100%;
    }
    .work_detail .right_area {
        width: 100%;
        padding: 0 5.56vw;
        box-sizing: border-box;
    }
    .work_detail .right_area .main_text {
        margin-top: 10.00vw;
        margin-bottom: 6.67vw;
        font-size: 6.94vw;
    }
    .work_detail .right_area .year {
        margin-bottom: 6.67vw;
        font-size: 3.89vw;
    }
    .work_detail .right_area .desc {
        margin-bottom: 5.56vw;
        font-size: 3.61vw;
    }
    .work_detail .right_area .more_btn span {
        font-size: 3.61vw;
    }
    .work_detail .right_area .more_btn svg {
        width: 2.78vw;
        margin-left: 3.47vw;
    }
    .work_list {
        padding: 33.33vw 0;
    }
    .work_list ul {
        flex-direction: column;
        margin-bottom: 0;
    }
    .work_list li {
        width: 100%;
        margin-bottom: 11.11vw;
    }
    .work_list li img {
        width: 69.44vw;
    }
    .work_list li .text_wrap {
        width: 69.44vw;
        padding: 4.17vw;
        box-sizing: border-box;
    }
    .work_list li .text {
        font-size: 3.33vw;
    }
    .work_list li:hover .text {
        font-size: 4.5vw;
        text-align: center;
    }
    .work_list li:hover .text .brand {
        font-size: 3.8vw;
    }
    .work_list ul:first-child li:nth-child(even) {
        text-align: right;
    }
    .work_list ul:first-child li:nth-child(even) .text_wrap, .work_list ul:last-child li:nth-child(odd) .text_wrap {
        left: inherit;
    }
    .work_list ul:last-child li:nth-child(odd) {
        text-align: right;
    }
    .work_list ul:first-child li:nth-child(even) .text, .work_list ul:last-child li:nth-child(odd) .text {
        /* padding-left: 19.72vw; */
        text-align: left;
    }
    .work_list ul:first-child li:hover:nth-child(even) .text, .work_list ul:last-child li:hover:nth-child(odd) .text {
        text-align: center;
    }
    .work_list ul:last-child li:last-child {
        margin-bottom: 0;
    }

    .work_history {
        padding-bottom: 33.33vw;
    }
    .work_history li {
        padding: 11.11vw 0;
    }
    .work_history li:hover {
        padding: 6.94vw;
    }
    .work_history li .layout {
        display: inline-block;
        font-size: 3.33vw;
        margin-bottom: 3.33vw;
        float: none;
    }
    .work_history li .title {
        font-size: 5.56vw;
        margin-bottom: 4.44vw;
    }
    .work_history li span {
        font-size: 3.33vw;
    }
    .work_history li .create {
        margin-left: 5.56vw;
    }

    .work_d_visual .visual_text .content_layout .title {
        margin-top: 100px;
        font-size: 8.89vw;
    }
    .work_d_visual .visual_text .content_layout a {
        font-size: 4.44vw;
        width: 100%;
    }
    .work_d_info {
        padding: 20.83vw 0;
    }
    .work_d_info h2 {
        font-size: 7.22vw;
        word-break: keep-all;
        line-height: 1.2;
        font-weight: normal;
        margin-bottom: 13.89vw;
    }
    .work_d_info .info_wrap {
        flex-direction: column;
    }
    .work_d_info .left_area {
        flex-direction: column;
    }
    .work_d_info .left_area > dl {
        margin-right: 0;
        margin-bottom: 9.72vw;
    }
    .work_d_info div > dl > dt {
        width: 100%;
        font-size: 4.44vw;
    }
    .work_d_info div > dl > dd {
        font-size: 4.17vw;
    }
    .work_d_info .left_area > dl:last-child {
        margin-top: 0;
    }
    .work_d_info .left_area > dl:last-child dd {
        font-size: 4.17vw;
    }
    .work_d_info .right_area {
        display: none;
    }
    .work_d_info .info_image {
        padding: 20.83vw 0;
    }

    .detail_img_list.timber .one_section {
        background: url(/assets/04_Work/timberland/Ref_timberland_mc_img_02.png) no-repeat;
        background-size: 100%;
        padding-top: 145.83vw;
    }
    .detail_img_list .one_section > div {
        width: 100%;
    }
    .detail_img_list .two_section {
        background: none;
        height: auto;
        max-height: inherit;
        padding-top: 0;
    }
    .detail_img_list .two_section img {
        width: 100%;
        max-width: auto;
        opacity: 1;
    }
    .detail_img_list .two_section > div img:nth-child(1){
        margin-right: 0;
    }
    .detail_img_list .two_section > div.right {
        text-align: right;
    }

    .detail_img_list.timber .three_section {
        position: relative;
        background: url(/assets/04_Work/timberland/Ref_timberland_mc_img_05.png) no-repeat;
        background-size: 100%;
        min-height: 1360px;
    }
    .detail_img_list .three_section .shoes {
        width: 62%;
        top: 73.33vw;
        right: 9.31vw;
    }
    .detail_img_list .three_section .shoes img {
        opacity: 0;
    }
    .detail_img_list .three_section .detail_wrap {
        display: flex;
        justify-content: center;
        align-items: start;
        max-width: 1620px;
        margin: 0 auto;
    }
    .detail_img_list.timber .three_section .detail_wrap.top {
        padding-top: 116.67vw;
    }
    .detail_img_list .three_section .detail_wrap.top .left{
        padding-top: 0;
    }
    .detail_img_list .three_section .detail_wrap.top .left > div:nth-child(2) {
        padding-top: 29.86vw;
    }
    .detail_img_list .three_section .detail_wrap.top .right {
        padding-top: 29.86vw;
    }
    .detail_img_list .three_section .detail_wrap.top .right > div:nth-child(2){
        padding-top: 29.86vw;
        padding-bottom: 62vw;
    }
    
    .detail_img_list .three_section .detail_wrap img {
        width: 100%;
        max-width: 100%;
    }
    .detail_img_list .three_section .detail_wrap.bottom {
        margin-top: 20.83vw;
    }


    /* nfyo */
    .detail_img_list.nfyo .one_section {
        background: none;
        margin-top: 9.38vw;
    }
    .detail_img_list.nfyo .three_section {
        padding-top: 34.03vw;
        background: url(/assets/04_Work/nfyo/Ref_TNF_mc_img_01.png) no-repeat;
        background-size: 100%;
    }
    .detail_img_list.nfyo .three_section .detail_wrap.top .right > div:nth-child(2) {
        padding-top: 0;
        padding-bottom: 0;
    }
    .detail_img_list.nfyo .three_section.second {
        background: url(/assets/04_Work/nfyo/Ref_TNF_mc_img_09.png) no-repeat;
        background-size: 100%;
        padding-top: 23.61vw;
        padding-bottom: 133.33vw;
    }
    .detail_img_list.nfyo .three_section.second .detail_wrap.top {
        padding-top: 0;
    }
    .detail_img_list.nfyo .three_section.second .detail_wrap.top .right {
        padding-top: 17.36vw;
    }
    .detail_img_list.nfyo .two_area {
        position: relative;
        margin-bottom: 19.44vw;
    }
    .detail_img_list.nfyo .two_area img {
        max-width: 50.00vw;
    }
    .detail_img_list.nfyo .two_area img:last-child {
        position: absolute;
        right: 0;
        top: 0;
    }
    .detail_img_list.nfyo .three_section .bottom {
        position: absolute;
        bottom: 20.83vw;
    }
    .detail_img_list.nfyo .mokup_section {
        position: relative;
        background: url(/assets/04_Work/nfyo/Ref_TNF_mc_img_14.png) no-repeat;
        background-size: 100%;
        padding-top: 41.67vw;
    }
    .detail_img_list.nfyo .mokup_section.second {
        margin-top: 33.33vw;
        padding-top: 0;
        background: url(/assets/04_Work/nfyo/Ref_TNF_mc_img_16.png) no-repeat;
        background-size: 100%;
        padding-top: 22.22vw;
        padding-bottom: 22.22vw;
    }
    
    .detail_img_list.nfyo .mokup_section .layer_top {
        position: absolute;
        left: 0;
        bottom: 20.31vw;
    }
    .detail_img_list.nfyo .mokup_section .layer_left {
        position: absolute;
        left: 6.41vw;
        top: 56.61vw;
    }
    .detail_img_list.nfyo .mokup_section .layer_left img, .detail_img_list.nfyo .mokup_section .layer_right img {
        max-width: 32.29vw;
    }
    .detail_img_list.nfyo .mokup_section .layer_right {
        position: absolute;
        right: 8.54vw;
        top: 54.17vw;
    }

    /* 반스 */
    .detail_img_list.vans .one_section {
        background: url(/assets/04_Work/vans/Ref_Vans_mc_img_02.png) no-repeat;
        background-size: 100%;
        background-position: top;
        margin-top: 34.72vw;
        padding-top: 17.36vw;
        margin-bottom: 0;
        position: relative;
    }
    .detail_img_list.vans .one_section .top_shoes {
        top: -36.11vw;
    }
    .detail_img_list.vans .one_section .top_shoes img {
        width: 69.44vw;
    }

    .detail_img_list.vans .one_section.second {
        background: url(/assets/04_Work/vans/Ref_Vans_mc_img_05.png) no-repeat;
        background-size: 100%;
        background-position: top;
        padding-top: 16.67vw;
        margin-bottom: 33.33vw;
    }
    .detail_img_list.vans .one_section.second img {
        width: auto;
        margin: 0 auto;
    }

    .detail_img_list.vans .three_section {
        background: url(/assets/04_Work/vans/Ref_Vans_mc_img_07.png) no-repeat;
        background-size: 100%;
        padding-top: 29.86vw;
        padding-bottom: 14.58vw;
    }

    .detail_img_list.vans .three_section .detail_wrap.top .left > div:nth-child(2) {
        padding-top: 8.33vw;
        padding-bottom: 8.33vw;
    }
    
    .detail_img_list.vans .three_section .detail_wrap.top .right > div:nth-child(2) {
        padding-top: 0;
        padding-bottom: 16.67vw;
    }
}