<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@charset "UTF-8";

#visual.sections.section_01{ overflow: hidden; background: url(../img/bg_visual.webp) no-repeat 50% 50% / cover;}
#visual.sections.section_01:after{ position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(360deg, transparent, var(--color-point-y) 75%); opacity: .5;}
/*#visual.sections.section_01 &gt; iframe{ position: absolute; top: 50%; left: 0; width: 100%; pointer-events: none; transform: translateY(-50%);}*/
#visual.sections.section_01 &gt; .width_con{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;}
#visual.sections.section_01 &gt; .width_con .title_con{}
#visual.sections.section_01 &gt; .width_con .title_con h3{}
#visual.sections.section_01 &gt; .width_con .title_con h2{}
#visual.sections.section_01 &gt; .width_con .title_con h4{}
#visual.sections.section_01 &gt; .width_con .title_con h5{}
#visual.sections.section_01 &gt; .width_con .title_con h1{ color: var(--color-w); text-shadow: 0 0 var(--mrgn-x2) var(--color-point-y); opacity: .25; top: 100px; backdrop-filter:blur(3px);}
#visual.sections.section_01 &gt; .width_con &gt; img { position: absolute; top: 32%; left: 40%; pointer-events: none;}
#visual.sections.section_01 .width_con .title_con ul{ position:absolute; left:50%; top:0; width:800px; transform:translate(-50%,-50%);}
#visual.sections.section_01 .width_con .title_con ul li{ display:inline-block;}
#visual.sections.section_01 .width_con .title_con ul li h1:after,
#visual.sections.section_01 .width_con .title_con ul li h1:before{position:absolute; content:'W'; top:0; left:0; width:inherit; height:inherit; text-align:center;}
#visual.sections.section_01 .width_con .title_con ul li:nth-child(2) h1:after,
#visual.sections.section_01 .width_con .title_con ul li:nth-child(2) h1:before{content:'e';}
#visual.sections.section_01 .width_con .title_con ul li:nth-child(3) h1:after,
#visual.sections.section_01 .width_con .title_con ul li:nth-child(3) h1:before{content:'l';}
#visual.sections.section_01 .width_con .title_con ul li:nth-child(4) h1:after,
#visual.sections.section_01 .width_con .title_con ul li:nth-child(4) h1:before{content:'c';}
#visual.sections.section_01 .width_con .title_con ul li:nth-child(5) h1:after,
#visual.sections.section_01 .width_con .title_con ul li:nth-child(5) h1:before{content:'O';}
#visual.sections.section_01 .width_con .title_con ul li:nth-child(6) h1:after,
#visual.sections.section_01 .width_con .title_con ul li:nth-child(6) h1:before{content:'m';}
#visual.sections.section_01 .width_con .title_con ul li:nth-child(7) h1:after,
#visual.sections.section_01 .width_con .title_con ul li:nth-child(7) h1:before{content:'e';}

#about.sections.section_02{ background: url(../img/bg_about.webp) no-repeat 50% 50% / cover; background-attachment: fixed;}
#about.sections.section_02 &gt; .width_con{}
#about.sections.section_02 &gt; .width_con ul.v_con{}
#about.sections.section_02 &gt; .width_con ul.v_con li{}
#about.sections.section_02 &gt; .width_con ul.v_con li:before{ position: absolute; content: ''; width: 222px; height: 178px; top:525px; left: 930px; background: url(../img/img_gooey_01.webp) no-repeat 0 0 / cover; pointer-events: none; z-index: 1;}

#about.sections.section_02 &gt; .width_con ul.v_con li .title_con{ padding-top: calc(var(--mrgn-x4) + var(--mrgn-x2)); padding-bottom: var(--mrgn-x4); padding-left: var(--mrgn);}
#about.sections.section_02 &gt; .width_con ul.v_con li:first-child{}
#about.sections.section_02 &gt; .width_con ul.v_con li:last-child{ border-radius: 0 var(--mrgn) var(--mrgn) 0; overflow: hidden; background: var(--color-w); /*box-shadow: 0px 20px 20px -10px #f1ccbc; filter: brightness(1.1);*/}
#about.sections.section_02 &gt; .width_con ul.v_con li:last-child:before { position: absolute; content: ''; width: 40px; height: 100%; background: #f00; top:0; left: -40px; box-shadow: 0 0 42px 0 var(--color-k-075);}
#about.sections.section_02 &gt; .width_con ul.v_con li:last-child:after{ }
#about.sections.section_02 &gt; .width_con ul.v_con li.cells{}

#skills.sections.section_03{}
#skills.sections.section_03 .width_con{}
#skills.sections.section_03 .width_con ul.v_con{}
#skills.sections.section_03 .width_con ul.v_con.two_con &gt; li{}
#skills.sections.section_03 .width_con ul.v_con.two_con &gt; li.cells{}
#skills.sections.section_03 .width_con ul.v_con.two_con &gt; li.cells &gt; img{ pointer-events: none;}
#skills.sections.section_03 .width_con ul.v_con.two_con &gt; li.cells .title_con{ z-index: 1;}
#skills.sections.section_03 .width_con ul.v_con.two_con &gt; li.cells &gt; ul.v_con.ub_two_con{}
#skills.sections.section_03 .width_con ul.v_con.two_con &gt; li.cells &gt; ul.v_con.ub_two_con li{}
#skills.sections.section_03 .width_con ul.v_con.two_con &gt; li.cells &gt; ul.v_con.ub_two_con li.cells{}
#skills.sections.section_03 .width_con ul.v_con.two_con &gt; li.cells &gt; ul.v_con.ub_two_con li.cells.skillsleft,
#skills.sections.section_03 .width_con ul.v_con.two_con &gt; li.cells &gt; ul.v_con.ub_two_con li.cells.skillsright { color: var(--color-main);}
#skills.sections.section_03 .width_con ul.v_con.two_con &gt; li.cells &gt; ul.v_con.ub_two_con li.cells.skillsleft{ display: inline-block;}
#skills.sections.section_03 .width_con ul.v_con.two_con &gt; li.cells &gt; ul.v_con.ub_two_con li.cells.skillsleft &gt; h4{}
#skills.sections.section_03 .width_con ul.v_con.two_con &gt; li.cells &gt; ul.v_con.ub_two_con li.cells.skillsleft &gt; h4 &gt; img { margin-right: var(--mrgn-half); pointer-events: none;}
#skills.sections.section_03 .width_con ul.v_con.two_con &gt; li.cells &gt; ul.v_con.ub_two_con li.cells.skillsright{}

#works.sections.section_04{ background: url(../img/bg_milk_btm.webp) no-repeat 0 0 / cover;}
#works.sections.section_04 .width_con{}
#works.sections.section_04 .width_con .title_con{}
#works.sections.section_04 .width_con ul.v_con{}
#works.sections.section_04 .width_con ul.v_con.two_con{}
#works.sections.section_04 .width_con ul.v_con.two_con li{}
#works.sections.section_04 .width_con ul.v_con.two_con li.cells{ vertical-align: middle;}
#works.sections.section_04 .width_con ul.v_con.two_con li.cells &gt; a {}
#works.sections.section_04 .width_con ul.v_con.two_con li.cells &gt; a &gt; img{ position: relative;}
#works.sections.section_04 .width_con ul.v_con.two_con li.cells &gt; i{ position: absolute; color: var(--color-w); right: var(--mrgn-half); top: var(--mrgn-half); font-size: 1.5em; z-index: 2;}
#works.sections.section_04 .width_con ul.v_con.two_con li.cells .info_con{ color: var(--color-main);}
#works.sections.section_04 .width_con ul.v_con.two_con li.cells .info_con h3{ margin-bottom: var(--mrgn-x2);}
#works.sections.section_04 .width_con ul.v_con.two_con li.cells .info_con h3:before{ position: absolute; top: 40px; left: 0; content: ''; width: var(--mrgn-x2); height: 3px; background: var(--color-point-y);}
#works.sections.section_04 .width_con ul.v_con.two_con li.cells .info_con &gt; table{}
#works.sections.section_04 .width_con ul.v_con.two_con li.cells .info_con &gt; table &gt; tbody{ width: 100%;}
#works.sections.section_04 .width_con ul.v_con.two_con li.cells .info_con &gt; table &gt; tbody &gt; tr{}
#works.sections.section_04 .width_con ul.v_con.two_con li.cells .info_con &gt; table &gt; tbody &gt; tr &gt; td{}
#works.sections.section_04 .width_con ul.v_con.two_con li.cells .info_con &gt; table &gt; tbody &gt; tr &gt; th{ width: 150px;}
#works.sections.section_04 .width_con ul.v_con.two_con li.cells .info_con &gt; table &gt; tbody &gt; tr &gt; td,
#works.sections.section_04 .width_con ul.v_con.two_con li.cells .info_con &gt; table &gt; tbody &gt; tr &gt; th{}
#works.sections.section_04 .width_con ul.v_con.two_con li.cells .info_con &gt; table &gt; tbody &gt; tr,th,td{} 
#works.sections.section_04 .width_con ul.v_con.two_con li.cells .info_con &gt; table &gt; tbody &gt; tr &gt; td &gt; h4{ padding-bottom: var(--mrgn-half);}
#works.sections.section_04 .width_conv_con.four_con {}
#works.sections.section_04 .width_conv_con.four_con li{}
#works.sections.section_04 .width_conv_con.four_con li.cells{}
#works.sections.section_04 .width_conv_con.four_con li.cells &gt; a{}
#works.sections.section_04 .width_conv_con.four_con li.cells &gt; a &gt; img{}



#attitude.sections.section_05{ background: url(../img/bg_attitude.webp) no-repeat 50% 50% / cover;}
#attitude.sections.section_05 .width_con{}
#attitude.sections.section_05 .width_con .title_con{}
#attitude.sections.section_05 .width_con ul.g_con{ }
#attitude.sections.section_05 .width_con ul.g_con li{ overflow: hidden;}
#attitude.sections.section_05 .width_con ul.g_con li.cells{ }
#attitude.sections.section_05 .width_con ul.g_con li.cells &gt; h3{ position: absolute; top: 0; left: 0; color: var(--color-main); font-size: 3em; padding: var(--mrgn);}
#attitude.sections.section_05 .width_con ul.g_con li.cells &gt; .text_con{ color: var(--color-main); padding: var(--mrgn);}
#attitude.sections.section_05 .width_con ul.g_con li.cells &gt; .text_con &gt; h4,
#attitude.sections.section_05 .width_con ul.g_con li.cells &gt; .text_con &gt; h5{ padding-top: var(--mrgn); vertical-align: bottom; margin: 0;}

#contact.sections.section_06{ background: var(--color-main); margin-top: calc(var(--mrgn-x4) * -1);}
#contact.sections.section_06 .width_con{}
#contact.sections.section_06 .width_con .title_con{}
#contact.sections.section_06 .width_con .text_con{ text-align: center; margin-bottom: var(--mrgn-x4);}
#contact.sections.section_06 .width_con .text_con &gt; img{ width: 200px; pointer-events: none;}
#contact.sections.section_06 .width_con ul.v_con{}
#contact.sections.section_06 .width_con ul.v_con li{ margin-bottom: var(--mrgn-x8);}
#contact.sections.section_06 .width_con ul.v_con li.cells{ background: url(../img/img_contact_honeycombo.webp) no-repeat 50% 50% / cover; position: relative; width: 280px; height: 280px;}
#contact.sections.section_06 .width_con ul.v_con li.cells .text_con{ display: inline-block; vertical-align: middle; padding: 0; margin: 0; top:100px; text-shadow: 2px 2px 0 var(--color-point-y), -2px -2px 0 var(--color-point-y), -2px 2px 0 var(--color-point-y), 2px -2px 0 var(--color-point-y), -3px -0 0 var(--color-point-y), 3px 0 0 var(--color-point-y);}
#contact.sections.section_06 .width_con ul.v_con li.cells .text_con &gt; h3{ color: var(--color-point);}
#contact.sections.section_06 .width_con ul.v_con li.cells .text_con &gt; h4{ color: var(--color-main);}




/*그리드*/
:root{
    --mrgn-half: calc(var(--mrgn) / 2);
    --mrgn: 18px;
}
ul.g_con{ display: grid; grid-gap: calc(var(--mrgn) * 2); width: 100% !important; margin: 0 !important; grid-template-columns: repeat(4, 1fr);}
ul.g_con &gt; li.cells{ margin: 0 !important; width: 100%; background: var(--color-w-065); backdrop-filter: blur(10px); border-radius: var(--mrgn); position: relative;}
ul.g_con &gt; li.cells.square{ aspect-ratio: 1 / 1;}
.g_ratio_1x1{padding-top: 100%;}
.g_ratio_1x2{padding-top: calc(200% + (var(--mrgn) * 2));}
.g_ratio_1x3{padding-top: calc(300% + (var(--mrgn) * 4));}

.g_ratio_2x1{padding-top: calc(50% - var(--mrgn));}
.g_ratio_3x1{padding-top: calc(33.3333% - (var(--mrgn) * 1.3));}
.g_ratio_4x1{padding-top: calc(25% - (var(--mrgn) * 1.5));}
.g_ratio_5x1{padding-top: calc(20% - (var(--mrgn) * 1.6));}
.g_ratio_6x1{padding-top: calc(16.6666% - (var(--mrgn) * 1.666));}

ul.g_con.grid_box &gt; li.cells:nth-child(1){ grid-column: 1; grid-row: 1 / 3;}
ul.g_con.grid_box &gt; li.cells:nth-child(2){ grid-column: 2 / 4; grid-row: 1;}
ul.g_con.grid_box &gt; li.cells:nth-child(3){ grid-column: 4; grid-row: 1;}
ul.g_con.grid_box &gt; li.cells:nth-child(4){ grid-column: 2; grid-row: 2;}
ul.g_con.grid_box &gt; li.cells:nth-child(5){ grid-column: 3 / 5; grid-row: 2;}




/* events box type 박스안 이미지에 배경 필터효과
.box_01{ box-shadow: 0 10px 30px -10px var(--color-k-065); }
.box_01:hover{ box-shadow: 0 10px 30px -10px var(--color-k); }
.box_01:active{ box-shadow: 0 1px 3px -1px var(--color-k); }
.box_01:before,
.box_01:after{ position: absolute; content:''; left: 0; width: 100%; border-radius: inherit; }
.box_01:before{ top: 0; height: 100%; backdrop-filter: blur(0); transition: all 500ms ease-out; }
.box_01:hover:before{ backdrop-filter: blur(10px); } /*원래 있던버전
.box_01:after{ bottom: 0; height: 25%; backdrop-filter: blur(30px); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #fff 50%); mask-image: linear-gradient(180deg, transparent 0%, #fff 50%); }
.box_01 &gt; a{ box-shadow: none !important;/* clip-path: polygon(0 -100%, 100% -100%, 100% 100%, 0 100%);}
.box_01 &gt; a &gt; img{ position: absolute; width: 100%; /* bottom: .5px; left: 0; border-radius: 0 0 var(--mrgn) var(--mrgn); transform: scale(1); transform-origin: bottom; transition: all 500ms ease-out;}
.box_01:hover &gt; a &gt; img{ transform: scale(1.025); margin-bottom:0;}
.box_01 &gt; .text_con{color: var(--color-sub); z-index: 1; padding: var(--mrgn);}*/</pre></body></html>