@charset "utf-8";
/****************************************
2025-04-03
created by coDribble.

01. Common
02. Header
03. Footer
04. Main
05. Sub
    - Sub Common


01. Common
****************************************/
:root {
    --base-size: 16px;
    --xs-size: 14px;
    --sm-size: 18px;
    --md-size: 20px;
    --lg-size: 26px;
    --xl-size: 30px;
    --headline: 82px;
    /* 이외 사이즈는 개별 적용 */

    --base-color: black;
    --primary-color: #F52F42;

    --montserrat: "Montserrat", sans-serif;

    --section-gap: 120px;
    --contents-gap: 180px;
}

/* clearfix */
.clearfix:after { content:''; display:block; clear:both; }

/* font-family */
.montserrat { font-family:var(--montserrat); }

/* font-size */
.text-xs { font-size:var(--xs-size); }
.text-sm { font-size:var(--sm-size); }
.text-md { font-size:var(--md-size); }
.text-lg { font-size:var(--lg-size); }
.text-xl { font-size:var(--xl-size); }

/* color */
.text-black { color:var(--base-color); }
.text-white { color:white; }
.text-primary { color:var(--primary-color); }

/* font-weight */
.font-normal { font-weight:400; }
.font-medium { font-weight:500; }
.font-semibold { font-weight:600; }
.font-bold { font-weight:700; }

/* text-align */
.text-center { text-align:center; }

/* word-break */
.break-all { word-break:break-all; }
.break-keep { word-break:keep-all; }

/* overflow */
.overflow-hidden { overflow:hidden; }

/* display */
.hidden { display:none; }
.block { display:block; }
.inline-block { display:inline-block; }
.flex { display:flex; }
.inline-flex { display:inline-flex; }
.grid { display:-ms-grid; display:grid; }

/* flex */
.flex-wrap { flex-wrap:wrap; }
.flex-col { flex-direction:column; }
.flex-row-reverse { flex-direction:row-reverse; }
.items-start { align-items:start; }
.items-end { align-items:end; }
.items-center { align-items:center; }
.justify-start { justify-content:start; }
.justify-end { justify-content:end; }
.justify-center { justify-content:center; }
.justify-between { justify-content:space-between; }
.justify-evenly { justify-content:space-evenly; }
.justify-around { justify-content:space-around; }
.shrink-0 { flex-shrink:0; }

/* position */
.relative { position:relative; }
.absolute { position:absolute; }
.fixed { position:fixed; }
.sticky { position:sticky; }
.top-0 { top:0; }
.top-100 { top:100%; }
.left-0 { left:0; }
.right-0 { right:0; }
.bottom-0 { bottom:0; }
.bottom-100 { bottom:100%; }

/* background-color */
.bg-primary { background-color:var(--primary-color); }

/* size */
.w-full { width:100%; }
.h-full { height:100%; }

/* border-radius  */
.rounded-10 { border-radius:10px; }
.rounded-15 { border-radius:15px; }
.rounded-5x { border-radius:5em; }

/* frame */
#wrapper.sub { padding-top:81px; }
.section { padding-block:var(--section-gap); }
.contents { padding-inline:var(--contents-gap); }
.contents .inner {  }

.headline {  }
.sch_word { color:var(--primary-color); }

.logo { background-image:url('../images/common/logo.png'); background-image:url('../images/common/logo.svg'); background-position:center; background-repeat:no-repeat; background-size:auto 100%; }
.icon.grid { background-image:url('../images/common/icon/grid.png'); background-image:url('../images/common/icon/grid.svg'); background-position:center; background-repeat:no-repeat; background-size:cover; }
.icon.download { background-image:url('../images/common/icon/download.png'); background-image:url('../images/common/icon/download.svg'); background-position:center; background-repeat:no-repeat; background-size:cover; }
.icon.inquiry { background-image:url('../images/sub/products/inquiry.png'); background-image:url('../images/sub/products/inquiry.svg'); background-position:center; background-repeat:no-repeat; background-size:cover; }
.icon.file { background-image:url('../images/sub/products/file_black.png'); background-image:url('../images/sub/products/file_black.svg'); background-position:center; background-repeat:no-repeat; background-size:cover; }

.pc { display:block; }
.laptop { display:none; }
.mo { display:none; }

.sns-group { display:none; align-items:center; gap:20px; }
.sns-group .sns { background-position:center top; background-repeat:no-repeat; background-size:100% auto; }
.sns-group .instagram { background-image:url('../images/common/icon/instagram.png'); background-image:url('../images/common/icon/instagram.svg'); }
.sns-group .blog { background-image:url('../images/common/icon/blog.png'); background-image:url('../images/common/icon/blog.svg'); }
.sns-group .youtube { background-image:url('../images/common/icon/youtube.png'); background-image:url('../images/common/icon/youtube.svg'); }
.sns-group .kakao { background-image:url('../images/common/icon/kakao.png'); background-image:url('../images/common/icon/kakao.svg'); }

#floating { right:26px; bottom:16%; z-index:999; }
#floating li:not(:first-child) { margin-top:10px; }
#floating li .btn { width:80px; background-color:black; color:white; text-align:center; aspect-ratio:1; }
#floating li .btn::before { content:''; display:block; width:100%; height:30px; margin-bottom:8px; background-position:center; background-repeat:no-repeat; background-size:auto 100%; }
#floating li .btn-inquiry { background-color:var(--primary-color); }
#floating li .btn-inquiry::before { background-image:url('../images/common/icon/inquiry_white.png'); background-image:url('../images/common/icon/inquiry_white.svg'); }
#floating li .btn-3d::before { background-image:url('../images/common/icon/3d_white.png'); background-image:url('../images/common/icon/3d_white.svg'); }
#floating li .btn-sns::before { background-image:url('../images/common/icon/comment_white.png'); background-image:url('../images/common/icon/comment_white.svg'); }
#floating li .btn-sponsor::before { background-image:url('../images/common/icon/handshake_white.png'); background-image:url('../images/common/icon/handshake_white.svg'); }
#floating li .btn-kakao::before { height:33px; margin:0; background-image:url('../images/common/icon/kakao.png'); background-image:url('../images/common/icon/kakao.svg'); }
#floating li .btn-top { background-color:#F7F7F7; }
#floating li .btn-top::before { height:40px; margin:0; background-image:url('../images/common/icon/arrow_top_black.png'); background-image:url('../images/common/icon/arrow_top_black.svg'); }
#floating li .btn:not(.btn-top):hover { background-color:var(--primary-color); }
#floating li .btn-top:hover { background-color:black; }
#floating li .btn-top:hover::before { background-image:url('../images/common/icon/arrow_top_white.png'); background-image:url('../images/common/icon/arrow_top_white.svg'); }
#floating li:has(.sns-group) { position:relative; }
#floating .sns-group { position:absolute; top:0; right:0; height:100%; padding-inline:25px calc(100% + 25px); background-color:black; border-radius:10px; z-index:-1; }
#floating .sns-group.open { display:flex; }
#floating .sns-group .sns { width:35px; height:32px; }
#floating li:has(.sns-group.open)::before { content:''; position:absolute; top:0; left:0; width:1px; height:100%; background-color:rgb(112 112 112 / .4); }
#floating li:has(.sns-group.open) .btn-sns { border-radius:10px; }

.dot-list li { display:flex; position:relative; gap:12px; font-size:var(--md-size); line-height:1.8; }
.dot-list li::before { content:''; width:5px; height:5px; margin-top:calc(var(--md-size) * .9 - 3px); background-color:var(--primary-color); border-radius:1px; }

[class^='swiper-button'] { --swiper-navigation-size: 54px; width:var(--swiper-navigation-size); background-color:white; border-radius:50%; }
[class^='swiper-button']::after { content:''; width:37.037%; height:44.4444%; background-image:url('../images/common/icon/arrow_top_black.png'); background-image:url('../images/common/icon/arrow_top_black.svg'); background-position:center; background-repeat:no-repeat; background-size:contain; rotate:-90deg; }
.swiper-button-next::after { rotate:90deg; }
.swiper-pagination { display:flex; }
.swiper-pagination .swiper-pagination-bullet { width:14px; height:14px; background-color:rgb(255 255 255 / .5); border:2px solid white; border-radius:2px; opacity:1; }
.swiper-pagination .swiper-pagination-bullet-active { background-color:white; }

.checkbox { position:relative; padding:10px 20px; background-color:white; border:1px solid #E2E2E2; border-radius:5em; color:#707070; -webkit-user-select:none; -ms-user-select:none; user-select:none; cursor:pointer; }
.checkbox:has(input[type="checkbox"]:checked) { background-color:var(--primary-color); color:white; }
.checkbox:has(input[type="checkbox"]:focus) { border-color:var(--primary-color); }


#modal { display:none; align-items:center; justify-content:center; position:fixed; top:0; right:0; bottom:0; left:0; z-index:9999; }
#modal .modal-container { overflow-y:auto; position:relative; background-color:white; border:1px solid #ddd; border-radius:10px; box-shadow:10px 20px 20px rgb(0 0 0 / .2); }
#modal .modal-container::-webkit-scrollbar { width:8px; background-color:transparent; }
#modal .modal-container::-webkit-scrollbar-button { display:none; }
#modal .modal-container::-webkit-scrollbar-track { background-color:transparent; }
#modal .modal-container::-webkit-scrollbar-thumb { background-color:rgb(139 139 139 / 1); border-radius:5em; }



/****************************************
02. Header
****************************************/
#header { background-color:rgb(255 255 255 / .5); z-index:9999; }
body:has(#wrapper.sub) #header, #header:has(#sitemap.show) { background-color:white; }
#title { top:50%; width:147px; height:16px; translate:0 -50%; }
#gnb .gnb-list > li { padding-inline:25px; }
#gnb .depth1 { display:flex; align-items:center; gap:10px; position:relative; padding-block:30px; font-weight:600; font-size:var(--sm-size); line-height:1.1666; }
#gnb .has-depth.on .depth1, #gnb .depth1.on { color:var(--primary-color); }
#gnb .has-depth.on .depth1::before, #gnb .depth1.on::before { content:''; position:absolute; bottom:0; width:100%; height:2px; background-color:currentColor; }
#gnb .has-depth .depth1::after { content:'\f107'; font-family:'Font Awesome 6 Free'; }
#gnb .depth2-wrap { text-align:center; z-index:1; }
#gnb .sns-group { padding-inline:23px; margin-top:42px; }
#gnb .sns-group .sns { width:30px; height:28px; }
#gnb .sns-group .kakao { background-image:url('../images/common/icon/kakao_brown.png'); background-image:url('../images/common/icon/kakao_brown.svg'); }
#btnSearch { width:100%; height:45px; padding-inline:20px; background-color:#F2F2F2; color:#707070; }
#btnSearch i { color:black; }
#searchItem { top:50%; width:170px; translate:0 -50%; transition:width .3s ease; }
#searchItem #sch_str { height:80px; padding-inline:30px 100px; background-color:#F2F2F2; border:0; border-radius:0; }
#searchItem #sch_submit { top:50%; right:calc(30px + 1em); width:1em; height:1em; font-size:1.8125em; translate:0 -50%; }
#searchItem #sch_close { top:50%; right:15px; width:1em; height:1em; font-size:1.8125em; translate:0 -50%; }
#searchItem #sch_close::before { content:''; position:absolute; top:50%; left:50%; width:141%; height:4px; background-color:black; translate:-50% -50%; rotate:45deg; }
#searchItem #sch_close::after { content:''; position:absolute; top:50%; left:50%; width:141%; height:4px; background-color:black; translate:-50% -50%; rotate:-45deg; }
#searchItem.on { top:0; right:calc(var(--contents-gap) * -1); width:480px; translate:0; }
#searchItem.on #btnSearch { display:none; }
#searchItem.on .search-form { display:block; }
#hamburger { top:50%; width:25px; height:22px; translate:0 -50%; }
#hamburger .bar { position:absolute; top:50%; left:0; width:100%; height:2px; background-color:black; translate:0 -50%; }
#hamburger::before, #hamburger::after { content:''; position:absolute; left:0; width:100%; height:2px; background-color:black; }
#hamburger::before { top:0; }
#hamburger::after { top:100%; translate:0 -100%; }

#sitemap { display:none; justify-content:center; position:absolute; top:100%; left:0; width:100%; padding-block:20px 44px; background-color:white; border-top:1px solid #E2E2E2; }
#sitemap.show { display:flex; }
#sitemap > ul { display:flex; }
#sitemap > ul li li { padding-block:10px; padding-left:35px; }
#sitemap > ul li li a { display:block; position:relative; width:100%; }
#sitemap > ul li li a.active::before { content:''; position:absolute; top:0; left:0; width:4px; height:4px; background-color:var(--primary-color); border-radius:2px; translate:-200% 0; }

#menuVisual { position:absolute; top:50%; right:calc(var(--contents-gap) / 2); width:20%; translate:0% -50%; }
#menuVisual img { width:100%; height:auto; }



/****************************************
03. Footer
****************************************/
#footer { border-top:1px solid #E2E2E2; }
#footer .footer-inner { gap:30px; padding-block:45px 40px; }
#footer .company-info { /*min-width:436px;*/ flex-shrink:0; padding-top:5px; }
#footer .company-info > div:not(:first-child) { margin-top:35px; }
#footer .logo { width:238px; height:26px; }
#footer .info div:not(:first-child) { margin-top:20px; }
#footer .info dl:not(:first-child) { margin-top:7px; color:#707070; }
#footer .location dd:first-of-type { font-weight:700; }
#footer .location dd:first-of-type::after { content:''; display:block; width:1px; height:calc(1em - 4px); margin-inline:.4em; background-color:currentColor; }
#footer .info dl:not(.location) dt:not(:first-of-type) { margin-left:10px; }
#footer .info dl:not(.location) dt::after { content:'.'; margin-right:.2em; }
#footer .company-info > div:last-child { display:flex; align-items:flex-end; justify-content:space-between; gap:10px; }
#footer .family-site { width:200px; }
#footer .family-site .btn-family { padding-bottom:15px; border-bottom:1px solid currentColor; }
#footer .family-site .btn-family::before { content:''; position:absolute; top:0; right:.5em; width:2px; height:1em; background-color:currentColor; border-radius:5em; rotate:90deg; }
#footer .family-site .btn-family::after { content:''; position:absolute; top:0; right:.5em; width:2px; height:1em; background-color:currentColor; border-radius:5em; transition:rotate .3s ease; }
#footer .family-site .btn-family.active::after { rotate:90deg; }
#footer .family-list { overflow:hidden; height:0; padding-bottom:0; background-color:white; transition:height .3s ease, padding-bottom .3s ease; }
#footer .family-list:not(.active) { display:none; }
#footer .family-list ul { border-bottom:1px solid currentColor; }
#footer .family-list li:not(:first-child) { border-top:1px solid #ddd; }
#footer .family-list a { display:block; padding:15px 10px; font-weight:500; }
#footer .family-list a:hover { background-color:#eee; }
/*#footer .family-site:hover .family-list { height:var(--family-height); }
#footer .family-site:hover .btn-family::after { content:'\f068'; }*/
#footer .sns-group { display:flex; }
#footer .sns-group .sns { width:35px; height:32px; }
#footer .contact-us { width:min(calc(100% - 466px), 900px); }
#footer .contact-us .headline { gap:18px; margin-bottom:25px; }
#footer .contact-us .headline p { line-height:1.5; }
#footer .contact-banner { gap:10px; }
#footer .contact-banner li { width:250px; min-height:180px; }
#footer .contact-banner li:last-child { width:380px; }
#footer .contact-banner a { overflow:hidden; display:block; position:relative; height:100%; padding:20px; background-color:#F6F4EF; }
#footer .contact-banner a::before { content:''; position:absolute; bottom:0; left:0; width:100%; height:25%; background-color:#DBDBDB; }
#footer .contact-banner a::after { content:''; position:absolute; background-position:center; background-repeat:no-repeat; }
#footer .contact-banner .office::after { bottom:16.6666%; right:12%; width:36.8%; height:50%; background-image:url('../images/common/office.png'); background-image:url('../images/common/office.svg'); background-size:auto 100%; }
#footer .contact-banner .catalogue::after { bottom:0; right:0; width:60%; height:83.3333%; background-image:url('../images/common/catalogue.png'); background-image:url('../images/common/catalogue.svg'); background-size:auto 100%; }
#footer .contact-banner .inquiry::after { bottom:-1.6666%; right:3.6842%; width:39.7368%; height:83.3333%; background-image:url('../images/common/inquiry.png'); background-image:url('../images/common/inquiry.svg'); background-size:auto 100%; }
#footer .contact-banner p { position:relative; z-index:2; }
#footer .contact-banner .title { margin-top:10px; }
#footer .contact-banner a:hover::before { background-color:var(--primary-color); }
#footer .contact-banner a:hover p { color:var(--primary-color); }
#copyright { padding-block:20px; border-top:1px solid #E2E2E2; }


/****************************************
04. Main
****************************************/
#keyVisual { overflow:hidden; height:100vh; }
#keyVisual > .swiper { height:100%; }
#keyVisual > .swiper .swiper-slide img { position:absolute; top:50%; left:50%; min-width:100%; min-height:100%; translate:-50% -50%; -o-object-fit:cover; object-fit:cover; }
#keyVisual .title { top:44.1666%; left:57.2916%; }
#keyVisual .title span { margin-left:.4em; }
#keyVisual .visual-thumbnail { bottom:85px; padding-inline:var(--contents-gap); z-index:1; }
#keyVisual .vision { flex-shrink:0; }
#keyVisual .vision p { line-height:1.5; }
/*#keyVisual .thumbnails { width:min(calc(100% - 497px), 760px); margin:0; }
#keyVisual .thumbnails .swiper-slide { cursor:pointer; }
#keyVisual .thumbnails .swiper-slide img { border:1px solid white; }
#keyVisual .swiper-slide-thumb-active::after { content:''; position:absolute; top:0; left:0; width:0%; height:100%; background-color:rgb(255 255 255 / .5); -webkit-animation:fill 10s linear forwards; animation:fill 10s linear forwards; }
@-webkit-keyframes fill {
    0% { width:0%; }
    100% { width:100%; }
}
@keyframes fill {
    0% { width:0%; }
    100% { width:100%; }
}*/
/*#keyVisual .controller { display:none; }
#keyVisual:has(.swiper-slide:hover) .controller { display:block; }*/
#keyVisual .swiper-pagination { position:static; margin-top:50px; }
#keyVisual .brand { position:absolute; top:50%; left:0; width:100%; text-align:center; translate:0 -50%; z-index:1; }
#keyVisual .brand p { margin-top:30px; font-size:24px; }
#keyVisual .brand .bi { height:80px; background-position:center; background-repeat:no-repeat; background-size:auto 100%; }
#keyVisual .ilsole .bi { background-image:url('../images/main/ilsole.png'); background-image:url('../images/main/ilsole.svg'); }
#keyVisual .infinity .bi { background-image:url('../images/main/infinity.png'); background-image:url('../images/main/infinity.svg'); }
#keyVisual .cosmolite .bi { height:50px; background-image:url('../images/main/cosmolite.png'); background-image:url('../images/main/cosmolite.svg'); }
#keyVisual .fila .bi { height:200px; background-image:url('../images/main/fila.png'); background-image:url('../images/main/fila.svg'); }



/****************************************
05. Sub
****************************************/
.sub .headline { padding-block:132px 50px; border-bottom:1px solid #E2E2E2; }
.sub .headline .en { font-size:90px; letter-spacing:-.02em; }
.sub .headline .title { padding-bottom:15px; font-size:50px; letter-spacing:-.04em; }
.sub .headline.section-header { padding-top:0; border:0; }
.sub .headline.section-header .en { font-weight:700; font-size:50px; }
.sub .headline.section-header .title { font-size:40px; }
#subVisual { position:relative; width:0; height:800px; background-image:var(--src-pc); background-position:left center; background-repeat:no-repeat; background-size:cover; }

#productVisual .swiper-pagination { top:50px; left:40px; bottom:auto; width:auto; }
#brandInfo { display:flex; height:750px; margin-block:150px; background-color:#F6F4EF; }
#brandInfo .visual { width:50%; height:100%; background-position:center; background-repeat:no-repeat; background-size:cover; }
#brandInfo .info { display:flex; align-items:center; width:48%; height:100%; padding-inline:100px; }
#brandInfo .info > div { width:100%; }
#brandInfo .info .ci { height:60px; background-position:left center; background-repeat:no-repeat; background-size:auto 100%; }
#brandInfo .info .title { margin-top:40px; font-weight:600; font-family:var(--montserrat); font-size:var(--lg-size); }
#brandInfo .info .desc { margin-top:25px; }
#brandInfo .info .desc p { line-height:1.5; }
#brandInfo .info .desc p:not(:first-child) { margin-top:1.25em; }
#brandInfo .info .btn_confirm { margin-top:40px; }
#brandInfo .info .btn-down { display:flex; align-items:center; justify-content:center; gap:10px; width:min(100%, 230px); padding-block:25px; background-color:white; border-radius:5em; font-weight:500; font-size:var(--sm-size); }
#brandInfo .info .btn-down .icon { width:1em; height:1em; }
#brandInfo .info .btn-down:hover { background-color:black; color:white; }
#brandInfo .info .btn-down:hover .icon { background-image:url('../images/common/icon/download_white.png'); background-image:url('../images/common/icon/download_white.svg'); }
#brandInfo.ilsole .visual { background-image:url('../images/sub/products/ilsole/ilsole.jpg'); }
#brandInfo.infinity .visual { background-image:url('../images/sub/products/infinity/infinity.jpg'); }
#brandInfo.cosmolite .visual { background-image:url('../images/sub/products/cosmolite/cosmolite.jpg'); }
#brandInfo.ilsole .ci { background-image:url('../images/sub/products/ilsole/ilsole_ci.png'); background-image:url('../images/sub/products/ilsole/ilsole_ci.svg'); }
#brandInfo.infinity .ci { background-image:url('../images/sub/products/infinity/infinity_ci.png'); background-image:url('../images/sub/products/infinity/infinity_ci.svg'); }
#brandInfo.cosmolite .ci { height:40px; background-image:url('../images/sub/products/cosmolite/cosmolite_ci.png'); background-image:url('../images/sub/products/cosmolite/cosmolite_ci.svg'); }

/* card banner */
.banner { display:-ms-grid; display:grid; -ms-grid-columns:(1fr)[3]; grid-template-columns:repeat(3, 1fr); gap:60px; }
.banner .icon { overflow:hidden; width:100%; background-color:#F6F6F6; background-position:center; background-repeat:no-repeat; background-size:cover; aspect-ratio:480/240; }
.banner .thumb { overflow:hidden; width:100%; }
.banner .info { margin-top:30px; text-align:center; }
.banner .title { font-size:40px; }
.banner .info p { margin-top:16px; font-weight:600; font-size:var(--md-size); line-height:1.5; }

.tab-ui { overflow:hidden; overflow-x:auto; display:flex; align-items:center; gap:40px; white-space:nowrap; }
.tab-ui .tab { padding-block:30px; }
.tab-ui .tab a, .tab-ui .tab button { display:block; font-size:var(--lg-size); line-height:1.19; }
.tab-ui .tab .active { font-weight:600; color:var(--primary-color); }
/*.tab-ui.ui02 { gap:10px; }
.tab-ui.ui02 .tab { min-width:180px; }
.tab-ui.ui02 .tab a, .tab-ui.ui02 .tab button { display:block; width:100%; padding-block:15px; padding-inline:45px; border-radius:5em; border:1px solid var(--primary-color); font-weight:500; color:var(--primary-color); text-align:center; }
.tab-ui.ui02 .tab .active { background-color:var(--primary-color); color:white; }*/

#category { border-bottom:1px solid #E2E2E2; }
#category .tab-ui { gap:10px; }
#category .tab a, #category .tab button { min-width:180px; padding-block:15px; padding-inline:38px; background-color:#F6F6F6; border:2px solid #F6F6F6; border-radius:5em; }
#category .tab a:not(.active):hover, #category .tab button:not(.active):hover { background-color:white; border-color:currentColor; color:var(--primary-color); }
#category .tab .active { background-color:var(--primary-color); border-color:var(--primary-color); color:white; }

#group_tab { position:sticky; top:var(--header-height); left:0; width:100%; background-color:white; border-bottom:1px solid #E2E2E2; z-index:99; }
#group_tab .active { color:black; }

.tags { gap:5px; margin-top:20px; }
.tags .tag { padding:4px 10px; background-color:#F6F4EF; }

.slide-sync { padding-left:var(--contents-gap); }
.slide-sync .flex { --col-gap: 30px; gap:var(--col-gap); }
.slide-sync .origin-slide { width:48.387%; aspect-ratio:900/600; }
.slide-sync .thumb-slide { overflow:hidden; position:relative; width:50%; white-space:nowrap; }
.thumb-slide .swiper-slide { overflow:hidden; display:inline-block; position:relative; width:min(32.258%, 300px); height:100%; margin-right:var(--col-gap); aspect-ratio:300/600; }
/*.thumb-slide .swiper-slide { overflow:hidden; aspect-ratio:300/600; }*/
.thumb-slide .swiper-slide img { position:absolute; top:0; left:50%; width:auto; height:100%; translate:-50% 0; }

#location .contents { --cols: 2; --col-gap: 40px; --row-gap: 80px; /*display:flex; flex-wrap:wrap;*/ display:-ms-grid; display:grid; -ms-grid-columns:(1fr)[var(--cols)]; grid-template-columns:repeat(var(--cols), 1fr); gap:var(--row-gap) var(--col-gap); }
#location .locate-info { /*width:calc((100% - 40px) / 2);*/ width:100%; }
#location .locate-info h3 { margin-bottom:22px; font-size:40px; }
#location .info { margin-top:20px; }
#location dl { display:flex; padding-block:30px; border-bottom:1px solid #E2E2E2; }
#location dt { flex-shrink:0; padding-inline:10px; font-weight:600; color:#999; line-height:1.875; }
#location dd { flex:1; padding-inline:30px; font-size:var(--md-size); line-height:1.5; }
#location .roadmap { --col-gap: 10px; --cols: 3; display:flex; align-items:center; gap:var(--col-gap); width:100%; margin-top:20px; }
#location .roadmap a { --col-gap: 9px; display:flex; align-items:center; justify-content:center; gap:var(--col-gap); width:min(calc((100% - var(--col-gap) * (var(--cols) - 1)) / var(--cols)), 180px); padding-block:16px; border:1px solid #E2E2E2; border-radius:2px; font-size:var(--base-size); }
#location .roadmap a::before { content:''; width:1.375em; height:1.375em; background-position:center; background-repeat:no-repeat; background-size:cover; }
#location .roadmap .naver-roadmap::before { background-image:url('../images/common/icon/symbol_naver.png'); }
#location .roadmap .daum-roadmap::before { background-image:url('../images/common/icon/symbol_daum.png'); }
#location .roadmap .google-roadmap::before { background-image:url('../images/common/icon/symbol_google.png'); }

#greetings .greeting { display:flex; flex-direction:row-reverse; align-items:start; gap:min(8.0128%, 125px); }
#greetings .greeting .txt-wrap { width:min(50.0001%, 780px); }
#greetings .greeting .profile { position:relative; width:min(41.9871%, 655px); }
#greetings .greeting .profile::before { content:''; position:absolute; top:0; left:50%; width:min(68.7022%, 450px); height:100%; background-color:var(--primary-color); translate:-50% 0%; z-index:-1; }
#greetings .greeting .title { font-weight:600; font-size:44px; line-height:1.3636; }
#greetings .greeting .desc { margin-top:60px; }
#greetings .greeting .desc p { font-weight:500; font-size:var(--lg-size); line-height:1.5; }
#greetings .greeting .desc p:not(:first-child) { margin-top:1.5em; }
#greetings .greeting .signs { margin-top:50px; }
#greetings .greeting .signs p { font-weight:600; font-size:var(--lg-size); }
#greetings .sign { --col-gap: 20px; --cols: 2; display:flex; gap:var(--col-gap ); margin-top:20px; }
#greetings .sign img { width:min(calc((100% - var(--col-gap) * (var(--cols) - 1))), 160px); }

#inquiry .inner { width:min(100%, 800px); margin-inline:auto; }
#inquiry .headline { padding-top:0; border:0; }
#inquiry p { margin-bottom:10px; font-size:var(--md-size); line-height:1.5; }
#inquiry fieldset ul { display:-ms-grid; display:grid; -ms-grid-columns:(1fr)[2]; grid-template-columns:repeat(2, 1fr); gap:20px; }
#inquiry fieldset li { display:flex; align-items:center; padding-inline:20px; background-color:#F6F6F6; border-radius:10px; }
#inquiry fieldset li:nth-child(6), #inquiry:not(.sponsorship) fieldset li:nth-child(5) { grid-column:1 / -1; flex-direction:column; align-items:start; }
#inquiry fieldset li:nth-child(6), #inquiry:not(.sponsorship) fieldset li:nth-child(5), #inquiry fieldset li:last-child { padding-block:23px; }
#inquiry fieldset li > label:not(input + label) { flex-shrink:0; min-width:80px; font-weight:700; font-size:var(--md-size); }
#inquiry fieldset li > label:not(input + label):has(strong.sound_only) span { position:relative; }
#inquiry fieldset li > label:not(input + label):has(strong.sound_only) span::after { content:''; position:absolute; left:100%; bottom:100%; width:5px; height:5px; background-color:var(--primary-color); border-radius:1px; }
#inquiry:not(.sponsorship) fieldset li:nth-child(5) > label { display:flex; align-items:end; gap:20px; }
#inquiry:not(.sponsorship) fieldset li:nth-child(5) > label span { font-weight:400; font-size:var(--base-size); color:#999; }
#inquiry fieldset li:has(.chk_box) { justify-content:space-between; }
#inquiry fieldset li:has(.chk_box) a { font-weight:500; text-decoration:underline; }
#inquiry fieldset .frm_input { padding-block:0; background-color:#F6F6F6; border-color:#F6F6F6; box-shadow:none; }
#inquiry fieldset textarea.frm_input { height:80px; margin-top:15px; padding-inline:0; line-height:1.5; }
#inquiry fieldset .frm_input.required { background-image:none !important; }
#inquiry .wish-group { display:flex; flex-wrap:wrap; align-items:center; gap:5px; padding-top:15px; margin-top:15px; border-top:1px solid #E2E2E2; }
#inquiry .btn_confirm { margin-top:60px; }
#inquiry .btn_submit { width:min(100%, 230px); padding-block:25px; font-weight:500; font-size:var(--sm-size); }
#inquiry.sponsorship fieldset li:nth-child(6) { grid-column:1 / -1; padding-block:23px; }

#organization ol { position:relative; width:min(100%, 1400px); margin-inline:auto; }
#organization li { position:relative; }
#organization a { display:block; position:relative; width:min(100%, 200px); padding-block:20px; background-color:var(--primary-color); border:2px solid var(--primary-color); border-radius:5em; font-weight:600; font-size:var(--md-size); color:white; text-align:center; pointer-events:none; }
#organization li.ceo { -ms-grid-columns:1fr; grid-template-columns:1fr; }
#organization .ceo a { display:flex; align-items:center; justify-content:center; width:min(100%, 180px); margin-inline:auto; border-radius:50%; font-weight:700; font-size:var(--lg-size); aspect-ratio:1; }
#organization li.committee ul { display:flex; align-items:center; justify-content:center; gap:82px; margin-top:40px; }
#organization .committee li::before { content:''; position:absolute; top:50%; right:-42px; width:42px; height:2px; background-color:var(--primary-color); }
#organization .committee li:last-child::before { right:auto; left:-42px; }
#organization .committee a { width:200px; background-color:white; color:var(--primary-color); }
#organization li.design { padding-left:calc(50% + 41px); margin-top:30px; }
#organization li.design::before { content:''; position:absolute; top:50%; left:50%; width:min(16.66%, 200px); height:2px; background-color:var(--primary-color); }
#organization .design a { -ms-grid-column:4; grid-column-start:4; }
#organization li.team::before { content:''; position:absolute; bottom:100%; left:50%; width:2px; height:300%; margin-left:-1px; background-color:var(--primary-color); }
#organization li.team ul { --cols: 6; --col-gap: 40px; display:-ms-grid; display:grid; -ms-grid-columns:(1fr)[var(--cols)]; grid-template-columns:repeat(var(--cols), 1fr); gap:var(--col-gap); padding-top:40px; margin-top:60px; }
#organization li.team ul::before { content:''; position:absolute; top:0; left:50%; width:calc(100% - ( (100% - var(--col-gap) * (var(--cols) - 1)) / var(--cols) )); height:2px; background-color:var(--primary-color); translate:-50% 0%; }
#organization .team li::before { content:''; position:absolute; top:-40px; left:50%; width:2px; height:100%; background-color:var(--primary-color); }

#history_tab { position:relative; border-bottom:1px solid #E2E2E2; }
#history_tab::after { content:''; position:absolute; top:0; right:0; width:12%; height:100%; background:linear-gradient(to left, white 30%, transparent); }
#history .history-panel { display:flex; justify-content:space-between; gap:90px; }
#history .history-panel .visual { flex-shrink:0; }
#history .history-panel h3 { margin-bottom:35px; font-weight:600; font-family:var(--montserrat); font-size:100px; }
#history .history-panel .thumb { overflow:hidden; width:min(100%, 500px); border-radius:11px; }
#history .histories { /*flex:1;*/ width:min(60%, 940px); }
#history .histories li { display:flex; padding-block:30px; border-bottom:1px solid #E2E2E2; font-size:var(--md-size); line-height:1.5; }
#history .histories .year-month { flex-shrink:0; width:135px; font-weight:700; font-family:var(--montserrat); }

#business_tab { border-bottom:1px solid #E2E2E2; }
#business .business-header { display:flex; justify-content:space-between; margin-bottom:80px; }
#business .business-header h3 { flex-shrink:0; font-size:40px; line-height:1.45; }
#business .business-header .desc { width:min(60%, 940px); }
#business .business-header .desc p { font-size:var(--md-size); line-height:1.5; }
/* business slide */
#business .slider { --swiper-navigation-sides-offset: 20px; }
#business .banner .title { color:var(--primary-color); }
#business .banner .tab0101 { background-image:url('../images/sub/business/tab01_icon01.png'); background-image:url('../images/sub/business/tab01_icon01.svg'); }
#business .banner .tab0102 { background-image:url('../images/sub/business/tab01_icon02.png'); background-image:url('../images/sub/business/tab01_icon02.svg'); }
#business .banner .tab0103 { background-image:url('../images/sub/business/tab01_icon03.png'); background-image:url('../images/sub/business/tab01_icon03.svg'); }
#business .banner .tab0201 { background-image:url('../images/sub/business/tab02_icon01.png'); background-image:url('../images/sub/business/tab02_icon01.svg'); }
#business .banner .tab0202 { background-image:url('../images/sub/business/tab02_icon02.png'); background-image:url('../images/sub/business/tab02_icon02.svg'); }
#business .banner .tab0203 { background-image:url('../images/sub/business/tab02_icon03.png'); background-image:url('../images/sub/business/tab02_icon03.svg'); }

#business01 .banner { margin-top:80px; }

#business .business02-info { margin-top:100px; }
#business .business02-info p { width:min(100%, 863px); font-weight:600; font-size:var(--lg-size); line-height:1.5; word-break:keep-all; }
#business .business02-info .info-table { display:-ms-grid; display:grid; -ms-grid-columns:2fr 1fr 1fr 1fr; grid-template-columns:2fr 1fr 1fr 1fr; margin-top:60px; border-top:2px solid black; border-bottom:1px solid #E2E2E2; }
#business .business02-info dl { position:relative; padding-block:35px; padding-inline:30px; }
#business .business02-info dl:not(:first-child)::before { content:''; position:absolute; top:35px; left:0; width:1px; height:calc(100% - 70px); background-color:#E2E2E2; }
#business .business02-info dt { font-weight:600; color:#999; line-height:1.5; }
#business .business02-info dd { margin-top:15px; font-size:var(--lg-size); }
#business .stone-quarry { margin-top:100px; }
#business .stone-quarry .mining { display:flex; align-items:center; gap:80px; }
#business .stone-quarry .mining:nth-child(even) { flex-direction:row-reverse; margin-top:60px; }
#business .stone-quarry .thumb { width:calc((100% - 80px) / 2); }
#business .stone-quarry .info { width:min(calc((100% - 80px) / 2), 680px); }
#business .stone-quarry .title { font-size:40px; line-height:1.45; }
#business .stone-quarry .desc { margin-top:50px; }
#business .stone-quarry .desc p { font-size:var(--md-size); line-height:1.5; }

#business .order-status { margin-top:100px; }
#business .order-status .status-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:52px; }
#business .order-status .status-header .title { font-size:40px; line-height:1.45; }
#business .order-status .status-header .btn-down { display:flex; align-items:center; justify-content:center; gap:10px; width:180px; padding-block:20px; background-color:#F6F6F6; border-radius:5em; font-weight:500; }
#business .order-status .status-header .btn-down .icon { width:1em; height:1.25em; }
#business .order-status .work-list { border-top:2px solid black; }
#business .order-status .btn-toggle { display:flex; align-items:center; justify-content:space-between; width:100%; padding:30px; font-weight:700; font-size:var(--lg-size); }
#business .order-status .btn-toggle::after { content:'\f107'; font-family:'Font Awesome 6 Free'; color:#999; }
#business .order-status .btn-toggle.on, #business .order-status .btn-toggle:hover { background-color:#F6F6F6; }
#business .order-status .btn-toggle:hover::after { color:black; }
#business .order-status .btn-toggle.on::after { content:'\f106'; color:black; }
#business .order-status ul > li { border-bottom:1px solid #E2E2E2; }
#business .order-status .work { display:none; }
#business .order-status ol > li { display:-ms-grid; display:grid; -ms-grid-columns:(1fr)[3]; grid-template-columns:repeat(3, 1fr); }
#business .order-status ol > li:not(:first-child) { border-top:1px solid #E2E2E2; }
#business .order-status dl { position:relative; padding-block:30px 25px; padding-inline:30px; }
#business .order-status dl:not(:first-child)::before { content:''; position:absolute; top:30px; left:0; width:1px; height:calc(100% - 55px); background-color:#E2E2E2; }
#business .order-status dt { font-weight:600; color:#999; }
#business .order-status dd { margin-top:15px; font-size:var(--lg-size); line-height:1.23; }

#vision .intro { --col-gap: 60px; display:flex; gap:var(--col-gap); }
#vision .intro .desc { width:calc((100% - var(--col-gap)) * .3626); }
#vision .intro .desc p { font-weight:700; font-size:40px; line-height:1.45; word-break:keep-all; }
#vision .intro .visual { width:calc((100% - var(--col-gap)) * .6374); }
#value { padding-top:var(--section-gap); margin-top:100px; border-top:1px solid #E2E2E2; }
#value .headline { padding-bottom:60px; }
#value .values { display:-ms-grid; display:grid; -ms-grid-columns:(1fr)[3]; grid-template-columns:repeat(3, 1fr); gap:45px; }
#value .values .value { width:100%; }
#value .value .thumb { overflow:hidden; width:100%; background-position:center; background-repeat:no-repeat; background-size:cover; border-radius:11px; aspect-ratio:570/320; }
#value .value:nth-child(1) .thumb { background-image:url('../images/sub/vision/value01.png'); background-image:url('../images/sub/vision/value01.svg'); }
#value .value:nth-child(2) .thumb { background-image:url('../images/sub/vision/value02.png'); background-image:url('../images/sub/vision/value02.svg'); }
#value .value:nth-child(3) .thumb { background-image:url('../images/sub/vision/value03.png'); background-image:url('../images/sub/vision/value03.svg'); }
#value .value p { margin-top:40px; font-weight:700; font-size:40px; }
#value .value .dot-list { margin-top:30px; }
#value .value-slider { margin-top:var(--section-gap); }
#value .value-slider .swiper-slide { display:flex; }
#value .value-slider .visual { width:50%; }
#value .value-slider .desc { display:flex; flex-direction:column; justify-content:space-between; gap:50px; width:50%; padding-block:50px; padding-left:100px; }
#value .value-slider .title { font-weight:600; font-size:var(--md-size); color:var(--primary-color); }
#value .value-slider .en { margin-top:10px; font-weight:700; font-family:var(--montserrat); font-size:40px; }
#value .value-slider .dot-list { margin-top:40px; }
#value .value-slider .controller { display:flex; align-items:center; gap:30px; /*position:absolute; bottom:50px; left:calc(50% + 100px);*/ }
#value .controller [class^='swiper-button'] { --swiper-navigation-size: 18px; position:static; height:30px; margin:0; }
#value .controller [class^='swiper-button']::after { width:100%; height:100%; }
#value .controller .fraction { display:flex; align-items:center; gap:10px; width:auto; }
#value .controller .fraction span { font-weight:600; font-family:var(--montserrat); font-size:var(--md-size); }

#type_tab { border-bottom:1px solid #E2E2E2; }
#preview { overflow:hidden; position:relative; border-radius:10px; aspect-ratio:1560/800; }
#preview .slide { overflow:hidden; position:absolute; top:0; left:0; width:100%; height:100%; clip-path:polygon(50% 0%, 50% 0%, 50% 100%, 50% 100%); }
#preview .slide img { position:absolute; top:0; left:50%; width:auto; height:100%; translate:-50% 0%; }
#preview .slide.view { clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
#examples { overflow:hidden; display:flex; margin-top:20px; border:1px solid #ddd; border-radius:10px; }
#examples .brands { width:300px; }
#examples .brands .tab { height:33.33%; }
#examples .brands button { display:block; width:100%; height:100%; background-color:#F6F6F6; border-top:1px solid #ddd; border-right:1px solid #ddd; }
#examples .brands button.active { background-color:white; border:0; z-index:1; }
#examples .brands:has(.tab:nth-child(2) .active) .tab:nth-child(1) button { border-top:0; border-bottom:1px solid #ddd; }
#examples .brands:has(.tab:nth-child(3) .active) .tab:nth-child(1) button { border-top:0; }
#examples .brands:has(.tab:nth-child(3) .active) .tab:nth-child(2) button { border-bottom:1px solid #ddd; }
#examples .samples { width:calc(100% - 300px); }
#examples .samples .product-list { display:flex; flex-wrap:wrap; gap:20px; padding-block:20px 30px; padding-inline:30px; }
#examples .samples .product-list li { width:120px; }
#examples .samples .product-list .thumb { overflow:hidden; position:relative; border-radius:5px; aspect-ratio:1; }
#examples .samples .product-list p { margin-top:12px; }
#examples .samples .product-list .active .thumb::after { content:''; position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgb(0 0 0 / .5); }
#examples .samples .product-list .active p { font-weight:600; }

#examples .brands button.ilsole { background-image:url('../images/sub/3d-interior/living_tab01.png'); background-image:url('../images/sub/3d-interior/living_tab01.svg'); background-position:center; background-repeat:no-repeat; background-size:auto 26px; }
#examples .brands button.infinity { background-image:url('../images/sub/3d-interior/living_tab02.png'); background-image:url('../images/sub/3d-interior/living_tab02.svg'); background-position:center; background-repeat:no-repeat; background-size:auto 34px; }
#examples .brands button.cosmolite { background-image:url('../images/sub/3d-interior/living_tab03.png'); background-image:url('../images/sub/3d-interior/living_tab03.svg'); background-position:center; background-repeat:no-repeat; background-size:auto 19px; }

#management .tab-title { padding-block:106px; margin-bottom:80px; background-image:url('../images/sub/management/title_bg.jpg'); background-position:center; background-repeat:no-repeat; background-size:cover; font-weight:700; font-size:40px; color:white; text-align:center; }
/*#management .column-layout { display:-ms-grid; display:grid; -ms-grid-columns:25fr 47fr; grid-template-columns:25fr 47fr; gap:120px; }*/
#management .column-cont { width:min(100%, 1200px); margin-inline:auto; }
#management .banner { gap:20px; }
#management .banner .icon { aspect-ratio:300/200; }
#management .banner .info { margin-top:20px; }
#management .banner .info p { margin:0; font-size:var(--md-size); line-height:1.5; }
#policy .policy p { font-weight:500; font-size:var(--lg-size); line-height:1.5; word-break:keep-all; }
#policy .dot-list { margin-top:50px; }
#policy .dot-list li { padding-block:19px; padding-inline:30px; background-color:#F6F6F6; border-radius:10px; font-weight:600; }
#policy .dot-list li:not(:first-child) { margin-top:10px; }
#policy .policy .desc { margin-top:50px; }
#policy .policy .desc p { font-size:var(--md-size); }
#policy .policy .desc p:not(:first-child) { margin-top:1.5em; }
#policy .sign { display:flex; flex-direction:column; align-items:center; margin-top:50px; }
#policy .sign .date { font-size:var(--md-size); }
#policy .sign ul { margin-top:30px; }
#policy .sign li { display:flex; align-items:center; gap:.4em; font-weight:600; font-size:var(--lg-size); }
#policy .sign li:not(:first-child) { margin-top:20px; }
#policy .sign li p { position:relative; }
#policy .sign li p::after { content:''; position:absolute; top:50%; left:calc(100% + 8px); width:3.8461em; background-position:center; background-repeat:no-repeat; background-size:contain; }
#policy .sign li:first-child p::after { height:1.6538em; background-image:url('../images/sub/greetings/sign01.png'); translate:0% -59%; }
#policy .sign li:last-child p::after { height:2.2692em; background-image:url('../images/sub/greetings/sign02.png'); translate:0% -45%; }
#target ol li:not(:first-child) { margin-top:110px; }
#target ol li .title { margin-bottom:30px; font-weight:600; font-size:var(--lg-size); }
#certification .banner { display:flex; flex-wrap:wrap; justify-content:center; gap:30px; }
#certification .banner .item { width:calc((100% - 60px) / 3); border:1px solid #ddd; }

.integrity #policy p { font-weight:700; font-size:40px; line-height:1.45; }
.integrity #policy .banner { gap:60px; margin-top:80px; }
.integrity #policy .banner .icon { aspect-ratio:480/240; }
.integrity #policy .banner .info { margin-top:30px; }
.integrity #policy .banner .info p { font-size:var(--lg-size); }
.integrity #policy .banner .info .desc { margin-top:20px; }
.integrity #policy .banner .info .desc p { font-weight:400; font-size:var(--md-size); line-height:1.5; }
.integrity #target .banner { -ms-grid-columns:(1fr)[2]; grid-template-columns:repeat(2, 1fr); }
.integrity #target .banner .icon { aspect-ratio:460/200; }

.environ-quality .banner .tab0201 { background-image:url('../images/sub/management/eq_tab02_icon01.png'); background-image:url('../images/sub/management/eq_tab02_icon01.svg'); }
.environ-quality .banner .tab0202 { background-image:url('../images/sub/management/eq_tab02_icon02.png'); background-image:url('../images/sub/management/eq_tab02_icon02.svg'); }
.environ-quality .banner .tab0203 { background-image:url('../images/sub/management/eq_tab02_icon03.png'); background-image:url('../images/sub/management/eq_tab02_icon03.svg'); }
.safety .banner .tab0201 { background-image:url('../images/sub/management/safe_tab02_icon01.png'); background-image:url('../images/sub/management/safe_tab02_icon01.svg'); }
.safety .banner .tab0202 { background-image:url('../images/sub/management/safe_tab02_icon02.png'); background-image:url('../images/sub/management/safe_tab02_icon02.svg'); }
.safety .banner .tab0203 { background-image:url('../images/sub/management/safe_tab02_icon03.png'); background-image:url('../images/sub/management/safe_tab02_icon03.svg'); }
.integrity .banner .tab0101 { background-image:url('../images/sub/management/govern_tab01_icon01.png'); background-image:url('../images/sub/management/govern_tab01_icon01.svg'); }
.integrity .banner .tab0102 { background-image:url('../images/sub/management/govern_tab01_icon02.png'); background-image:url('../images/sub/management/govern_tab01_icon02.svg'); }
.integrity .banner .tab0103 { background-image:url('../images/sub/management/govern_tab01_icon03.png'); background-image:url('../images/sub/management/govern_tab01_icon03.svg'); }
.integrity .banner .tab0201 { background-image:url('../images/sub/management/govern_tab02_icon01.png'); background-image:url('../images/sub/management/govern_tab02_icon01.svg'); }
.integrity .banner .tab0202 { background-image:url('../images/sub/management/govern_tab02_icon02.png'); background-image:url('../images/sub/management/govern_tab02_icon02.svg'); }
.integrity .banner .tab0203 { background-image:url('../images/sub/management/govern_tab02_icon03.png'); background-image:url('../images/sub/management/govern_tab02_icon03.svg'); }
.integrity .banner .tab0204 { background-image:url('../images/sub/management/govern_tab02_icon04.png'); background-image:url('../images/sub/management/govern_tab02_icon04.svg'); }
.integrity .banner .tab0205 { background-image:url('../images/sub/management/govern_tab02_icon05.png'); background-image:url('../images/sub/management/govern_tab02_icon05.svg'); }

[data-motion="fade-in"] { opacity:0; }
[data-motion="typing"] { opacity:0; }

@media all and (max-width: 1550px) {
    :root {
        --contents-gap: 40px;
    }

    #menuVisual { display:none; }
}

@media all and (max-width: 1279px) {
    .laptop { display:block; }

    #header .header-inner { padding-block:32px; }
    #title { position:static; translate:0; }
    #gnb { display:none; position:fixed; top:0; left:0; width:100%; height:100vh; background-color:white; }
    #gnb.on { display:block; padding-top:var(--padding-top); }
    #gnb .gnb-list { display:block; }
    #gnb .gnb-list > li { padding-inline:0; border-top:1px solid #ddd; }
    #gnb .depth1 { padding-block:20px 18px; padding-inline:28px; font-size:20px; }
    #gnb .depth2-wrap { padding-block:25px; padding-inline:28px; background-color:#F9F9F9; border-top:1px solid #ddd; }
    #gnb .depth2-list { flex-direction:row; flex-wrap:wrap; gap:17px 25px; }
    #gnb .depth2 { position:relative; font-size:16px; }
    #gnb .depth2.active::before { content:''; position:absolute; top:0; left:0; width:4px; height:4px; background-color:var(--primary-color); border-radius:2px; translate:-200% 0; }
    #gnb .has-depth.on .depth1 { color:var(--primary-color); }
    #gnb .has-depth.on .depth1::after { content:'\f106'; }
    #gnb .has-depth.on .depth1::before, #gnb .depth1.on::before { display:none; }
    #gnb .has-depth.on .depth2-wrap { display:block; }
    #gnb .sns-group { display:flex; }
    #btnSearch { display:flex; align-items:center; justify-content:center; height:45px; padding:0; }
    #btnSearch span { display:none; }
    #searchItem { width:45px; }
    #header:has(#gnb.on) #title { z-index:2; }
    #header:has(#gnb.on) #searchItem { z-index:-1; }
    #header:has(#gnb.on) #hamburger { z-index:2; }
    #header:has(#gnb.on) #hamburger .bar { background-color:transparent; }
    #header:has(#gnb.on) #hamburger::before { top:50%; left:50%; width:132%; translate:-50% -50%; rotate:41deg; }
    #header:has(#gnb.on) #hamburger::after { top:50%; left:50%; width:132%; translate:-50% -50%; rotate:-41deg; }

    #footer .footer-inner { flex-direction:column-reverse; gap:80px; }
    #footer .contact-us { width:100%; }
    #footer .contact-us .headline { display:block; }
    #footer .contact-us .headline p { margin-top:20px; }
    #footer .company-info { width:100%; }

    #keyVisual .visual-thumbnail { display:block; }
    #keyVisual .thumbnails { width:100%; margin-top:60px; }

    .sub .headline .contents, .sub .headline.section-header { display:block; }
    .sub .headline .title, .sub .headline.section-header .title { padding-bottom:0; margin-top:20px; }

    /*#brandInfo .info { padding-inline:var(--contents-gap); }*/
    #brandInfo { flex-direction:column; height:auto; margin-block:var(--section-gap) 50px; }
    #brandInfo .visual { width:100%; aspect-ratio:36/25; }
    #brandInfo .info { width:100%; padding-block:var(--section-gap); }
    #location .contents { --cols: 1; gap:var(--section-gap); }
    #location .locate-info { width:100%; }

    #greetings .greeting { display:block; }
    #greetings .greeting .profile { width:min(100%, 655px); }
    #greetings .greeting .txt-wrap { width:100%; margin-top:60px; }
    #greetings .greeting .desc { margin-top:40px; }

    #history .history-panel { display:block; }
    #history .history-panel .visual { margin-bottom:50px; }
    #history .history-panel .thumb { width:100%; }
    #history .history-panel h3 { font-size:80px; }
    #history .histories { width:100%; }

    #organization li.team::before { bottom:32px; height:200%; }
    #organization li.team ul { --cols: 2; padding:0; }
    #organization li.team ul::before { display:none; }
    #organization li.team ul li { display:flex; }
    #organization li.team ul li:nth-child(even) { flex-direction:row-reverse; }
    #organization .team li::before { top:50%; left:0; width:calc(100% + 20px); height:2px; }
    #organization .team li:nth-child(even)::before { left:auto; right:0; }

    #vision .intro { display:block; }
    #vision .intro .desc, #vision .intro .visual { width:100%; }
    #vision .intro .visual { margin-top:80px; }
    #value .value-slider .swiper-slide { display:block; }
    #value .value-slider .visual { width:100%; }
    #value .value-slider .desc { width:100%; padding:0; margin-top:50px; }
    #value .controller [class^='swiper-button'] { --swiper-navigation-size: 30px; }

    #business .business-header { display:block; }
    #business .business-header .desc { margin-top:80px; width:100%; }
    #business .banner { gap:40px; }
    #business .business02-info .info-table { -ms-grid-columns:(1fr)[2]; grid-template-columns:repeat(2, 1fr); }
    #business .business02-info dl { border-bottom:1px solid #E2E2E2; }
    #business .business02-info dl:nth-child(2n+1):nth-last-child(-n+2), #business .business02-info dl:nth-child(2n+1):nth-last-child(-n+2) ~ dl { border-bottom:0; }
    #business .business02-info dl:nth-child(odd)::before { display:none; }

    #management .column-layout { display:block; }
    #management .column-layout .column-cont { margin-top:80px; }
}

@media all and (max-width: 768px) {
    :root {
        --base-size: 14px;
        --xs-size: 10px;
        --sm-size: 16px;
        --md-size: 20px;
        --lg-size: 23px;
        --xl-size: 0px;

        --section-gap: 60px;
        --contents-gap: 20px;
    }

    .rounded-10 { border-radius:5px; }
    .rounded-15 { border-radius:8px; }

    .pc { display:none; }
    .mo { display:block; }

    .section { padding-block:var(--section-gap) 75px; }

    .dot-list li { gap:8px; font-size:var(--base-size); }
    .dot-list li::before { width:3px; height:3px; margin-top:calc(var(--base-size) * .9 - 3px); }

    .tab-ui { gap:15px; }
    .tab-ui .tab { padding-block:15px; }
    .tab-ui .tab a, .tab-ui .tab button { font-size:var(--base-size); }
    .tab-ui .tab .active { text-decoration-thickness:1px; text-underline-offset:2px; }

    #category .tab-ui { gap:5px; }
    #category .tab a, #category .tab button { min-width:90px; padding-block:9px; padding-inline:12px; font-size:var(--base-size); }

    .tags { margin-top:10px; }
    .tags .tag { padding:3px 6px; font-size:var(--xs-size); }

    #modal .modal-container { border-radius:5px; }

    #floating { right:12px; bottom:25px; }
    #floating li:not(:first-child) { margin-top:8px; }
    #floating li .btn { width:60px; }
    #floating li .btn::before { height:22px; margin-bottom:6px; }
    #floating li .btn-top::before { height:30px; margin:0; }
    #floating li .btn-kakao::before { margin:0; }
    #floating .sns-group { gap:10px; padding-inline:20px calc(100% + 20px); }
    #floating .sns-group .sns { width:27px; height:25px; }

    [class^='swiper-button'] { --swiper-navigation-size: 24px; }

    #header .header-inner { padding-block:22px; }
    #btnSearch { height:35px; }
    #searchItem { width:35px; }
    #searchItem.on { width:100%; }
    #searchItem #sch_str { height:60px; }

    #footer .footer-inner { gap:40px; padding-top:40px; }
    #footer .logo { width:137px; height:15px; }
    #footer .company-info > div:not(:first-child):not(.family-site) { margin-top:17px; }
    #footer .info dl:not(:first-child) { flex-wrap:wrap; }
    #footer .location { align-items:start; line-height:1.5; }
    #footer .location dd:first-of-type { flex-shrink:0; }
    #footer .info dl:not(.location) dt, #footer .info dl:not(.location) dd { display:inline-block; vertical-align:middle; }
    #footer .info dl:not(.location) dd:first-of-type { width:calc(100% - 68px); }
    #footer .info dl:not(.location) dt:first-of-type, #footer .info dl:not(.location) dd:first-of-type { margin-bottom:7px; }
    #footer .info dl:not(.location) dt:not(:first-of-type):not(:last-of-type) { margin-left:0; }
    #footer .family-site { width:min(100%, 160px); margin-top:25px; }
    #footer .family-site .btn-family { padding-bottom:12px; }
    #footer .sns-group { gap:10px; }
    #footer .contact-us .headline { margin-bottom:20px; }
    #footer .contact-us .headline h2 { font-size:20px; }
    #footer .contact-us .headline p { margin-top:10px; }
    #footer .contact-banner { gap:7px; }
    #footer .contact-banner li { min-height:115px; }
    #footer .contact-banner li, #footer .contact-banner li:last-child { width:calc((100% - 14px) / 3); }
    #footer .contact-banner a { padding:15px 10px; }
    #footer .contact-banner .office::after { width:auto; height:74%; right:50%; bottom:0; background-image:url('../images/_m/common/office.png'); background-image:url('../images/_m/common/office.svg'); translate:50% 0%; aspect-ratio:1; }
    #footer .contact-banner .catalogue::after { width:auto; height:74%; right:50%; bottom:0; background-image:url('../images/_m/common/catalogue.png'); background-image:url('../images/_m/common/catalogue.svg'); translate:50% 0%; aspect-ratio:1; }
    #footer .contact-banner .inquiry::after { width:auto; height:74%; right:50%; bottom:0; background-image:url('../images/_m/common/inquiry.png'); background-image:url('../images/_m/common/inquiry.svg'); translate:50% 0%; aspect-ratio:1; }
    #footer .contact-banner .title { margin:0; }
    #copyright { padding-block:15px 22px; }

    #keyVisual .title { top:47.96875%; left:20px; font-size:20px; }
    #keyVisual .title span { font-size:16px; }
    #keyVisual .visual-thumbnail { bottom:30px; }
    #keyVisual .vision p { font-size:16px; }
    #keyVisual .thumbnails { margin-top:30px; }

    #keyVisual .brand p { margin-top:20px; font-size:var(--sm-size); }
    #keyVisual .brand .bi { height:40px; background-position:center; background-repeat:no-repeat; background-size:auto 100%; }
    #keyVisual .cosmolite .bi { height:25px; }
    #keyVisual .fila .bi { height:100px; }

    .sub .headline { padding-block:50px 25px; }
    .sub .headline .contents { padding-inline:12px; }
    .sub .headline .en { font-size:30px; }
    .sub .headline .title, .sub .headline.section-header .title { margin-top:10px; font-size:var(--sm-size); }
    .sub .headline.section-header .en { font-size:20px; }

    #subVisual { height:calc(100vw * 800 / 720); background-image:var(--src-mo); /*aspect-ratio:720/800;*/ }

    .banner { -ms-grid-columns:1fr; grid-template-columns:1fr; }
    .banner .icon { border-radius:5px; }
    .banner .info { margin-top:20px; }
    .banner .title { font-size:var(--lg-size); }
    .banner .info p { margin-top:10px; font-size:var(--base-size); }

    .slide-sync { aspect-ratio:720/427; }

    #greetings .greeting .profile { width:100%; }
    #greetings .greeting .profile::before { left:calc(var(--contents-gap) * -1); width:79.6875%; translate:0; }
    #greetings .greeting .title { font-size:var(--lg-size); }
    #greetings .greeting .desc { margin-top:40px; }
    #greetings .greeting .desc p { font-weight:400; font-size:var(--sm-size); }
    #greetings .greeting .sign { --col-gap: 10px; }
    #greetings .greeting .signs p { font-weight:600; }
    #greetings .sign img { max-width:100px; }

    #location .contents { gap:var(--section-gap); }
    #location .locate-info h3 { margin-bottom:20px; font-weight:600; font-size:var(--lg-size); }
    #location .info { margin:0; }
    #location dl { padding-block:20px; }
    #location dt { padding-inline:5px; line-height:1.7142; }
    #location dd { padding-inline:12px; font-size:var(--sm-size); }
    #location .roadmap { --col-gap: 8px; --cols: 2; flex-wrap:wrap; }
    #location .roadmap a { --col-gap: 5px; max-width:120px; padding-block:6px; font-size:12px; }

    #history .history-panel .visual { margin-bottom:25px; }
    #history .history-panel h3 { margin-bottom:20px; font-size:40px; }
    #history .history-panel .thumb { border-radius:5px; }
    #history .histories li { display:block; padding-block:15px; padding-inline:5px; font-size:var(--sm-size); }

    #organization ol { padding-inline:15px; }
    #organization a { width:min(100%, 120px); padding-block:12px; font-size:var(--base-size); }
    #organization .ceo a { width:110px; font-size:var(--sm-size); }
    #organization li.committee ul { justify-content:space-between; gap:20px; margin-top:20px; }
    #organization .committee li { display:flex; width:50%; }
    #organization .committee li::before { right:auto; left:0; width:calc(100% + 20px); }
    #organization .committee li:nth-child(even)::before { left:auto; right:0; }
    #organization .committee li:nth-child(even) { flex-direction:row-reverse; }
    #organization .committee a { width:120px; }
    #organization li.design { display:flex;flex-direction:row-reverse; padding:0; margin-top:20px; }
    #organization li.design::before { width:50%; }
    #organization li.team::before { bottom:21px; }
    #organization li.team ul { gap:20px; margin-top:40px; }

    #brandInfo .info { padding-inline:var(--contents-gap); }
    #brandInfo .info .ci { height:30px; }
    #brandInfo.cosmolite .ci { height:20px; }
    #brandInfo .info .title { margin-top:30px; font-size:var(--sm-size); }
    #brandInfo .info .desc { margin-top:20px; }

    #vision .intro .desc p { font-size:var(--lg-size); }
    #vision .intro .visual { margin-top:40px; }
    #value { margin-top:var(--section-gap); }
    #value .headline { padding-bottom:35px; }
    #value .values { -ms-grid-columns:1fr; grid-template-columns:1fr; }
    #value .value p { padding-inline:5px; margin-top:25px; font-size:var(--sm-size); }
    #value .value .dot-list { padding-inline:5px; margin-top:15px; }
    #value .value-slider .desc { gap:25px; margin-top:25px; }
    #value .value-slider .title { font-size:var(--base-size); }
    #value .value-slider .en { margin-top:8px; font-size:var(--lg-size); }
    #value .value-slider .controller { gap:15px; }
    #value .controller .fraction { gap:5px; }
    #value .controller .fraction span { font-size:12px; }
    #value .controller [class^='swiper-button'] { --swiper-navigation-size: 15px; height:15px; }

    .checkbox { padding:4px 10px; font-size:12px; }

    #inquiry p { font-size:var(--base-size); }
    #inquiry fieldset ul { -ms-grid-columns:(1fr)[1]; grid-template-columns:1fr; gap:10px; }
    #inquiry fieldset li { padding-inline:10px; border-radius:5px; }
    #inquiry fieldset li:has(.chk_box), #inquiry.sponsorship fieldset li:nth-child(6) { padding-block:12px; }
    #inquiry fieldset li > label:not(input + label) { min-width:50px; font-size:var(--base-size); }
    #inquiry fieldset li > label:not(input + label):has(strong.sound_only) span::after { width:3px; height:3px; }
    #inquiry .btn_confirm { margin-top:40px; }
    #inquiry .btn_submit { width:min(100%, 170px); padding-block:14px; font-size:var(--base-size); }

    #preview { margin-inline:calc(var(--contents-gap) * -1); border-radius:0; /*aspect-ratio:720/500;*/ }
/*    #preview .slide img { position:absolute; top:0; left:50%; right:auto; width:auto; height:100%; translate:-50% 0%; }*/
    #examples { display:block; margin-top:40px; border-radius:5px; }
    #examples .brands { display:-ms-grid; display:grid; -ms-grid-columns:(1fr)[3]; grid-template-columns:repeat(3, 1fr); width:100%; height:40px; background-color:#F6F6F6; }
    #examples .brands .tab { width:100%; height:100%; }
    #examples .brands button { position:relative; background-color:transparent; border:0; border-bottom:1px solid #ddd; }
    #examples .brands button.active { border-radius:5px 5px 0 0; border-inline:1px solid #ddd; }
    #examples .brands button.ilsole { background-size:auto 13px; }
    #examples .brands button.infinity { background-size:auto 17px; }
    #examples .brands button.cosmolite { background-size:auto 9px; }
    #examples .brands:has(.tab:first-child button.active) .tab:first-child button { border-left:0; }
    #examples .brands:has(.tab:first-child button.active) .tab:last-child button { border-left:1px solid #ddd; }
    #examples .brands:has(.tab:last-child button.active) .tab:last-child button { border-right:0; }
    #examples .brands:has(.tab:last-child button.active) .tab:first-child button { border-right:1px solid #ddd; }
    #examples .samples { width:100%; }
    #examples .samples .product-list { gap:20px 10px; padding:15px; }
    #examples .samples .product-list li { width:calc((100% - 20px) / 3); }
    #examples .samples .product-list p { margin-top:10px; font-size:12px; }

    #business_tab .tab-ui { gap:5px; }
    #business_tab button { width:auto; min-width:90px; padding-block:9px; padding-inline:15px; }
    #business .business-header { margin-bottom:50px; }
    #business .business-header h3 { font-size:var(--lg-size); }
    #business .business-header .desc { margin-top:40px; }
    #business .business-header .desc p { font-size:var(--sm-size); }
    #business01 .banner { margin-top:50px; }
    #business .business02-info { margin-top:var(--section-gap); }
    #business .business02-info .info-table { margin-top:40px; }
    #business .business02-info dl { padding-block:15px; padding-inline:10px; }
    #business .business02-info dl:nth-child(even) { padding-left:15px; }
    #business .business02-info dl:not(:first-child)::before { top:15px; height:calc(100% - 30px); }
    #business .business02-info dt { font-size:12px; }
    #business .business02-info dd { margin-top:8px; font-size:var(--sm-size); }
    #business .stone-quarry { margin-top:var(--section-gap); }
    #business .stone-quarry .mining { display:block; }
    #business .stone-quarry .thumb { width:100%; }
    #business .stone-quarry .info { width:100%; margin-top:30px; }
    #business .stone-quarry .title { font-size:var(--md-size); }
    #business .stone-quarry .desc { margin-top:15px; }
    #business .stone-quarry .desc p { font-size:var(--sm-size); }
    #business .stone-quarry .mining:nth-child(even) { margin-top:45px; }
    #business .order-status { margin-top:var(--section-gap); }
    #business .order-status .status-header { margin-bottom:25px; }
    #business .order-status .status-header .title { font-size:var(--md-size); }
    #business .order-status .status-header .btn-down { display:none; }
    #business .order-status .btn-toggle { padding-block:13px; padding-inline:10px; font-size:var(--sm-size); }
    #business .order-status ol > li { display:flex; flex-wrap:wrap; align-items:center; /*-webkit-animation:bg-active ease alternate; animation:bg-active ease; animation-timeline:view(block 50%);*/ }
    #business .order-status dl { width:50%; padding-block:15px; padding-inline:10px; }
    #business .order-status dl:not(:first-child)::before { top:15px; height:calc(100% - 30px); }
    #business .order-status dt { font-size:12px; }
    #business .order-status dd { margin-top:8px; font-size:var(--sm-size); }
    #business .order-status dl:nth-child(1) { width:100%; border-bottom:1px solid #E2E2E2; }
    #business .order-status dl:nth-child(2)::before { display:none; }
    #business .order-status dl:nth-child(3) { padding-left:15px; }

    /*@-webkit-keyframes bg-active {
        to { background-color:var(--primary-color); }
    }

    @keyframes bg-active {
        to { background-color:#F6F6F6; }
    }

    @media (prefers-reduced-motion: no-preference) {
        @supports (animation-timeline: view()) {
            #business .order-status ol > li {
                -webkit-animation:bg-active ease both;
                        animation:bg-active ease both;
                animation-timeline:view(block 50%);
            }
        }
    }*/

    #management .tab-title { padding-block:39px; margin-bottom:40px; background-image:url('../images/_m/sub/management/title_bg.jpg'); font-size:var(--lg-size); }
    #management .column-layout .column-cont { margin-top:40px; }
    #management .banner { gap:15px; }
    #management .banner .item { display:-ms-grid; display:grid; -ms-grid-columns:30fr 31fr; grid-template-columns:30fr 31fr; align-items:center; gap:20px; }
    #management .banner .info { margin:0; text-align:left; }
    #management .banner .info p { font-size:var(--base-size); word-break:keep-all; }
    #policy .policy p { font-size:var(--sm-size); }
    #policy .dot-list { margin-top:20px; }
    #policy .dot-list li { padding-block:17px; padding-inline:15px; border-radius:5px; }
    #policy .policy .desc { margin-top:30px; }
    #policy .policy .desc p { font-size:var(--base-size); }
    #policy .sign { margin-top:40px; }
    #policy .sign .date { font-size:var(--base-size); }
    #policy .sign li { font-size:var(--sm-size); }
    #policy .sign li p { font-weight:600; }
    #policy .sign li p::after { width:4.6875em; }
    #policy .sign li:first-child p::after { height:2em; }
    #policy .sign li:last-child p::after { height:2.75em; }
    #target ol li:not(:first-child) { margin-top:50px; }
    #target ol li .title { margin-bottom:20px; font-size:var(--sm-size); }
    #certification .banner { gap:10px; }
    #certification .banner .item { display:block; width:100%; }
    .integrity #policy p { font-size:var(--lg-size); }
    .integrity #policy .banner { gap:40px; margin-top:40px }
    .integrity #policy .banner .item { display:block; }
    .integrity #policy .banner .info { margin-top:20px; text-align:center; }
/*    .integrity #policy .banner .info p { font-size:var(--sm-size); }*/
    .integrity #policy .banner .info .desc { margin-top:10px; }
    .integrity #policy .banner .info .desc p { font-size:var(--base-size); }
    .integrity #target .banner { -ms-grid-columns:1fr; grid-template-columns:1fr; }
}