@charset "utf-8";
@import url('https://cdn.jsdelivr.net/gh/leetaewook/gmarket-sans-dynamic-subset/GmarketSans.css');
/****************************************
2025-09-25
created by coDribble.

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


01. Common
****************************************/
:root {
    --xs-size: 12px;
    --base-size: 16px;
    --sm-size: 20px;
    --md-size: 24px;
    --lg-size: 30px;
    --xl-size: 40px;
    --2xl-size: 64px;
    --headline: 100px;
    /* 이외 사이즈는 개별 적용 */

    --gray-color-50: #F9F9F9;
    --gray-color-100: #F2F2F2;
    --gray-color-200: #ECECEC;
    --gray-color-300: #E6E6E6;
    --gray-color-400: #CCCCCC;
    --gray-color-500: #999999;
    --gray-color-600: #666666;
    --gray-color-700: #4D4D4D;
    --gray-color-800: #464545;
    --gray-color-900: #2C2C2C;
    --seablue-color-200: #D2DAEB;
    --primary-color: #0D1649;
    --base-color: #213E7C;
    --accent-color: #CBFF21;
    --red-color: #FF383C;

    --gmarket: "Gmarket Sans", sans-serif;
    --noto: "Noto Sans KR", sans-serif;

    --gutter: calc((100vw - 1640px) / 2);

    --col-gutter: 40px;
    --col-gutter-2x: calc(var(--col-gutter, 40px) * 2); /* 80px */
    --col-gutter-3x: calc(var(--col-gutter, 40px) * 3); /* 120px */
    --col-gutter-4x: calc(var(--col-gutter, 40px) * 4); /* 160px */
    --col-gutter-5x: calc(var(--col-gutter, 40px) * 5); /* 200px */
}

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

/* set */
#app { min-width:1500px; }
#wrapper { position:relative; }
#wrapper:has(.is_index)::before { content:''; position:absolute; top:0; left:0; width:100%; height:200px; background-color:var(--primary-color); }
#container { padding-block:var(--col-gutter-5x); }
#container:has(#introduce) { padding-bottom:0; }
.contents { width:min(100%, 1640px); margin-inline:auto; }
.column-layout { display:flex; justify-content:space-between; }
.column-layout .big { width:800px; }
.column-layout .small { width:660px; }
.flexbox { display:flex; }
.space-between { justify-content:space-between; }
.items-center { align-items:center; }

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

.headline-wrap { margin-bottom:var(--col-gutter); text-align:center; }
.headline { font-weight:500; font-size:var(--2xl-size); }
.headline-wrap .process { display:flex; align-items:center; justify-content:center; margin-top:var(--col-gutter); }
.headline-wrap .process p { display:inline-flex; align-items:center; font-size:var(--md-size); color:var(--gray-color-600); }
.headline-wrap .process p:not(:last-child)::after { content:'\f105'; width:1em; height:1em; margin-top:-.15em; margin-inline:15px; font-family:'Font Awesome 6 Free'; font-weight:900; /*background-image:url('../images/icon/angle_right.png'); background-image:url('../images/icon/angle_right.svg'); background-position:center; background-repeat:no-repeat; background-size:contain;*/ }
.headline-wrap .process .current { color:var(--primary-color); }
.headline-wrap .desc { margin-top:var(--col-gutter); }
.headline-wrap .desc p { font-size:var(--md-size); line-height:1.5; }

.icon.menu { background-image:url('../images/icon/menu_white.png'); background-image:url('../images/icon/menu_white.svg'); }

#quick { display:flex; flex-direction:column; gap:16px; position:fixed; bottom:50px; right:var(--col-gutter); /*position:sticky; top:100vh; left:100vw; translate:calc(-100% - var(--col-gutter)) calc(-100% - 50px);*/ z-index:9999; }
#quick a { display:block; width:64px; height:64px; background-color:white; background-position:center; background-repeat:no-repeat; border-radius:20px; box-shadow:1px 2px 6px 0px rgb(33 33 33 / .32); }
#quick .symbol-white { background-color:var(--primary-color); background-image:url('../images/common/symbol_white.png'); background-image:url('../images/common/symbol_white.svg'); background-size:62.5%; border-radius:50%; }
#quick .kakao-channel { background-color:#FEE500; background-image:url('../images/common/kakao_channel.png'); background-image:url('../images/common/kakao_channel.svg'); background-size:43.75%; }
#goToTop { background-image:url('../images/icon/arrow_up_gothic.png'); background-image:url('../images/icon/arrow_up_gothic.svg'); background-size:37.5%; }



/****************************************
02. Header
****************************************/
#header { position:relative; padding-block:var(--col-gutter); background-color:var(--primary-color); }
#header a, #header p { display:block; font-size:var(--sm-size); color:var(--seablue-color-200); }
#header .inner-top { display:flex; align-items:center; justify-content:space-between; }
#logo { width:232px; height:58px; }
#logo a { width:100%; height:100%; background-image:url('../images/common/logo_white.png'); background-image:url('../images/common/logo_white.svg'); background-position:center; background-repeat:no-repeat; background-size:contain; }
.hd_sch_wr { width:480px; }
#hd_sch { position:relative; }
#hd_sch label { position:absolute; top:50%; left:0; margin-top:-.5em; font-size:var(--sm-size); color:white; }
#sch_str { width:100%; height:64px; padding:0; padding-right:44px; background:none; border:0; border-bottom:1px solid white; font-size:var(--sm-size); color:white; }
#sch_submit { position:absolute; top:50%; right:0; width:24px; height:24px; background:none; background-image:url('../images/icon/search_white.png'); background-image:url('../images/icon/search_white.svg'); background-position: center; background-repeat:no-repeat; background-size:contain; border:0; translate:0 -50%; }
#hd_sch:has(#sch_str:focus) label { color:#5E5E5E; }
#hd_sch:has(#sch_str:valid) label { display:none; }
#sch_str:focus { background-color:var(--gray-color-100); color:#757575; }
#sch_str:focus + #sch_submit { background-image:url('../images/icon/search.png'); background-image:url('../images/icon/search.svg'); }
#header .gnb1 { display:flex; align-items:center; }
#header .gnb1 a { position:relative; padding-block:18px; padding-inline:20px; font-size:var(--base-size); }
#header .gnb1 a:not(:first-child)::before { content:''; position:absolute; top:50%; left:0; width:1px; height:1.5em; margin-top:calc(-.75em + -.15em); background-color:currentColor; }
#header .inner-bot { display:flex; align-items:center; justify-content:space-between; margin-top:var(--col-gutter-2x); }
#header .inner-bot > div:first-child { display:flex; align-items:center; gap:8px; }
#header .btn-open-gnb { display:flex; align-items:center; gap:8px; padding:20px; font-size:var(--sm-size); color:white; }
#header .btn-open-gnb .icon { width:1.6em; margin-top:-.15em; background-position:center; background-repeat:no-repeat; background-size:contain; aspect-ratio:1; }
#header .categories { display:flex; align-items:center; }
#header .categories::before { content:''; width:1px; height:1.5em; margin-top:-.15em; background-color:var(--seablue-color-200); }
#header .categories a { padding:20px; }
#header .categories a span { display:block; position:relative; }
#header .categories a:hover, #header .categories a.active { font-weight:700; color:var(--accent-color); }
#header .categories a.active span::before { content:''; display:block; position:absolute; bottom:calc(100% + 4px); left:50%; width:6px; margin-left:-3px; background-color:currentColor; border-radius:50%; aspect-ratio:1; }
#header .inner-bot > div:last-child { display:flex; align-items:center; }
#header .gnb2 { display:flex; align-items:center; }
#header .gnb2 .btn-menu { padding:20px; }
#header .gnb2 .btn-menu span { display:block; position:relative; }
#header .gnb2 .btn-menu:hover, #header .gnb2 .btn-menu.active { font-weight:700; color:var(--accent-color); }
#header .gnb2 .btn-menu.active span::before { content:''; display:block; position:absolute; bottom:calc(100% + 4px); left:50%; width:6px; margin-left:-3px; background-color:currentColor; border-radius:50%; aspect-ratio:1; }
#header .gnb2 div:has(.btn-menu) { position:relative; }
#header .gnb2 .community-menu { display:none; position:absolute; top:calc(100% + 32px); left:50%; width:200px; margin-left:-100px; z-index:2; }
#header .gnb2 .community-menu::before { content:''; position:absolute; top:0; left:50%; border-width:0 10px 18px 10px; border-style:solid; border-color:transparent transparent white transparent; translate:-50% -12px; z-index:-1; }
#header .gnb2 .community-menu ul { overflow:hidden; border-radius:20px; box-shadow:1px 2px 6px 0 rgb(33 33 33 / .32); }
#header .gnb2 .community-menu a { display:block; padding:16px; background-color:white; font-family:var(--noto); font-weight:500; font-size:var(--base-size); color:var(--gray-color-600); }
#header .gnb2 .community-menu a:hover { background-color:var(--gray-color-100); color:var(--primary-color); }
#header.community-on .gnb2 .community-menu { display:block; }
#header .shop-gnb { display:flex; align-items:center; gap:1em; }
#header .shop-gnb::before { content:''; width:1px; height:1.5em; margin-top:-.15em; margin-left:1em; background-color:var(--seablue-color-200); }
#header .shop-gnb a { position:relative; width:60px; background-position:center; background-repeat:no-repeat; background-size:66.66% auto; aspect-ratio:1; }
#header .shop-gnb .btn-mypage { background-image:url('../images/icon/user_white.png'); background-image:url('../images/icon/user_white.svg'); }
#header .shop-gnb .btn-cart { background-image:url('../images/icon/cart_empty_white.png'); background-image:url('../images/icon/cart_empty_white.svg'); }
#header .shop-gnb .btn-cart .count { display:flex; align-items:center; justify-content:center; position:absolute; top:0; right:0; min-width:2em; height:2em; background-color:var(--accent-color); border-radius:50%; font-size:var(--xs-size); color:var(--primary-color); }
#header .shop-gnb .btn-order { background-image:url('../images/icon/order_white.png'); background-image:url('../images/icon/order_white.svg'); }

#gnb { overflow:hidden; overflow-y:auto; display:flex; flex-direction:column; gap:var(--col-gutter); position:fixed; top:0; left:0; width:480px; max-height:100vh; padding:var(--col-gutter); background-color:white; translate:-100% 0%; z-index:9999; }
#gnb div:has(.btn_close) { text-align:right; }
#gnb .btn_close { width:40px; height:40px; padding:0; border:0; border-radius:0; font-family:var(--noto); font-size:var(--lg-size); line-height:1; }
#gnb .sign-in-out { gap:20px; }
#gnb .sign-in-out a { display:block; padding-block:12px; padding-right:20px; font-family:var(--noto); font-size:var(--md-size); color:var(--gray-color-800); }
#menu > li:not(:first-child) { margin-top:20px; }
#menu .depth1 { display:flex; align-items:center; justify-content:space-between; padding-bottom:20px; font-size:var(--lg-size); }
#menu .has-depth2 .depth1::after { content:''; display:flex; align-items:center; justify-content:center; width:40px; height:40px; background-color:var(--primary-color); background-image:url('../images/icon/plus_white.png'); background-image:url('../images/icon/plus_white.svg'); background-position:center; background-repeat:no-repeat; background-size:60%; border-radius:50%; }
#menu .depth2-wrap { display:none; }
#menu .depth2 { display:block; padding-block:12px; font-family:var(--noto); font-size:var(--md-size); color:var(--gray-color-800); }
#menu .view-depth2 .depth2-wrap { display:block; }
#menu .view-depth2 .depth1::after { background-color:var(--accent-color); background-image:url('../images/icon/minus.png'); background-image:url('../images/icon/minus.svg'); }



/****************************************
03. Footer
****************************************/
#footer { padding-block:var(--col-gutter-3x); background-color:var(--gray-color-900); color:white; }
#footer .ft-title { margin-bottom:var(--col-gutter); font-weight:700; font-size:var(--lg-size); color:white; }
#footer .title { margin-bottom:16px; font-size:18px; }
#footer .cs-center { display:flex; gap:var(--col-gutter-2x); margin-bottom:var(--col-gutter); }
#footer .cs-center > div { position:relative; }
#footer .cs-center > div:not(:first-child)::before { content:''; position:absolute; top:50%; left:-40px; width:1px; height:50%; background-color:white; translate:0% -50%; }
#footer .cs-center strong { font-weight:500; font-size:var(--sm-size); color:var(--accent-color); }
#footer .cs-center p:not(.title) { margin-top:8px; font-family:var(--noto); color:var(--gray-color-300); }
#footer .cs-center .sns ul { display:flex; gap:16px; }
#footer .cs-center .sns a { display:block; width:3em; background-color:var(--gray-color-800); background-position:center; background-repeat:no-repeat; background-size:50%; border-radius:50%; aspect-ratio:1; }
#footer .cs-center .sns .instagram { background-image:url('../images/icon/instagram.png'); background-image:url('../images/icon/instagram.svg'); }
#footer .cs-center .sns .youtube { background-image:url('../images/icon/youtube.png'); background-image:url('../images/icon/youtube.svg'); }
#footer .cs-center .sns .blog { background-image:url('../images/icon/blog.png'); background-image:url('../images/icon/blog.svg'); }
#footer .company-info { display:flex; justify-content:space-between; margin-bottom:var(--col-gutter); }
#footer .company-info .row { display:flex; align-items:center; }
#footer .company-info .row:not(:first-of-type) { margin-top:.75em; }
#footer .company-info dl { display:flex; align-items:center; font-family:var(--noto); }
#footer .company-info dl:not(:first-child) dt::before { content:''; width:1px; height:.75em; margin-inline:.75em; background-color:var(--gray-color-500); }
#footer .company-info dt { display:flex; align-items:center; color:var(--gray-color-400); }
#footer .company-info dt::after { content:'\003A'; display:block; margin-inline:.3em; }
#footer .company-info > div:last-child ul { display:flex; flex-wrap:wrap; align-items:center; gap:1em 1.5em; /*width:288px;*/ width:205px; }
#footer .company-info a { font-family:var(--noto); color:white; }
#footer .logo { width:200px; height:51px; background-image:url('../images/common/logo_white.png'); background-image:url('../images/common/logo_white.svg'); background-position:center; background-repeat:no-repeat; background-size:contain; }
#copyright { padding-top:24px; margin-top:24px; border-top:1px solid var(--gray-color-600); font-weight:500; font-size:14px; color:var(--gray-color-400); letter-spacing:.0142em; }



/****************************************
04. Main
****************************************/
.swiper-button-prev { background-image:url('../images/icon/left_light_white.png'); background-image:url('../images/icon/left_light_white.svg'); }
.swiper-button-next { background-image:url('../images/icon/right_light_white.png'); background-image:url('../images/icon/right_light_white.svg'); }

#keyVisual {  }
#keyVisual .swiper-slide { overflow:hidden; width:min(100%, 1640px); border-radius:40px; }
#keyVisual .slide-info { display:none; align-items:center; gap:var(--base-size); position:absolute; bottom:0; right:0; padding-block:36px; padding-inline:32px; background-color:black; border-radius:40px 0; font-size:var(--lg-size); color:white; }
#keyVisual .slide-info [class^='swiper-button'] { --swiper-navigation-size: 40px; --swiper-navigation-color: white; position:static; width:var(--swiper-navigation-size); margin:0; background-position:center; background-repeat:no-repeat; background-size:contain; }
#keyVisual .fraction .current { font-weight:700; font-size:var(--xl-size); }
#keyVisual .swiper-slide-active .slide-info { display:flex; }

#mainBestItem { margin:0; }
#mainBestItem .sct::after { display:none; }
#mainBestItem header { margin-bottom:var(--col-gutter-2x); text-align:center; }
#mainBestItem .swiper-wrapper { align-items:flex-end; }
#mainBestItem .swiper-slide { width:380px; }
#mainBestItem .sct_img a { display:flex; align-items:center; justify-content:center; position:relative; width:100%; aspect-ratio:1; }
#mainBestItem .sct_img img { width:78.94%; /*transition:width .3s;*/ }
#mainBestItem .sct_info { margin-top:24px; text-align:center; opacity:0;  }
#mainBestItem .swiper-slide-active { width:520px; }
#mainBestItem .swiper-slide-active .sct_img a { aspect-ratio:520/477; }
#mainBestItem .swiper-slide-active .sct_img img { width:84.61%; }
#mainBestItem .swiper-slide-active .sct_info { opacity:1; }
#mainBestItem .progress { --swiper-pagination-progressbar-size: 2px; --swiper-pagination-progressbar-bg-color: var(--gray-color-400, #ccc); --swiper-pagination-color: var(--gray-color-900, #212121); margin-top:var(--col-gutter-2x); }
#mainBestItem .progress .bar { position:relative; }

#mainRecommededItem { display:flex; /*align-items:center;*/ padding-block:64px; margin-top:192px; margin-left:var(--gutter); background-color:var(--gray-color-900); border-radius:40px 0 0 40px; }
#mainRecommededItem .sct::after { display:none; }
#mainRecommededItem header { flex-shrink:0; padding-inline:var(--col-gutter-3x); color:white; }
#mainRecommededItem .tag-list { display:inline-flex; flex-direction:column; gap:24px; margin-top:var(--col-gutter); }
#mainRecommededItem .tag-list button { display:block; position:relative; padding-block:12px; font-family:var(--noto); font-weight:500; font-size:var(--md-size); color:var(--gray-color-600); text-align:left; }
#mainRecommededItem .tag-list .active { font-weight:700; color:var(--accent-color); }
#mainRecommededItem .tag-list .active::after { content:''; position:absolute; bottom:0; left:0; width:100%; height:2px; background-color:currentColor; }
#mainRecommededItem .sct_li { width:520px; }
#mainRecommededItem .smt_30 { align-items:stretch; }
#mainRecommededItem .sct_li .item { height:100%; padding:40px; background-color:white; border-radius:40px; }
#mainRecommededItem .sct_txt { margin-bottom:var(--col-gutter); font-family:var(--gmarket); font-size:var(--lg-size); text-align:center; line-height:1.3; word-break:keep-all; }
#mainRecommededItem .sct_txt a { overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; min-height:2.6em; text-overflow:ellipsis; }
#mainRecommededItem .sct_img a { display:flex; align-items:center; justify-content:center; position:relative; width:100%; aspect-ratio:440/240; }
#mainRecommededItem .sct_img img { width:auto; height:100%; }
#mainRecommededItem .navigation { --swiper-navigation-size: 64px; display:flex; align-items:center; gap:8px; margin-top:44px; }
#mainRecommededItem .navigation .swiper-button-prev { background-image:url('../images/icon/arrow_left_gothic_gray.png'); background-image:url('../images/icon/arrow_left_gothic_gray.svg'); }
#mainRecommededItem .navigation .swiper-button-next { background-image:url('../images/icon/arrow_right_gothic_gray.png'); background-image:url('../images/icon/arrow_right_gothic_gray.svg'); }
#mainRecommededItem .navigation .swiper-button-prev:hover { background-image:url('../images/icon/arrow_left_gothic_accent.png'); background-image:url('../images/icon/arrow_left_gothic_accent.svg'); border-color:white; }
#mainRecommededItem .navigation .swiper-button-next:hover { background-image:url('../images/icon/arrow_right_gothic_accent.png'); background-image:url('../images/icon/arrow_right_gothic_accent.svg'); border-color:white; }
#mainRecommededItem .navigation [class^='swiper-button'] { position:static; margin:0; background-position:center; background-repeat:no-repeat; background-size:62.5%; border:1px solid var(--gray-color-500); border-radius:50%; }
#mainRecommededItem .navigation [class^='swiper-button'] svg { display:none; }

#mainNewItem { /*overflow:hidden;*/ /*height:100vh;*/ position:relative; padding-block:var(--col-gutter-5x); }
#mainNewItem header { position:sticky; top:50vh; left:0; width:100%; text-align:center; translate:0 -50%; }
#mainNewItem .scroll-down { margin-top:24px; text-align:center; }
/*#mainNewItem .left { padding-top:300px; }*/
#mainNewItem .scroll-down p { display:inline-flex; align-items:center; gap:12px; color:var(--primary-color); -webkit-transform-origin:left top; transform-origin:left top; rotate:90deg; translate:50% 0; }
#mainNewItem .scroll-down p::after { content:''; width:2em; height:1em; background-image:url('../images/icon/expand_right.png'), url('../images/icon/expand_right.png'),url('../images/icon/expand_right.png'); background-image:url('../images/icon/expand_right.svg'), url('../images/icon/expand_right.svg'),url('../images/icon/expand_right.svg'); background-position:0 0, 50% 0, 100% 0; background-repeat:no-repeat; background-size:16px; }
#mainNewItem .contents { display:flex; justify-content:space-between; }
/*#mainNewItem .smt_20 { display:flex; flex-direction:column; gap:var(--col-gutter-2x); width:520px; }
#mainNewItem .left .smt_20 { margin-top:400px; }
#mainNewItem .sct_img a { overflow:hidden; display:flex; align-items:center; justify-content:center; border-radius:40px; aspect-ratio:520/604; }
#mainNewItem .sct_img img { width:auto; height:80%; }
#mainNewItem .sct_txt a { display:block; margin-top:27px; font-family:var(--noto); font-weight:500; font-size:var(--sm-size); color:var(--gray-color-900); text-align:center; }
#mainNewItem .sct_li:hover .sct_txt a { color:var(--gray-color-600); }
#mainNewItem .sct_li:hover .sct_cost { color:var(--primary-color); }*/

#mainEvent { background-image:url('../images/main/main_event_bg.jpg'); background-attachment:fixed; background-position:center; background-repeat:no-repeat; background-size:cover; }
#mainEvent .grid-layout { display:flex; justify-content:space-between; gap:111px; }
#mainEvent .sticky-wrap { flex-shrink:0; width:453px; padding-block:var(--col-gutter-5x); }
#mainEvent header { position:sticky; top:var(--col-gutter-5x); }
#mainEvent h2 + p { margin-top:24px; font-family:var(--noto); font-weight:500; font-size:var(--md-size); line-height:1.5; }
#mainEvent .scroll-wrap { overflow:hidden; padding-block:var(--col-gutter-5x); }
#mainEvent ul { display:flex; flex-wrap:wrap; gap:40px; }
#mainEvent .gallery_li { width:min(calc((100% - 40px) / 2), 520px); }
#mainEvent .gallery_li:first-child { /*translate:0 50%;*/margin-top:320px; }
#mainEvent .gallery_li:nth-child(even):not(:nth-child(2)) { margin-top:-320px; }
#mainEvent .item { display:block; overflow:hidden; position:relative; border-radius:40px; }
#mainEvent .overlay { position:absolute; top:0; left:0; width:100%; padding-block:80px 40px; padding-inline:40px; background-color:white; font-size:var(--sm-size); }
#mainEvent .overlay .board { color:var(--primary-color); }
#mainEvent .overlay .subject { margin-top:12px; font-family:var(--noto); font-weight:700; font-size:var(--xl-size); color:var(--gray-color-900); line-height:1.35; word-break:keep-all; }
#mainEvent .overlay .summary { font-family:var(--noto); font-weight:500; color:var(--gray-color-800); line-height:1.35; }
#mainEvent .overlay .summary span, #mainEvent .overlay .summary::before { display:block; margin-top:12px; }
#mainEvent .item:hover .overlay { height:100%; background-color:var(--primary-color); }
#mainEvent .item:hover .overlay::before { content:'WO'; position:absolute; bottom:70px; right:0; font-weight:700; font-size:200px; color:var(--base-color); translate:26% 0; }
#mainEvent .item:hover .overlay .board { color:var(--accent-color); }
#mainEvent .item:hover .overlay .subject { color:var(--accent-color); }
#mainEvent .item:hover .overlay .summary { color:white; }
#mainEvent .item:hover .overlay .summary span { color:transparent; }
#mainEvent .item:hover .overlay .summary::before { content:attr(data-hover-text); }

#marquee { overflow:hidden; padding-block:var(--col-gutter-5x); }
#marquee .marquee-wrap { display:flex; gap:.2em; font-size:var(--headline); }
#marquee .text { color:var(--gray-color-300); white-space:nowrap; -webkit-animation:marquee 15s linear infinite; animation:marquee 15s linear infinite; }
@-webkit-keyframes marquee {
    0% { translate:0% 0%; }
    100% { translate:calc(-100% - .2em) 0%; }
}
@keyframes marquee {
    0% { translate:0% 0%; }
    100% { translate:calc(-100% - .2em) 0%; }
}

#mainReview .contents { display:flex; justify-content:space-between; }
#mainReview header { flex-shrink:0; }
#mainReview header .speech { position:relative; padding-block:12px; padding-inline:40px; margin-top:51px; background-color:var(--accent-color); border-radius:5em; }
#mainReview header .speech p { font-family:var(--noto); font-weight:500; font-size:var(--md-size); color:var(--primary-color); }
#mainReview header .speech svg { position:absolute; bottom:100%; left:24px; translate:0 40%; z-index:-1; }
#mainReview .review-wrap { flex:1; /*display:flex; gap:40px; max-width:940px;*/ max-width:800px; }
#mainReview .review-wrap .swiper {  }
#mainReview .review-wrap li { overflow:hidden; display:flex; gap:40px; }
#mainReview .review-wrap li:not(:first-child) { padding-top:var(--col-gutter); margin-top:var(--col-gutter); border-top:1px solid #757575; }
#mainReview .review-wrap .thumb { flex-shrink:0; width:200px; }
#mainReview .review-wrap .thumb img { width:100%; height:auto; }
#mainReview .review-info { padding-top:5px; }
#mainReview .review-info .subject { font-size:var(--lg-size); }
#mainReview .review-info .date { margin-top:24px; font-size:var(--md-size); color:var(--gray-color-800); }
#mainReview .review-info .desc { margin-top:24px; }
#mainReview .review-info .desc p { font-family:var(--noto); font-weight:400; font-size:var(--md-size); line-height:1.5; color:var(--gray-color-800); }
#mainReview .controller { --swiper-navigation-size: 64px; --swiper-pagination-fraction-color: var(--gray-color-700); flex-shrink:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:40px; position:relative; width:100px; }
#mainReview .controller .navigation { display:inherit; flex-direction:inherit; align-items:inherit; justify-content:inherit; gap:12px; }
#mainReview .controller .swiper-button-prev { background-image:url('../images/icon/arrow_left_gothic.png'); background-image:url('../images/icon/arrow_left_gothic.svg'); }
#mainReview .controller .swiper-button-next { background-image:url('../images/icon/arrow_right_gothic.png'); background-image:url('../images/icon/arrow_right_gothic.svg'); }
#mainReview .controller .swiper-button-prev.swiper-button-disabled { background-image:url('../images/icon/arrow_left_gothic_gray.png'); background-image:url('../images/icon/arrow_left_gothic_gray.svg'); background-color:var(--gray-color-200); border-color:var(--gray-color-200); }
#mainReview .controller .swiper-button-next.swiper-button-disabled { background-image:url('../images/icon/arrow_right_gothic_gray.png'); background-image:url('../images/icon/arrow_right_gothic_gray.svg'); background-color:var(--gray-color-200); border-color:var(--gray-color-200); }
#mainReview .controller [class^='swiper-button'] { position:static; margin:0; background-position:center; background-repeat:no-repeat; background-size:62.5%; border:1px solid var(--gray-color-300); border-radius:50%; opacity:1; }
#mainReview .controller [class^='swiper-button'] svg { display:none; }
#mainReview .controller .pagination { font-size:var(--md-size); text-align:center; }
#mainReview .controller .pagination .swiper-pagination-current { font-size:var(--lg-size); color:var(--gray-color-900); }


#bigData { margin-top:var(--col-gutter-5x); }
#bigData .box { width:min(100%, 1523px); margin-inline:auto; }
#bigData .banner { padding-block:228px; background-image:url('../images/main/data_counting_bg.jpg'); background-position:center; background-repeat:no-repeat; background-size:cover; font-family:var(--noto); }
#bigData .banner strong { display:block; font-size:var(--xl-size); line-height:1.35; }
#bigData .banner .desc { margin-top:24px; }
#bigData .banner .desc p { font-weight:400; font-size:var(--md-size); line-height:1.5; color:var(--gray-color-800); }
#bigData .counting-wrap { padding:40px; margin-top:-156px; background-color:white; box-shadow:1px 2px 6px 0 rgba(33, 33, 33, 0.32); }
#bigData .counting-wrap ul { display:flex; justify-content:center; }
#bigData .counting-wrap li { position:relative; width:25%; padding-inline:40px; text-align:center; }
#bigData .counting-wrap li::before { content:''; display:block; width:64px; margin-inline:auto; margin-bottom:24px; background-position:center; background-repeat:no-repeat; background-size:contain; aspect-ratio:1; }
#bigData .counting-wrap li:not(:first-child)::after { content:''; position:absolute; top:50%; left:0; width:1px; height:36px; background-color:var(--gray-color-300); translate:0 -50%; }
#bigData .counting-wrap .cf_5::before { background-image:url('../images/icon/user_group.png'); background-image:url('../images/icon/user_group.svg'); }
#bigData .counting-wrap .cf_6::before { background-image:url('../images/icon/cart_full.png'); background-image:url('../images/icon/cart_full.svg'); }
#bigData .counting-wrap .cf_7::before { background-image:url('../images/icon/chat_like.png'); background-image:url('../images/icon/chat_like.svg'); }
#bigData .counting-wrap .cf_8::before { background-image:url('../images/icon/test_tube.png'); background-image:url('../images/icon/test_tube.svg'); }
#bigData .counting-wrap .count { font-size:var(--lg-size); white-space:nowrap; }
#bigData .counting-wrap .count strong { font-size:var(--headline); }
#bigData .counting-wrap .title { margin-top:24px; font-family:var(--noto); font-weight:500; font-size:var(--sm-size); color:var(--gray-color-700); }



/****************************************
05. Sub
****************************************/
#introduce {
    #ceo { margin-bottom:var(--col-gutter-5x); }
    #ceo .headline-wrap { margin-bottom:var(--col-gutter-3x); }
    #ceo .headline { padding-bottom:var(--col-gutter); border-bottom:2px solid var(--primary-color); }
    #ceo .headline::before { content:''; display:block; width:320px; margin-inline:auto; background-image:url('../images/common/logo_vertical_primary.png'); background-image:url('../images/common/logo_vertical_primary.svg'); background-position:center; background-repeat:no-repeat; background-size:contain; aspect-ratio:160/113; }
    #ceo .ceo-info { display:flex; align-items:center; gap:var(--col-gutter-2x); }
    #ceo .profile { overflow:hidden; flex-shrink:0; width:520px; border-radius:var(--col-gutter); box-shadow:1px 2px 6px 0 rgb(33 33 33 / .32); }
    #ceo .career { flex:1; }
    #ceo .name { display:flex; align-items:baseline; gap:20px; font-size:var(--2xl-size); color:var(--primary-color); }
    #ceo .name span { font-size:var(--lg-size); }
    #ceo .slogan { margin-top:20px; font-size:var(--lg-size); line-height:1.53; }
    #ceo .career-list { margin-top:var(--col-gutter); }
    #ceo .career-list .title { padding-block:12px calc(12px - .15em); padding-inline:24px; margin-bottom:var(--col-gutter); background-color:var(--gray-color-100); border-radius:8px; font-size:var(--lg-size); line-height:1.53; }
    #ceo .career-list ul { display:-ms-grid; display:grid; grid-auto-flow:column; -ms-grid-rows:(1fr)[7]; grid-template-rows:repeat(7, 1fr); -ms-grid-columns:auto auto; grid-template-columns:auto auto; justify-content:space-between; gap:20px; }
    #ceo .career-list li { font-family:var(--noto); font-weight:500; font-size:var(--md-size); }

    #greetings { display:flex; align-items:center; justify-content:center; height:100vh; padding-block:var(--col-gutter-3x); background-image:url('../images/introduce/section02_bg.jpg'); background-position:center; background-repeat:no-repeat; background-size:cover; color:white; }
    #greetings .greeting { text-align:center; }
    #greetings .title { font-size:var(--2xl-size); line-height:1.625; }
    #greetings .title strong { display:inline-flex; align-items:center; gap:16px; font-weight:500; font-size:100px; }
    #greetings .title strong::before, #greetings .title strong::after { content:''; width:.45em; height:1em; background-position:center top; background-repeat:no-repeat; background-size:contain; }
    #greetings .title strong::before { background-image:url('../images/introduce/double_quotes_left.png'); background-image:url('../images/introduce/double_quotes_left.svg'); }
    #greetings .title strong::after { background-image:url('../images/introduce/double_quotes_right.png'); background-image:url('../images/introduce/double_quotes_right.svg'); }
    #greetings .title span { display:inline-flex; align-items:center; gap:12px; margin-bottom:-.15em; }
    #greetings .title span::before { content:''; width:.8em; background-image:url('../images/icon/user_group_fill_white.png'); background-image:url('../images/icon/user_group_fill_white.svg'); background-position:center; background-repeat:no-repeat; background-size:contain; aspect-ratio:1; }
    #greetings .desc { margin-top:var(--col-gutter); }
    #greetings .desc p { font-family:var(--noto); font-weight:500; font-size:var(--md-size); line-height:1.54; }
    #greetings .ceo { margin-top:var(--col-gutter-2x); font-size:var(--lg-size); }

    #banner { padding-block:var(--col-gutter-5x) 0; background-image:url('../images/introduce/picto.png'); background-image:url('../images/introduce/picto.svg'); background-position:center var(--col-gutter-5x); background-repeat:no-repeat; background-size:1920px auto; }
    #banner .banners { display:flex; justify-content:center; gap:var(--col-gutter-2x); padding-top:269px; }
    #banner .banner { display:flex; gap:24px; width:calc((100% - var(--col-gutter-2x) * 2) / 3); }
    #banner .banner:nth-child(even) { margin-top:var(--col-gutter-4x); }
    #banner .banner .title { flex-shrink:0; margin-left:-.15em; font-size:var(--2xl-size); color:var(--primary-color); -webkit-writing-mode:vertical-lr; -ms-writing-mode:tb-lr; writing-mode:vertical-lr; }
    #banner .banner > div { width:380px; }
    #banner .banner .thumb { overflow:hidden; border-radius:var(--col-gutter); }
    #banner .banner .desc { margin-top:var(--col-gutter); }
    #banner .banner .desc p { font-family:var(--noto); font-weight:500; font-size:var(--md-size); line-height:1.5; word-break:keep-all; }

    #ci { padding-block:0 var(--col-gutter-5x); }
    #ci .headline-wrap { margin-bottom:var(--col-gutter-2x); }
    #ci .headline-wrap .desc p { font-family:var(--noto); font-weight:500; }
    #ci .preview { display:-ms-grid; display:grid; -ms-grid-columns:(1fr)[2]; grid-template-columns:repeat(2, 1fr); gap:var(--col-gutter); }
    #ci .preview div { background-position:center; background-repeat:no-repeat; background-size:contain; aspect-ratio:800/382; }
    #ci .preview .ci01 { background-image:url('../images/introduce/ci01.png'); }
    #ci .preview .ci02 { background-image:url('../images/introduce/ci02.png'); }
    #ci .btn_confirm { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:20px; margin-top:var(--col-gutter-2x); }
    #ci .btn_confirm a { display:inline-flex; align-items:inherit; justify-content:inherit; gap:4px; width:min(calc((100% - 20px) / 2), 390px); padding-block:24px calc(24px - .15em); padding-inline:20px; font-family:var(--gmarket); font-weight:500; font-size:var(--md-size); }
    #ci .btn_confirm a::after { content:''; width:1em; background-image:url('../images/icon/download_primary.png'); background-image:url('../images/icon/download_primary.svg'); background-position:center; background-repeat:no-repeat; background-size:contain; aspect-ratio:1; }

    #branches .headline-wrap { margin-bottom:var(--col-gutter-2x); }
    #branches .headline { line-height:1.25; }
    #branches .headline span { display:block; margin-block:20px; font-size:100px; color:var(--primary-color); line-height:normal; }
    #branches .zigzag .grid { display:flex; height:100vh; }
    #branches .zigzag .grid:nth-child(even) { flex-direction:row-reverse; }
    #branches .zigzag .thumb { width:50%; background-position:center; background-repeat:no-repeat; background-size:cover; }
    #branches .grid01 .thumb { background-image:url('../images/introduce/grid01.jpg'); }
    #branches .grid02 .thumb { background-image:url('../images/introduce/grid02.jpg'); }
    #branches .zigzag .info { display:flex; flex-direction:column; justify-content:center; gap:20px; width:50%; padding-inline:var(--col-gutter-2x); font-family:var(--noto); }
    #branches .zigzag .info .logo { width:400px; height:90px; margin-bottom:20px; background-position:center; background-repeat:no-repeat; background-size:contain; }
    #branches .grid01 .logo { background-image:url('../images/introduce/grid01_logo.png'); }
    #branches .grid02 .logo { background-image:url('../images/introduce/grid02_logo.png'); }
    #branches .zigzag .info .title { font-weight:700; font-size:var(--xl-size); line-height:1.35; }
    #branches .zigzag .info .desc p { font-weight:500; font-size:var(--md-size); line-height:1.53; }

    #members { padding-block:var(--col-gutter-5x); }
    #officer { background-image:url('../images/introduce/leader_bg.png'); background-position:center bottom; background-repeat:no-repeat; background-size:1920px auto; }
    #officer .headline-wrap { margin:0; }
    #officer .headline strong { display:block; margin-top:var(--col-gutter); font-weight:500; }
    #officer .headline span { color:var(--primary-color); }
    #officer .member { display:flex; align-items:center; justify-content:center; gap:var(--col-gutter); padding-block:var(--col-gutter-3x) calc(var(--col-gutter-3x) + var(--col-gutter-4x)); }
    #officer .member .card { display:flex; flex-direction:column; align-items:center; padding-block:var(--col-gutter-2x); padding-inline:28px; }
    #officer .member .card:last-child { translate:0 var(--col-gutter-4x); }
    #officer .member .card .title { padding-bottom:32px; padding-inline:var(--col-gutter); margin-bottom:var(--col-gutter); border-bottom:1px solid currentColor; font-size:var(--lg-size); color:var(--gray-color-600); }
    #officer .member .card .name { font-size:var(--2xl-size); color:var(--primary-color); line-height:1.25; }
    #officer .name .level { display:block; }
    #officer .member .card .profile { width:466px; background-color:var(--gray-color-200); background-position:center bottom; background-repeat:no-repeat; background-size:88% auto; aspect-ratio:466/604; }
    #officer .member .card:first-child .profile { background-image:url('../images/introduce/cgo.png'); }
    #officer .member .card:last-child .profile { background-image:url('../images/introduce/cvo.png'); }
    #members section:not(:first-child) { margin-top:var(--col-gutter-5x); }
    #members section:not(:first-child) .headline-wrap { margin-bottom:var(--col-gutter-3x); }
    #members .id-card { display:-ms-grid; display:grid; -ms-grid-columns:(1fr)[4]; grid-template-columns:repeat(4, 1fr); gap:var(--col-gutter-2x) var(--col-gutter); }
    #members .card { padding:var(--col-gutter); background-color:white; border-radius:var(--col-gutter); box-shadow:1px 2px 6px 0 rgb(33 33 33 / .32); text-align:center; }
    #members .card .title { padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid currentColor; font-size:var(--sm-size); color:var(--gray-color-600); }
    #members .card .name { margin-bottom:var(--col-gutter); font-size:var(--lg-size); line-height:1.4; }
    #members .card .name .current { display:block; font-family:var(--noto); font-weight:500; font-size:var(--sm-size); line-height:2.1; }
    #members .card .profile { overflow:hidden; width:min(100%, 240px); margin-inline:auto; border-radius:50em; aspect-ratio:3/4; }
}

#alliance {
    .headline-wrap { margin-bottom:var(--col-gutter-2x); }
    .headline-wrap .desc p { font-family:var(--noto); font-weight:500; line-height:1.54; }

    .alliance-form { display:flex; justify-content:space-between; gap:20px; padding-top:var(--col-gutter); border-top:2px solid var(--gray-color-900); }
    .alliance-form .title { flex-shrink:0; font-size:var(--lg-size); }
    .alliance-form form { flex:1; max-width:1385px; }
    .alliance-form form > div:not(.btn_confirm) { display:-ms-grid; display:grid; -ms-grid-columns:137fr 132fr; grid-template-columns:137fr 132fr; gap:var(--col-gutter); }
    .alliance-form .form_01 li { margin:0; }
    .alliance-form .form_01 li:not(:first-child) { margin-top:20px; }
    .alliance-form .chk_box { margin-top:var(--col-gutter); }
    .alliance-form .btn01 { padding-bottom:calc(12px - .15em); border-color:currentColor; font-family:var(--gmarket); font-size:var(--base-size); }
    .alliance-form textarea { height:100%; padding-block:20px; }
    #captchaWrap { margin-top:var(--col-gutter); }
    #captchaWrap p { margin-bottom:20px; font-size:var(--sm-size); color:var(--gray-color-700); }
    .alliance-form .btn_confirm { margin-top:var(--col-gutter-2x); }
    .alliance-form .btn_submit { width:min(100%, 390px); padding-bottom:calc(24px - .15em); font-size:var(--md-size); }
}