@charset "utf-8";
/****************************************
2025-05-20
created by coDribble.

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


01. Common
****************************************/
:root {
    --xs-size: 14px;
    --base-size: 16px;
    --headline: 50px;
    /* 이외 사이즈는 개별 적용 */

    --paperlogy: "Paperlogy", sans-serif;
    --poppins: "Poppins", sans-serif;
    --pretendard: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

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

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

#wrapper:not(.is_list, .is_index) { padding-top:var(--header-height); }
.section { padding-block:150px; }
.contents { width:min(100%, 1440px); padding-inline:20px; margin-inline:auto; }

.logo { /*width:143px;*/ width:192px; height:23px; background-image:url('../images/common/logo.png'); background-image:url('../images/common/logo.svg'); background-position:left center; background-repeat:no-repeat; background-size:auto 100%; }

.icon.download { background-image:url('../images/common/icon_download_white.png'); background-image:url('../images/common/icon_download_white.svg'); background-position:center; background-repeat:no-repeat; background-size:contain; }

/* font set */
.headline-wrap { margin-bottom:60px; }
.page-title { font-family:var(--paperlogy); font-weight:600; font-size:60px; line-height:1.16; }
.headline { font-family:var(--paperlogy); font-weight:600; font-size:var(--headline); line-height:1.4; }
.headline-wrap .desc { margin-top:40px; }
.headline-wrap .desc p { font-size:17px; line-height:1.47; }
.headline-wrap .desc p:not(:first-child) { margin-top:20px; }

.column-layout { display:-ms-grid; display:grid; -ms-grid-columns:(1fr)[2]; grid-template-columns:repeat(2, 1fr); }
.column-layout.half > [class^='column-'] { width:100%; }

.icon { background-position:center; background-repeat:no-repeat; background-size:contain; }
.icon.list { background-image:url('../images/common/icon_list.png'); background-image:url('../images/common/icon_list.svg'); }

#quick { display:flex; flex-direction:column-reverse; position:fixed; bottom:122px; right:25px; padding:5px; border-radius:5em; transition:right .3s, padding .3s, background .3s; z-index:5; }
#quick .btn-quick-toggle { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; width:75px; height:75px; background-image:linear-gradient(to top, #212753, #4954AC 90%); border-radius:50%; font-family:var(--poppins); font-weight:500; font-size:12px; color:white; line-height:1.5; transition:width .3s, height .3s, background .3s; }
#quick .btn-quick-toggle::before { content:''; width:1.5em; height:1.5em; background-image:url('../images/common/icon_quick.png'); background-image:url('../images/common/icon_quick.svg'); background-position:center; background-repeat:no-repeat; background-size:contain; }
#quick ul { display:none; }
#quick ul li { padding-block:15px; }
#quick ul li:not(:first-child) { border-top:1px solid rgb(255 255 255 / .2); }
#quick ul li a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; font-weight:500; color:white; }
#quick ul li a::before { content:''; width:100%; height:1.875em; background-position:center; background-repeat:no-repeat; background-size:contain; }
#quick ul li:nth-child(1) a::before { background-image:url('../images/common/icon_catalog.png'); background-image:url('../images/common/icon_catalog.svg'); }
#quick ul li:nth-child(2) a::before { background-image:url('../images/common/icon_inquiry.png'); background-image:url('../images/common/icon_inquiry.svg'); }
#quick .btn-quick-toggle.on { width:65px; height:65px; background:none; background-color:white; color:black; }
#quick .btn-quick-toggle.on::before { width:1.25em; height:1.25em; background-image:url('../images/common/icon_close.png'); background-image:url('../images/common/icon_close.svg'); }
#quick:has(.on) { right:20px; padding:15px; background-image:linear-gradient(to top, #212753, #4954AC 90%); }
#quick:has(.on) ul { display:block; }

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



/****************************************
02. Header
****************************************/
#header { position:fixed; top:0; left:0; width:100%; padding-block:25px; z-index:999; }
#header::before { content:''; position:absolute; top:0; left:0; width:100%; height:100%; background-color:black; opacity:0; transition:opacity .3s ease; z-index:-1; }
#header.is_scrolling::before { opacity:1; }
#header:not(.is_list, .is_index) { background-color:black; }
#header .header-inner { display:flex; align-items:center; justify-content:space-between; }
#logo a { display:block; }
#gnb ul { display:flex; align-items:center; gap:60px; }
#gnb a { display:block; font-weight:500; color:white; }
#searchItem { display:none; position:absolute; top:0; /* right:max(15px, calc((100vw - 1400px) / 2)); */ width:min(100%, 380px); }
#searchItem #hd_sch { position:relative; }
#searchItem #sch_str { height:var(--header-height); padding-inline:20px 62px; background-color:#ddd; border:0; border-radius:0; }
#searchItem #sch_submit { position:absolute; top:50%; right:20px; width:1em; height:1em; font-size:1.375em; translate:0 -50%; }
#searchItem.on { display:block; }

#gnbMo { align-items:center; gap:20px; }
#gnbMo button { display:block; background:none; border:0; font-weight:500; font-size:var(--base-size); color:white; }
#hamburger { position:relative; width:25px; height:22px; }
#hamburger .bar { position:absolute; top:50%; left:0; width:100%; height:2px; margin-top:-1px; background-color:currentColor; }
#hamburger::before, #hamburger::after { content:''; position:absolute; left:0; width:100%; height:2px; background-color:currentColor; }
#hamburger::before { top:0; }
#hamburger::after { bottom:0; }
#hamburger.active .bar { color:transparent; }
#hamburger.active::before { left:50%; top:50%; width:124%; margin:0; translate:-50% -50%; rotate:45deg; }
#hamburger.active::after { left:50%; bottom:50%; width:124%; margin:0; translate:-50% 50%; rotate:-45deg; }



/****************************************
03. Footer
****************************************/
#footer { padding-block:50px; background-color:#222; color:#999; }
#footer .logo { background-image:url('../images/common/logo_origin.png'); background-image:url('../images/common/logo_origin.svg'); }
#footer .site-info { display:flex; align-items:center; justify-content:space-between; margin-top:30px; }
#footer .info div { display:flex; align-items:center; gap:10px; }
#footer .info div:not(:first-child) { margin-top:7px; }
#footer .info dl { display:flex; align-items:center; gap:.4em; }
#footer .info dt::after { content:'.'; }
#footer .copy { margin-top:20px; }
#footer .privacy { display:flex; align-items:center; position:relative; }
#footer .privacy a { display:inline-flex; align-items:center; color:#999; }
#footer .privacy a:not(:first-child)::before { content:''; display:block; width:1px; height:.9375em; margin-inline:12px; background-color:currentColor; }



/****************************************
04. Main
****************************************/
#keyVisual { position:relative; }
#keyVisual::before { content:''; position:absolute; top:0; left:0; width:100%; height:11.11%; background-image:linear-gradient(to bottom, rgb(0 0 0 / .3) 50%, transparent); pointer-events:none; z-index:2; }
#keyVisual::after { content:''; position:absolute; bottom:0; left:0; width:100%; height:19.72%; background-image:linear-gradient(to top, rgb(0 0 0 / .2) 50%, transparent); pointer-events:none; z-index:2; }
#keyVisual .txt-slider { position:absolute; bottom:180px; left:0; width:100%; pointer-events:none; z-index:3; }
#keyVisual .txt-slider .swiper-slide { display:flex; align-items:center; justify-content:space-between; }
#keyVisual .txt-slider .title { font-family:var(--paperlogy); font-weight:600; font-size:55px; color:white; line-height:1.16; -webkit-filter: drop-shadow(1px 1px 3px #666); filter: drop-shadow(1px 1px 3px #666); word-break: keep-all;}
#keyVisual .txt-slider .italy { display:flex; gap:15px; align-items:center;}
#keyVisual .txt-slider .desc p { font-size:22px; color:white; line-height:1.18; word-break:keep-all; -webkit-filter: drop-shadow(1px 2px 2px #333); filter: drop-shadow(1px 2px 2px #333);}
#keyVisual .txt-slider .desc a { display:inline-flex; align-items:center; gap:10px; margin-top:15px; font-weight:500; color:white; }
#keyVisual .txt-slider .pagination { display:flex; align-items:center; gap:16px; margin-bottom:25px; pointer-events:auto; }
#keyVisual .txt-slider .pagination .swiper-pagination-bullet { --swiper-pagination-bullet-size: 14px; display:inline-flex; align-items:center; justify-content:center; position:relative; margin:0; background:none; border-radius:0; opacity:1; }
#keyVisual .txt-slider .pagination .swiper-pagination-bullet::before { content:''; display:block; width:10px; height:10px; background-color:#eee; border:2px solid transparent; border-radius:50%; opacity:.5; /*transition:width .1s, height .1s;*/ }
#keyVisual .txt-slider .pagination .swiper-pagination-bullet-active::before { width:100%; height:100%; background-color:transparent; border-color:white; opacity:1; }

.marquee-wrap { --gap: .4em; overflow:hidden; display:flex; flex-wrap:nowrap; gap:var(--gap); padding-block:120px; font-size:120px; }
.marquee-wrap .marquee { font-family:var(--paperlogy); font-weight:700; color:#fdf0be; white-space:nowrap; -webkit-animation:flow 20s linear infinite; animation:flow 20s linear infinite; }

@-webkit-keyframes flow {
    from { translate:0% 0%; }
    to { translate:calc(-100% - var(--gap)) 0%; }
}

@keyframes flow {
    from { translate:0% 0%; }
    to { translate:calc(-100% - var(--gap)) 0%; }
}

.latest .headline-wrap { display:flex; align-items:flex-end; justify-content:space-between; }
.latest .lt_more { display:flex; align-items:center; justify-content:space-between; gap:20px; /*min-width:120px;*/ padding-block:13px; padding-inline:20px; background-color:white; border:1px solid currentColor; border-radius:5em; font-weight:500; }
.latest ul { display:-ms-grid; display:grid; -webkit-column-gap:40px; -moz-column-gap:40px; column-gap:40px; }
.latest .gall_li { width:100%; }
.latest .gall_img { overflow:hidden; position:relative; border-radius:10px; aspect-ratio:var(--ratio); }
.latest .gall_img a { display:block; width:100%; height:100%; }
.latest .gall_img img { width:100%; height:auto; }
.latest .gall_img .no_image { display:flex; align-items:center; justify-content:center; width:100%; height:100%; background-color:#F4F4F4; text-transform:uppercase; }
.latest .gall_text_href { margin-top:20px; }
.latest .bo_tit { display:block; font-weight:500; font-size:22px; }
.latest .bo_cnt { margin-top:1em; }
.latest .bo_cnt p { line-height:1.6875; }

#products ul { -ms-grid-columns:(1fr)[4]; grid-template-columns:repeat(4, 1fr); row-gap:50px; }
#products .gall_view { display:none; align-items:center; justify-content:center; gap:10px; position:absolute; min-width:140px; padding-block:22px; padding-inline:39px; background-color:rgb(22 22 22 / .7); border-radius:5em; font-family:var(--paperlogy); font-weight:500; color:white; pointer-events:none; }
#products .gall_img { display:flex; align-items:center; justify-content:center; }
#products .gall_img:has(a:hover) .gall_view { display:flex; }

#recommendation ul { -ms-grid-columns:(1fr)[3]; grid-template-columns:repeat(3, 1fr); }
#recommendation .gall_text_href { margin-top:30px; }

#catalog { padding-block:35px; background-color:#ebaa18; }
#catalog .contents { display:flex; align-items:center; justify-content:space-between; color:white; }
#catalog .title { font-weight:500; font-size:30px; }
#catalog .btn-wrap { display:flex; align-items:center; gap:15px; }
#catalog .btn-wrap .btn-down { display:inline-flex; align-items:center; justify-content:center; gap:10px; width:246px; padding-block:23px; border:1px solid white; border-radius:12px; font-weight:500; font-size:20px; color:white; }
#catalog .btn-wrap .btn-down .icon { width:.95em; height:.95em; }
#catalog .btn-wrap .btn-down:hover { background-color:white; color:black; }
#catalog .btn-wrap .btn-down:hover .icon.download { background-image:url('../images/common/icon_download_black.png'); background-image:url('../images/common/icon_download_black.svg'); }

#inquiry { background-image:linear-gradient(to bottom, #cf9003, #dfcea6); }
#inquiry .contents { display:-ms-grid; display:flex; justify-content:space-between; gap:min(calc((100% - 315px) * .364), 395px); }
#inquiry .headline-wrap { flex-shrink:0; width:320px; margin:0; color:white; }
#inquiry .headline-wrap .desc p:first-child { font-weight:700; font-size:30px; }
#inquiry .finquiry { width:min(calc((100% - 315px) * .6359), 690px); }
#inquiry .finquiry ul { display:flex; flex-wrap:wrap; gap:10px; }
#inquiry .finquiry li { display:flex; align-items:center; width:calc((100% - 10px) / 2); padding-inline:15px; background-color:#F6F6F6; border-radius:3px; }
#inquiry .finquiry li > label { flex-shrink:0; min-width:75px; font-weight:600; }
#inquiry .finquiry li:has(.wish-group), #inquiry .finquiry li:has(textarea) { flex-direction:column; align-items:flex-start; width:100%; }
#inquiry .finquiry li:has(.wish-group), #inquiry .finquiry li:has(textarea), #inquiry .finquiry li:has(.captcha) { padding-block:18px 12px; }
#inquiry .finquiry li:has(.wish-group) > label { display:flex; align-items:end; gap:35px; }
#inquiry .finquiry li:has(.wish-group) > label span { font-weight:400; color:#999; }
#inquiry .finquiry li:has(.chk_box) { justify-content:space-between; }
#inquiry .finquiry li:has(.chk_box) a { font-weight:500; text-decoration:underline; }
#inquiry .finquiry .frm_input { border-color:#F6F6F6; }
#inquiry .finquiry .frm_input.required { background-image:none !important; }
#inquiry .finquiry select { -webkit-appearance:none; appearance:none; }
#inquiry .finquiry textarea { padding-inline:0; }
#inquiry .wish-group { display:flex; flex-wrap:wrap; align-items:center; gap:5px; width:100%; padding-top:10px; margin-top:10px; border-top:1px solid #E2E2E2; }
#inquiry .checkbox { position:relative; padding-block:6px; padding-inline:10px; background-color:white; border:1px solid #ddd; border-radius:2px; -webkit-user-select:none; -ms-user-select:none; user-select:none; cursor:pointer; }
#inquiry .checkbox:has(input[type="checkbox"]:checked) { background-color:#1A1A1A; border-color:#1A1A1A; color:white; }
#inquiry .btn_confirm { margin-top:30px; }
#inquiry .btn_submit { width:min(100%, 230px); padding-block:20px; background-color:#161616; border-radius:5em; font-weight:500; color:white; }



/****************************************
05. Sub
****************************************/
#subVisual { display:flex; align-items:center; justify-content:center; position:relative; width:100%; height:700px; background-position:center; background-repeat:no-repeat; background-size:auto 100%; }
#subVisual::before { content:''; position:absolute; top:0; left:0; width:100%; height:11.11%; background-image:linear-gradient(to bottom, rgb(0 0 0 / .3) 50%, transparent); pointer-events:none; z-index:2; }
#subVisual.products { background-image:url('../images/products/key_visual.jpg'); }
#subVisual.recommendation { background-image:url('../images/recommendation/key_visual.jpg'); }
#subVisual .headline-wrap { margin:0; color:white; text-align:center; }
#subVisual .headline-wrap .desc { margin-top:30px; }
#subVisual .headline-wrap .desc p { font-size:22px; }



@media all and (max-width: 1440px) {
    /*.column-layout { display:block; }
    .column-layout.half > [class^='column-'] { width:100%; }*/
}

@media all and (max-width: 1024px) {
    :root {
        --headline: 28px;
    }

    .headline-wrap { margin-bottom:30px; }
    .headline-wrap .desc { margin-top:30px; }
    .headline-wrap .desc p { font-size:var(--xs-size); line-height:1.5; }
    .headline-wrap .desc p:not(:first-child) { margin-top:var(--base-size); }
    .page-title { font-size:33px; }

    .section { padding-block:100px; }

    .column-layout { display:block; }

    #quick { right:5px; bottom:60px; }
    #quick .btn-quick-toggle { gap:2px; width:55px; height:55px; font-size:11px; }
    #quick .btn-quick-toggle::before { width:1.2272em; height:1.2272em; }
    #quick ul li { padding-block:10px; }
    #quick ul li a { gap:6px; font-size:9px; }
    #quick:has(.on) { right:7px; padding:10px; }
    #quick .btn-quick-toggle.on { width:40px; height:40px; font-size:7px; }
    #quick .btn-quick-toggle.on::before { width:1.3571em; height:1.3571em; }

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

    #header { padding-block:15px; }
    #header .header-inner { padding-inline:15px; }
    /*#logo a { width:95px; height:20px; }*/
    #gnb { display:none; position:fixed; top:var(--header-height); left:0; width:100%; height:calc(100% - var(--header-height)); }
    #gnbMo { display:flex; }
    #searchItem { right:15px; width:min(calc(100vw - 30px), 380px); }
    #header:has(#gnb.open) { background-color:black; }
    #gnb ul { display:block; }
    #gnb li { border-bottom:1px solid #ddd; }
    #gnb li:last-child { display:none; }
    #gnb a { display:block; padding-block:18px; padding-inline:28px; font-weight:600; font-size:20px; color:#333; }
    #gnb a.active { color:#4954AC; }
    #gnb.open { display:block; background-color:white; }

    #keyVisual::before { height:auto; aspect-ratio:720/120; }
    #keyVisual::after { height:auto; background-image:linear-gradient(to top, rgb(0 0 0 / .4) 50%, transparent); aspect-ratio:720/500; }
    #keyVisual .txt-slider { bottom:60px; }
    #keyVisual .txt-slider .swiper-slide { display:block; }
    #keyVisual .txt-slider .title { font-size:33px; }
    #keyVisual .txt-slider .desc { margin-top:30px; }
    #keyVisual .txt-slider .desc p { font-size:var(--base-size); }
    #keyVisual .txt-slider .desc a { gap:8px; margin-top:15px; font-size:var(--xs-size); }
    #keyVisual .txt-slider .pagination { gap:8px; margin-bottom:8px; }
    #keyVisual .txt-slider .pagination .swiper-pagination-bullet { --swiper-pagination-bullet-size: var(--base-size, 16px); }

    .marquee-wrap { padding-block:80px; font-size:75px; }

    .latest .contents { padding-inline:12px; }
    .latest ul { -webkit-column-gap:10px; -moz-column-gap:10px; column-gap:10px; }
    .latest .lt_more { gap:10px; padding-block:8px; padding-inline:14px; font-size:var(--xs-size); }
    .latest .bo_tit, #recommendation .bo_tit { font-size:var(--base-size); }
    .latest .gall_img { border-radius:5px; }
    .latest .gall_text_href { margin-top:12px; }
    .latest .bo_cnt { margin-top:6px; }
    .latest .bo_cnt p { font-size:var(--xs-size); }
    #products ul { -ms-grid-columns:(1fr)[2]; grid-template-columns:repeat(2, 1fr); row-gap:30px; }
    #products .gall_img:has(a:hover) .gall_view { display:none; }
    #recommendation ul { -ms-grid-columns:1fr; grid-template-columns:1fr; row-gap:30px; }
    #recommendation .gall_text_href { margin-top:15px; }

    #catalog { padding-block:30px; }
    #catalog .contents { display:block; text-align:center; }
    #catalog .title { font-size:20px; }
    #catalog .btn-wrap { gap:5px; padding-inline:8px; margin-top:20px; }
    #catalog .btn-wrap .btn-down { width:calc((100% - 5px) / 2); padding-block:14px; border-radius:6px; font-size:var(--xs-size); }

    #inquiry { padding-block:90px; background-image:linear-gradient(to bottom, #313F46 30%, #475358); }
    #inquiry .contents { display:block; }
    #inquiry .headline-wrap { width:100%; }
    #inquiry .headline-wrap .desc p:first-child { font-size:20px; }
    #inquiry .finquiry { width:100%; margin-top:40px; }
    #inquiry .finquiry ul { gap:8px; }
    #inquiry .finquiry li { width:100%; padding-inline:12px; }
    #inquiry .finquiry li > label { min-width:58px; font-size:var(--xs-size); }
    #inquiry .finquiry li:has(.wish-group) > label { gap:20px; }
    #inquiry .finquiry li:has(.chk_box) { padding-block:12px; }
    #inquiry .finquiry li:has(.wish-group), #inquiry .finquiry li:has(textarea), #inquiry .finquiry li:has(.captcha) { padding-block:12px; }
    #inquiry .finquiry .frm_input { font-size:var(--xs-size); }
    #inquiry .checkbox { padding-block:3px; padding-inline:7px; font-size:var(--xs-size); }
    #inquiry .btn_submit { width:min(100%, 170px); padding-block:14px; font-size:var(--xs-size); }

    #subVisual { height:auto; aspect-ratio:36/35; }
    #subVisual::before { height:auto; aspect-ratio:720/120; }
    #subVisual::after { content:''; position:absolute; bottom:0; left:0; width:100%; height:auto; background-image:linear-gradient(to top, rgb(0 0 0 / .4) 50%, transparent); aspect-ratio:720/500; }
    #subVisual.products { background-image:url('../images/_m/products/key_visual.jpg'); }
    #subVisual.recommendation { background-image:url('../images/_m/recommendation/key_visual.jpg'); }
    #subVisual .headline-wrap { z-index:1; }
    #subVisual .headline-wrap .desc { margin-top:15px; }
    #subVisual .headline-wrap .desc p { font-size:var(--xs-size); }
}

@media all and (max-width: 768px) {
    .logo { /*width:119px; height:25px;*/ width:150px; height:18px; }

    #keyVisual .txt-slider .italy img { width:8%;}

    #footer { font-size:var(--xs-size); }
    #footer .site-info { display:block; }
    #footer .info div { display:block; }
    #footer .info div:not(:first-child) { margin-top:10px; }
    #footer .info dl:not(:first-child) { margin-top:10px; }
    #footer .privacy { margin-top:10px; }
    #footer .privacy a:not(:first-child)::before { margin-inline:10px; }
    #footer .copy { margin-top:30px; }
}