@charset "UTF-8";
@media all and (min-width:0px) and (max-width:1039px){
    :root{
        --basic-width : calc(100% - var(--mrgn-x4));
        --mobile-nav-width: 240px;
        --column : calc((100vw - var(--mrgn-x2) * 3) / 2);
    }
    .title_con { text-align: center;}
    .title_con h4:before{ left: calc(50% - var(--mrgn));}
    .title_con.center h4:before{ left: 50%;}
    #atelier.sections.section_03 .width_con .title_con { z-index: 1;}
    #founder.sections.section_05 .width_con .v_con.ub_two_con > li > h5,
    #founder.sections.section_05 .width_con .v_con.ub_two_con > li > h6 { text-align: center;}


    html:has(> body.open_nav),
    body.open_nav { overflow: hidden;} /* 사파리던가 어딘가에선 body길이의 스크롤이 아니구 html길이의 스크롤로 적용된다고 함. 그래서 html:has 얘도 같이 적어줘야 다 됨*/
    #header.sections.section_00{ height: 60px !important;}
    #header.sections.section_00 .width_con .nav_cover{ position: fixed; top: 0; right: 0; width: 0; height: 100vh; background: transparent; box-shadow: 0 0 0 0 transparent; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); transition: all 0ms 150ms, background 150ms linear, -webkit-backdrop-filter 150ms linear, backdrop-filter 150ms linear; z-index: 1;}

    body.open_nav #header.sections.section_00 .width_con .nav_cover{ width: 100vw; background: var(--color-k-085); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); box-shadow: 0 0 50vw 50vw var(--color-k-085); transition: all 500ms ease-out, -webkit-backdrop-filter 1000ms linear 500ms, backdrop-filter 1000ms linear 500ms;}
    #header.sections.section_00 .width_con .btn_open_nav{ position: absolute; top: 10px; right: 0; display: block; width: 40px; height: 40px; cursor: pointer; transition: all 250ms ease-in-out; z-index: 2; } /*body.open_nav 있을때 적용됨. 뒤에 뿌옇고 까맣게 블러주는 효과*/

    body.open_nav #header.sections.section_00 .width_con .btn_open_nav{ right: calc(var(--mobile-nav-width) - var(--mrgn-x2));}
    #header.sections.section_00 .width_con .btn_open_nav div{ position: absolute; top: 18px; right: 5px; width: 30px; height: 4px; background: var(--color-w); border-radius: 1px; transition: background 0ms 150ms;} /*햄버거 삼선의 가운데 부분*/

    body.open_nav #header.sections.section_00 .width_con .btn_open_nav div{ background: transparent;} /*햄버거 삼선의 가운데 부분이 x버튼으로 돌아갔을때 영역*/
    #header.sections.section_00 .width_con .btn_open_nav div:before,
    #header.sections.section_00 .width_con .btn_open_nav div:after{ position: absolute; content: ''; right: 0; width: inherit; height: inherit; background: var(--color-w); border-radius: inherit; transition: all 150ms ease-in-out 150ms, transform 150ms ease-in-out; } /*햄버거 위아래 영역*/

    #header.sections.section_00 .width_con .btn_open_nav div:before{ top: -10px; transform: rotate(0deg);}
    #header.sections.section_00 .width_con .btn_open_nav div:after{ top: 10px; transform: rotate(0deg);} /*햄버거 위아래 x버튼으로 돌리기전 */

    body.open_nav #header.sections.section_00 .width_con .btn_open_nav div:before,
    body.open_nav #header.sections.section_00 .width_con .btn_open_nav div:after{transition: all 150ms ease-in-out, transform 150ms ease-in-out 150ms;} /*x버튼으로 돌리는데 얼만큼의 시간만큼 돌아가는지*/
    body.open_nav #header.sections.section_00 .width_con .btn_open_nav div:before{ top: 0; transform: rotate(-45deg);}
    body.open_nav #header.sections.section_00 .width_con .btn_open_nav div:after{ top: 0; transform: rotate(45deg);} /*햄버거 위아래 x버튼으로 돌리기 */

    #header.sections.section_00 { height: 60px;}
    #header.sections.section_00 .width_con ul{ z-index: 2;} /*로고까지 덮이게 하기*/
    #header.sections.section_00 .width_con ul > li > a{ color: var(--color-w) !important;}
   
    #header.sections.section_00 .width_con ul.nav_lnb > li:hover a:after{ display: none;}
    #header.sections.section_00 .width_con ul.nav_gnb,
    #header.sections.section_00 .width_con ul.nav_lnb{ position: fixed; right: calc(var(--mobile-nav-width) * -1); width: var(--mobile-nav-width); box-sizing: border-box; background: var(--color-k);}
    #header.sections.section_00 .width_con ul.nav_gnb{ bottom: 0; top: auto !important; padding: var(--mrgn-x2) var(--mrgn-x2) var(--mrgn-x4) var(--mrgn-x2); opacity: 1 !important; filter: blur(0) !important; pointer-events: all !important; z-index: 3;}
    #header.sections.section_00 .width_con ul.nav_gnb:after{ position: absolute; content: ''; bottom: 100%; left: 0; width: 100%; height: var(--mrgn-x2); pointer-events: none; background: linear-gradient(transparent, var(--color-k));}
    #header.sections.section_00 .width_con ul.nav_lnb{ top: 0 !important; height: 100vh; padding: var(--mrgn-x8) 0 var(--mrgn-x16); overflow: auto;} /*모바일메뉴 영역, overflow: auto;=>얘를 꼭 써줘야 한다고 하셨음*/
    #header.sections.section_00 .width_con ul.nav_lnb:after{ position: absolute; content: ''; top: 0; left: 0; width: 100%; height: var(--mrgn-x8); pointer-events: none; background: var(--color-k) url(../img/bi_cclogo_w.svg) no-repeat 50% var(--mrgn-x4) / var(--mrgn-x4);} /*모바일메뉴 상단 브랜드로고*/
    body.open_nav #header.sections.section_00 .width_con ul.nav_gnb,
    body.open_nav #header.sections.section_00 .width_con ul.nav_lnb{right: 0;}
    #header.sections.section_00 .width_con ul.nav_gnb > li,
    #header.sections.section_00 .width_con ul.nav_lnb > li{ display: block; }
    #header.sections.section_00 .width_con ul.nav_gnb > li{ margin: 1.5em 0 0 0; font-size: 1.25em;}
    #header.sections.section_00 .width_con ul.nav_gnb > li.v_divider{ color: transparent; height: 1px; background-color: var(--color-w-015);}
    #header.sections.section_00 .width_con ul.nav_lnb > li{ margin-top: 2.5em; font-size: 1.35em;} /*모바일메뉴 영역안의 메뉴들*/

    #header.sections.section_00 .width_con a.btn_home { height: 40px !important; top: 20px !important;}



    .text_con h6{ max-width: 100%;}
    ul.g_con { grid-template-columns: repeat(2, 1fr);}
    ul.g_con.paper > li.cells:nth-child(1){ grid-column: 1/3; grid-row: 1;}
    ul.g_con.paper > li.cells:nth-child(2){ grid-column: 1/3; grid-row: 2;}
    ul.g_con.paper > li.cells:nth-child(3){ grid-column: 1; grid-row: 3/5;}
    ul.g_con.paper > li.cells:nth-child(4){ grid-column: 2; grid-row: 3;}
    ul.g_con.paper > li.cells:nth-child(5){ grid-column: 2; grid-row: 4;}
    ul.g_con.paper > li.cells:nth-child(6){ grid-column: 1/3; grid-row: 5/7;}
    ul.g_con.paper > li.cells:nth-child(7){ grid-column: 1/3; grid-row: 7;}
    ul.g_con.paper > li.cells:nth-child(8){ grid-column: 1/3; grid-row: 8;}
    ul.g_con > li.cells.ratio_2x1{ 
        width: calc(var(--column) * 2 + var(--mrgn-x2) * 1);
        height: calc(var(--column) * 1 + var(--mrgn-x2) * 0);
    }
    ul.g_con > li.cells.ratio_1x2{ 
        width: calc(var(--column) * 1 + var(--mrgn-x2) * 0);
        height: calc(var(--column) * 2 + var(--mrgn-x2) * 1);
    }
}

@media all and (min-width:0px) and (max-width:599px){
    /*모바일*/
    :root{
        --mrgn: 12.5px;
        --basic-font-size: 11px;
    }

    .title_con > h2{ font-size: 4.5em; }

    /*오른쪽 오픈메뉴 촤라락 나오게하기*/
    body.open_nav #header.sections.section_00 .width_con ul.nav_lnb > li,
    body.open_nav #header.sections.section_00 .width_con ul.nav_gnb > li{ transition: all 500ms ease-out; transform: translateX(0); opacity: 1; filter: blur(0);}
    /* ease-out => 빠져나올때 느리게 변함*/
    #header.sections.section_00 .width_con ul.nav_lnb > li,
    #header.sections.section_00 .width_con ul.nav_gnb > li{ transform: translateX(20px); opacity: 0; filter: blur(10px);}

    body.open_nav #header.sections.section_00 .width_con ul.nav_lnb li:nth-child(1){transition-delay: 250ms;}
    body.open_nav #header.sections.section_00 .width_con ul.nav_lnb li:nth-child(2){transition-delay: 400ms;}
    body.open_nav #header.sections.section_00 .width_con ul.nav_lnb li:nth-child(3){transition-delay: 550ms;}
    body.open_nav #header.sections.section_00 .width_con ul.nav_lnb li:nth-child(4){transition-delay: 700ms;}
    body.open_nav #header.sections.section_00 .width_con ul.nav_lnb li:nth-child(5){transition-delay: 850ms;}
    body.open_nav #header.sections.section_00 .width_con ul.nav_lnb li:nth-child(6){transition-delay: 1000ms;}
    body.open_nav #header.sections.section_00 .width_con ul.nav_lnb li:nth-child(7){transition-delay: 1150ms;}
    body.open_nav #header.sections.section_00 .width_con ul.nav_lnb li:nth-child(8){transition-delay: 1300ms;}
        
    body.open_nav #header.sections.section_00 .width_con ul.nav_gnb li:nth-child(1){transition-delay: 1400ms;}
    body.open_nav #header.sections.section_00 .width_con ul.nav_gnb li:nth-child(2){transition-delay: 1500ms;}
    body.open_nav #header.section_00 .width_con .nav_con ul.nav_gnb li:nth-child(3){transition-delay: 1600ms;}
    body.open_nav #header.section_00 .width_con .nav_con ul.nav_gnb li:nth-child(4){transition-delay: 1700ms;}
    body.open_nav #header.section_00 .width_con .nav_con ul.nav_gnb li:nth-child(5){transition-delay: 1800ms;}

    ul.v_con > li.cells,
    ul.v_con > .slick-list > .slick-track > li.cells{}
    ul.v_con.two_con > li.cells,
    ul.v_con.two_con > .slick-list > .slick-track > li.cells{}




    #visual.sections.section_01{ aspect-ratio: 3 / 5;}
    #visual.sections.section_01 > iframe.yt_video{ width: 296.21%;}

    #atelier.sections.section_03 .width_con .atelier_list:after{ margin-left: calc(var(--basic-width) / -2 - 184px);}
    #atelier.sections.section_03 .width_con ul.v_con li.cells.box > .text_con { padding: var(--mrgn-x2) !important;}
    #atelier.sections.section_03 .width_con ul.v_con li.cells.box > .text_con > a { margin-left: inherit;}
    #atelier.sections.section_03 .width_con ul.v_con li.cells.box > .text_con > a > span { padding-right: var(--mrgn-x2);}

    #essential.sections.section_04 .width_con > ul.v_con.ub_two_con > li.cells { width: calc(100% - var(--mrgn-x2));}
    #essential.sections.section_04 .width_con > ul.v_con.ub_two_con > li.cells > #tab_essential > ul.tab_content > li.selected > ul.v_con > li.cells > ul.v_con.four_con > li.cells.box { width: calc(50% - var(--mrgn-x2));}
    #essential.sections.section_04 .width_con ul.v_con > li.cells > a { left: 10%;}
    #essential.sections.section_04 .width_con ul.v_con > li.cells > a > span { }


    .tab_btn:before { width: 350px; margin-left: -65px;}

    #founder.sections.section_05 .width_con ul.v_con.ub_two_con > li {width: calc(100% - var(--mrgn-x2));}
    #founder.sections.section_05 .width_con ul.v_con.ub_two_con > li > img { width: 50%; margin-left: calc(50% - var(--mrgn-x6)); margin-top: 0px;}
    #founder.sections.section_05 .width_con ul.v_con.ub_two_con > li:last-child > img { width: 70%; top: var(--mrgn); left: calc( 50% - 270px);}
    #founder.sections.section_05 .width_con .history_con ul.v_con.history.center > li.cells:has(> h3):after{ bottom: calc(100% + 17px);}
    #founder.sections.section_05 .width_con .history_con ul.v_con.history.center.bottom > li.cells:has(> h3):after{ top: calc(100% + 17px);}

    #sustainability.sections.section_06 .width_con ul.v_con li { width: calc(100% - var(--mrgn-x2));}
    .sticky { position: static !important; top: auto;}
    /* position:static => 포지션없다는 뜻과 같음*/

    #ambassador.sections.section_07 .width_con ul.v_con { display: flex; flex-direction: column;}
    #ambassador.sections.section_07 .width_con ul.v_con li { width: calc(100% - var(--mrgn-x2));}
    #ambassador.sections.section_07 .width_con ul.v_con > li.cells:nth-of-type(1) { order: 2;}
    #ambassador.sections.section_07 .width_con ul.v_con > li.cells:nth-of-type(2) { order: 1;}
    
    #contact.sections.section_08{ height: 1300px;}
    #contact.sections.section_08 > iframe { top: -210px; left: -50px; width: calc(75% + (var(--basic-width) / 2)); height: calc(150% + 400px);}
    #contact.sections.section_08 .pins { top: 75%; left: 52%;}
    #contact.sections.section_08 .width_con ul.v_con > li { width: calc(100% - var(--mrgn-x2));}
    #contact.sections.section_08 .width_con .title_con >  h4 {margin-bottom: var(--mrgn);} /*타이틀콘이랑 아래 인포부분 사이 밀어주는거*/
    #contact.sections.section_08 .width_con ul.v_con .two_con > li.cells.box .title_con > h5 > table > tbody > tr,th, td,
    #contact.sections.section_08 .width_con ul.v_con .two_con > li.cells.box .title_con > h5 > table > tbody > tr,td > a { text-align: left;}
    #contact.sections.section_08:before{ position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background: #fbcece;}

    #footer.sections.section_09 .width_con ul.rub_two_con li{ width: calc(100% - var(--mrgn-x2));}
    #footer.sections.section_09 .width_con ul.rub_two_con li.cells ul.v_con.four_con li.cells{ width: calc(50% - var(--mrgn-x2)); display: inline-block;}
    #footer.sections.section_09 .width_con ul.rub_two_con li.cells:last-child ul.v_con li.cells{ width: calc(50% - var(--mrgn-x2));}
    #footer.sections.section_09 .width_con ul.rub_two_con li.cells ul.v_con.four_con li.cells ul li{ margin-bottom: var(--mrgn-x4);}
    #footer.sections.section_09 .width_con .shine_bi { width: 25%;}
    #footer.sections.section_09 .width_con .shine_bi:before {position: fixed; content: ''; bottom: 0; left: 0; width: 100%; height: 50%;  background: linear-gradient(#333 23%, #fff 40%, #666 40.5%, #fff 50%);}
}
@media all and (min-width:0px) and (max-width:479px){
    /*작은 모바일*/
    :root{
        --mrgn: 10px;
        --basic-font-size: 10px;
    }
    ul.v_con.four_con > li.cells,
    ul.v_con.four_con > .slick-list > .slick-track > li.cells,
    ul.v_con.six_con > li.cells,
    ul.v_con.six_con > .slick-list > .slick-track > li.cells{ width: calc(50% - var(--mrgn));}

    .tab_btn:before { margin-left: -85px; width: 340px;}

    #visual.sections.section_01{ aspect-ratio: 2 / 3;}
    #visual.sections.section_01 iframe.yt_video{ width: 266.64%;}

    #atelier.sections.section_03 .width_con .atelier_list:after{ margin-left: calc(var(--basic-width) / -2 - 180px);}

    #atelier.sections.section_03 .width_con ul.v_con li.cells.box > .text_con { padding: 30px !important}
    #atelier.sections.section_03 .width_con ul.v_con li.cells.box > .text_con > a {  margin-bottom: 0;}
    #atelier.sections.section_03 .width_con ul.v_con li.cells.box > .text_con > a > span { padding-right: var(--mrgn-x2);}

    #essential.sections.section_04 .width_con > ul.v_con.ub_two_con > li.cells { width: calc(100% - var(--mrgn-x2));}
    #essential.sections.section_04 .width_con > ul.v_con.ub_two_con > li.cells > #tab_essential > ul.tab_content > li.selected > ul.v_con > li.cells > ul.v_con.four_con > li.cells.box { width: calc(50% - var(--mrgn-x2));}
    #essential.sections.section_04 .width_con ul.v_con > li.cells > a { left: 0%;}

    #founder.sections.section_05 .width_con .history_con ul.v_con.history.center > li.cells:has(> h3):after{ bottom: calc(100% + 13px);}
    #founder.sections.section_05 .width_con .history_con ul.v_con.history.center.bottom > li.cells:has(> h3):after{ top: calc(100% + 13px);}

    #ambassador.sections.section_07 .width_con ul.v_con li { width: calc(100% - var(--mrgn-x2));}

}
@media all and (min-width:600px) and (max-width:1039px){
    /*타블렛*/
    :root{
        --mrgn: 15px;
        --basic-font-size: 12px;
    }
    /*오른쪽 오픈메뉴 촤라락 나오게하기*/
    body.open_nav #header.sections.section_00 .width_con ul.nav_lnb > li,
    body.open_nav #header.sections.section_00 .width_con ul.nav_gnb > li{ transition: all 500ms ease-out; transform: translateX(0); opacity: 1; filter: blur(0);}
    /* ease-out => 빠져나올때 느리게 변함*/
    #header.sections.section_00 .width_con ul.nav_lnb > li,
    #header.sections.section_00 .width_con ul.nav_gnb > li{ transform: translateX(20px); opacity: 0; filter: blur(10px);}

    body.open_nav #header.sections.section_00 .width_con ul.nav_lnb li:nth-child(1){transition-delay: 250ms;}
    body.open_nav #header.sections.section_00 .width_con ul.nav_lnb li:nth-child(2){transition-delay: 400ms;}
    body.open_nav #header.sections.section_00 .width_con ul.nav_lnb li:nth-child(3){transition-delay: 550ms;}
    body.open_nav #header.sections.section_00 .width_con ul.nav_lnb li:nth-child(4){transition-delay: 700ms;}
    body.open_nav #header.sections.section_00 .width_con ul.nav_lnb li:nth-child(5){transition-delay: 850ms;}
    body.open_nav #header.sections.section_00 .width_con ul.nav_lnb li:nth-child(6){transition-delay: 1000ms;}
    body.open_nav #header.sections.section_00 .width_con ul.nav_lnb li:nth-child(7){transition-delay: 1150ms;}
    body.open_nav #header.sections.section_00 .width_con ul.nav_lnb li:nth-child(8){transition-delay: 1300ms;}
        
    body.open_nav #header.sections.section_00 .width_con ul.nav_gnb li:nth-child(1){transition-delay: 1400ms;}
    body.open_nav #header.sections.section_00 .width_con ul.nav_gnb li:nth-child(2){transition-delay: 1500ms;}
    body.open_nav #header.section_00 .width_con .nav_con ul.nav_gnb li:nth-child(3){transition-delay: 1600ms;}
    body.open_nav #header.section_00 .width_con .nav_con ul.nav_gnb li:nth-child(4){transition-delay: 1700ms;}
    body.open_nav #header.section_00 .width_con .nav_con ul.nav_gnb li:nth-child(5){transition-delay: 1800ms;}

    ul.v_con.six_con > li.cells,
    ul.v_con.six_con > .slick-list > .slick-track > li.cells{ width: calc(33.3333% - var(--mrgn));}
    

    #visual.sections.section_01{ aspect-ratio: 2 / 3;}
    #visual.sections.section_01 > iframe.yt_video{ width: 266.64%;}

    #atelier.sections.section_03 .width_con .atelier_list:after{ margin-left: calc(var(--basic-width) / -2 - 186px);}

    #essential.sections.section_04 .width_con ul.v_con.two_con { }
    #essential.sections.section_04 .width_con ul.v_con.ub_two_con > li.cells { width: calc(100% - var(--mrgn-x2));}
    #essential.sections.section_04 ul.v_con.ub_two_con li.cells > a { left: calc(50% - 179px);}
    #essential.sections.section_04 ul.v_con.ub_two_con li.cells > a > span { }

    #founder.sections.section_05 .width_con ul.v_con.ub_two_con > li { width: calc(100% - var(--mrgn-x2));}
    #founder.sections.section_05 .width_con ul.v_con.ub_two_con > li > img { width: 50%; margin-left: calc(50% - 200px); margin-top: 0px;}
    #founder.sections.section_05 .width_con ul.v_con.ub_two_con > li:last-child > img { top:0; left: calc( 0 - var(--mrgn-x2));}
    #founder.sections.section_05 .width_con .history_con ul.v_con.history.center > li.cells:has(> h3):after{ bottom: calc(100% + 23px);}
    #founder.sections.section_05 .width_con .history_con ul.v_con.history.center.bottom > li.cells:has(> h3):after{ top: calc(100% + 23px);}

    #ambassador.sections.section_07 .width_con ul.v_con li { width: calc(100% - var(--mrgn-x2));}
    #ambassador.sections.section_07 .width_con ul.v_con { display: flex; flex-direction: column;}
    #ambassador.sections.section_07 .width_con ul.v_con li { width: calc(100% - var(--mrgn-x2));}
    #ambassador.sections.section_07 .width_con ul.v_con > li.cells:nth-of-type(1) { order: 2;}
    #ambassador.sections.section_07 .width_con ul.v_con > li.cells:nth-of-type(2) { order: 1;}

    #contact.sections.section_08 .width_con ul.v_con .two_con > li.cells.box .title_con > h5 > table > tbody > tr,th, td,
    #contact.sections.section_08 .width_con ul.v_con .two_con > li.cells.box .title_con > h5 > table > tbody > tr,td > a { text-align: left;}
    #contact.sections.section_08:before{ position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background: #fbcece;}

    #footer.sections.section_09 .width_con ul.rub_two_con li{ width: calc(100% - var(--mrgn-x2));}
    #footer.sections.section_09 .width_con ul.rub_two_con li.cells ul.v_con.four_con li.cells{ width: calc(25% - var(--mrgn-x2));}
    #footer.sections.section_09 .width_con ul.rub_two_con li.cells ul.v_con.four_con li.cells ul li{ margin-bottom: var(--mrgn-x2);}
    #footer.sections.section_09 .width_con ul.rub_two_con li.cells:last-child ul.v_con li.cells{ width: calc(50% - var(--mrgn-x2));}
    #footer.sections.section_09 .width_con .shine_bi { width: 15%;}
    #footer.sections.section_09 .width_con .shine_bi:before {position: fixed; content: ''; bottom: 0; left: 0; width: 100%; height: 50%;  background: linear-gradient(#333 10%, #fff 24%, #666 24.5%, #fff 33%);}
}
@media all and (min-width:1040px) and (max-width:1239px){
    /*데스크탑*/
    :root{
        --mrgn: 17.5px;
        --basic-font-size: 13px;
        --basic-width : 1000px;
        --column : 51px;
    }
    #visual.sections.section_01{ aspect-ratio: 4 / 3;}
    #visual.sections.section_01 > iframe.yt_video{ width: 133.34%;}

    #contact.sections.section_08:before{ position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background: #fbcece;}

    #founder.sections.section_05 .width_con .history_con ul.v_con.history.center > li.cells:has(> h3):after{ bottom: calc(100% + 28px);}
    #founder.sections.section_05 .width_con .history_con ul.v_con.history.center.bottom > li.cells:has(> h3):after{ top: calc(100% + 28px);}
    #footer.sections.section_09 .width_con .shine_bi:before {position: fixed; content: ''; bottom: 0; left: 0; width: 100%; height: 63%;  background: linear-gradient(#333 10%, #fff 24%, #666 24.5%, #fff 33%);}
    
    .tab_btn:before { margin-left: -60px;}
}
@media all and (min-width:1240px) and (max-width:1459px){
    /*큰 데스크탑*/
    /*1200기준 설계(쓰지 마쎄용)*/
    #visual.sections.section_01{ aspect-ratio: 3 / 2;}
    #visual.sections.section_01 > iframe.yt_video{ width: 118.52%;}

    #atelier.sections.section_03 > img{ }

    #founder.sections.section_05 .width_con .history_con ul.v_con.history.center > li.cells:has(> h3):after{ bottom: calc(100% + 28px);}
    #founder.sections.section_05 .width_con .history_con ul.v_con.history.center.bottom > li.cells:has(> h3):after{ top: calc(100% + 28px);}
}
@media all and (min-width:1460px){
    /*큰 데스크탑*/
    :root{
        --mrgn: 20px;
        --basic-font-size: 16px;
        --basic-width : 1400px;
        --column : 80px;
    }
    #visual.sections.section_01{ aspect-ratio: 2 / 1;}

    #atelier.sections.section_03 > img{}
}