/* ================================== S::detail ======================================== */ .project_detail_component{} .project_detail_component #projectDtlWrap{} #projectDtlWrap .dtl_btns_box{width: 100%;max-width: 1920px;margin: 0 auto;padding: 80px 100px;display: flex;align-items: center;justify-content: center;} #projectDtlWrap .dtl_btns_box .dtl_btns{} #projectDtlWrap .dtl_btns_box .dtl_btns .btns_name{display: inline-block;font-size: var(--fs-30);font-weight: 500;line-height: var(--lh-42);color: var(--color-blue-txt);transition: text-shadow .25s;} #projectDtlWrap .dtl_btns_box .dtl_btns:hover .btns_name{text-shadow: .45px 0 0 currentColor, -.45px 0 0 currentColor, 0 .45px 0 currentColor, 0 -.45px 0 currentColor, 0 0 6px rgba(255,255,255,.45), 0 0 14px rgba(255,255,255,.35);} #projectDtlWrap .dtl_btns_box .dtl_btns .btns_name .txt_arrow{display: inline-block;font-size: var(--fs-30);font-weight: 500;line-height: var(--lh-42);color: var(--color-blue-txt);transform: translateX(0);transition: transform .25s;} #projectDtlWrap .dtl_btns_box .dtl_btns:hover .btns_name .txt_arrow{transform: translateX(-5px);} /* ================================== S::detail tamplete 01 ======================================== */ #projectDtlWrap .dtl_tmp_01{} #projectDtlWrap .dtl_tmp_01 .dtl_sect{} #projectDtlWrap .dtl_tmp_01 .dtl_sect .sect_inner{width: 100%;max-width: 1920px;margin: 0 auto;padding: 128px 0;box-sizing: border-box;} #projectDtlWrap .dtl_tmp_01 .dtl_sect .dtl_img_box{} #projectDtlWrap .dtl_tmp_01 .dtl_sect .dtl_img_box .top_img_box{width: 100%;aspect-ratio: 1440 / 960;line-height: 0;} #projectDtlWrap .dtl_tmp_01 .dtl_sect .dtl_img_box .top_img_box img{width: 100%;height: 100%;object-fit: cover;object-position: center;} #projectDtlWrap .dtl_tmp_01 .dtl_sect .dtl_img_box .img_box{width: 100%;line-height: 0;} #projectDtlWrap .dtl_tmp_01 .dtl_sect .dtl_img_box .img_box img{width: 100%;} #projectDtlWrap .dtl_tmp_01 .dtl_sect .dtl_vod_box .vod_box{width: 100%;line-height: 0;} #projectDtlWrap .dtl_tmp_01 .dtl_sect .dtl_vod_box .vod_box video{width: 100%;} #projectDtlWrap .dtl_tmp_01 .dtl_sect .dtl_mockup_box .imac_mockup{position: relative;width: 100%;max-width: 1100px;margin: 0 auto;} #projectDtlWrap .dtl_tmp_01 .dtl_sect .dtl_mockup_box .imac_mockup > img{display: block;width: 100%;height: auto;} #projectDtlWrap .dtl_tmp_01 .dtl_sect .dtl_mockup_box .imac_screen{position: absolute;left: 4.1%;top: 5%;width: 91.8%;height: 62.2%;overflow: hidden;background: #fff;} #projectDtlWrap .dtl_tmp_01 .dtl_sect .dtl_mockup_box .imac_screen .mockup_vod{display: block;width: 100%;height: 100%;object-fit: cover;} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect01 .sect_inner{max-width: 100%;padding-top: 0;} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect02 .sect_inner{padding: 32px 64px;} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect02 .dtl_txt_box{} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect02 .dtl_txt_box .txt_top_box{display: inline-flex;flex-direction: column;align-items: flex-end;} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect02 .dtl_txt_box .tit_box{} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect02 .dtl_txt_box .tit_box .dtl_tit{font-size: var(--fs-48);font-weight: 500;line-height: var(--lh-56);color: var(--color-blue-txt);} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect02 .dtl_txt_box .cate_box{} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect02 .dtl_txt_box .tit_box + .cate_box{margin-top: 48px;} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect02 .dtl_txt_box .cate_box .dtl_cate{font-size: var(--fs-32);font-weight: 500;line-height: var(--lh-40);color: var(--color-green);} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect02 .dtl_txt_box .txt_bottom_box{} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect02 .dtl_txt_box .txt_top_box + .txt_bottom_box{margin-top: 304px;} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect02 .dtl_txt_box .desc_box{text-align: right;} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect02 .dtl_txt_box .desc_box .dtl_desc{font-size: var(--fs-24);font-weight: 500;line-height: var(--lh-34);color: var(--color-blue-txt);} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect02 .dtl_txt_box .tit_box, #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect02 .dtl_txt_box .cate_box, #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect02 .dtl_txt_box .desc_box{overflow:hidden;} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect02 .dtl_txt_box .dtl_tit, #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect02 .dtl_txt_box .dtl_cate{display:block;will-change:transform,opacity;} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect02 .dtl_txt_box .dtl_desc_stack{display:block;will-change:transform;} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect02 .dtl_txt_box .dtl_desc{display:block;} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect04 .dtl_vod_box .vod_box{text-align: right;} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect05 .sect_inner{padding: 128px 64px;} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect05 .dtl_img_box .img_box{border-radius: 10px;overflow: hidden;} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect05 .dtl_img_box .img_box + .img_box{margin-top: 72px;} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect06 .sect_inner{max-width: 1440px;padding: 128px 64px;} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect06 .dtl_img_box .img_list{display: flex;justify-content: center;gap: 80px;flex-wrap: nowrap;} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect06 .dtl_img_box .img_list .img_item{width: calc((100%/4) - (240px/4));} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect06 .dtl_img_box .img_list .img_item:nth-child(2){margin-top: 250px;} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect06 .dtl_img_box .img_list .img_item:nth-child(3){margin-top: 100px;} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect06 .dtl_img_box .img_list .img_item:nth-child(4){margin-top: 180px;} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect06 .dtl_img_box .img_box{border-radius: 10px;overflow: hidden;} @media (max-width: 1920px){} @media (max-width: 1680px){} @media (max-width: 1440px){ #projectDtlWrap .dtl_tmp_01 .dtl_sect .dtl_mockup_box .imac_mockup{max-width: 1024px;} } @media (max-width: 1280px){ #projectDtlWrap .dtl_tmp_01 .dtl_sect .dtl_mockup_box .imac_mockup{max-width: 768px;} } @media (max-width: 1080px){ #projectDtlWrap .dtl_tmp_01 .dtl_sect .sect_inner{padding: 96px 0;} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect02 .sect_inner{padding: 24px;} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect02 .dtl_txt_box .txt_top_box + .txt_bottom_box{margin-top: 144px;} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect05 .sect_inner{padding: 96px 24px;} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect06 .sect_inner{padding: 96px 24px;} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect06 .dtl_img_box .img_list{gap: 48px;} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect06 .dtl_img_box .img_list .img_item{width: calc((100%/4) - (144px/4));} #projectDtlWrap .dtl_btns_box{padding: 64px 24px;} } @media (max-width: 960px){ #projectDtlWrap .dtl_tmp_01 .dtl_sect .dtl_mockup_box .imac_mockup{max-width: 480px} } @media (max-width: 768px){ #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect02 .dtl_txt_box .tit_box .dtl_tit{font-size: var(--fs-28);line-height: var(--lh-36);} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect02 .dtl_txt_box .tit_box + .cate_box{margin-top: 24px;} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect02 .dtl_txt_box .cate_box .dtl_cate{font-size: var(--fs-20);line-height: var(--lh-28);} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect02 .dtl_txt_box .txt_top_box + .txt_bottom_box{margin-top: 128px;} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect02 .dtl_txt_box .desc_box .dtl_desc{font-size: var(--fs-20);line-height: var(--lh-28);} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect05 .dtl_img_box .img_box + .img_box{margin-top: 48px;} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect06 .dtl_img_box .img_list{gap: 32px;} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect06 .dtl_img_box .img_list .img_item{width: calc((100%/4) - (96px/4));} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect06 .dtl_img_box .img_list .img_item:nth-child(2){margin-top: 200px;} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect06 .dtl_img_box .img_list .img_item:nth-child(3){margin-top: 50px;} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect06 .dtl_img_box .img_list .img_item:nth-child(4){margin-top: 130px;} #projectDtlWrap .dtl_btns_box .dtl_btns .btns_name{font-size: var(--fs-20);line-height: var(--lh-28);} } @media (max-width: 640px){ #projectDtlWrap .dtl_tmp_01 .dtl_sect .sect_inner{padding: 64px 0;} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect02 .sect_inner{padding: 0 16px 16px;} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect02 .dtl_txt_box .tit_box .dtl_tit{font-size: var(--fs-20);line-height: var(--lh-28);} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect02 .dtl_txt_box .tit_box + .cate_box{margin-top: 8px;} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect02 .dtl_txt_box .cate_box .dtl_cate{font-size: var(--fs-14);line-height: var(--lh-20);} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect02 .dtl_txt_box .txt_top_box + .txt_bottom_box{margin-top: 72px;} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect02 .dtl_txt_box .desc_box .dtl_desc{font-size: var(--fs-14);line-height: var(--lh-20);} #projectDtlWrap .dtl_tmp_01 .dtl_sect .dtl_mockup_box .imac_mockup{max-width: 320px;} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect05 .sect_inner{padding: 64px 16px;} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect06 .sect_inner{padding: 64px 16px;} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect06 .dtl_img_box .img_list{gap: 20px;} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect06 .dtl_img_box .img_list .img_item{width: calc((100%/4) - (60px/4));} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect06 .dtl_img_box .img_list .img_item:nth-child(2){margin-top: 140px;} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect06 .dtl_img_box .img_list .img_item:nth-child(3){margin-top: 30px;} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect06 .dtl_img_box .img_list .img_item:nth-child(4){margin-top: 80px;} } @media (max-width: 480px){} @media (max-width: 375px){ #projectDtlWrap .dtl_tmp_01 .dtl_sect .dtl_mockup_box .imac_mockup{max-width: 280px;} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect02 .dtl_txt_box .tit_box .dtl_tit{font-size: var(--fs-18);line-height: var(--lh-26);} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect02 .dtl_txt_box .cate_box .dtl_cate{font-size: var(--fs-12);line-height: var(--lh-20);} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect02 .dtl_txt_box .txt_top_box + .txt_bottom_box{margin-top: 56px;} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect02 .dtl_txt_box .desc_box .dtl_desc{font-size: var(--fs-12);line-height: var(--lh-20);} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect06 .dtl_img_box .img_list .img_item:nth-child(2){margin-top: 100px;} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect06 .dtl_img_box .img_list .img_item:nth-child(3){margin-top: 20px;} #projectDtlWrap .dtl_tmp_01 .dtl_sect.sect06 .dtl_img_box .img_list .img_item:nth-child(4){margin-top: 60px;} } @media (max-width: 360px){} /* ================================== E::detail tamplete 01 ======================================== * /* ================================== S::detail tamplete 02 ======================================== */ #dtlFixedWrap{position: fixed;left: 0;top: 0;right: 0;z-index: 20;pointer-events: none;} #dtlFixedWrap .dtl_txt_box{width: 100%;height: 100%;min-height: 100dvh;max-height: 100dvh;display: flex;align-items: flex-end;justify-content: flex-start;} #dtlFixedWrap .dtl_txt_box .box_inner{width: 100%;padding: 48px;box-sizing: border-box;} #dtlFixedWrap .dtl_txt_box .tit_box{} #dtlFixedWrap .dtl_txt_box .tit_box .dtl_tit{font-size: var(--fs-36);font-weight: 500;line-height: var(--lh-44);color: var(--color-blue-txt);} #dtlFixedWrap .dtl_txt_box .date_box{} #dtlFixedWrap .dtl_txt_box .tit_box + .date_box{margin-top: 8px;} #dtlFixedWrap .dtl_txt_box .date_box .dtl_date{font-size: var(--fs-20);font-weight: 600;line-height: var(--lh-28);color: var(--color-blue-txt);} #projectDtlWrap .dtl_tmp_02{} #projectDtlWrap .dtl_tmp_02 .dtl_sect:not(.sect01){width: 100%;max-width: 1920px;margin: 0 auto;} #projectDtlWrap .dtl_tmp_02 .dtl_sect .sect_inner{width: 100%;max-width: calc(100% - 450px);margin-left: auto;padding: 156px 100px;box-sizing: border-box;} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect01 .sect_inner{max-width: 100%;padding: 0;} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect01 .dtl_img_box{width: 100%;line-height: 0;} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect01 .dtl_img_box .top_img_box{width: 100%;line-height: 0;} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect01 .dtl_img_box .top_img_box img{width: 100%;} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect02 .dtl_mockup_box{width: 100%;max-width: 1200px;margin: 0 auto;} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect02 .dtl_mockup_box .ipad_mockup{position: relative;width: 100%;aspect-ratio: 1512 / 1048;overflow: hidden;} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect02 .dtl_mockup_box .ipad_mockup .ipad_pannel{position: absolute;left: 0;top: 0;width: 100%;height: 100%;display: block;z-index: 3;pointer-events: none;} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect02 .dtl_mockup_box .ipad_mockup .ipad_screen{position: absolute;left: 3.75%;top: 5.35%;width: 92.5%;height: 89.25%;overflow: hidden;background: #fff;border-radius: 1.6vw;z-index: 1;} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect02 .dtl_mockup_box .ipad_mockup .ipad_screen .scroll_inner{width: 100%;height: 100%;} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect02 .dtl_mockup_box .ipad_mockup .mockup_img{display: block;width: 100%;height: 100%;object-fit: cover;} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect02 .dtl_mockup_box .ipad_mockup video{display: block;width: 100%;height: 100%;object-fit: cover;} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect02 .dtl_mockup_box .ipad_mockup.type_scroll .ipad_screen{overflow-y: auto;overflow-x: hidden;-webkit-overflow-scrolling: touch;} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect02 .dtl_mockup_box .ipad_mockup.type_scroll .ipad_screen::-webkit-scrollbar{width:0;height:0;} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect02 .dtl_mockup_box .ipad_mockup.type_scroll .ipad_screen{scrollbar-width: none;} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect02 .dtl_mockup_box .ipad_mockup.type_scroll .ipad_screen .scroll_inner{height: auto;min-height: 100%;} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect02 .dtl_mockup_box .ipad_mockup.type_scroll .mockup_img{width: 100%;height: auto;min-height: 100%;object-fit: initial;} @media (max-width:1024px){ #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect02 .dtl_mockup_box{max-width: 100%;box-sizing: border-box;} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect02 .dtl_mockup_box .ipad_mockup .ipad_screen{border-radius: 2.2vw;} } @media (max-width:640px){ #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect02 .dtl_mockup_box .ipad_mockup .ipad_screen{border-radius: 3vw;} } #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect03{} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect03 .dtl_swiper_box{width: 100%;max-width: 1200px;margin: 0 auto;} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect03 .dtl_swiper{} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect03 .dtl_swiper_list{} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect03 .dtl_swiper_item{width: 100%;aspect-ratio: 795 / 450;overflow: hidden;} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect03 .dtl_swiper_item .dtl_img{width: 100%;height: 100%;object-fit: cover;object-position: center top;} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect04{} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect04 .dtl_mockup_box{width: 100%;max-width: 1200px;margin: 0 auto;} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect04 .dtl_mockup_box .mockup_list{display: flex;align-items: center;justify-content: space-evenly;column-gap: 64px;} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect04 .dtl_mockup_box .mockup_item{width: calc((100%/3) - (128px/3))} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect04 .dtl_mockup_box .iphone_mockup{position: relative;width: 100%;aspect-ratio: 868 / 1798;margin: 0 auto;} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect04 .dtl_mockup_box .iphone_mockup .iphone_pannel{position: absolute;inset: 0;width: 100%;height: 100%;object-fit: contain;z-index: 2;pointer-events: none;} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect04 .dtl_mockup_box .iphone_mockup .iphone_screen{position: absolute;left: 3.6%;top: 1.7%;width: 92.8%;height: 96.5%;overflow: hidden;border-radius: 13.5% / 6.5%;background: #fff;z-index: 1;} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect04 .dtl_mockup_box .iphone_mockup .mockup_img, #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect04 .dtl_mockup_box .iphone_mockup .mockup_vod{display: block;width: 100%;height: 100%;object-fit: cover;} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect04 .dtl_mockup_box .iphone_mockup.type_img .mockup_img{object-fit: cover;} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect04 .dtl_mockup_box .iphone_mockup.type_video .mockup_vod{object-fit: cover;} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect05{} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect05 .sect_inner{padding: 156px 48px 24px;} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect05 .dtl_vod_box{width: 100%;aspect-ratio: 988/557;overflow: hidden;} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect05 .dtl_vod_box .vod_box{width: 100%;height: 100%;line-height: 0;} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect05 .dtl_vod_box .vod_box .dtl_vod{width: 100%;height: 100%;object-fit: cover;object-position: center;} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect06{} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect06 .sect_inner{padding: 24px 48px 128px;} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect06 .dtl_txt_box{display: flex;align-items: flex-start;justify-content: space-between;column-gap: 100px;flex-wrap: nowrap;} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect06 .dtl_txt_box .desc_box{flex: 1 1 0%;} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect06 .dtl_txt_box .desc_box .dtl_desc{font-size: var(--fs-16);font-weight: 500;line-height: var(--lh-24);color: var(--color-blue-txt);} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect06 .dtl_txt_box .tit_box{flex: 0 0 auto;} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect06 .dtl_txt_box .tit_box .txt_name{font-size: var(--fs-16);font-weight: 500;line-height: var(--lh-24);color: var(--color-blue-txt);} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect06 .dtl_txt_box .tit_box .dtl_tit{font-size: var(--fs-16);font-weight: 500;line-height: var(--lh-24);color: var(--color-blue-txt);} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect06 .dtl_txt_box .cate_box{flex: 0 0 auto;} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect06 .dtl_txt_box .cate_box .txt_name{font-size: var(--fs-16);font-weight: 500;line-height: var(--lh-24);color: var(--color-blue-txt);} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect06 .dtl_txt_box .cate_box .dtl_cate{font-size: var(--fs-16);font-weight: 500;line-height: var(--lh-24);color: var(--color-blue-txt);} @media (max-width: 1920px){} @media (max-width: 1680px){} @media (max-width: 1440px){ #projectDtlWrap .dtl_tmp_02 .dtl_sect .sect_inner{padding: 128px 48px;} } @media all and (max-width:1280px){ } @media (max-width: 1280px){ #projectDtlWrap .dtl_tmp_02 .sect01{position:relative;} #projectDtlWrap .dtl_tmp_02 .sect01 .sect_inner{position:relative;} #projectDtlWrap .dtl_tmp_02 .sect01 #dtlFixedWrap{position:absolute;left:0;top:0;right:0;bottom:0;z-index:20;pointer-events:none;} #projectDtlWrap .dtl_tmp_02 .sect01 #dtlFixedWrap .dtl_txt_box{width:100%;height:100%;min-height:0;max-height:none;} #projectDtlWrap .dtl_tmp_02 .sect01 #dtlFixedWrap .dtl_txt_box .box_inner{width:100%;padding: 48px 24px;box-sizing:border-box;} #projectDtlWrap .dtl_tmp_02 .dtl_sect .sect_inner{max-width: 100%;padding: 96px 24px;} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect02 .dtl_mockup_box{max-width: 750px;} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect03 .dtl_swiper_box{max-width: 750px;} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect04 .dtl_mockup_box{max-width: 750px;} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect05 .sect_inner{padding: 96px 24px 16px;} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect06 .sect_inner{padding: 16px 24px 96px;} } @media (max-width: 1080px){ #projectDtlWrap .dtl_tmp_02{padding-top: var(--dtl-header-space);} #projectDtlWrap .dtl_tmp_02 .sect01 #dtlFixedWrap .dtl_txt_box .box_inner{padding: 24px;} #dtlFixedWrap .dtl_txt_box .tit_box .dtl_tit{font-size: var(--fs-24);line-height: var(--lh-32);} #dtlFixedWrap .dtl_txt_box .date_box .dtl_date{font-size: var(--fs-16);line-height: var(--lh-24);} } @media (max-width: 960px){ } @media (max-width: 850px){ #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect06 .dtl_txt_box{flex-direction: column;} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect06 .dtl_txt_box .tit_box{align-self: flex-end;text-align: right;} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect06 .dtl_txt_box .desc_box + .tit_box{margin-top: 48px;} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect06 .dtl_txt_box .cate_box{align-self: flex-end;text-align: right;} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect06 .dtl_txt_box .tit_box + .cate_box{margin-top: 24px;} } @media (max-width: 768px){ } @media (max-width: 640px){ #projectDtlWrap .dtl_tmp_02 .sect01 #dtlFixedWrap .dtl_txt_box .box_inner{padding: 16px;} #dtlFixedWrap .dtl_txt_box .tit_box .dtl_tit{font-size: var(--fs-16);line-height: var(--lh-24);} #dtlFixedWrap .dtl_txt_box .tit_box + .date_box{margin-top: 4px;} #dtlFixedWrap .dtl_txt_box .date_box .dtl_date{font-size: var(--fs-12);line-height: var(--lh-16);} #projectDtlWrap .dtl_tmp_02 .dtl_sect .sect_inner{padding: 96px 16px;} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect04 .dtl_mockup_box .mockup_list{column-gap: 24px;} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect05 .sect_inner{padding: 96px 16px 8px;} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect06 .sect_inner{padding: 8px 16px 64px;} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect06 .dtl_txt_box .desc_box .dtl_desc{font-size: var(--fs-14);line-height: var(--lh-20);} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect06 .dtl_txt_box .tit_box .txt_name{font-size: var(--fs-14);line-height: var(--lh-20);} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect06 .dtl_txt_box .tit_box .dtl_tit{font-size: var(--fs-14);line-height: var(--lh-20);} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect06 .dtl_txt_box .cate_box .txt_name{font-size: var(--fs-14);line-height: var(--lh-20);} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect06 .dtl_txt_box .cate_box .dtl_cate{font-size: var(--fs-14);line-height: var(--lh-20);} } @media (max-width: 480px){} @media (max-width: 375px){ #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect06 .dtl_txt_box .desc_box .dtl_desc{font-size: var(--fs-12);line-height: var(--lh-16);} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect06 .dtl_txt_box .desc_box .dtl_desc br{display: none;} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect06 .dtl_txt_box .tit_box .txt_name{font-size: var(--fs-12);line-height: var(--lh-16);} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect06 .dtl_txt_box .tit_box .dtl_tit{font-size: var(--fs-12);line-height: var(--lh-16);} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect06 .dtl_txt_box .cate_box .txt_name{font-size: var(--fs-12);line-height: var(--lh-16);} #projectDtlWrap .dtl_tmp_02 .dtl_sect.sect06 .dtl_txt_box .cate_box .dtl_cate{font-size: var(--fs-12);line-height: var(--lh-16);} } @media (max-width: 360px){} /* ================================== E::detail tamplete 02 ======================================== * /* ================================== S::detail tamplete 03 ======================================== */ #projectDtlWrap .dtl_tmp_03{padding-top: 304px;padding-bottom: 112px;} #projectDtlWrap .dtl_tmp_03 .dtl_sect{} #projectDtlWrap .dtl_tmp_03 .dtl_sect .sect_inner{width: 100%;max-width: 1920px;margin: 0 auto;padding: 32px 100px;box-sizing: border-box;} #projectDtlWrap .dtl_tmp_03 .dtl_sect .dtl_img_box{width: 100%;line-height: 0;} #projectDtlWrap .dtl_tmp_03 .dtl_sect .dtl_img_box .img_box{width: 100%;line-height: 0;border-radius: 30px;overflow: hidden;} #projectDtlWrap .dtl_tmp_03 .dtl_sect .dtl_img_box .img_box + .img_box{margin-top: 64px;} #projectDtlWrap .dtl_tmp_03 .dtl_sect .dtl_img_box .img_box .dtl_img{width: 100%;} #projectDtlWrap .dtl_tmp_03 .dtl_sect.sect01 .sect_inner{padding-bottom: 0;} #projectDtlWrap .dtl_tmp_03 .dtl_sect.sect01 .dtl_txt_box{} #projectDtlWrap .dtl_tmp_03 .dtl_sect.sect01 .dtl_txt_box .top_txt_box{display: flex;align-items: flex-end;flex-wrap: nowrap;column-gap: 16px;} #projectDtlWrap .dtl_tmp_03 .dtl_sect.sect01 .dtl_txt_box .subject_box{} #projectDtlWrap .dtl_tmp_03 .dtl_sect.sect01 .dtl_txt_box .subject_box .dtl_subject{font-size: var(--fs-86);font-weight: 500;line-height: var(--lh-94);} #projectDtlWrap .dtl_tmp_03 .dtl_sect.sect01 .dtl_txt_box .date_box{} #projectDtlWrap .dtl_tmp_03 .dtl_sect.sect01 .dtl_txt_box .date_box .dtl_date{font-size: var(--fs-20);font-weight: 600;line-height: var(--lh-28);color: var(--color-blue-txt);} #projectDtlWrap .dtl_tmp_03 .dtl_sect.sect01 .dtl_txt_box .bottom_txt_box{display: flex;align-items: flex-start;flex-wrap: nowrap;column-gap: 200px;} #projectDtlWrap .dtl_tmp_03 .dtl_sect.sect01 .dtl_txt_box .top_txt_box + .bottom_txt_box{margin-top: 140px;} #projectDtlWrap .dtl_tmp_03 .dtl_sect.sect01 .dtl_txt_box .dtl_name{font-size: var(--fs-16);font-weight: 500;line-height: var(--lh-24);color: var(--color-blue-txt);} #projectDtlWrap .dtl_tmp_03 .dtl_sect.sect01 .dtl_txt_box .client_box{flex: 0 0 auto;} #projectDtlWrap .dtl_tmp_03 .dtl_sect.sect01 .dtl_txt_box .client_box .dtl_client{font-size: var(--fs-16);font-weight: 500;line-height: var(--lh-24);color: var(--color-blue-txt);} #projectDtlWrap .dtl_tmp_03 .dtl_sect.sect01 .dtl_txt_box .cate_box{flex: 0 0 auto;} #projectDtlWrap .dtl_tmp_03 .dtl_sect.sect01 .dtl_txt_box .cate_box .dtl_cate{font-size: var(--fs-16);font-weight: 500;line-height: var(--lh-24);color: var(--color-blue-txt);} #projectDtlWrap .dtl_tmp_03 .dtl_sect.sect01 .dtl_txt_box .desc_box{flex: 1 1 0%;} #projectDtlWrap .dtl_tmp_03 .dtl_sect.sect01 .dtl_txt_box .desc_box .dtl_desc{font-size: var(--fs-16);font-weight: 500;line-height: var(--lh-24);color: var(--color-blue-txt);text-align: right;} #projectDtlWrap .dtl_tmp_03 .dtl_sect.sect03 .dtl_img_list{} #projectDtlWrap .dtl_tmp_03 .dtl_sect.sect03 .dtl_img_item{width: 100%;max-width: 64.25%;} #projectDtlWrap .dtl_tmp_03 .dtl_sect.sect03 .dtl_img_item + .dtl_img_item{margin-top: 64px;} #projectDtlWrap .dtl_tmp_03 .dtl_sect.sect03 .dtl_img_item:nth-child(odd){margin-left: auto;} #projectDtlWrap .dtl_tmp_03 .dtl_sect.sect03 .dtl_img_item:nth-child(even){margin-right: auto;} #projectDtlWrap .dtl_tmp_03 .dtl_sect.sect04 .dtl_img_box{} #projectDtlWrap .dtl_tmp_03 .dtl_sect.sect04 .dtl_img_box .img_box{} #projectDtlWrap .dtl_tmp_03 .dtl_sect.sect04 .dtl_img_box .img_box .dtl_vod{width: 100%;line-height: 0;} @media (max-width: 1920px){} @media (max-width: 1680px){} @media (max-width: 1440px){ #projectDtlWrap .dtl_tmp_03 .dtl_sect .sect_inner{padding: 32px 48px;} } @media all and (max-width:1280px){ } @media (max-width: 1280px){ #projectDtlWrap .dtl_tmp_03 .dtl_sect .sect_inner{max-width: 100%;padding: 32px 24px;} } @media (max-width: 1080px){ #projectDtlWrap .dtl_tmp_03{padding-top: var(--dtl-header-space);} #projectDtlWrap .dtl_tmp_03 .dtl_sect .dtl_img_box .img_box{border-radius: 24px;} #projectDtlWrap .dtl_tmp_03 .dtl_sect.sect01 .dtl_txt_box .subject_box .dtl_subject{font-size: var(--fs-56);line-height: var(--lh-64);} #projectDtlWrap .dtl_tmp_03 .dtl_sect.sect01 .dtl_txt_box .date_box .dtl_date{font-size: var(--fs-18);line-height: var(--lh-26);} #projectDtlWrap .dtl_tmp_03 .dtl_sect.sect01 .dtl_txt_box .bottom_txt_box{column-gap: 16px;} #projectDtlWrap .dtl_tmp_03 .dtl_sect.sect01 .dtl_txt_box .top_txt_box + .bottom_txt_box{margin-top: 96px;} #projectDtlWrap .dtl_tmp_03 .dtl_sect.sect01 .dtl_txt_box .cate_box{margin-left: 96px;} } @media (max-width: 960px){ } @media (max-width: 850px){ #projectDtlWrap .dtl_tmp_03 .dtl_sect.sect01 .sect_inner{padding: 48px 24px 32px;} #projectDtlWrap .dtl_tmp_03 .dtl_sect.sect01 .dtl_txt_box .bottom_txt_box{flex-wrap: wrap;} #projectDtlWrap .dtl_tmp_03 .dtl_sect.sect01 .dtl_txt_box .desc_box{flex: 0 0 auto;width: 100%;margin-top: 48px;} } @media (max-width: 768px){ } @media (max-width: 640px){ #projectDtlWrap .dtl_tmp_03 .dtl_sect .sect_inner{padding: 16px;} #projectDtlWrap .dtl_tmp_03 .dtl_sect .dtl_img_box .img_box{border-radius: 8px;} #projectDtlWrap .dtl_tmp_03 .dtl_sect .dtl_img_box .img_box + .img_box{margin-top: 32px;} #projectDtlWrap .dtl_tmp_03 .dtl_sect.sect01 .sect_inner{padding: 32px 16px 16px} #projectDtlWrap .dtl_tmp_03 .dtl_sect.sect01 .dtl_txt_box .subject_box .dtl_subject{font-size: var(--fs-26);line-height: var(--lh-34);} #projectDtlWrap .dtl_tmp_03 .dtl_sect.sect01 .dtl_txt_box .date_box .dtl_date{font-size: var(--fs-10);line-height: var(--lh-20);} #projectDtlWrap .dtl_tmp_03 .dtl_sect.sect01 .dtl_txt_box .top_txt_box + .bottom_txt_box{margin-top: 48px;} #projectDtlWrap .dtl_tmp_03 .dtl_sect.sect01 .dtl_txt_box .bottom_txt_box{column-gap: 48px;} #projectDtlWrap .dtl_tmp_03 .dtl_sect.sect01 .dtl_txt_box .dtl_name{font-size: var(--fs-12);line-height: var(--lh-18);} #projectDtlWrap .dtl_tmp_03 .dtl_sect.sect01 .dtl_txt_box .client_box .dtl_client{font-size: var(--fs-12);line-height: var(--lh-18);} #projectDtlWrap .dtl_tmp_03 .dtl_sect.sect01 .dtl_txt_box .cate_box{margin-left: 0;} #projectDtlWrap .dtl_tmp_03 .dtl_sect.sect01 .dtl_txt_box .cate_box .dtl_cate{font-size: var(--fs-12);line-height: var(--lh-18);} #projectDtlWrap .dtl_tmp_03 .dtl_sect.sect01 .dtl_txt_box .desc_box .dtl_desc{font-size: var(--fs-12);line-height: var(--lh-18);} #projectDtlWrap .dtl_tmp_03 .dtl_sect.sect03 .dtl_img_item{width: 70%;} } @media (max-width: 480px){} @media (max-width: 375px){ } @media (max-width: 360px){} /* ================================== E::detail tamplete 03 ======================================== * /* ================================== S::detail tamplete 04 ======================================== */ #projectDtlWrap .dtl_tmp_04 .dtl_sect{} #projectDtlWrap .dtl_tmp_04 .dtl_sect .sect_inner{width: 100%;max-width: 1920px;margin: 0 auto;padding: 96px 100px;box-sizing: border-box;} #projectDtlWrap .dtl_tmp_04 .dtl_sect .dtl_img_box{width: 100%;line-height: 0;} #projectDtlWrap .dtl_tmp_04 .dtl_sect .dtl_img_box .img_box{width: 100%;line-height: 0;} #projectDtlWrap .dtl_tmp_04 .dtl_sect .dtl_img_box .img_box + .img_box{margin-top: 192px;} #projectDtlWrap .dtl_tmp_04 .dtl_sect .dtl_img_box .img_box .dtl_img{width: 100%;} #projectDtlWrap .dtl_tmp_04 .dtl_sect .dtl_txt_box .subject_box{} #projectDtlWrap .dtl_tmp_04 .dtl_sect .dtl_txt_box .subject_box .dtl_subject{font-size: var(--fs-86);font-weight: 500;line-height: var(--lh-94);text-transform: uppercase;} #projectDtlWrap .dtl_tmp_04 .dtl_sect .dtl_txt_box .date_box{} #projectDtlWrap .dtl_tmp_04 .dtl_sect .dtl_txt_box .date_box .dtl_date{font-size: var(--fs-20);font-weight: 600;line-height: var(--lh-28);color: var(--color-blue-txt);} #projectDtlWrap .dtl_tmp_04 .dtl_sect .dtl_txt_box .dtl_name{font-size: var(--fs-16);font-weight: 500;line-height: var(--lh-24);color: var(--color-blue-txt);} #projectDtlWrap .dtl_tmp_04 .dtl_sect .dtl_txt_box .client_box{} #projectDtlWrap .dtl_tmp_04 .dtl_sect .dtl_txt_box .client_box .dtl_client{font-size: var(--fs-16);font-weight: 500;line-height: var(--lh-24);color: var(--color-blue-txt);} #projectDtlWrap .dtl_tmp_04 .dtl_sect .dtl_txt_box .cate_box{} #projectDtlWrap .dtl_tmp_04 .dtl_sect .dtl_txt_box .cate_box .dtl_cate{font-size: var(--fs-16);font-weight: 500;line-height: var(--lh-24);color: var(--color-blue-txt);} #projectDtlWrap .dtl_tmp_04 .dtl_sect .dtl_txt_box .desc_box{} #projectDtlWrap .dtl_tmp_04 .dtl_sect .dtl_txt_box .desc_box .dtl_desc{font-size: var(--fs-16);font-weight: 500;line-height: var(--lh-24);color: var(--color-blue-txt);} #projectDtlWrap .dtl_tmp_04 .dtl_sect .dtl_txt_box .desc_box .dtl_desc + .dtl_desc{margin-top: 8px;} #projectDtlWrap .dtl_tmp_04 .dtl_sect.sect01{} #projectDtlWrap .dtl_tmp_04 .dtl_sect.sect01 .sect_inner{max-width: 100%;padding: 0%;} #projectDtlWrap .dtl_tmp_04 .dtl_sect.sect02{} #projectDtlWrap .dtl_tmp_04 .dtl_sect.sect02 .dtl_cnt_box{display: flex;align-items: center;justify-content: center;width: 100%;max-width: 1200px;margin: 0 auto;} #projectDtlWrap .dtl_tmp_04 .dtl_sect.sect02 .dtl_vod_box{width: 100%;max-width: 720px;aspect-ratio: 1 /1;overflow: hidden;} #projectDtlWrap .dtl_tmp_04 .dtl_sect.sect02 .dtl_vod_box .vod_box{width: 100%;height: 100%;object-fit: cover;object-position: center;} #projectDtlWrap .dtl_tmp_04 .dtl_sect.sect02 .dtl_txt_box .top_txt_box{} #projectDtlWrap .dtl_tmp_04 .dtl_sect.sect02 .dtl_txt_box .date_box .dtl_date{text-align: right;} #projectDtlWrap .dtl_tmp_04 .dtl_sect.sect02 .dtl_txt_box .mid_txt_box{} #projectDtlWrap .dtl_tmp_04 .dtl_sect.sect02 .dtl_txt_box .client_box + .cate_box{margin-top: 16px;} #projectDtlWrap .dtl_tmp_04 .dtl_sect.sect02 .dtl_txt_box .top_txt_box + .mid_txt_box{margin-top: 64px;} #projectDtlWrap .dtl_tmp_04 .dtl_sect.sect02 .dtl_txt_box .mid_txt_box + .bottom_txt_box{margin-top: 72px;} #projectDtlWrap .dtl_tmp_04 .dtl_sect.sect03 .sect_inner{max-width: 100%;padding-left: 0;padding-right: 0;} #projectDtlWrap .dtl_tmp_04 .dtl_sect.sect03 .dtl_swiper_box{} #projectDtlWrap .dtl_tmp_04 .dtl_sect.sect03 .dtl_swiper{} #projectDtlWrap .dtl_tmp_04 .dtl_sect.sect03 .dtl_swiper_list{transition-timing-function: linear !important;} #projectDtlWrap .dtl_tmp_04 .dtl_sect.sect03 .dtl_swiper_item{} #projectDtlWrap .dtl_tmp_04 .dtl_sect.sect03 .dtl_swiper_item .img_box{width: 100%;line-height: 0;} #projectDtlWrap .dtl_tmp_04 .dtl_sect.sect03 .dtl_swiper_item .img_box .dtl_img{width: 100%;} #projectDtlWrap .dtl_tmp_04 .dtl_sect.sect03 .dtl_txt_box{width: 100%;padding: 0 56px;display: flex;justify-content: flex-end;} #projectDtlWrap .dtl_tmp_04 .dtl_sect.sect03 .dtl_swiper_box + .dtl_txt_box{margin-top: 24px;} #projectDtlWrap .dtl_tmp_04 .dtl_sect.sect03 .dtl_txt_box .desc_box{} #projectDtlWrap .dtl_tmp_04 .dtl_sect.sect03 .dtl_txt_box .desc_box .dtl_desc{text-align: right;} #projectDtlWrap .dtl_tmp_04 .dtl_sect.sect05{} #projectDtlWrap .dtl_tmp_04 .dtl_sect.sect05 .dtl_img_box{} #projectDtlWrap .dtl_tmp_04 .dtl_sect.sect05 .dtl_txt_box{} #projectDtlWrap .dtl_tmp_04 .dtl_sect.sect05 .dtl_img_box + .dtl_txt_box{margin-top: 24px;} #projectDtlWrap .dtl_tmp_04 .dtl_sect.sect06 .dtl_img_list{} #projectDtlWrap .dtl_tmp_04 .dtl_sect.sect06 .dtl_img_item{width: 100%;max-width: 64.25%;} #projectDtlWrap .dtl_tmp_04 .dtl_sect.sect06 .dtl_img_item:nth-child(odd){margin-right: auto;} #projectDtlWrap .dtl_tmp_04 .dtl_sect.sect06 .dtl_img_item:nth-child(even){margin-top: -160px;margin-left: auto;} @media (max-width: 1920px){} @media (max-width: 1680px){} @media (max-width: 1440px){ #projectDtlWrap .dtl_tmp_04 .dtl_sect .sect_inner{padding: 96px 48px;} } @media all and (max-width:1280px){ } @media (max-width: 1280px){ #projectDtlWrap .dtl_tmp_04 .dtl_sect .sect_inner{max-width: 100%;padding: 96px 24px;} } @media (max-width: 1080px){ #projectDtlWrap .dtl_tmp_04{padding-top: var(--dtl-header-space);} #projectDtlWrap .dtl_tmp_04 .dtl_sect .sect_inner{padding: 64px 24px;} #projectDtlWrap .dtl_tmp_04 .dtl_sect .dtl_img_box .img_box + .img_box{margin-top: 128px;} #projectDtlWrap .dtl_tmp_04 .dtl_sect .dtl_txt_box .subject_box .dtl_subject{font-size: var(--fs-56);line-height: var(--lh-64);} #projectDtlWrap .dtl_tmp_04 .dtl_sect .dtl_txt_box .date_box .dtl_date{font-size: var(--fs-18);line-height: var(--lh-26);} #projectDtlWrap .dtl_tmp_04 .dtl_sect.sect02 .dtl_vod_box{max-width: 560px;flex: 0 0 auto;} #projectDtlWrap .dtl_tmp_04 .dtl_sect.sect02 .dtl_txt_box .top_txt_box{display: inline-flex;flex-direction: column;align-items: flex-end;justify-content: center;} #projectDtlWrap .dtl_tmp_04 .dtl_sect.sect02 .dtl_txt_box .desc_box .dtl_desc br{display: none;} #projectDtlWrap .dtl_tmp_04 .dtl_sect.sect06 .dtl_img_item:nth-child(even){margin-top: -112px;} } @media (max-width: 960px){ #projectDtlWrap .dtl_tmp_04 .dtl_sect.sect02 .dtl_vod_box{max-width: 520px;} } @media (max-width: 850px){ #projectDtlWrap .dtl_tmp_04 .dtl_sect.sect02 .dtl_vod_box{max-width: 420px;} } @media (max-width: 768px){ #projectDtlWrap .dtl_tmp_04 .dtl_sect.sect02 .dtl_cnt_box{display: block;} #projectDtlWrap .dtl_tmp_04 .dtl_sect.sect02 .dtl_vod_box{margin: 0 auto;} #projectDtlWrap .dtl_tmp_04 .dtl_sect.sect02 .dtl_txt_box{width: 100%;max-width: 720px;margin: 0 auto;} #projectDtlWrap .dtl_tmp_04 .dtl_sect.sect02 .dtl_vod_box + .dtl_txt_box{margin-top: 48px;} #projectDtlWrap .dtl_tmp_04 .dtl_sect.sect06 .dtl_img_item:nth-child(even){margin-top: -64px;} } @media (max-width: 640px){ #projectDtlWrap .dtl_tmp_04 .dtl_sect .sect_inner{padding: 48px 16px;} #projectDtlWrap .dtl_tmp_04 .dtl_sect .dtl_img_box .img_box + .img_box{margin-top: 96px;} #projectDtlWrap .dtl_tmp_04 .dtl_sect .dtl_txt_box .subject_box .dtl_subject{font-size: var(--fs-26);line-height: var(--lh-34);} #projectDtlWrap .dtl_tmp_04 .dtl_sect .dtl_txt_box .date_box .dtl_date{font-size: var(--fs-10);line-height: var(--lh-20);} #projectDtlWrap .dtl_tmp_04 .dtl_sect .dtl_txt_box .dtl_name{font-size: var(--fs-12);line-height: var(--lh-18);} #projectDtlWrap .dtl_tmp_04 .dtl_sect .dtl_txt_box .client_box .dtl_client{font-size: var(--fs-12);line-height: var(--lh-18);} #projectDtlWrap .dtl_tmp_04 .dtl_sect .dtl_txt_box .cate_box .dtl_cate{font-size: var(--fs-12);line-height: var(--lh-18);} #projectDtlWrap .dtl_tmp_04 .dtl_sect .dtl_txt_box .desc_box .dtl_desc{font-size: var(--fs-12);line-height: var(--lh-18);} #projectDtlWrap .dtl_tmp_04 .dtl_sect.sect02 .dtl_txt_box .mid_txt_box + .bottom_txt_box{margin-top: 48px;} #projectDtlWrap .dtl_tmp_04 .dtl_sect.sect06 .dtl_img_item:nth-child(even){margin-top: -32px;} } @media (max-width: 480px){} @media (max-width: 375px){ } @media (max-width: 360px){} /* ================================== E::detail tamplete 04 ======================================== * /* ================================== S::detail tamplete 05 ======================================== */ #projectDtlWrap .dtl_tmp_05 .dtl_sect{} #projectDtlWrap .dtl_tmp_05 .dtl_sect + .dtl_sect{margin-top: 48px;} #projectDtlWrap .dtl_tmp_05 .dtl_sect .sect_inner{width: 100%;padding: calc((50px * 1.2) + (32px + 56px)) var(--main-page-x) 96px;box-sizing: border-box;} #projectDtlWrap .dtl_tmp_05 .dtl_sect .dtl_img_box{width: 100%;line-height: 0;} #projectDtlWrap .dtl_tmp_05 .dtl_sect .dtl_img_box .img_box{width: 100%;line-height: 0;border-radius: 20px;overflow: hidden;} #projectDtlWrap .dtl_tmp_05 .dtl_sect .dtl_img_box .img_box + .img_box{margin-top: 48px;} #projectDtlWrap .dtl_tmp_05 .dtl_sect .dtl_img_box .img_box img{width: 100%;} #projectDtlWrap .dtl_tmp_05 .dtl_fix_box{position: fixed;left: 0;bottom: 0;right: 0;z-index: 100;} #projectDtlWrap .dtl_tmp_05 .dtl_fix_box .box_inner{width: 100%;padding: 32px var(--main-page-x);background-color: var(--color-white);box-sizing: border-box;} #projectDtlWrap .dtl_tmp_05 .dtl_fix_box .dtl_desc_box{display: flex;align-items: flex-start;justify-content: space-between;flex-wrap: nowrap;column-gap: 16px;width: 100%;} #projectDtlWrap .dtl_tmp_05 .dtl_fix_box .box_left, #projectDtlWrap .dtl_tmp_05 .dtl_fix_box .box_right{display: contents;} #projectDtlWrap .dtl_tmp_05 .dtl_fix_box .desc_tit_box{flex: 0 0 auto;} #projectDtlWrap .dtl_tmp_05 .dtl_fix_box .desc_tit_box .desc_tit{font-size: var(--fs-20);font-weight: 600;line-height: var(--lh-20);color: var(--color-black);letter-spacing: -0.025em;} #projectDtlWrap .dtl_tmp_05 .dtl_fix_box .desc_cate_box{flex: 0 0 auto;} #projectDtlWrap .dtl_tmp_05 .dtl_fix_box .desc_cate_box .desc_cate{font-size: var(--fs-20);font-weight: 400;line-height: var(--lh-20);color: var(--color-black);letter-spacing: -0.025em;white-space: nowrap;} #projectDtlWrap .dtl_tmp_05 .dtl_fix_box .desc_txt_box{flex: 0 1 auto;min-width: 0;} #projectDtlWrap .dtl_tmp_05 .dtl_fix_box .desc_txt_box .desc_txt{font-size: var(--fs-16);font-weight: 400;line-height: var(--lh-20);color: var(--color-black);letter-spacing: -0.025em;} @media (max-width: 1440px){} @media (max-width: 1280px){} @media (max-width: 1200px){ #projectDtlWrap .dtl_tmp_05 .dtl_sect .sect_inner{padding: calc(80px + 48px) var(--main-page-x) 64px;} #projectDtlWrap .dtl_tmp_05 .dtl_sect .dtl_img_box .img_box + .img_box{margin-top: 32px;} #projectDtlWrap .dtl_tmp_05 .dtl_fix_box .box_right{display: block;} #projectDtlWrap .dtl_tmp_05 .dtl_fix_box .desc_cate_box + .desc_txt_box{margin-top: 16px;} } @media (max-width: 1024px){} @media (max-width: 768px){} @media (max-width: 650px){ #projectDtlWrap .dtl_tmp_05 .dtl_sect .sect_inner{padding: calc(68px + 32px) var(--main-page-x) 48px;} #projectDtlWrap .dtl_tmp_05 .dtl_sect .dtl_img_box .img_box + .img_box{margin-top: 24px;} #projectDtlWrap .dtl_tmp_05 .dtl_fix_box .box_inner{padding: 16px var(--main-page-x) 24px;} #projectDtlWrap .dtl_tmp_05 .dtl_fix_box .desc_tit_box .desc_tit{font-size: var(--fs-16);} #projectDtlWrap .dtl_tmp_05 .dtl_fix_box .desc_cate_box .desc_cate{font-size: var(--fs-16);} #projectDtlWrap .dtl_tmp_05 .dtl_fix_box .desc_cate_box + .desc_txt_box{margin-top: 12px;} #projectDtlWrap .dtl_tmp_05 .dtl_fix_box .desc_txt_box .desc_txt{font-size: var(--fs-14);} } @media (max-width: 375px){ #projectDtlWrap .dtl_tmp_05 .dtl_sect .dtl_img_box .img_box + .img_box{margin-top: 20px;} } /* ================================== E::detail tamplete 05 ======================================== */