@charset "utf-8";
/****************************************
2025-02-21
created by coDribble.

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


01. Common
****************************************/
@font-face {
    font-family: 'Paperlogy';
    src: url('./fonts/Paperlogy-4Regular.eot');
    src: url('./fonts/Paperlogy-4Regular.eot?#iefix') format('embedded-opentype'),
        url('./fonts/Paperlogy-4Regular.woff2') format('woff2'),
        url('./fonts/Paperlogy-4Regular.woff') format('woff'),
        url('./fonts/Paperlogy-4Regular.ttf') format('truetype'),
        url('./fonts/Paperlogy-4Regular.svg#Paperlogy-4Regular') format('svg');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Paperlogy';
    src: url('./fonts/Paperlogy-5Medium.eot');
    src: url('./fonts/Paperlogy-5Medium.eot?#iefix') format('embedded-opentype'),
        url('./fonts/Paperlogy-5Medium.woff2') format('woff2'),
        url('./fonts/Paperlogy-5Medium.woff') format('woff'),
        url('./fonts/Paperlogy-5Medium.ttf') format('truetype'),
        url('./fonts/Paperlogy-5Medium.svg#Paperlogy-5Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Paperlogy';
    src: url('./fonts/Paperlogy-6SemiBold.eot');
    src: url('./fonts/Paperlogy-6SemiBold.eot?#iefix') format('embedded-opentype'),
        url('./fonts/Paperlogy-6SemiBold.woff2') format('woff2'),
        url('./fonts/Paperlogy-6SemiBold.woff') format('woff'),
        url('./fonts/Paperlogy-6SemiBold.ttf') format('truetype'),
        url('./fonts/Paperlogy-6SemiBold.svg#Paperlogy-6SemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Paperlogy';
    src: url('./fonts/Paperlogy-7Bold.eot');
    src: url('./fonts/Paperlogy-7Bold.eot?#iefix') format('embedded-opentype'),
        url('./fonts/Paperlogy-7Bold.woff2') format('woff2'),
        url('./fonts/Paperlogy-7Bold.woff') format('woff'),
        url('./fonts/Paperlogy-7Bold.ttf') format('truetype'),
        url('./fonts/Paperlogy-7Bold.svg#Paperlogy-7Bold') format('svg');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --text-base: 16px;
    --text-xs: 14px;
    --text-sm: 20px;
    --text-md: 24px;
    --text-lg: 32px;
    --text-xl: 40px;
    --headline: 50px;
    /* 이외 사이즈는 개별 적용 */

    --paperlogy: "Paperlogy", 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;

    --base-color: #222;
    --gray-color: #999;
    --primary-color: #27AFC5;
    --primary-deep1-color: #0889B0;
    --primary-deep2-color: #044366;
    --primary-light1-color: #EBF1F2;
}

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

/* like tailwind */
/* overflow */
.overflow-hidden { overflow:hidden; }
.overflow-visible { overflow:visible; }
/* display */
.block { display:block; }
.inline-block { display:inline-block; }
.flex { display:flex; }
.grid { display:-ms-grid; display:grid; }
.hidden { display:none; }
/* flex wrap */
.flex-nowrap { flex-wrap:nowrap; }
.flex-wrap { flex-wrap:wrap; }
.flex-wrap-reverse { flex-wrap:wrap-reverse; }
/* align items */
.items-start { align-items:start; }
.items-center { align-items:center; }
.items-end { align-items:end; }
/* justify content */
.justify-evenly { justify-content:space-evenly; }
.justify-around { justify-content:space-around; }
.justify-between { justify-content:space-between; }
.justify-center { justify-content:center; }
.justify-end { justify-content:end; }
/* flex direction */
.flex-col { flex-direction:column; }
.flex-col-reverse { flex-direction:column-reverse; }
.flex-row { flex-direction:row; }
.flex-row-reverse { flex-direction:row-reverse; }
/* position */
.absolute { position:absolute; }
.relative { position:relative; }
.static { position:static; }
.fixed { position:fixed; }
.sticky { position:sticky; }
.top-0 { top:0; }
.left-0 { left:0; }
.right-0 { right:0; }
.bottom-0 { bottom:0; }
/* size */
.w-full { width:100%; }
.h-full { height:100%; }
/* font family */
.font-paperlogy { font-family:var(--paperlogy); }
.font-pretendard { font-family:var(--pretendard); }
/* font weight  */
.font-normal { font-weight:400; }
.font-medium { font-weight:500; }
.font-semibold { font-weight:600; }
.font-bold { font-weight:700; }
/* font color */
.text-white { color:white; }
.text-black { color:var(--base-color); }
.text-gray { color:var(--gray-color); }
.text-primary { color:var(--primary-color); }
.text-deep1 { color:var(--primary-deep1-color); }
.text-deep2 { color:var(--primary-deep2-color); }
.text-light1 { color:var(--primary-light1-color); }
/* font size */
.text-base { font-size:var(--text-base); }
.text-xs { font-size:var(--text-xs); }
.text-sm { font-size:var(--text-sm); }
.text-md { font-size:var(--text-md); }
.text-lg { font-size:var(--text-lg); }
.text-xl { font-size:var(--text-xl); }
.text-title { font-size:var(--headline); line-height:1.2; }
/* text align */
.text-center { text-align:center; }
.text-left { text-align:left; }
.text-right { text-align:right; }
.text-justify { text-align:justify; }
/* white space */
.whitespace-nowrap { white-space:nowrap; }
/* text overflow */
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.text-ellipsis { text-overflow:ellipsis; }
.text-clip { text-overflow:clip;; }
/* word break */
.break-keep { word-break:keep-all; }
.break-all { word-break:break-all; }
.break-words { overflow-wrap:break-word; }
/* line height */
.font-paperlogy.text-sm { line-height:1.6; }
.font-paperlogy.text-md { line-height:1.416; }
.font-paperlogy.text-lg { line-height:1.3125; }
.font-paperlogy.text-xl { line-height:1.35; }
/* background color */
.bg-base { background-color:var(--base-color); }
.bg-gray { background-color:var(--gray-color); }
.bg-white { background-color:white; }
.bg-primary { background-color:var(--primary-color); }
.bg-deep1 { background-color:var(--primary-deep1-color); }
.bg-deep2 { background-color:var(--primary-deep2-color); }
.bg-light1 { background-color:var(--primary-light1-color); }
/* background position */
.bg-center { background-position:center; }
.bg-right-top { background-position:right top; }
.bg-no-repeat { background-repeat:no-repeat; }
.bg-cover { background-size:cover; }
.bg-contain { background-size:contain; }
/* border radius */
.rounded-2 { border-radius:2px; }
.rounded-3 { border-radius:3px; }
.rounded-5 { border-radius:5px; }
.rounded-20 { border-radius:20px; }
.rounded-50 { border-radius:50px; }
.rounded-full { border-radius:5em; }
.rounded-half { border-radius:50%; }
/* opacity */
.opacity-10 { opacity:.1; }
.opacity-30 { opacity:.3; }
.opacity-50 { opacity:.5; }
.opacity-70 { opacity:.7; }

.desc p { font-size:var(--text-sm); color:#444; line-height:1.4; letter-spacing:-.02em; word-break:keep-all; }
.desc p:not(:first-child) { margin-top:1.4em; }

.headline { margin-bottom:60px; }
.headline .title { font-family:var(--paperlogy); font-weight:700; font-size:var(--headline); line-height:1.2; }
.headline .desc { margin-top:30px; }
.is_index .headline .title { --headline: 60px; }

/* frame set */
#wrapper:has(.is_item) { padding-top:100px; }
.section { padding-block:150px; }
:is(.is_board, .is_itemlist, .is_item) .section { padding-top:100px; }
.contents { width:min(100%, 1360px); padding-inline:40px; margin-inline:auto; }

.logo { background-image:url('../images/common/logo.png'); background-image:url('../images/common/logo.svg'); }

[class^='swiper-button'] { width:var(--swiper-navigation-size); margin:0; }
[class^='swiper-button']::after { font-family:'Font Awesome 6 Free'; font-weight:900; }
.swiper-button-prev::after { content:'\f104'; }
.swiper-button-next::after { content:'\f105'; }

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

#floating { bottom:47px; right:25px; width:90px; opacity:0; visibility:hidden; z-index:30; }
#floating div:first-child { padding-block:5px; }
#floating div:not(:first-child) { margin-top:5px; }
#floating a { width:100%; padding-block:20px; }
#floating div:first-child a:not(:first-child) { border-top:1px solid rgb(255 255 255 / .3); }
#floating a::before { content:''; width:100%; height:30px; margin-bottom:5px; background-position:center; background-repeat:no-repeat; background-size:auto 100%; }
#floating .channel-talk { padding:0; background-color:#FFE357; aspect-ratio:1; }
#floating .channel-talk::before { background-image:url('../images/common/channel_talk.png'); background-image:url('../images/common/channel_talk.svg'); }
#floating .store::before { background-image:url('../images/common/store.png'); background-image:url('../images/common/store.svg'); }
#floating .blog::before { background-image:url('../images/common/blog.png'); background-image:url('../images/common/blog.svg'); }
#floating .channel-talk:hover { background-color:var(--base-color); color:#FFE357; }
#floating .channel-talk:hover::before { background-image:url('../images/common/channel_talk_on.png'); background-image:url('../images/common/channel_talk_on.svg'); }
#floating .store:hover { color:#41E5FF; }
#floating .store:hover::before { background-image:url('../images/common/store_on.png'); background-image:url('../images/common/store_on.svg'); }
#floating .blog:hover { color:#42F897; }
#floating .blog:hover::before { background-image:url('../images/common/blog_on.png'); background-image:url('../images/common/blog_on.svg'); }



/****************************************
02. Header
****************************************/
#header { position:fixed; background-color:white; z-index:99; }
#header .header-inner { padding-inline:50px 60px; }
#logo { width:218px; height:63px; }
.gnb-wrap { gap:40px; }
#gnb .gnb-list > li { padding-inline:40px; }
#gnb .depth1 { padding-block:34px; font-weight:600; z-index:1; }
#gnb .gnb-list > li:has(.depth2.active) .depth1::before, #gnb .depth1.active::before { content:''; display:block; position:absolute; top:50%; left:50%; width:7px; height:7px; background-color:var(--primary-color); border-radius:50%; translate:-50% calc((100% + var(--text-sm) * 1.6 / 2 + 4px) * -1); }
#gnb.on .gnb-list > li:hover .depth1::after { content:''; display:block; position:absolute; top:100%; left:50%; width:calc(100% + 30px); height:2px; background-color:var(--primary-color); translate:-50% 0; }
#gnb .depth2-wrap { top:100%; left:0; width:100%; }
#gnb .depth2-wrap.on { display:block; z-index:1; }
#gnb .depth2-list { padding-block:30px; }
#gnb .depth2-list > li:not(:first-child) { margin-top:15px; }
#gnb .depth2:hover { font-weight:600; color:var(--primary-color); }
#gnb.on::before { content:''; position:absolute; top:100%; left:0; width:100%; height:100vh; height:100dvh; background-color:rgb(0 0 0 / .5); }
#hamburger { width:30px; height:20px; }
#hamburger .bar { height:2px; }

#header:has(#gnb.on)::after { content:''; position:absolute; top:100%; left:0; width:100%; height:var(--depth2-height); background-color:white; }
#header.type2 { background-color:transparent; }
#header.type2 .logo { background-image:url('../images/common/logo_white.png'); background-image:url('../images/common/logo_white.svg'); }
#header.type2 #gnb .depth1 { font-weight:400; color:white; }
#header.type2 #hamburger .bar { background-color:white; }



/****************************************
03. Footer
****************************************/
#footer { padding-block:50px 94px; border-top:1px solid #ddd; }
#footer .footer-inner { padding-inline:60px; }
#footer .logo { width:218px; height:63px; }
#footer .info { margin-top:30px; color:#707070; }
#footer .info > div:not(:first-child) { margin-top:13px; }
#footer .info dl { float:left; line-height:1.583; }
#footer .info dl:not(:first-child) { padding-left:10px; margin-left:10px; }
#footer .info dl:not(:first-child)::before { content:''; position:absolute; top:50%; left:0; width:1px; height:1em; margin-top:-.5em; background-color:var(--primary-color); }
#footer .info dt:not(.sound_only)::after { content:'\003a'; margin-inline:.2em; }
#footer .info > div:first-child dl:first-child dd { color:var(--base-color); }
.sns-list { gap:10px; }
.sns-list a i { margin-left:5px; }
#footer .copyright { margin-top:30px; color:#bbb; }



/****************************************
04. Main
****************************************/
.banner { padding:55px 120px; margin-top:60px; background-image:linear-gradient(to right, var(--primary-color), #3496B5); }
.banner01::before { content:''; position:absolute; top:50%; right:0; width:507px; background-image:url('../images/main/banner01.png'); background-position:center; background-repeat:no-repeat; background-size:cover; translate:-15px calc(-50% + 10px); aspect-ratio:507 / 258; }
.banner02::before { content:''; position:absolute; top:50%; right:0; width:445px; background-image:url('../images/main/banner02.png'); background-position:center; background-repeat:no-repeat; background-size:cover; translate:-40px -50%; aspect-ratio:445 / 190; }
.banner .btn-wrap { gap:10px; margin-top:30px; }
.banner .btn { width:170px; padding-block:18px; }

#keyVisual { position:relative; height:1010px; }
#keyVisual .contents { position:absolute; top:50%; left:50%; translate:-50% -50%; z-index:1; }
#keyVisual .desc p { color:white; }
#keyVisual .visual01 { background-image:url('../images/main/visual01.jpg'); }
#keyVisual .visual02 { background-image:url('../images/main/visual02.jpg'); }
#keyVisual .visual03 { background-image:url('../images/main/visual03.jpg'); }
#keyVisual .visual04 { background-image:url('../images/main/visual04.jpg'); }

#products .tab { --swiper-navigation-size: 40px; padding-inline:42px; margin-bottom:40px; border-block:2px solid var(--primary-light1-color); }
#products .tab::after { content:''; position:absolute; top:0; right:0; width:83px; height:100%; background-image:linear-gradient(to right, transparent, white); z-index:1; }
#products .tab .swiper-slide { width:auto; }
#products .tab button { padding:26px 60px; }
#products .tab button.active { color:var(--primary-color); }
#products .tab .swiper-slide:not(:first-child) button::before { content:''; position:absolute; top:50%; left:0; width:1px; height:var(--text-sm); background-color:#ddd; translate:0 -50%; }
#products .tab [class^='swiper-button']::after { font-size:var(--text-sm); }
#products .tab [class^='swiper-button']:hover { background-color:var(--primary-color); color:white; }
#products .tab .swiper-button-prev { translate:-50% -50%; }
#products .tab .swiper-button-next { translate:50% -50%; }

#business { --swiper-navigation-size: 70px; background-color:rgb(39 175 197 / .15); }
#business::before { content:''; position:absolute; top:0; left:50%; width:107.2916%; background-image:url('../images/main/business_bg.png'); background-position:center top; background-repeat:no-repeat; background-size:cover; translate:-50% -10.9922%; aspect-ratio:2060 / 1683; opacity:.2; z-index:-1; }
#business .business-thumb .swiper-slide { width:51.5625%; }
#business .business-thumb [class^='swiper-button']::after { font-size:var(--text-lg); }
#business .business-thumb .swiper-button-prev { translate:-50% -50%; }
#business .business-thumb .swiper-button-next { translate:50% -50%; }
#business .business-info { width:51.5625%; margin-top:30px; }
#business .info { padding-left:33px; border-left:3px solid var(--primary-deep1-color); }
#business .info .en { margin-top:10px; color:#222; }
#business .info .desc { margin-top:25px; }
#business .btn-wrap { margin-top:50px; }
#business .btn01 { width:260px; padding-block:23px; }

#philosophy .desc p { color:white; }
#philosophy .marquee-wrap { margin-bottom:150px; }
#philosophy .marquee-wrap .swiper-wrapper { transition-timing-function:linear; }
#philosophy .marquee-wrap .swiper-slide { width:360px; transition:opacity .3s; }
#philosophy .marquee-wrap .swiper-slide:hover { opacity:1; }
#philosophy .text-marquee { gap:.2em; margin-top:100px; font-size:120px; color:#DEF3F7; }
#philosophy .text-marquee p { -webkit-animation:marquee 20s linear infinite; animation:marquee 20s linear infinite; }
@-webkit-keyframes marquee {
    0% { translate:0% 0; }
    100% { translate:-100% 0; }
}
@keyframes marquee {
    0% { translate:0% 0; }
    100% { translate:calc(-100% - .2em) 0; }
}
#philosophy .philosophy-list { --gap: 3px; --cols: 4; gap:var(--gap); }
#philosophy .philosophy-list .item { width:calc((100% - (var(--gap) * (var(--cols) - 1))) / var(--cols)); aspect-ratio:1; }
#philosophy .philosophy-list .icon { width:100%; height:60px; margin-bottom:30px; }
#philosophy .philosophy-list strong { margin-top:14px; }
#philosophy .philosophy01 .icon { background-image:url('../images/main/philosophy01.png'); background-image:url('../images/main/philosophy01.svg'); }
#philosophy .philosophy02 .icon { background-image:url('../images/main/philosophy02.png'); background-image:url('../images/main/philosophy02.svg'); }
#philosophy .philosophy03 .icon { background-image:url('../images/main/philosophy03.png'); background-image:url('../images/main/philosophy03.svg'); }
#philosophy .philosophy04 .icon { background-image:url('../images/main/philosophy04.png'); background-image:url('../images/main/philosophy04.svg'); }
#philosophy .philosophy-list .item:hover { background-color:var(--primary-light1-color); }
#philosophy .philosophy-list .item:hover .en { color:var(--gray-color); }
#philosophy .philosophy-list .item:hover strong { opacity:1; }
#philosophy .philosophy01:hover .icon { background-image:url('../images/main/philosophy01_on.png'); background-image:url('../images/main/philosophy01_on.svg'); }
#philosophy .philosophy02:hover .icon { background-image:url('../images/main/philosophy02_on.png'); background-image:url('../images/main/philosophy02_on.svg'); }
#philosophy .philosophy03:hover .icon { background-image:url('../images/main/philosophy03_on.png'); background-image:url('../images/main/philosophy03_on.svg'); }
#philosophy .philosophy04:hover .icon { background-image:url('../images/main/philosophy04_on.png'); background-image:url('../images/main/philosophy04_on.svg'); }

#notice .notice-latest { --gap: 25px; --cols: 3; gap:var(--gap); }
#notice .notice-latest .item { width:calc((100% - (var(--gap) * (var(--cols) - 1))) / var(--cols)); }
#notice .notice-latest .item a { padding:30px; border:1px solid #ddd; }
#notice .notice-latest .lt_tit { margin-top:15px; }
#notice .notice-latest .lt_info { margin-top:25px; }
#notice .notice-latest .lt_cont { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; max-height:2.8em; color:#707070; line-height:1.4; }
#notice .notice-latest .lt_date { margin-top:20px; color:#bbb; }
#notice .notice-latest .item:hover a { background-color:var(--primary-color); border-color:var(--primary-color); box-shadow:0px 10px 16px rgb(0 0 0 / .16); color:white; }
#notice .notice-latest .item:hover .lt_bo_subj { color:white; }
#notice .notice-latest .item:hover .lt_cont { color:white; }
#notice .notice-latest .item:hover .lt_date { color:white; }

#location { background-color:#F8F8F8; }
#location .branches { --gap: 80px; --cols: 2; gap:var(--gap); }
#location .branch { width:calc((100% - (var(--gap) * (var(--cols) - 1))) / var(--cols)); }
#location .branch .map { width:100%; aspect-ratio:3 / 2; }
#location .branch .map iframe { position:absolute; top:0; left:0; width:100%; height:100%; }
#location .branch strong { margin-bottom:30px; }
#location .info-data { margin-top:10px; }
#location .info-data dl { gap:60px; padding:25px 20px; }
#location .info-data dl:not(:first-child) { border-top:1px solid #ddd; }
#location .info-data dt { width:71px; color:#222; text-align-last:justify; }
#location .info-data dd { width:calc(100% - 151px); color:#444; letter-spacing:-.02em; line-height:1.4; }


/****************************************
05. Sub
****************************************/
#subVisual { height:720px; }
#subVisual.company { background-image:url('../images/company/key_visual.jpg'); }
#subVisual.business { background-image:url('../images/business/key_visual.jpg'); }
#subVisual.delivery { background-image:url('../images/delivery/key_visual.jpg'); }
#subVisual.location { background-image:url('../images/location/key_visual.jpg'); }
#subVisual.notice { background-image:url('../images/notice/key_visual.jpg'); }
#subVisual.photo { background-image:url('../images/photo/key_visual.jpg'); }
#subVisual.product { background-image:url('../images/shop/cate1010/key_visual.jpg'); }

/*#subVisual.cate1010 { background-image:url('../images/shop/cate1010/key_visual.jpg'); }
#subVisual.cate1020 { background-image:url('../images/shop/cate1020/key_visual.jpg'); }
#subVisual.cate1030 { background-image:url('../images/shop/cate1030/key_visual.jpg'); }
#subVisual.cate1040 { background-image:url('../images/shop/cate1040/key_visual.jpg'); }
#subVisual.cate1050 { background-image:url('../images/shop/cate1050/key_visual.jpg'); }
#subVisual.cate1060 { background-image:url('../images/shop/cate1060/key_visual.jpg'); }
#subVisual.cate1070 { background-image:url('../images/shop/cate1070/key_visual.jpg'); }*/
#subVisual .headline { margin:0; }
#subVisual .desc { margin-top:20px; }
#subVisual .desc p { color:white; }

#subTab { left:50%; width:min(100%, 1280px); translate:-50% -100%; }
#subTab ul { -ms-grid-columns:(1fr)[var(--cnt)]; grid-template-columns:repeat(var(--cnt), 1fr); }
#subTab li { width:100%; }
#subTab a { padding-block:28px; }
#subTab li:not(:first-child) a::before { content:''; position:absolute; top:50%; left:0; width:1px; height:1em; background-color:#ddd; translate:0 -50%; }

/* company */
#company { padding-block:100px 188px; }
#company .polygon { width:min(50%, 600px); padding-top:98px; }
#company .polygon .clip { width:63.8333%; aspect-ratio:383 / 487; }
#company .polygon .clip:nth-child(1) { clip-path:polygon(72% 0%, 100% 7%, 100% 93%, 72% 100%, 0% 85%, 0% 15%); -webkit-filter:drop-shadow(20px 2px 30px rgb(0 0 0 / .16)); filter:drop-shadow(20px 2px 30px rgb(0 0 0 / .16)); }
#company .polygon .clip:nth-child(2) { position:absolute; top:0; right:0; clip-path:polygon(28% 0%, 100% 15%, 100% 85%, 28% 100%, 0% 93%, 0% 7%); z-index:-1; }
#company .greetings { width:min(50%, 610px); padding:36px 30px 0; }
#company .headline .desc p { color:var(--primary-color); }

/* business */
@property --angle {
     syntax: "<angle>";
    inherits: true;
    initial-value: 0turn;
}
#solution .business-part { -ms-grid-columns:(1fr)[2]; grid-template-columns:repeat(2, 1fr); gap:30px; }
#solution .business-part .item { --radius: 20; --padding: 2px; --border-width: 1px; --unit: 1px; --outer-radius: calc(var(--radius) * var(--unit)); --inner-radius: calc((var(--outer-radius) - var(--padding)) - var(--border-width)); }
#solution .business-part .item a { min-height:420px; padding:40px; background-position:right 10px center; background-size:200px; border:1px solid #ddd; }
#solution .business-part .cate1010 { background-image:url('../images/shop/cate1010/cate1010.png'); }
#solution .business-part .cate1020 { background-image:url('../images/shop/cate1020/cate1020.png'); }
#solution .business-part .cate1030 { background-image:url('../images/shop/cate1030/cate1030.png'); }
#solution .business-part .cate1040 { background-image:url('../images/shop/cate1040/cate1040.png'); }
#solution .business-part .cate1050 { background-image:url('../images/shop/cate1050/cate1050.png'); }
#solution .business-part .cate1060 { background-image:url('../images/shop/cate1060/cate1060.png'); }
#solution .business-part .cate1070 { background-image:url('../images/shop/cate1070/cate1070.png'); }
#solution .business-part .name { margin-top:8px; }
#solution .business-part .desc { width:calc(100% - 180px); margin-top:30px; }
#solution .business-part .desc p { word-break:break-all; }
#solution .business-part .more { gap:10px; }
/*#solution .business-part .item a:hover::before { content:''; position:absolute; top:-1px; left:-1px; width:calc(100% + 2px); height:calc(100% + 2px); border-radius:inherit; border:3px solid var(--primary-color); }*/
#solution .business-part .item { --angle: 0turn; }
#solution .business-part .item a:hover { border-color:transparent; z-index:2; }
#solution .business-part .item a:hover .more { gap:20px; color:var(--primary-color); }
#solution .business-part .item:has(a:hover)::before { content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:conic-gradient(from var(--angle), transparent 25%, var(--primary-color)); border-radius:var(--outer-radius); -webkit-animation:conic-border 2s linear infinite; animation:conic-border 2s linear infinite; }
#solution .business-part .item:has(a:hover)::after { content:''; position:absolute; top:2px; left:2px; width:calc(100% - 4px); height:calc(100% - 4px); background-color:white; border-radius:var(--inner-radius); z-index:1; }
@-webkit-keyframes conic-border {
    to { --angle: 1turn; }
}
@keyframes conic-border {
    to { --angle: 1turn; }
}

/* delivery */
#delivery { background-color:#fafafa; }
#delivery .delivery-area { padding-inline:40px; }
#delivery .branches { width:min(calc((100% - 86px) * .37), 420px); }
#delivery .branch { border-top:1px solid currentColor; }
#delivery .branch:not(:first-child) { margin-top:40px; }
#delivery .branch .title { padding:22px 20px; }
#delivery .branch dl { padding:18px 20px; border-top:1px solid #ddd; }
#delivery .branch dt { width:3.55em; text-align-last:justify; }
#delivery .branch dd { margin-top:10px; }
#delivery .area { width:min(calc(100% - 86px - ((100% - 86px) *.37)), 694px); }
#delivery .area svg { width:100%; height:auto; }
#delivery .area g image { display:block; width:86.58%; height:auto; }

#system .process ol { counter-reset:counting; }
#system .process li { counter-increment:counting; padding:60px; border:1px solid #ddd; }
#system .process li:not(:first-child) { margin-top:30px; }
#system .process .title { width:270px; }
#system .process .title strong { gap:15px; }
#system .process .title strong::before { content:counter(counting); display:flex; align-items:center; justify-content:center; width:35px; height:35px; background-color:var(--base-color); border-radius:50%; font-size:var(--text-sm); color:white; }
#system .process .title p { padding-left:50px; margin-top:5px; }
#system .process .desc { width:calc(100% - 330px); }
#system .process .desc p { word-break:break-all; }
#system .process .img { margin-top:40px; }

/* location */
.is_sub #location { background-color:white; }
.is_sub #location .banner { margin-top:50px; }

/* shop list */
#categoryHeader { padding-block:80px; background-color:#fafafa; }
#categoryHeader .flex { gap:80px; padding-inline:50px; }
#categoryHeader .cate-info { flex:1; margin:0; }
#categoryHeader .en { margin-top:15px; }
#categoryHeader .desc { margin-top:30px; }
#categoryHeader .desc p { color:var(--base-color); line-height:1.6; word-break:break-all; }
#categoryHeader .thumb { width:240px; }



/****************************************
06. Media Query
****************************************/
@media all and (max-width: 1366px) {
    #header .header-inner { padding-inline:20px; }
    #footer .footer-inner { padding-inline:20px; }
    .banner { padding-inline:40px; }
    #notice .notice-latest .lt_tit { word-break:break-all; }
    #delivery .delivery-area { padding:0; }
    #categoryHeader .flex { padding:0; }
}

@media all and (max-width: 1024px) {
    #header { padding-block:calc((100px - 63px) / 2); }
    #header:has(#gnb.on)::after { display:none; }
    #header.type2 #gnb .depth1 { font-weight:600; color:var(--base-color); }
    #gnb { position:fixed; top:100px; left:0; width:100%; height:100vh; height:calc(100dvh - var(--text-base) * 4.3203); background-color:white; border-top:1px solid #ddd; opacity:0; visibility:hidden; }
    #header:has(#gnb.on) { background-color:white; }
    #header:has(#gnb.on) .logo { background-image:url('../images/common/logo.png'); background-image:url('../images/common/logo.svg'); }
    #header:has(#gnb.on) #hamburger .bar-middle { background-color:transparent; }
    #header:has(#gnb.on) #hamburger .bar-top { top:50%; background-color:var(--base-color); translate:0 -50%; rotate:45deg; }
    #header:has(#gnb.on) #hamburger .bar-bottom { bottom:50%; background-color:var(--base-color); translate:0 50%; rotate:-45deg; }
    #gnb { overflow-y:auto; padding-bottom:1.25em; }
    #gnb.on { opacity:1; visibility:visible; }
    #gnb.on::before { display:none; }
    #gnb .gnb-list { display:block; }
    #gnb .gnb-list > li { padding:0; }
    #gnb .gnb-list > li:not(:first-child) { border-top:1px solid #ddd; }
    #gnb .depth1 { gap:.5909em; padding:.7954em 1.25em; font-size:var(--text-lg); color:var(--base-color); }
    #gnb .gnb-list > li:has(.depth2.active) .depth1::before, #gnb .depth1.active::before { display:none; }
    #gnb .depth1 i { display:block; font-size:var(--text-sm); pointer-events:none; }
    #gnb .gnb-list > li:has(.depth2-wrap.on) .depth1, #header.type2 #gnb .gnb-list > li:has(.depth2-wrap.on) .depth1 { color:var(--primary-color); }
    #gnb .gnb-list > li:has(.depth2-wrap.on) .depth1 i::before { content:'\f106'; }
    #gnb.on .gnb-list > li:hover .depth1::after { display:none; }
    #gnb .depth2-wrap { position:static; padding:1.7857em 1.9642em; background-color:#F9F9F9; border-top:1px solid #ddd; }
    #gnb .depth2-list { display:flex; flex-wrap:wrap; align-items:center; gap:1.09375em 1.5625em; padding:0; }
    #gnb .depth2-list > li:not(:first-child) { margin:0; }
    #gnb .depth2 { font-size:var(--text-sm); }
    #gnb .depth2:hover { font-weight:400; color:var(--base-color); }
    #gnb .depth2.active { font-weight:600; color:var(--primary-color); }
    #gnb .sns-list { display:flex; margin-top:3.0357em; }
    #hamburger { width:2.1428em; height:1.6071em; }
    #hamburger .bar { height:0.1785em; }

    #subTab { position:relative; left:0; border-bottom:1px solid #ddd; translate:0; }
    #subTab ul { -ms-grid-columns:(1fr)[var(--mo-col)]; grid-template-columns:repeat(var(--mo-col), 1fr); }
    #subTab li { border-bottom:1px solid #ddd; }
    #subTab li:nth-child(3n+1) a::before { display:none; }
    #subTab li:nth-child(3n+1):nth-last-child(-n+3),
    #subTab li:nth-child(3n+1):nth-last-child(-n+3) ~ li { border:0; }

    #delivery .delivery-area { flex-direction:column; gap:2.8571em; }
    #delivery .area { width:auto; margin-inline:-.9285em; }
    #delivery .area g image { margin-inline:auto; }
    #delivery .branches { width:100%; }
    #delivery .branch .title { padding:.6818em .7954em; }
    #delivery .branch dl { padding:.9375em 1.09375em; }
    #delivery .branch dd { margin-top:.46875em; }

    #solution .business-part { -ms-grid-columns:1fr; grid-template-columns:1fr; }
    #solution .business-part .item a { display:block; min-height:auto; }
    #solution .business-part .more { margin-top:50px; }

    #location .branches { --gap: 40px; }
}

@media all and (max-width: 800px) {
    :root {
        /*--text-base: clamp(14px, calc(100% ), 28px);*/
        --text-base: clamp(14px, calc(14px + (28 - 14) * ((100vw - 360px) / (720 - 360))), 28px); /* 28px */
        --text-xs: calc(var(--text-base) * .8571); /* 24px */
        --text-sm: calc(var(--text-base) * 1.1428); /* 32px */
        --text-md: var(--text-sm);
        --text-lg: calc(var(--text-base) * 1.5714); /* 44px */
        --text-xl: calc(var(--text-base) * 1.7857); /* 50px */
        --headline: calc(var(--text-base) * 2.1428); /* 60px */
    }

    .font-paperlogy.text-sm, .font-paperlogy.text-md { line-height:1.375; }
    .font-paperlogy.text-lg { line-height:1.3636; }
    .rounded-5 { border-radius:.1785em; }
    .rounded-20 { border-radius:.7142em; }

    .headline { margin-bottom:var(--headline); }
    .headline .desc { margin-top:1.4285em; }
    .is_index .headline .title { --headline: calc(var(--text-base) * 2.5); /* 70px */ }
    .desc p { line-height:1.375; }

    #wrapper:has(.is_item) { padding-top:4.3214em; }
    .section { padding-block:4.2857em 5.7142em; }
    .is_index .section { padding-top:5.7142em; }
    .contents { padding-inline:1.4285em; }

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

    #floating { right:.5em; width:4.2857em; }
    #floating div:first-child { padding-block:.3571em; }
    #floating div:not(:first-child) { margin-top:.3571em; }
    #floating a { padding-block:.8333em; font-size:var(--text-xs); }
    #floating a::before { height:1.6666em; margin-bottom:.2916em; }

    /* defalut_shop.css */
    .btn01, .btn02 { width:min(50%, 9.375em); padding-block:.8125em; }

    #header { padding-block:1.0357em; }
    #header .header-inner { padding-inline:.8928em; }
    #logo { width:7.7857em; height:2.25em; }
    #gnb { top:calc(var(--text-base) * 4.3203); }

    #footer { padding-block:3.5714em 4.2857em; }
    #footer .footer-inner { gap:2.5em; flex-direction:column; padding-inline:1.6666em; }
    #footer .logo { width:11.6666em; height:3.3333em; margin-inline:auto; }
    #footer .info { margin-top:var(--text-xl); }
    /*#footer .info > div { flex-direction:column; line-height:1.583; }*/
    #footer .info > div:not(:first-child) { margin:0; }
    #footer .info dl { float:none; justify-content:center; }
    #footer .info dl:not(:first-child) { padding:0; margin:0; }
    #footer .info dl:not(:first-child)::before { display:none; }
    #footer .info > div:first-child > dl:first-child { margin-bottom:.8333em; }
    .sns-list { gap:.4166em; justify-content:center; }
    .sns-list a i { margin:0; }
    #footer .copyright { margin-top:2.0833em; line-height:1.1666; text-align:center; }

    .banner { padding:2.8571em 1.4285em 7.4285em; margin-top:3.5714em; }
    .banner01::before { top:auto; bottom:1.25em; right:.7142em; width:8.8214em; background-image:url('../images/_mo/main/banner01.png'); translate:none; aspect-ratio:247 / 254; }
    .banner02::before { top:auto; bottom:2.1428em; right:2.1071em; width:9.3928em; background-image:url('../images/_mo/main/banner02.png'); translate:none; aspect-ratio:263 / 180; }
    .banner .btn-wrap { gap:.5357em; margin-top:1.4285em; }
    .banner .btn { width:6.875em; padding-block:.9285em; }

    #keyVisual { height:auto; aspect-ratio:720 / 1010; }
    #keyVisual .title { line-height:1.14; }
    #keyVisual .title span { display:block; }
    #keyVisual .visual01 { background-image:url('../images/_mo/main/visual01.jpg'); }
    #keyVisual .visual02 { background-image:url('../images/_mo/main/visual02.jpg'); }
    #keyVisual .visual03 { background-image:url('../images/_mo/main/visual03.jpg'); }
    #keyVisual .visual04 { background-image:url('../images/_mo/main/visual04.jpg'); }

    #products .tab { --swiper-navigation-size: 1.7857em; padding-inline:.3571em; }
    #products .tab::after { width:2.8571em; }
    #products .tab button { padding:.625em 1.0667em; }
    #products .tab [class^='swiper-button']::after { font-size:var(--text-base); }

    #business::before { left:0; width:210.6611%; translate:-24.1963% -4.8421%; }
    #business .controller { display:none; }
    #business .business-list { padding-inline:.3571em; }
    #business .business-thumb .swiper-slide { width:19.2857em; }
    #business .business-info { width:19.2857em; margin-top:1.7857em; }
    #business .info { padding:0; border:0; }
    #business .info .en { margin-top:.46875em; }
    #business .info .desc { margin-top:1.4285em; }
    #business .btn-wrap { margin-top:2.1428em; }
    #business .btn01 { width:12.5em; padding-block:.96875em; }

    #philosophy .marquee-wrap { margin-bottom:5.7142em; }
    #philosophy .marquee-wrap .swiper-slide { width:7.1428em; border-radius:.7142em; transition:none; opacity:1; }
    #philosophy .text-marquee { margin-top:.3333em; font-size:4.2857em; }
    #philosophy .philosophy-list { display:-ms-grid; display:grid; gap:0; -ms-grid-columns:(1fr)[2]; grid-template-columns:repeat(2, 1fr); }
    #philosophy .philosophy-list .item { width:100%; padding-block:2.1428em 2.5em; aspect-ratio:auto; }
    #philosophy .philosophy-list .icon { height:3.5714em; margin-bottom:.6428em; }
    #philosophy .philosophy01 .icon { background-image:url('../images/_mo/main/philosophy01.png'); background-image:url('../images/_mo/main/philosophy01.svg'); }
    #philosophy .philosophy02 .icon { background-image:url('../images/_mo/main/philosophy02.png'); background-image:url('../images/_mo/main/philosophy02.svg'); }
    #philosophy .philosophy03 .icon { background-image:url('../images/_mo/main/philosophy03.png'); background-image:url('../images/_mo/main/philosophy03.svg'); }
    #philosophy .philosophy04 .icon { background-image:url('../images/_mo/main/philosophy04.png'); background-image:url('../images/_mo/main/philosophy04.svg'); }
    #philosophy .philosophy-list .en { font-weight:500; font-size:var(--text-base); }
    #philosophy .philosophy-list strong { margin-top:.28125em; }
    #philosophy .philosophy01:hover .icon { background-image:url('../images/_mo/main/philosophy01_on.png'); background-image:url('../images/_mo/main/philosophy01_on.svg'); }
    #philosophy .philosophy02:hover .icon { background-image:url('../images/_mo/main/philosophy02_on.png'); background-image:url('../images/_mo/main/philosophy02_on.svg'); }
    #philosophy .philosophy03:hover .icon { background-image:url('../images/_mo/main/philosophy03_on.png'); background-image:url('../images/_mo/main/philosophy03_on.svg'); }
    #philosophy .philosophy04:hover .icon { background-image:url('../images/_mo/main/philosophy04_on.png'); background-image:url('../images/_mo/main/philosophy04_on.svg'); }

    #notice .notice-latest { --gap: .7142em; --cols: 1; }
    #notice .notice-latest .item a { padding:1.7857em 1.4285em; }
    #notice .notice-latest .lt_tit { margin-top:.3409em; word-break:keep-all; }
    #notice .notice-latest .lt_info { margin-top:1.25em; }
    #notice .notice-latest .lt_date { margin-top:1.0714em; }

    #location .branches { --gap: 3.2142em; --cols: 1; }
    #location .branch strong { margin-bottom:.6em; }
    #location .info-data dl { flex-direction:column; gap:0; padding:.9375em 1.09375em; }
    #location .info-data dt { width:3.53125em; padding:0; }
    #location .info-data dd { width:100%; padding:0; margin-top:.46875em; }

    #subVisual.company { background-image:url('../images/_mo/company/key_visual.jpg'); }
    #subVisual.business { background-image:url('../images/_mo/business/key_visual.jpg'); }
    #subVisual.delivery { background-image:url('../images/_mo/delivery/key_visual.jpg'); }
    #subVisual.location { background-image:url('../images/_mo/location/key_visual.jpg'); }
    #subVisual.notice { background-image:url('../images/_mo/notice/key_visual.jpg'); }
    #subVisual.photo { background-image:url('../images/_mo/photo/key_visual.jpg'); }
    #subVisual.product { background-image:url('../images/_mo/shop/cate1010/key_visual.jpg'); }

    /*#subVisual.cate1010 { background-image:url('../images/_mo/shop/cate1010/key_visual.jpg'); }
    #subVisual.cate1020 { background-image:url('../images/_mo/shop/cate1020/key_visual.jpg'); }
    #subVisual.cate1030 { background-image:url('../images/_mo/shop/cate1030/key_visual.jpg'); }
    #subVisual.cate1040 { background-image:url('../images/_mo/shop/cate1040/key_visual.jpg'); }
    #subVisual.cate1050 { background-image:url('../images/_mo/shop/cate1050/key_visual.jpg'); }
    #subVisual.cate1060 { background-image:url('../images/_mo/shop/cate1060/key_visual.jpg'); }
    #subVisual.cate1070 { background-image:url('../images/_mo/shop/cate1070/key_visual.jpg'); }*/

    #subTab a { padding-block:.8125em; }

    :is(.is_board, .is_itemlist, .is_item) .section { padding-top:4.2857em; }
    :is(#delivery, #system, .is_sub #location) .headline .title { font-weight:600; }

    #company { padding-block:4.2857em; }
    #company .flex { flex-direction:column; gap:3.5714em; }
    #company :is(.polygon, .greetings) { width:100%; }
    #company .greetings { padding:0; }
    #company .desc p { word-break:break-all; }

    #solution .headline .desc p {  word-break:break-all; }
    #solution .business-part .item a { padding:1.4285em 1.4285em 2.8571em; background-image:none; }
    #solution .business-part .thumb { justify-self:flex-end; margin-bottom:1.4285em; text-align:right; }
    #solution .business-part .thumb img { width:10em; }
    #solution .business-part .name { margin-top:.2727em; }
    #solution .business-part .desc { width:100%; margin-top:1.0714em; }
    #solution .business-part .more { gap:.5625em; margin-top:1.25em; }

    #system .process li { padding:2.1428em 1.0714em; }
    #system .process li:not(:first-child) { margin-top:1.0714em; }
    #system .process .title { width:100%; }
    #system .process .title strong { flex-direction:column; align-items:initial; gap:.4545em; }
    #system .process .title strong::before { width:1.923em; height:1.923em; font-size:.5909em; }
    #system .process .title p { padding:0; margin-top:.4615em; font-size:.9285em; }
    #system .process .desc { width:100%; margin-top:1.5625em; }
    #system .process .img { margin-top:1.7857em; }

    .is_sub #location .info-data dl { padding-inline:.625em; }
    .is_sub #location .banner { margin-top:2.1428em; }

    #categoryHeader { padding-block:2.1428em 4.2857em; }
    #categoryHeader .flex { flex-direction:column-reverse; gap:2.1428em; padding:0; }
    #categoryHeader .cate-info { width:100%; }
    #categoryHeader .name { font-weight:600; }
    #categoryHeader .en { margin-top:.625em; }
    #categoryHeader .desc { margin-top:1.7857em; }
    #categoryHeader .desc p { line-height:1.375; }
    #categoryHeader .thumb { width:10.7142em; }
}