/* 서브 비주얼 배경 이미지 */
#visual .bg1{ background: url("/img/sub/visual/bg_gt-ionizer.jpg") no-repeat center right 26% / cover; }
#visual .bg1[data-idx="0"]{ background: url("/img/sub/visual/bg_rsi.jpg") no-repeat center center / cover; }
#visual .bg1[data-idx="1"]{ background: url("/img/sub/visual/bg_ph7-4.jpg") no-repeat center center / cover; }
#visual .bg1[data-idx="2"]{ background: url("/img/sub/visual/bg_atobuster.jpg") no-repeat center center / cover; }
#visual .bg1[data-idx="3"]{ background: url("/img/sub/visual/bg_purejin.jpg") no-repeat center right 26.5% / cover; }
#visual .bg2{ background: url("/img/sub/visual/bg_story.jpg") no-repeat center right 30% / cover; }
#visual .bg3{ background: url("/img/sub/visual/bg_company.jpg") no-repeat center center / cover; }
#visual .bg4{ background: url("/img/sub/visual/bg_community.jpg") no-repeat center center / cover; }


/* variable */
:root{
    --lnbH: 90px;
    --subPt: 120px;
    --subPb: 120px;
    --sec120: 120px;
    --sec100: 100px;

    --grayBg: #F6F6F6;
    --blueBorder: #E6EDF3;
    --blueBorder2: #CCDAE6;
}


/* visual */
#visual{ text-align: center; position: relative; z-index: 800; }
#visual .bg{ min-height: 330px; padding-top: calc(var(--commonG) + var(--headerH)); padding-bottom: 19.271%; }
#visual .text{ display: flex; flex-direction: column; justify-content: center; padding: calc(var(--commonG) + var(--headerH)) 0 calc(var(--lnbH) / 2); position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
#visual .text em{ display: block; font-family: var(--engFont); font-size: 22px; font-weight: 700; color: var(--mainColor); }
#visual .text h2{ font-size: 6.4rem; font-weight: 700; color: #111; margin-top: 8px; }


/* lnb */
#lnb{ position: absolute; bottom: 0; left: 0; right: 0; transform: translateY(50%); }
#lnb .mobile, 
#lnb .mobile ul{ display: none; }
#lnb button{ display: none; align-items: center; width: 100%; min-height: var(--lnbH); background: var(--mainColor); border: none; font-size: 19px; font-weight: 400; color: #FFF; padding: 10px 25px; padding-right: 66px; position: relative; }
#lnb button::after{ content: ""; flex-shrink: 0; display: inline-block; width: 16px; height: 16px; background: url("/img/sub/icon_lnb_arrow.svg") no-repeat center center / contain; position: absolute; top: 50%; right: 25px; transform: translateY(-50%) rotate(0); transition: transform 0.4s; }
#lnb button span{ font-size: 16px; font-weight: 400; opacity: 0.5; margin-left: 5px; }
#lnb nav{ background: #FFF; box-shadow: 0 8px 40px rgba(var(--mainRGB), 0.15); }
#lnb ul{ display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
#lnb ul li{ position: relative; z-index: 10; }
#lnb ul li::before{ content: ""; width: 1px; height: 12px; background: #DDD; position: absolute; top: 50%; right: 0; z-index: -1; transform: translateY(-50%); }
#lnb ul li:last-of-type::before{ display: none; }
#lnb ul li a{ display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: var(--lnbH); height: 100%; font-size: 18px; font-weight: 500; color: #333; line-height: 1.4; padding: 10px; }
#lnb ul li a span{ font-size: 16px; opacity: 0.5; line-height: 1.4; }
#lnb ul li.on a{ background: var(--mainColor); font-weight: 400; color: #FFF; }
#lnb ul li.on a span{ font-weight: 400; }

#lnb.toggle button::after{ transform: translateY(-50%) rotate(-180deg); }


/* common */
footer{ padding-top: var(--commonG); }
.sub-content{ padding: calc((var(--lnbH) / 2) + var(--subPt)) 0 var(--subPb); }
.colorBg{ background: var(--mainColor); color: #FFF; }
.blueBg{ background: var(--skyBlue2); }
.grayBg{ background: var(--grayBg); }
.whiteBg{ background: #FFF; }
.borderBg{ border: 2px solid var(--blueBorder); }


/* 간격 */
.subPt{ padding-top: var(--subPt); }
.subPb{ padding-bottom: var(--subPb); }
.pt120{ padding-top: var(--sec120); }
.pb120{ padding-bottom: var(--sec120); }
.pt100{ padding-top: var(--sec100); }
.pb100{ padding-bottom: var(--sec100); }


/* page-title */
.page-title{ text-align: center; padding-bottom: 60px; }
.page-title em{ display: block; font-size: 20px; font-weight: 500; color: var(--mainColor); margin-bottom: 12px; }
.page-title h2{ font-size: 5.2rem; font-weight: 700; color: #111; }
.page-title p{ font-size: 18px; font-weight: 300; color: #333; line-height: 1.7; margin-top: 12px; }


/* sec-title */
.sec-title{ text-align: center; padding-bottom: 100px; }
.sec-title h3{ font-size: 4rem; font-weight: 700; color: var(--mainColor); }
.sec-title p{ font-size: 20px; font-weight: 300; color: #333; line-height: 1.7; margin-top: 20px; }


/* white-title */
.white-title{ color: #FFF; text-align: center; margin-bottom: 60px; }
.white-title h4{ font-size: 4.6rem; font-weight: 500; line-height: 1.4; }
.white-title p{ font-size: 20px; font-weight: 300; line-height: 1.7; margin-top: 16px; }


/* dot-title */
.dot-title h4{ font-size: 32px; font-weight: 600; color: #111; line-height: 1.4; padding-top: 28px; position: relative; }
.dot-title h4::before{ content: ""; width: 12px; height: 12px; background: var(--mainColor); border-radius: 50%; position: absolute; top: 0; left: 0; }


/* line-title */
.line-title{ border-bottom: 1px solid #111; padding-bottom: 16px; margin-bottom: 32px; }
.line-title h5{ font-size: 26px; font-weight: 600; color: #111; }


/* con-title */
.con-title{ text-align: center; }
.con-title > *:not(:last-child){ margin-bottom: 16px; }
.con-title h4{ font-size: 28px; font-weight: 600; color: #111; line-height: 1.4; }
.con-title h5{ font-size: 24px; font-weight: 500; color: #111; line-height: 1.4; }
.con-title p{ font-size: 20px; font-weight: 300; color: #333; line-height: 1.7; }
.con-title p strong{ font-weight: 500; }


/* line-tab */
.line-tab{
    --height: 80px;
    --dot: 7px;
}
.line-tab{ overflow: hidden; text-align: center; padding-bottom: var(--dot); margin-bottom: 100px; }
.line-tab ul{ display: flex; flex-wrap: wrap; justify-content: center; }
.line-tab ul li{ position: relative; }
.line-tab ul li::before{ content: ""; width: 100vw; height: 1px; background: #DDD; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
.line-tab ul li > *{ min-height: var(--height); height: 100%; display: flex; align-items: center; background: none; border: none; font-size: 18px; font-weight: 500; color: #8B96A1; line-height: 1.7; padding: 10px 40px; position: relative; z-index: 100; }

.line-tab ul li.on > *{ color: var(--mainColor); }
.line-tab ul li.on > *::before{ content: ""; width: 100%; height: 1px; background: var(--mainColor); position: absolute; bottom: 0; left: 0; }
.line-tab ul li.on > *::after{ content: ""; width: var(--dot); height: var(--dot); background: var(--mainColor); border-radius: 50%; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%); }


/* box-tab */
.box-tab{ text-align: center; padding-bottom: 100px; margin: -5px; }
.box-tab ul{ max-width: 100%; width: max-content; display: flex; margin: -5px auto; }
.box-tab ul li{ max-width: calc((100% - 20px) / 2); width: 300px; justify-content: center; background: var(--grayBg); margin: 5px; cursor: pointer; }
.box-tab ul li > *{ display: flex; justify-content: center; align-items: center; width: 100%; min-height: 70px; height: 100%; background: rgba(var(--mainRGB), 0.05); border: none; font-family: var(--engFont); font-size: 18px; font-weight: 500; color: #8B96A1; letter-spacing: -0.03em; padding: 10px; } 
.box-tab ul li.on{ background: var(--mainColor); }
.box-tab ul li.on > *{ font-weight: 400; color: #FFF; }


/* dot-list */
.dot-list li{ font-size: 16px; font-weight: 300; color: #333; line-height: 1.7 !important; padding-left: 14px; position: relative; }
.dot-list li:not(:last-of-type){ margin-bottom: 4px; }
.dot-list li::before{ content: ""; display: inline-block; width: 6px; height: 6px; background: var(--mainColor); border-radius: 50%; position: absolute; top: calc(1.7em / 2); left: 0; transform: translateY(-50%); }
.dot-list li > *{ line-height: inherit; }
.dot-list li em{ color: var(--mainColor); font-style: normal; }
.dot-list li.none{ padding: 0 !important; text-indent: 0 !important; }
.dot-list li.none::before{ display: none; }
.dot-list li.no::before{ display: none; }
.dot-list li strong{ font-weight: 500; }
.dot-list li .u{ text-decoration: underline; text-underline-position: from-font; }


/* hyphen-list */
.hyphen-list li{ font-size: 18px; font-weight: 300; color: #333; line-height: 1.7; padding-left: 12px; position: relative; }
.hyphen-list li:not(:last-of-type){ margin-bottom: 4px; }
.hyphen-list li::before{ content: "-"; line-height: inherit; position: absolute; top: 0; left: 0; }
.hyphen-list li.none{ padding-left: 0; }
.hyphen-list li.none::before{ display: none; }


/* check-list */
.check-list li{ font-size: 18px; font-weight: 300; color: #333; line-height: 1.7; padding-left: 32px; position: relative; }
.check-list li:not(:last-of-type){ margin-bottom: 4px; }
.check-list li::before{ content: ""; width: 20px; height: 20px; background: var(--mainColor) url("/img/sub/icon_list_check.svg") no-repeat center center / contain; border-radius: 50%; position: absolute; top: calc(1.7em / 2); left: 0; transform: translateY(-50%); }
.check-list li em{ color: var(--mainColor); }
.check-list li strong{ font-weight: 500; }


/* num-list */
.num-list{
    --num: 36px;
}
.num-list{ counter-reset: num; }
.num-list > li:not(:last-of-type){ margin-bottom: 32px; }
.num-list > li{ padding-left: calc(var(--num) + 16px); position: relative; counter-increment: num; }
.num-list > li::before{ content: counter(num, decimal-leading-zero); width: var(--num); height: var(--num); background: var(--mainColor); font-family: var(--engFont); font-size: 14px; font-weight: 600; color: #FFF; line-height: var(--num); text-align: center; position: absolute; top: 0; left: 0; }
.num-list > li .num{ font-size: 22px; font-weight: 500; color: #333; line-height: 1.4; padding: calc((var(--num) - 1.4em) / 2) 0; }
.num-list > li .content{ margin-top: 20px; }
.num-list > li .content > *:not(:last-child){ margin-bottom: 12px; }
.num-list > li .defalut{ line-height: 1.4; }


/* numbering */
.numbering{
    --num: 40px;
}
.numbering{ counter-reset: num; }
.numbering > *{ counter-increment: num; }
.numbering .num{ display: inline-block; width: var(--num); height: var(--num); background: var(--mainColor); border-radius: 50%; font-family: var(--engFont); font-size: 14px; font-weight: 600; color: #FFF; line-height: var(--num) !important; text-align: center; }
.numbering .num::before{ content: counter(num, decimal-leading-zero); }


/* line-section */
.line-section > section:not(:last-of-type){ padding-bottom: 100px; margin-bottom: 100px; border-bottom: 1px solid #DDD; }

/* line-arrow */
.line-arrow{
    --bottom: 32px;
}
.line-arrow > *{ position: relative; }
.line-arrow > *:not(:last-of-type){ border-bottom: 1px solid var(--blueBorder); padding-bottom: var(--bottom); margin-bottom: var(--bottom); }
.line-arrow > *::after{ content: ""; width: 80px; height: 20px; background: #FFF url("/img/sub/product/rsi_problem_dotted_arrow.svg") no-repeat center center / contain; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%); }
.line-arrow > *:last-of-type::after{ display: none; }


/* blue-table */
.blue-table{
    --lineHeight: 1.4em;
    --paddingTB: 20px;
    --paddingLR: 30px;
    --responsiveGap: 30px;
}

.blue-table{ text-align: center; padding-bottom: 1px; overflow-y: clip; overflow-x: auto; }
.blue-table::-webkit-scrollbar{ width: 25px; height: 25px; }
.blue-table::-webkit-scrollbar-thumb{ background: #222; background-clip: padding-box; border: 9px solid transparent; border-left: none; border-right: none; }
.blue-table::-webkit-scrollbar-track{ background: #DDD; background-clip: padding-box; border: 12px solid transparent; border-left: none; border-right: none; }
.blue-table .dot-list{ text-align: left; }
.blue-table tr > *{ border: 1px solid #DDD; border-left: none; }
.blue-table tr > *:last-child{ border-right-color: transparent; }
.blue-table td[rowspan]{ border-left: 1px solid #DDD; }
.blue-table th,
.blue-table td{ font-size: 16px; color: #333; line-height: var(--lineHeight); padding: var(--paddingTB); }
.blue-table th{ font-weight: 500; }
.blue-table td{ background: #FFF; font-weight: 300; padding-inline: var(--paddingLR); }
.blue-table thead{ background: var(--mainColor); }
.blue-table thead th{ border-color: var(--mainColor); border-right-color: rgba(255, 255, 255, 0.2) !important; border-bottom-color: rgba(255, 255, 255, 0.2) !important; font-weight: 400; color: #FFF; }
.blue-table thead tr:last-child > *,
.blue-table thead th[rowspan]{ border-bottom-color: transparent !important; }
.blue-table tbody tr > *::before{ display: flex; flex-direction: column; justify-content: center; width: var(--responsiveW); background: var(--mainColor); font-weight: 500; color: #FFF; text-align: center; padding: var(--paddingTB) var(--paddingLR); position: absolute; top: 0; left: 0; bottom: 0; box-sizing: border-box; }
.blue-table tbody th{ background: var(--skyBlue2); }
.blue-table tbody em{ color: var(--mainColor); }
.blue-table tbody strong{ font-weight: 500; color: var(--mainColor); }
.blue-table tbody td figure{ display: block; margin: calc(var(--paddingTB) * -1) calc(var(--paddingLR) * -1); }
.blue-table tbody td figure img{ width: 100%; }

.blue-table thead .active th,
.blue-table thead th.active{ background: #013C79; border-color: #013C79; }
.blue-table tbody .active th,
.blue-table tbody th.active{ background: #DCEDF9; color: var(--mainColor); }
.blue-table .active td,
.blue-table td.active { background: #E6F4FC; color: var(--mainColor); }
.blue-table .active td *,
.blue-table td.active *{ font-weight: inherit; color: inherit; }
.blue-table tbody tr > *.active::before{ background: #013C79; }


/* ph-diagram */
.ph-diagram{
    --clipNum: 20px;
    --clipPrev: polygon(100% 0%, calc(100% - var(--clipNum)) 50%, 100% 100%, var(--clipNum) 100%, 0% 50%, var(--clipNum) 0%);
    --clipMiddle: polygon(var(--clipNum) 0%, calc(100% - var(--clipNum)) 0%, 100% 50%, calc(100% - var(--clipNum)) 100%, var(--clipNum) 100%, 0% 50%);
    --clipNext: polygon(calc(100% - var(--clipNum)) 0%, 100% 50%, calc(100% - var(--clipNum)) 100%, 0% 100%, var(--clipNum) 50%, 0% 0%);

}
.ph-diagram{ max-width: 1200px; margin: 0 auto; text-align: center; }
.ph-diagram > *:not(:last-child){ margin-bottom: 20px; }
.ph-diagram ul{ display: grid; grid-template-columns: repeat(3, calc(100% / 3)); position: relative; z-index: 10; }
.ph-diagram .head ul::before{ content: ""; width: 100%; height: 1px; background: #333; position: absolute; top: 50%; left: 0; z-index: -1; }
.ph-diagram .head ul li div{ width: 100px; background: #FFF; margin: 0 auto; }
.ph-diagram .head ul li strong,
.ph-diagram .head ul li span{ display: block; font-weight: 500; }
.ph-diagram .head ul li strong{ font-size: 18px; color: #333; }
.ph-diagram .head ul li span{ font-size: 16px; color: var(--mainColor); }
.ph-diagram .scale ol{ display: flex; counter-reset: num; }
.ph-diagram .scale ol li{ flex: 1; display: flex; flex-direction: column; justify-content: center; padding-inline: 0 calc(var(--clipNum) / 2); clip-path: var(--clipPrev); -webkit-clip-path: var(--clipPrev); counter-increment: num; }
.ph-diagram .scale ol li:not(:last-of-type){ margin-right: -5px; }
.ph-diagram .scale ol li:not(.middle){ aspect-ratio: 1 / 1; }
.ph-diagram .scale ol li.middle{ flex: 1.36; padding-inline: 0; clip-path: var(--clipMiddle); -webkit-clip-path: var(--clipMiddle); counter-reset: num; }
.ph-diagram .scale ol li.middle ~ li{ padding-inline: calc(var(--clipNum) / 2) 0; clip-path: var(--clipNext); -webkit-clip-path: var(--clipNext); }
.ph-diagram .scale ol li span::before{ content: counter(num); font-family: var(--engFont); font-size: 20px; font-weight: 600; color: #FFF; line-height: 1; }
.ph-diagram .desc ul li{ padding: 0 10px; }
.ph-diagram .desc span{ display: block; font-size: 16px; font-weight: 300; color: #555; }
.ph-diagram .desc span:not(:last-of-type){ margin-bottom: 8px; }

.grayBg .ph-diagram .head ul li div{ background: var(--grayBg); }


/* history-box */
.history-box{
    --gapTB: 100px;
    --gapLR: 60px;
    --dotT: 14px;
    --dotS01: 8px;
    --dotS02: 23px;
}
.history-box{ position: relative; }
.history-box .bar{ width: 2px; background: var(--blueBorder); position: absolute; top: var(--dotT); left: 50%; bottom: 0; transform: translateX(-50%); }

.history-box section:not(:last-of-type){ margin-bottom: var(--gapTB); }
.history-box .flex{ display: flex; }
.history-box .flex > *{ width: 50%; padding-inline: var(--gapLR); }
.history-box .flex .left{ padding-left: 0; }
.history-box .flex .right{ padding-right: 0; }

.history-box .gallery{ text-align: center; }
.history-box .gallery ul{ display: grid; margin: -30px -10px; }
.history-box .gallery ul li{ margin: 30px 10px; }
.history-box .gallery figure{ display: block; aspect-ratio: 1 / 1; position: relative; overflow: hidden; }
.history-box .gallery figure.border::after{ content: ""; border: 1px solid #E5E5E5; position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-sizing: border-box; } 
.history-box .gallery figure img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.history-box .gallery p{ font-size: 18px; font-weight: 500; color: #333; margin-top: 20px; }

.history-box .right ol > li{ position: relative; }
.history-box .right ol > li:not(:last-of-type){ margin-bottom: var(--gapTB); }
.history-box .right ol > li i{ display: inline-flex; border-radius: 50%; position: absolute; top: var(--dotT); left: calc(var(--gapLR) * -1); transform: translateX(-50%); transition: box-shadow 0.4s; }
.history-box .right ol > li i::before{ content: ""; display: inline-block; width: var(--dotT); height: var(--dotT); background: #FFF; border: 3px solid var(--blueBorder); border-radius: inherit; box-sizing: border-box; transition: border-color 0.4s, box-shadow 0.4s; }
.history-box .right dl dt{ font-family: var(--engFont); font-size: 30px; font-weight: 700; color: var(--mainColor); margin-bottom: 20px; position: relative; }
.history-box .right ul li{ font-size: 20px; font-weight: 300; color: #333; line-height: 1.7; padding-left: 15px; position: relative; }
.history-box .right ul li:not(:last-of-type){ margin-bottom: 15px; }
.history-box .right ul li::before{ content: ""; width: 5px; height: 5px; background: var(--mainColor); border-radius: 50%; position: absolute; top: calc(1.7em / 2); left: 0; transform: translateY(-50%); }
.history-box .right .whiteBg{ padding: 30px; margin-top: 15px; margin-left: -15px; }
.history-box .right .whiteBg strong{ display: block; border-bottom: 1px solid #DDD; font-size: 18px; font-weight: 500; color: var(--mainColor); line-height: 1.7; padding-bottom: 8px; margin-bottom: 16px; }
.history-box .right .whiteBg p{ font-size: 16px; font-weight: 300; color: #333; line-height: 1.7; }

.history-box .right ol > li.on i{ box-shadow: 0 0 0 var(--dotS02) rgba(var(--mainRGB), 0.1); }
.history-box .right ol > li.on i::before{ border-color: var(--mainColor); box-shadow: 0 0 0 var(--dotS01) rgba(var(--mainRGB), 0.2); }

/* basics */
.history-box.basics .gallery{ padding: var(--gapTB) 0 60px; }
.history-box.basics .gallery ul{ grid-template-columns: repeat(2, 50%); }
.history-box.basics .gallery ul li{ position: relative; }
.history-box.basics .gallery ul li:nth-of-type(even){ top: 60px; }
.history-box.basics .gallery figure{ aspect-ratio: 1 / 0.8889; }

@media screen and (max-width: 1700px){
    /* variable */
    :root{
        --lnbH: 80px;
        --subPt: 90px;
        --sec120: 100px;
    }

    /* visual */
    #visual .text em{ font-size: 20px; }

    /* lnb */
    #lnb ul li a{ font-size: 17px; }
    #lnb ul li a span{ font-size: 15px; }

    /* page-title */
    .page-title em{ font-size: 18px; }
    .page-title{ padding-bottom: 50px; }

    /* sec-title */
    .sec-title{ padding-bottom: 70px; }
    .sec-title p{ font-size: 19px; }

    /* white-title */
    .white-title{ margin-bottom: 40px; }
    .white-title p{ font-size: 19px; }

    /* dot-title */
    .dot-title h4{ font-size: 28px; padding-top: 20px; }
    .dot-title h4::before{ width: 9px; height: 9px; }

    /* line-title */
    .line-title{ padding-bottom: 12px; margin-bottom: 27px !important; }
    .line-title h5{ font-size: 23px; }

    /* con-title */
    .con-title h4{ font-size: 26px; }
    .con-title h5{ font-size: 22px; }
    .con-title p{ font-size: 18px; }

    /* line-tab */
    .line-tab{
        --height: 70px;
    }
    .line-tab{ margin-bottom: 70px; }
    .line-tab ul li > *{ padding-inline: 30px; }

    /* box-tab */
    .box-tab{ padding-bottom: 70px; }
    .box-tab ul li{ width: 260px; }
    .box-tab ul li > *{ min-height: 65px; } 
    
    /* num-list */
    .num-list > li .num{ font-size: 20px; }
    .num-list > li .content{ margin-top: 15px; }
    
    /* blue-table */
    .blue-table{
        --paddingLR: 20px;
    }

    /* ph-diagram */
    .ph-diagram .scale ol li span::before{ font-size: 19px; }

    /* history-box */
    .history-box{
        --dotT: 12px;
        --dotS01: 7px;
        --dotS02: 20px;
    }
    .history-box .gallery ul{ margin-block: -20px; }
    .history-box .gallery ul li{ margin-block: 20px; }
    .history-box .right dl dt{ font-size: 27px; }
    .history-box .right ul li{ font-size: 19px; }
    .history-box .right .whiteBg{ padding: 25px; }
    .history-box .right .whiteBg strong{ font-size: 18px; padding-bottom: 8px; margin-bottom: 16px; }

    /* basics */
    .history-box.basics .gallery{ padding-bottom: 40px; }
    .history-box.basics .gallery ul li:nth-of-type(even){ top: 40px; } 
}

@media screen and (max-width: 1280px){
    /* variable */
    :root{
        --lnbH: 70px;
        --subPt: 50px;
        --sec120: 80px;
        --sec100: 70px;
    }

    /* visual */
    #visual .text em{ font-size: 18px; }

    /* lnb */
    #lnb ul li a{ font-size: 16px; }
    #lnb ul li a span{ font-size: 14px; }

    /* page-title */
    .page-title{ padding-bottom: 40px; }
    .page-title em{ font-size: 16px; margin-bottom: 10px; }
    .page-title h2{ font-size: 5rem; }

    /* sec-title */
    .sec-title{ padding-bottom: 40px; }
    .sec-title h3{ font-size: 4.3rem; }
    .sec-title p{ font-size: 18px; margin-top: 15px; }

    /* white-title */
    .white-title{ margin-bottom: 30px; }
    .white-title h4{ font-size: 4.3; }
    .white-title p{ font-size: 18px; margin-top: 12px; }

    /* dot-title */
    .dot-title h4{ font-size: 24px; padding-top: 12px; }
    .dot-title h4::before{ width: 7px; height: 7px; }

    /* line-title */
    .line-title{ padding-bottom: 10px; margin-bottom: 20px !important; }
    .line-title h5{ font-size: 20px; }

    /* con-title */
    .con-title > *:not(:last-child){ margin-bottom: 12px; }
    .con-title h4{ font-size: 23px; }
    .con-title h5{ font-size: 21px; }
    .con-title p{ font-size: 17px; }

    /* line-tab */
    .line-tab{
        --height: 60px;
        --dot: 5px;
    }
    .line-tab{ margin-bottom: 40px; }
    .line-tab ul li > *{ font-size: 17px; padding-inline: 25px; }

    /* box-tab */
    .box-tab{ padding-bottom: 40px; }
    .box-tab ul li{ width: 220px; }
    .box-tab ul li > *{ min-height: 60px; font-size: 17px; }

    /* check-list */
    .check-list li{ font-size: 17px; }

    /* hyphen-list */
    .hyphen-list li{ font-size: 17px; }

    /* num-list */
    .num-list{
        --num: 32px;
    }
    .num-list > li{ padding-left: calc(var(--num) + 12px); }
    .num-list > li:not(:last-of-type){ margin-bottom: 24px; }
    .num-list > li .num{ font-size: 18px; }
    .num-list > li .content{ margin-top: 10px; }

    /* numbering */
    .numbering{
        --num: 36px;
    }
    
    /* line-section */
    .line-section > section:not(:last-of-type){ padding-bottom: 70px; margin-bottom: 70px; }

    /* line-arrow */
    .line-arrow > *::after{ width: 70px; height: 16px; }

    /* blue-table */
    .blue-table{
        --paddingTB: 15px;
        --paddingLR: 15px;
    }

    /* ph-diagram */
    .ph-diagram .head ul li strong{ font-size: 17px; }
    .ph-diagram .head ul li span{ font-size: 15px; }
    .ph-diagram .scale ol li:not(:last-of-type){ margin-right: -10px; }
    .ph-diagram .scale ol li span::before{ font-size: 18px; }

    /* history-box */
    .history-box{
        --gapTB: 70px;
        --dotT: 10px;
        --dotS02: 16px;
    }
    .history-box .gallery ul{ margin: -15px -7px; }
    .history-box .gallery ul li{ margin: 15px 7px; }
    .history-box .gallery p{ font-size: 17px; margin-top: 15px; }
    .history-box .right dl dt{ font-size: 24px; margin-bottom: 15px; }
    .history-box .right ul li{ font-size: 18px; }
    .history-box .right .whiteBg{ padding: 15px 20px; }
    .history-box .right .whiteBg strong{ font-size: 17px; padding-bottom: 4px; margin-bottom: 12px; }
    .history-box .right .whiteBg p{ font-size: 15px; }
    
    /* basics */
    .history-box.basics .gallery{ padding-bottom: 25px; }
    .history-box.basics .gallery ul li:nth-of-type(even){ top: 25px; } 
}

@media screen and (max-width: 1200px){
    /* variable */
    :root{
        --lnbH: 55px;
    }

    /* lnb */
    #lnb{ text-align: left; }
    #lnb .pc{ display: none; }
    #lnb .mobile{ display: block; position: relative; }
    #lnb button{ display: flex; }
    #lnb ul{ display: none; background: var(--skyBlue2); position: absolute; top: 100%; left: 0; right: 0; padding: 0 15px; }
    #lnb ul li{ border-top: 1px solid rgba(var(--mainRGB), 0.15); }
    #lnb ul li::before{ display: none; }
    #lnb ul li a{ display: block; min-height: unset; font-size: 18px; color: #666; padding: 12px 10px; position: relative; }
    #lnb ul li a br{ display: none; }
    #lnb ul li a span{ font-size: 16px; }
    #lnb ul li.on a{ background: none; font-weight: 600; color: var(--mainColor); padding-right: 36px; }
    #lnb ul li.on a::after{ content: ""; flex-shrink: 0; width: 16px; height: 16px; background: url("/img/sub/icon_lnb_on.svg") no-repeat center center / contain; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); }

    /* history-box */
    .history-box{
        --dot01: 4px;
        --dotS01: 6px;
        --dotS02: 14px;
    }
    .history-box .bar{ top: 0; left: calc((var(--dotT) + var(--dotS01) + var(--dotS02)) / 2); }
    .history-box .flex{ flex-direction: column; }
    .history-box .flex > *{ width: 100%; }
    .history-box .left{ background: #FFF; padding: 0 0 40px; position: relative; z-index: 10; }
    .history-box .right{ padding: 0; padding-left: calc((var(--dotT) + var(--dotS01) + var(--dotS02)) + 20px); position: relative; z-index: 20; }
    .history-box .right ol > li:not(:last-of-type){ margin-bottom: 40px }
    .history-box .right ol > li i{ left: calc(((var(--dotT) + var(--dotS01) + var(--dotS02)) * -1) - 5px); }
    .history-box .right dl{ transform: translateY(var(--aosP)); }
    .history-box .right dl.aos-animate{ transform: translateY(0); }

    .blueBg .history-box .left{ background: var(--skyBlue2); }

    /* basics */
    .history-box.basics .right ol > li i{ top: calc(var(--dotT) + 2px); }
    .history-box.basics .gallery{ padding-top: 0; }
}

@media screen and (max-width: 960px){
    /* visual */
    #visual .text em{ font-size: 17px; }

    /* page-title */
    .page-title h2{ font-size: 4.8rem; }

    /* white-title */
    .white-title p{ font-size: 17px; }

    /* con-title */
    .con-title h4{ font-size: 21px; }
    .con-title h5{ font-size: 19px; }

    /* line-tab */
    .line-tab{
        --height: 54px;
    }
    .line-tab ul li > *{ padding-inline: 20px; }

    /* box-tab */
    .box-tab ul li{ width: 180px; }
    .box-tab ul li > *{ min-height: 55px; }

    /* line-section */
    .line-section > section:not(:last-of-type){ padding-bottom: 50px; margin-bottom: 50px; }

    /* ph-diagram */
    .ph-diagram{
        --clipNum: 10px;
        --clipPrev: polygon(100% 100%, 50% calc(100% - var(--clipNum)), 0 100%, 0 var(--clipNum), 50% 0, 100% var(--clipNum));
        --clipMiddle: polygon(100% var(--clipNum), 100% calc(100% - var(--clipNum)), 50% 100%, 0 calc(100% - var(--clipNum)), 0 var(--clipNum), 50% 0);
        --clipNext: polygon(100% calc(100% - var(--clipNum)), 50% 100%, 0 calc(100% - var(--clipNum)), 0 0, 50% var(--clipNum), 100% 0);
    
    }
    .ph-diagram{ max-width: 300px; display: grid; grid-template-columns: 80px 100px 1fr; margin: 20px auto 0; }
    .ph-diagram > *:not(:last-child){ margin-bottom: 0; }
    .ph-diagram ul{ height: 100%; display: block; }
    .ph-diagram ul li{ height: calc(100% / 3); display: flex; flex-direction: column; justify-content: center; }
    .ph-diagram .head ul::before{ width: 1px; height: 100%; top: 0; left: 50%; }
    .ph-diagram .head ul li div{ width: 100%; padding: 15px 0; }
    .ph-diagram .scale{ margin: 0 20px; }
    .ph-diagram .scale ol{ display: block; width: 100%; }
    .ph-diagram .scale ol li{ height: 45px; aspect-ratio: unset !important; padding-block: 0 calc(var(--clipNum) / 2); padding-inline: 0 !important; }
    .ph-diagram .scale ol li:not(:last-of-type){ margin-right: 0; margin-bottom: -3px; }
    .ph-diagram .scale ol li.middle{ height: 55px; padding-block: 0; }
    .ph-diagram .scale ol li.middle ~ li{ padding-block: calc(var(--clipNum) / 2) 0; }
    .ph-diagram .scale ol li span::before{ font-size: 16px; }
    .ph-diagram .desc ul li{ padding: 10px; padding-right: 0; }

    /* history-box */
    .history-box .gallery p{ margin-top: 12px; }
    .history-box .right dl dt{ font-size: 22px; margin-bottom: 12px; }
    .history-box .right ul li{ font-size: 17px; }
    .history-box .right .whiteBg{ margin-top: 10px; }

    /* basics */
    .history-box.basics .gallery{ padding-bottom: 15px; }
    .history-box.basics .gallery ul li:nth-of-type(even){ top: 15px; } 
    .history-box.basics .right ol > li i{ top: var(--dotT); }
}

@media screen and (max-width: 640px){
    /* box-tab */
    .box-tab ul{ width: 100%; }
    .box-tab ul li{ width: calc((100% - 20px) / 2); }
}


/* 뭃이야기 (공통) */
#story{ padding-bottom: 0; }
#story .sec-title{ padding-bottom: 60px; }

#sub .story-banner{ display: flex; flex-direction: column; justify-content: center; min-height: 448px; color: #FFF; padding: 50px 0; margin-bottom: 100px; opacity: 1; clip-path: inset(0 50% 0 50%); -webkit-clip-path: inset(0 50% 0 50%); transition: clip-path 1s; position: relative; }
#sub .story-banner.aos-animate{ clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); }
#sub .story-banner::before{background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.5)); position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
#sub .story-banner .text{ border-left: 1px solid rgba(255, 255, 255, 0.5); padding: 0 80px; position: relative; z-index: 10; }
#sub .story-banner p{ font-size: 32px; font-weight: 400; line-height: 1.4; margin-bottom: 10px; }
#sub .story-banner h3{ font-size: 5.6rem; font-weight: 500; }

#sub .num-diagram{
    --num: 40px;
}
#sub .num-diagram ol{ display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); text-align: center; counter-reset: num; margin: -10px 0; }
#sub .num-diagram ol > li{ margin: 10px 0; counter-increment: num; }
#sub .num-diagram .num{ display: block; position: relative; }
#sub .num-diagram .num::before{ content: ""; display: block; height: 1px; background: #D9D9D9; position: absolute; top: 50%; left: 0; right: 0; }
#sub .num-diagram .num::after{ content: counter(num, decimal-leading-zero); display: inline-block; width: var(--num); height: var(--num); background: var(--mainColor); border-radius: 50%; font-family: var(--engFont); font-size: 14px; font-weight: 600; color: #FFF; line-height: var(--num); text-align: center; position: relative; z-index: 10; }
#sub .num-diagram dl{ padding: 0 20px; padding-top: 30px; }
#sub .num-diagram dl dt{ font-size: 22px; font-weight: 500; color: #111; margin-bottom: 12px; }
#sub .num-diagram dl dd{ font-size: 18px; font-weight: 300; color: #333; line-height: 1.6; margin-top: 12px; }

@media screen and (max-width: 1700px){
    #story .sec-title{ padding-bottom: 40px; }

    #sub .story-banner{ min-height: 400px; }
    #sub .story-banner .text{ padding: 0 60px; }
    #sub .story-banner p{ font-size: 28px; }


    #sub .num-diagram dl{ padding: 0 15px; padding-top: 20px; }
    #sub .num-diagram dl dt{ font-size: 20px; }
    #sub .num-diagram dl dd{ font-size: 17px; }
}

@media screen and (max-width: 1280px){
    #story .sec-title{ padding-bottom: 30px; }

    #sub .story-banner{ min-height: 350px; margin-bottom: 70px; }
    #sub .story-banner .text{ padding: 0 40px; }
    #sub .story-banner p{ font-size: 24px; margin-bottom: 5px; }

    #sub .num-diagram{
        --num: 36px;
    }
    #sub .num-diagram dl{ padding: 0 10px; padding-top: 15px; }
    #sub .num-diagram dl dt{ font-size: 18px; margin-bottom: 5px; }
    #sub .num-diagram dl dd{ font-size: 16px; }
}

@media screen and (max-width: 960px){
    #sub .story-banner{ min-height: 300px; }
    #sub .story-banner .text{ padding: 0 20px; }
    #sub .story-banner p{ font-size: 22px; }
}


/* 뭃이야기 - 물이야기 */
#import .story-banner{ background: url("/img/sub/story/import_banner.jpg") no-repeat center right 30% / cover; }
  
#import .common-split{ 
    --imgW: 50%; 
    --padding: 100px; 
}
#import .common-split .img.grayBg,
#import .common-split .img.blueBg{ text-align: center; padding: 40px; }
#import .common-split .img.grayBg figure img,
#import .common-split .img.blueBg figure img{ width: auto; filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.1)); -webkit-filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.1)); }

#import .quotation-box{ background: var(--skyBlue2); text-align: center; padding: 60px; }
#import .quotation-box::before{ content: ""; display: block; height: 24px; background: url("/img/sub/story/icon_quotation_mark.svg") no-repeat center center / contain; margin-bottom: 24px; }
#import .quotation-box .con-title h4{ color: var(--mainColor); }

#import .condition .quotation-box .con-title h4{ font-weight: 300; }
#import .condition .quotation-box h4 strong{ font-weight: 600; line-height: inherit; }
#import .condition .common-grid{ --gap: 20px; }
#import .condition .common-grid > *{ padding-top: calc(var(--num) / 2); }
#import .condition .common-grid .item{ display: flex; flex-direction: column; height: 100%; padding: 60px 30px; margin-top: 0 !important; }
#import .condition .common-grid .item p{ font-size: 18px; margin-top: 0; }  
#import .condition .common-split .img figure,
#import .condition .common-split .img figure img{ height: 100%; }
#import .condition .common-split .img figure img{ object-fit: cover; }
#import .condition .common-split .grayBg{ padding: calc(var(--padding) / 2) var(--padding); }
#import .condition .common-split dl dt{ border-bottom: 1px solid #CCC; font-size: 28px; font-weight: 300; color: #111; line-height: 1.4; padding-bottom: 16px; margin-bottom: 24px; }
#import .condition .common-split dl dt strong{ font-weight: 600; }
#import .role{ background: url("/img/sub/story/import_bg01.jpg") no-repeat center center / cover; color: #FFF; }
#import .role .sec-title h3{ font-weight: 600; color: #FFF; }
#import .role .sec-title p{ font-size: 18px; font-weight: 200; color: #FFF; margin-top: 16px; }
#import .role .common-grid .item{ background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.25); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding-block: calc(var(--padding) + 8px); }
#import .role .common-grid .item .txt strong{ font-size: 20px; font-weight: 400; color: #FFF; }

#import .drink .common-feature{ min-height: 350px; background: url("/img/sub/story/import_bg02.jpg") no-repeat center center / cover; border-radius: 0; opacity: 1; clip-path: inset(0 50% 0 50%); -webkit-clip-path: inset(0 50% 0 50%); transition: clip-path 1s; }
#import .drink .common-feature.aos-animate{ clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); }
#import .drink .common-feature .txt h5{ font-size: 40px; color: rgba(255, 255, 255, 0.5); line-height: 1.4; }
#import .drink .common-feature .txt h5 em{ color: #FFF; }

#import .cell{
    --num: 36px;
}
#import .cell ol{ border-top: 1px solid #DDD; counter-reset: num; }
#import .cell ol > *{ display: flex; border-bottom: 1px solid #DDD; padding: 24px 0; counter-increment: num; }  
#import .cell ol .img{ flex-shrink: 0; width: 320px; margin-right: 60px; }
#import .cell ol .img figure,
#import .cell ol .img figure img{ width: 100%; }
#import .cell ol .text{ flex: 1 1 auto; min-width: 0; padding: 40px 0; }
#import .cell ol .text dl dt{ min-height: var(--num); font-size: 26px; font-weight: 600; color: #111; line-height: 1.4; padding-top: calc((var(--num) - 1.4em) / 2); padding-left: calc(var(--num) + 16px); margin-bottom: 16px; position: relative; }
#import .cell ol .text dl dt::before{ content: counter(num, decimal-leading-zero); width: var(--num); height: var(--num); background: var(--mainColor); font-family: var(--engFont); font-size: 14px; font-weight: 600; color: #FFF; line-height: var(--num); text-align: center; position: absolute; top: 0; left: 0; }
#import .cell ol .text .defalut strong{ color: var(--mainColor); }

#import .body .whiteBg{ padding: 60px; text-align: center; }
#import .body .water .con-title{ margin-bottom: 40px; }
#import .body .average p{ font-size: 24px; font-weight: 500; color: var(--mainColor); margin-top: 20px; }

#import .age .borderBg{ padding: 60px; }
#import .age .borderBg .con-title{ margin-bottom: 30px; }
#import .age .diagram{ display: flex; align-items: center; }
#import .age .diagram > *:not(.middle){ flex: 1 1 auto; width: 100%; min-width: 0; }
#import .age .diagram .middle{ flex-shrink: 0; margin: 0 80px; }
#import .age .diagram ul li{ display: flex; align-items: center; }
#import .age .diagram ul li:not(:last-child){ margin-bottom: 30px; }
#import .age .diagram ul li .icon{ flex-shrink: 0; margin: 0 20px; }
#import .age .diagram ul li p{ font-size: 18px; font-weight: 300; color: #333; line-height: 1.7; }
#import .age .diagram ul li p strong{ font-size: 22px; font-weight: 500; line-height: inherit; }
#import .age .diagram .left{ text-align: right; }
#import .age .diagram .left ul li{ flex-direction: row-reverse; }
#import .age .diagram .left ul li .icon{ margin-right: 0; }
#import .age .diagram .right ul li .icon{ margin-left: 0; }
#import .age .table .con-title{ margin-bottom: 24px; }
#import .age .table .con-title h5{ color: var(--mainColor); }
#import .age .table .common-gallery{ --gap: 40px; margin-block: calc(var(--gap) * -1); }
#import .age .table .common-gallery > *{ margin: var(--gap); }
#import .age .table .blue-table table thead th{ padding-inline: 5px; }

#import .type .common-grid{ --gap: 20px; }
#import .type .common-grid > *{ display: flex; flex-direction: column; justify-content: center; aspect-ratio: 1 / 1; position: relative; }
#import .type .common-grid .bg{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; }
#import .type .common-grid .bg img{ width: 100%; height: 100%; object-fit: cover; }
#import .type .common-grid .item{ color: #FFF; text-align: center; }
#import .type .common-grid .item dt{ font-size: 24px; font-weight: 400; margin-bottom: 12px; }
#import .type .common-grid .item dd{ display: flex; flex-direction: column; justify-content: center; min-height: 6.4em; font-size: 18px; font-weight: 200; line-height: 1.6; }
#import .type .grayBg{ padding: 80px; }
#import .type .grayBg .con-title{ margin-bottom: 40px; }
#import .type .ph-diagram .con-title{ margin: 40px 0 0; }
#import .type .ph-diagram .con-title > *:not(:last-child){ margin-bottom: 8px; }
#import .type .ph-diagram .con-title h5{ color: var(--mainColor); }
#import .type .ph-diagram .con-title p{ font-size: 18px; }
#import .type .common-split .img figure{ position: relative; }
#import .type .common-split .img figure figcaption{ font-size: 16px; font-weight: 300; color: #999; text-align: right; position: absolute; bottom: 0; left: 0; right: 0; }
#import .type .common-split .check-list li{ font-size: 18px; }
#import .type .common-split .check-list ul{ margin-top: 4px; }
#import .type .common-split .check-list ul li{ font-size: 16px; font-weight: 300; color: #666; line-height: 1.7; padding-left: 15px; position: relative; }
#import .type .common-split .check-list ul li:not(:last-of-type){ margin-bottom: 0; }
#import .type .common-split .check-list ul li::before{ content: ""; width: 7px; height: 9px; background: url("/img/sub/story/icon_import_triangle.svg") no-repeat center center / contain; border-radius: unset; position: absolute; top: calc(1.7em / 2); left: 0; transform: translateY(-50%); }

#import .world .content > *:not(:last-of-type){ margin-bottom: 20px; }
#import .world .common-split{
    --imgW: 460px;
    --padding: 120px;
}
#import .world .common-split{ background: #FFF; padding: 20px; }
#import .world .common-split .text{ display: block; padding: 40px var(--padding); }
#import .world .common-split .text dl dt{ border-bottom: 1px solid #D9D9D9; font-size: 26px; font-weight: 600; color: #111; line-height: 1.4; padding-bottom: 16px; margin-bottom: 24px; }

#import .spring .borderBg{ padding: 60px; }
#import .spring .borderBg .con-title h4{ color: var(--mainColor); }
#import .spring .common-gallery{ --gap: 20px; }
#import .spring .gallery01 .common-gallery{ grid-template-columns: 23.5% 38.25% 38.25%; }
#import .spring .table01 .con-title{ text-align: left; padding-bottom: 24px; }
#import .spring .table01 .blue-table th{ --paddingLR: 10px; padding-inline: var(--paddingLR); }
#import .spring .table01 .defalut{ line-height: 1.6; padding-left: 22px; margin-top: 20px; position: relative; }
#import .spring .table01 .defalut::before{ content: ""; width: 12px; height: 15px; background: var(--mainColor); mask: url("/img/sub/story/icon_import_triangle.svg") no-repeat center center / contain; -webkit-mask: url("/img/sub/story/icon_import_triangle.svg") no-repeat center center / contain; position: absolute; top: calc(1.6em / 2); left: 0; transform: translateY(-50%); }
#import .spring .common-split .con-title{ text-align: left; }
#import .spring .table02 colgroup col.th{ width: 18.756%; }

@media screen and (max-width: 1700px){
    #import .common-split{ 
        --padding: 70px;
    }

    #import .quotation-box{ padding: 40px; }
    #import .quotation-box::before{ height: 19px; }

    #import .condition .common-grid .item{ padding: 45px 25px; }
    #import .condition .common-grid .item p{ font-size: 17px; }
    #import .condition .common-split dl dt{ font-size: 24px; }

    #import .role .common-grid .item .txt strong{ font-size: 19px; }

    #import .drink .common-feature{ min-height: 300px; }
    #import .drink .common-feature .txt h5{ font-size: 36px; }

    #import .cell ol .img{ margin-right: 40px; }
    #import .cell ol .text{ padding: 30px 0; }
    #import .cell ol .text dl dt{ font-size: 23px; }

    #import .body .whiteBg{ padding: 50px; }
    #import .body .average p{ font-size: 22px; }

    #import .age .borderBg{ padding: 40px; }
    #import .age .diagram .middle{ margin: 0 60px; }
    #import .age .diagram ul li .icon{ width: 100px; }
    #import .age .table .common-gallery{ --gap: 30px; }

    #import .type .common-grid .item dt{ font-size: 22px; }
    #import .type .grayBg{ padding: 40px; }
    #import .type .common-split .img figure figcaption{ position: static; margin-top: 30px; }

    #import .world .common-split{ 
        --imgW: 400px;
        --padding: 90px;
    }
    #import .world .common-split .text{ padding-block: 30px; }
    #import .world .common-split .text dl dt{ font-size: 24px; }

    #import .spring .borderBg{ padding: 40px; }
}

@media screen and (max-width: 1550px){
    #import .condition .common-grid br{ display: none; }
}

@media screen and (max-width: 1500px){
    #import .cell br{ display: none; }

    #import .type .common-grid br{ display: none; }
}

@media screen and (max-width: 1400px){
    #import .condition .common-grid{ grid-template-columns: repeat(3, calc(100% / 3)); }
    #import .condition .common-grid br{ display: block; }

    #import .world .common-split{
        --padding: 60px;
    }
}

@media screen and (max-width: 1280px){
    #import .common-split{ 
        --padding: 40px;
    }
    #import .common-split .img.grayBg, 
    #import .common-split .img.blueBg{ padding: 30px 20px; }
    #import .common-split .img.grayBg figure, 
    #import .common-split .img.blueBg figure{ padding: 0 40px; }

    #import .quotation-box{ padding: 30px 25px; }
    #import .quotation-box::before{ height: 16px; margin-bottom: 16px; }

    #import .condition .common-grid .item{ padding: 35px 20px 25px; }
    #import .condition .common-grid .item p{ font-size: 16px; }
    #import .condition .common-split .grayBg{ padding: var(--padding); }
    #import .condition .common-split dl dt{ font-size: 21px; padding-bottom: 12px; margin-bottom: 20px; }

    #import .role .common-grid .item .txt strong{ font-size: 18px; }
    
    #import .drink .common-feature{ min-height: 260px; }
    #import .drink .common-feature .txt h5{ font-size: 32px; }

    #import .cell{
        --num: 32px;
    }
    #import .cell ol > *{ padding: 16px 0; }
    #import .cell ol .img{ width: 280px; margin-right: 30px; }
    #import .cell ol .text{ padding: 20px 0; }
    #import .cell ol .text dl dt{ font-size: 21px; }
    
    #import .body .whiteBg{ padding: 40px; }
    #import .body .water .con-title{ margin-bottom: 30px; }
    #import .body .num-diagram ol{ grid-template-columns: repeat(4, 25%); }
    #import .body .average p{ font-size: 20px; }

    #import .age .borderBg{ padding: 30px 25px; }
    #import .age .borderBg .con-title{ margin-bottom: 20px; }
    #import .age .diagram .middle{ width: 160px; margin: 0 40px; }
    #import .age .diagram ul li .icon{ width: 80px; }
    #import .age .diagram ul li p{ font-size: 17px; }
    #import .age .diagram ul li p strong{ font-size: 20px; }
    #import .age .table .con-title{ margin-bottom: 16px; }
    #import .age .table .common-gallery{ --gap: 20px; }

    #import .type .common-grid .item dt{ font-size: 20px; margin-bottom: 8px; }
    #import .type .common-grid .item dd{ font-size: 17px; }
    #import .type .grayBg{ padding: 30px 20px; }
    #import .type .ph-diagram .con-title{ margin-top: 30px; }
    #import .type .ph-diagram .con-title p{ font-size: 17px; }
    #import .type .common-split .check-list li{ font-size: 17px; }
    
    #import .world .common-split{
        --imgW: 360px;
        --padding: 40px;
    }
    #import .world .common-split .text{ padding-block: 15px; }
    #import .world .common-split .text dl dt{ font-size: 22px; padding-bottom: 8px; margin-bottom: 16px; }

    #import .spring .borderBg{ padding: 25px; }
}

@media screen and (max-width: 1200px){
    #import .type .common-grid{ grid-template-columns: repeat(2, 50%); }
    #import .type .common-grid > *{ aspect-ratio: unset; }
    #import .type .common-grid br{ display: block; }

    #import .spring .common-split .con-title br{ display: none; }
}

@media screen and (max-width: 1024px){
    #import .role .common-grid{ grid-template-columns: repeat(2, 50%); }
    
    #import .which .num-diagram ol{ grid-template-columns: repeat(3, calc(100% / 3)); }
}

@media screen and (max-width: 960px){
    #import .story-banner::before{ content: ""; }

    #import .condition .common-split{ flex-direction: column; }
    #import .condition .common-split .img{ width: 100%; }
    #import .common-split .img.grayBg figure img, 
    #import .common-split .img.blueBg figure img{ max-width: 70%; }
    #import .condition .common-split .grayBg{ padding: 25px; }

    #import .role .common-grid .item .txt strong{ font-size: 17px; }

    #import .drink .common-feature{ min-height: 220px; }
    #import .drink .common-feature .txt h5{ font-size: 28px; }

    #import .cell ol .text{ padding: 10px 0; }

    #import .body .whiteBg{ padding: 30px 25px; }
    #import .body .whiteBg br{ display: none; }
    #import .body .water .con-title{ margin-bottom: 20px; }
    #import .body .average{ padding: 40px 35px 25px; }
    #import .body .average p{ font-size: 18px; }

    #import .age .diagram{ flex-wrap: wrap; justify-content: center; }
    #import .age .diagram .middle{ order: 0; width: 100%; text-align: center; margin: 0 0 25px; }
    #import .age .diagram .middle img{ width: 120px; }
    #import .age .diagram > *:not(.middle){ order: 1; max-width: 250px; width: calc((100% - 20px) / 2); }
    #import .age .diagram ul li:not(:last-child){ margin-bottom: 20px; }
    #import .age .diagram ul li .icon{ margin-inline: 0 15px !important; }
    #import .age .diagram .left{ text-align: left; margin-right: 20px; }
    #import .age .diagram .left ul li{ flex-direction: row; }
    #import .age .table .common-gallery{ grid-template-columns: repeat(1, 100%); }

    #import .type .ph-diagram{ max-width: 500px; }
    #import .type .ph-diagram .desc{ display: flex; flex-direction: column; justify-content: center; }
    #import .type .ph-diagram .con-title{ margin: 0; }
    #import .type .common-split{ flex-direction: column; }  
    #import .type .common-split .img{ width: 100%; }
    #import .type .common-split .text{ padding: 25px 0 0; }

    #import .world .common-split{ flex-direction: column; }
    #import .world .common-split .img{ width: 100%; }
    #import .world .common-split .text{ padding: 20px 0 0; }
    #import .world .common-split .text dl dt{ font-size: 20px; }

    #import .spring .common-gallery{ --gap: 10px; }
    #import .spring .gallery01 .common-gallery{ grid-template-columns: 55.5% 44.5%; }
    #import .spring .gallery01 .common-gallery > *:first-child{ grid-row: auto / span 2; } 
    #import .spring .common-split{ flex-direction: column; }
    #import .spring .common-split .img{ width: 100%; }
    #import .spring .common-split .text{ padding: 25px 0 0; }
    #import .spring .gallery02 .common-gallery{ grid-template-columns: repeat(2, 50%); }
}

@media screen and (max-width: 768px){
    #import .condition .common-grid{ grid-template-columns: repeat(2, 50%); }

    #import .cell ol > *{ flex-direction: column; }
    #import .cell ol .img{ width: 100%; margin: 0; } 
    #import .cell ol .text{ padding: 20px 0 0; }
    
    #import .body .num-diagram ol{ grid-template-columns: repeat(2, 50%); }

    #import .age .con-title br{ display: none; }

    #import .which .con-title br.m{ display: block; }

    #import .type .common-grid{ grid-template-columns: repeat(1, 100%); }
}

@media screen and (max-width: 640px){
    #import .drink .common-feature{ min-height: 200px; }
    #import .drink .common-feature .txt h5{ font-size: 25px; }

    #import .body .whiteBg br.m{ display: block; }

    #import .age .con-title br.m{ display: block; }
    #import .age .diagram ul li .icon{ width: 65px; }

    #import .which .num-diagram ol{ grid-template-columns: repeat(2, 50%); }

    #import .spring .quotation-box br{ display: none; }
}

@media screen and (max-width: 512px){
    #import .condition .quotation-box br{ display: none; }
    #import .condition .quotation-box br.m{ display: block; }
}


/* 뭃이야기 - 미네랄 */
#mineral .story-banner{ background: url("/img/sub/story/mineral_bg01.jpg") no-repeat center right 40% / cover; }

#mineral .whiteBg,
#mineral .borderBg{ padding: 60px; }

#mineral .overview .borderBg .con-title{ margin-bottom: 40px; }
#mineral .overview .borderBg figure{ display: block; text-align: center; }

#mineral .type figure.block{ clip-path: inset(0 50% 0 50%); -webkit-clip-path: inset(0 50% 0 50%); transition: clip-path 1s; }
#mineral .type figure.block.aos-animate{ clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); }
#mineral .type .num-diagram dl dt em{ display: block; font-family: var(--engFont); font-size: 16px; font-weight: 500; color: var(--mainColor); margin-top: 4px; }
#mineral .type .whiteBg .con-title{ margin-bottom: 40px; }
#mineral .type .whiteBg figure{ display: block; text-align: center; }
#mineral .type .rarity .diagram{ text-align: center; }
#mineral .type .rarity .diagram ul{ display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); margin: -10px 0; }
#mineral .type .rarity .diagram ul li{ margin: 10px 0; }
#mineral .type .rarity .diagram ul li > *{ padding: 0 40px; }
#mineral .type .rarity .diagram .element{ position: relative; }
#mineral .type .rarity .diagram .element::before{ content: ""; height: 1px; background: #D9D9D9; position: absolute; top: 50%; left: 0; right: 0; }
#mineral .type .rarity .diagram .element div{ display: flex; flex-direction: column; justify-content: center; max-width: 215px; aspect-ratio: 1 / 1; background: #FFF; border: 20px solid var(--blueBorder); border-radius: 50%; font-family: var(--engFont); color: var(--mainColor); padding: 0 15px; margin: 0 auto; position: relative; z-index: 10; }
#mineral .type .rarity .diagram .element strong{ display: block; font-size: 4rem; font-weight: 700; }
#mineral .type .rarity .diagram .element span{ display: block; font-size: 16px; font-weight: 500; margin-top: 4px; }
#mineral .type .rarity .diagram dl{ margin-top: 24px; }
#mineral .type .rarity .diagram dl dt{ font-size: 22px; font-weight: 500; color: #111; margin-bottom: 16px; }
#mineral .type .rarity .diagram dl dd{ font-size: 18px; font-weight: 300; color: #333; line-height: 1.6; }

#mineral .lack .borderBg .con-title{ margin-bottom: 40px; }
#mineral .lack .borderBg .inner{ max-width: 1105px; margin: 0 auto; }
#mineral .lack .borderBg .common-gallery{ --gap: 20px; text-align: center; }
#mineral .lack .borderBg .common-gallery figure img{ width: unset; }
#mineral .lack .borderBg .common-gallery .txt{ margin-top: 32px; }
#mineral .lack .borderBg .common-gallery .txt span{ display: block; font-size: 22px; font-weight: 500; color: #111; margin-bottom: 4px; }
#mineral .lack .borderBg .common-gallery .txt p{ font-size: 18px; font-weight: 300; color: #333; line-height: 1.6; }  
#mineral .lack .table .con-title{ margin-bottom: 24px; }
#mineral .lack .table .con-title h5{ color: var(--mainColor); }
#mineral .lack .table .common-gallery{ --gap: 40px; margin-block: calc(var(--gap) * -1); }
#mineral .lack .table .common-gallery > *{ margin-block: var(--gap); }
#mineral .lack .table .blue-table th{ padding-inline: 0; }
#mineral .lack .table .note{ line-height: 1.4; text-align: left; margin-top: 12px; }
#mineral .lack .table .note p{ font-size: 16px; color: #999; }
#mineral .lack .table .table02 colgroup col.th{ width: 20%; }

#mineral .media .common-gallery{ --gap: 20px; }
#mineral .media .common-gallery > *{ display: flex; flex-direction: column; }
#mineral .media .common-gallery .defalut{ flex: 1 0 auto; background: #FFF; line-height: 1.6; padding: 40px; }

@media screen and (max-width: 1700px){
    #mineral .whiteBg,
    #mineral .borderBg{ padding: 40px; }

    #mineral .overview .borderBg .con-title{ margin-bottom: 30px; }

    #mineral .type .whiteBg .con-title{ margin-bottom: 30px; }
    #mineral .type .rarity .diagram ul li > *{ padding: 0 30px; }
    #mineral .type .rarity .diagram .element div{ max-width: 200px; border-width: 16px; }
    #mineral .type .rarity .diagram dl dt{ font-size: 20px; }

    #mineral .lack .borderBg .con-title{ margin-bottom: 30px; }
    #mineral .lack .borderBg .common-gallery .txt{ margin-top: 24px; }
    #mineral .lack .borderBg .common-gallery .txt span{ font-size: 20px; }
    #mineral .lack .table .common-gallery{ --gap: 30px; }

    #mineral .media .common-gallery .defalut{ padding: 30px; }
}

@media screen and (max-width: 1320px){
    #mineral .type .num-diagram br{ display: none; }
}

@media screen and (max-width: 1280px){
    #mineral .whiteBg,
    #mineral .borderBg{ padding: 30px 25px; }

    #mineral .overview .borderBg .con-title{ margin-bottom: 20px; }

    #mineral .type .whiteBg .con-title{ margin-bottom: 20px; }
    #mineral .type .num-diagram br{ display: block; }
    #mineral .type .num-diagram ol{ grid-template-columns: repeat(3, calc(100% / 3)); }
    #mineral .type .rarity .diagram ul li > *{ padding: 0 20px; }
    #mineral .type .rarity .diagram .element div{ max-width: 180px; border-width: 12px; }
    #mineral .type .rarity .diagram .element span{ font-size: 15px; }
    #mineral .type .rarity .diagram dl{ margin-top: 20px; }
    #mineral .type .rarity .diagram dl dt{ font-size: 19px; margin-bottom: 8px; }
    #mineral .type .rarity .diagram dl dd{ font-size: 17px; }

    #mineral .lack .borderBg .con-title{ margin-bottom: 20px; }
    #mineral .lack .borderBg .common-gallery .txt{ margin-top: 16px; }
    #mineral .lack .borderBg .common-gallery .txt span{ font-size: 19px; }
    #mineral .lack .borderBg .common-gallery .txt p{ font-size: 17px; }
    #mineral .lack .table .con-title{ margin-bottom: 15px; }
    #mineral .lack .table .common-gallery{ --gap: 20px; }

    #mineral .media .common-gallery .defalut{ padding: 20px 25px; }
}

@media screen and (max-width: 1024px){
    #mineral .type .rarity .diagram ul{ grid-template-columns: repeat(2, 50%); }

    #mineral .lack .table .common-gallery{ grid-template-columns: repeat(1, 100%); }

    #mineral .media .column3 .common-gallery{ grid-template-columns: repeat(2, 50%); }
}

@media screen and (max-width: 960px){
    #mineral .overview .con-title br{ display: none; }
    
    #mineral .type .rarity .diagram dl{ margin-top: 16px; }
    #mineral .type .rarity .diagram dl dt{ font-size: 18px; }
    #mineral .type .rarity .diagram dl dd{ font-size: 16px;}

    #mineral .lack .borderBg .common-gallery{ grid-template-columns: repeat(1, 100%); }
    #mineral .lack .borderBg .common-gallery > *{ display: flex; justify-content: center; align-items: center; }
    #mineral .lack .borderBg .common-gallery figure{ flex-shrink: 0; width: 130px; }
    #mineral .lack .borderBg .common-gallery .txt{ flex: 1 1 auto; max-width: 220px; min-width: 0; text-align: left; margin: 0 0 0 25px; }
}

@media screen and (max-width: 640px){
    #mineral .type .con-title br{ display: none; }
    #mineral .type .con-title br.m{ display: block; }
    #mineral .type .num-diagram ol{ grid-template-columns: repeat(2, 50%); }
    #mineral .type .rarity .diagram ul li > *{ padding: 0 10px; }
    #mineral .type .rarity .diagram .element div{ max-width: 150px; border-width: 9px; }

    #mineral .media .column3 .common-gallery{ --gap: 10px; }
    #mineral .media .common-gallery .defalut{ font-size: 16px; padding: 15px 20px; } 
}


/* 뭃이야기 - 물과질병 */
#deficiency .story-banner{ background: url("/img/sub/story/deficiency_bg01.jpg") no-repeat center right 45% / cover; }

#deficiency .whiteBg,
#deficiency .grayBg{ padding: 60px; }
#deficiency .gallery > figure{ display: block; text-align: center; }
#deficiency .gallery .common-gallery{ --gap: 20px; }
#deficiency .common-split{ --imgW: 50%; --padding: 100px; }

#deficiency .seriousness{
    --clipPath: 30px;
    --defalutClipPath: polygon(calc(100% - var(--clipPath)) 0%, 100% 50%, calc(100% - var(--clipPath)) 100%, 0% 100%, var(--clipPath) 50%, 0% 0%);
    --startClipPath: polygon(calc(100% - var(--clipPath)) 0%, 100% 50%, calc(100% - var(--clipPath)) 100%, 0% 100%, 0% 0%, 0% 0%);
}
#deficiency .seriousness ul{ display: flex; }
#deficiency .seriousness ul li{ width: calc((100% + 140px) / 8); min-height: 80px; display: flex; flex-direction: column; justify-content: center; text-align: center; clip-path: var(--defalutClipPath); -webkit-clip-path: var(--defalutClipPath); padding: 10px calc(var(--clipPath) + 10px); }
#deficiency .seriousness ul li:first-of-type{ clip-path: var(--startClipPath); -webkit-clip-path: var(--startClipPath); }
#deficiency .seriousness ul li:not(:last-of-type){ margin-right: -20px; }
#deficiency .seriousness ul li span{ font-size: 20px; font-weight: 400; color: #FFF; }

#deficiency .oxygen .common-grid{ --gap: 20px; }
#deficiency .oxygen dl dt{ font-size: 22px; font-weight: 600; margin-bottom: 8px; }
#deficiency .oxygen dl dd{ font-size: 18px; font-weight: 300; line-height: 1.7; }
#deficiency .oxygen .role{ background: url("/img/sub/story/deficiency_bg02.jpg") no-repeat center center / cover; padding: 60px; }
#deficiency .oxygen .role .common-grid .item{ background: rgba(255, 255, 255, 0.75); color: #333; padding-block: 55px; }
#deficiency .oxygen .role .common-grid .item.black{ background: rgba(0, 0, 0, 0.75); color: #FFF; }
#deficiency .oxygen .role .black dl dt{ font-weight: 400; }
#deficiency .oxygen .role .black dl dd{ font-weight: 200; }
#deficiency .oxygen .whiteBg .common-gallery > *{ position: relative; }
#deficiency .oxygen .whiteBg .common-gallery > *::after{ content: ""; width: 1px; height: 100%; background: #D9D9D9; position: absolute; top: 0; right: calc((var(--gap) / 2) * -1); }
#deficiency .oxygen .whiteBg .common-gallery > *:last-of-type::after{ display: none; }
#deficiency .oxygen .whiteBg dl{ text-align: center; }
#deficiency .oxygen .whiteBg dl dt{ color: var(--mainColor); line-height: 1.4; } 

#deficiency .importance .grayBg .con-title{ margin-bottom: 30px; }
#deficiency .importance .common-grid{ --gap: 8px; }
#deficiency .importance .common-grid > *{ display: flex; flex-direction: column; justify-content: center; background: #FFF; aspect-ratio: 1 / 1; text-align: center; padding: 10px; }
#deficiency .importance .common-grid p{ font-size: 18px; font-weight: 500; color: #333; line-height: 1.6; }

#deficiency .atopy .inner{ max-width: 720px; margin-inline: auto; }
#deficiency .atopy .common-gallery{ --gap: 60px; }

#deficiency .cancer .grayBg figure img{ mix-blend-mode: darken; }

#deficiency .guide ul li:not(:last-of-type){ margin-bottom: 20px; }
#deficiency .guide ul li *{ line-height: 1.7; }
#deficiency .guide ul li > *{ padding: 25px 30px; }
#deficiency .guide ul li .title{ display: flex; align-items: baseline; background: var(--skyBlue2); }
#deficiency .guide ul li .title span{ flex-shrink: 0; background: var(--mainColor); border-radius: 999px; font-size: 16px; font-weight: 400; color: #FFF; padding: 10px 24px; margin-right: 16px; }
#deficiency .guide ul li .title h4{ flex: 1 1 auto; min-width: 0; font-size: 20px; font-weight: 500; color: #333; line-height: 1.7; }
#deficiency .guide ul li .title h4 em{ color: var(--mainColor); }
#deficiency .guide ul li .edit-content{ font-size: 18px; font-weight: 300; color: #333; padding: 10px 15px; }

#deficiency .health .common-split .whiteBg{ padding: calc(var(--padding) / 2) var(--padding); }
#deficiency .health .common-split .con-title{ text-align: left; }
#deficiency .health .common-grid{ --gap: 20px; grid-template-columns: repeat(4, 25%); }
#deficiency .health .common-grid > *{ display: flex; flex-direction: column; justify-content: center; aspect-ratio: 1 / 1; color: #FFF; position: relative; z-index: 10; }
#deficiency .health .common-grid .bg{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; }
#deficiency .health .common-grid .bg img{ width: 100%; height: 100%; object-fit: cover; }
#deficiency .health .common-grid dl dt{ font-size: 24px; font-weight: 400; margin-bottom: 12px; }
#deficiency .health .common-grid dl dd{ display: flex; flex-direction: column; justify-content: center; min-height: 4.8em; font-size: 18px; font-weight: 200; line-height: 1.6; }

#deficiency .method .common-gallery{ --gap: 30px; margin-block: calc(var(--gap) * -1); }
#deficiency .method .common-gallery > *{ margin-block: var(--gap); }
#deficiency .method .common-gallery .txt{ text-align: center; margin-top: 20px; }
#deficiency .method .common-gallery .txt strong{ font-size: 22px; font-weight: 500; color: #111; }
#deficiency .method .common-gallery .txt p{ font-size: 18px; font-weight: 300; color: #333; line-height: 1.6; margin-top: 8px; }

@media screen and (max-width: 1700px){
    #deficiency .whiteBg,
    #deficiency .grayBg{ padding: 40px; }
    #deficiency .common-split{ --padding: 70px; }

    #deficiency .seriousness{
        --clipPath: 20px;
    }
    #deficiency .seriousness ul li{ width: calc((100% + 210px) / 8); min-height: 70px; }
    #deficiency .seriousness ul li:not(:last-of-type){ margin-right: -15px; }
    #deficiency .seriousness ul li span{ font-size: 19px; }

    #deficiency .oxygen dl dt{ font-size: 21px; }
    #deficiency .oxygen .role{ padding: 40px; }
    #deficiency .oxygen .role .common-grid .item{ padding-block: 40px; }

    #deficiency .importance .common-grid p{ font-size: 17px; }

    #deficiency .guide ul li > *{ padding: 20px 25px; }
    #deficiency .guide ul li .title span{ padding: 8px 20px; }
    #deficiency .guide ul li .title h4{ font-size: 19px; }

    #deficiency .health .common-grid dl dt{ font-size: 22px; }
    #deficiency .health .common-grid dl dd{ min-height: 6.4em; font-size: 18px; }

    #deficiency .method .common-gallery .txt strong{ font-size: 20px;  }
}

@media screen and (max-width: 1400px){
    #deficiency .rheumatism br{ display: none; }

    #deficiency .health .common-grid br{ display: none; }
}

@media screen and (max-width: 1280px){
    #deficiency .whiteBg,
    #deficiency .grayBg{ padding: 30px 25px; }
    #deficiency .common-split{ --padding: 40px; }

    #deficiency .seriousness ul li{ min-height: 60px; }
    #deficiency .seriousness ul li span{ font-size: 18px; }

    #deficiency .oxygen dl dt{ font-size: 20px; }
    #deficiency .oxygen dl dd{ font-size: 17px; }
    #deficiency .oxygen .role{ padding: 25px; }
    #deficiency .oxygen .role .common-grid .item{ padding-block: 25px; }

    #deficiency .importance .common-grid{ grid-template-columns: repeat(4, 25%); }
    #deficiency .importance .common-grid > *{ min-height: 100px; aspect-ratio: unset; }
    #deficiency .importance .common-grid p{ font-size: 16px; }

    #deficiency .guide ul li > *{ padding: 15px 20px; }
    #deficiency .guide ul li .title span{ font-size: 15px; padding: 6px 16px; margin-right: 12px; }
    #deficiency .guide ul li .title h4{ font-size: 18px; }
    #deficiency .guide ul li .edit-content{ font-size: 17px; padding: 8px 12px; }

    #deficiency .health .common-grid dl dt{ font-size: 20px; margin-bottom: 8px; }
    #deficiency .health .common-grid dl dd{ font-size: 17px; }

    #deficiency .method .common-gallery{ --gap: 20px; }
    #deficiency .method .common-gallery .txt{ margin-top: 16px; }
    #deficiency .method .common-gallery .txt strong{ font-size: 19px;  }
    #deficiency .method .common-gallery .txt p{ font-size: 17px; }
}

@media screen and (max-width: 1200px){
    #deficiency .seriousness ul{ flex-wrap: wrap; margin-bottom: -5px; }
    #deficiency .seriousness ul li{ width: calc((100% + 45px) / 4); margin-bottom: 5px; }
    #deficiency .seriousness ul li:nth-of-type(4n){ margin-right: 0; }

    #deficiency .allergy br{ display: none; }

    #deficiency .health .common-split br{ display: none; }
    #deficiency .health .common-split{ flex-direction: column; }
    #deficiency .health .common-split .img{ width: 100%; }
    #deficiency .health .common-split .whiteBg{ padding: 25px; }
    #deficiency .health .common-grid{ --gap: 10px; grid-template-columns: repeat(3, calc(100% / 3)); }

    #deficiency .method .common-gallery{ grid-template-columns: repeat(3, calc(100% / 3)); }
}

@media screen and (max-width: 1024px){
    #deficiency .gallery .common-gallery{ grid-template-columns: repeat(1, 100%); }

    #deficiency .oxygen .role .common-grid{ grid-template-columns: repeat(1, 100%); }
    #deficiency .oxygen .whiteBg .common-gallery{ --gap: 30px; margin-block: calc(var(--gap) * -1); }
    #deficiency .oxygen .whiteBg .common-gallery > *{ margin-block: var(--gap); }
    #deficiency .oxygen .whiteBg .common-gallery > *::after{ width: 100%; height: 1px; top: calc(100% + var(--gap)); right: 0; }

    #deficiency .atopy .common-gallery{ --gap: 40px; }
}

@media screen and (max-width: 960px){
    #deficiency .oxygen dl dt{ font-size: 19px; }
    #deficiency .oxygen dl dd{ font-size: 16px; }

    #deficiency .method .common-gallery{ grid-template-columns: repeat(2, 50%); }
}

@media screen and (max-width: 800px){
    #deficiency .importance .con-title br{ display: none; }

    #deficiency .health .common-grid{ grid-template-columns: repeat(2, 50%); }
}

@media screen and (max-width: 768px){
    #deficiency .seriousness ul li{ width: calc((100% + 30px) / 3); }
    #deficiency .seriousness ul li:nth-of-type(4n){ margin-right: -15px; }
    #deficiency .seriousness ul li:nth-of-type(3n){ margin-right: 0; }

    #deficiency .atopy br,
    #deficiency .cancer br{ display: none; }
    
    #deficiency .atopy .common-gallery{ --gap: 20px; }

    #deficiency .guide br{ display: none; }
    #deficiency .guide ul li .title{ flex-direction: column; }
    #deficiency .guide ul li .title span{ margin: 0 0 8px; }
    #deficiency .guide ul li .edit-content{ padding: 0; }
}

@media screen and (max-width: 640px){
    #deficiency .story-banner::before{ content: ""; }

    #deficiency .importance .common-grid{ grid-template-columns: repeat(2, 50%); }  
    #deficiency .importance .common-grid > *{ min-height: 80px; }

    #deficiency .atopy .common-gallery{ grid-template-columns: repeat(2, 50%); }

    #deficiency .health .common-grid{ grid-template-columns: repeat(1, 100%); }
    #deficiency .health .common-grid > *{ aspect-ratio: unset; }
    #deficiency .health .common-grid br.m{ display: block; }
    #deficiency .health .common-grid dl dd{ min-height: unset; }  

    #deficiency .method .sec-title br.m{ display: block; }  
}



/* 회사소개 - 인사말 */
#greeting .greeting .flex-box{ display: flex; opacity: 1; }
#greeting .greeting .img{ flex-shrink: 0; width: 760px; clip-path: inset(0 100% 0 0); -webkit-clip-path: inset(0 100% 0 0); transition: clip-path var(--aosT); }
#greeting .greeting7 .img figure,
#greeting .greeting .img figure img{ width: 100%; height: 100%; }
#greeting .greeting .img figure img{ object-fit: cover; object-position: right; }
#greeting .greeting .text{ flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 15px 0; padding-inline: 120px calc((var(--vw) - 1600px) / 2); }
#greeting .greeting .text .column > *:not(:last-child){ margin-bottom: 40px; }
#greeting .greeting .text h3{ font-size: 36px; font-weight: 600; color: #111; margin-bottom: 40px; }
#greeting .greeting .text h3 em{ color: var(--mainColor); }
#greeting .greeting .text p{ font-size: 20px; font-weight: 300; color: #333; line-height: 1.7; }
#greeting .greeting .text .p-box > *:not(:last-child){ margin-bottom: 30px; }
#greeting .greeting .text .name{ display: flex; align-items: center; font-size: 22px; font-weight: 500; color: #111; margin-left: -20px; }
#greeting .greeting .text .name > *{ display: inline-block; padding-left: 20px; }
#greeting .greeting .text .name strong{ font-family: var(--pointFont); font-size: 4.8rem; font-weight: 400; line-height: 1; transform: translateY(-3px); }

#greeting .greeting .img.aos-animate{ clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); }


#greeting .diagram{
    --circle: 720px;
    --padding01: 36px;
    --padding02: 24px;
    --border: #BBCFE0;
}
#greeting{ padding-bottom: 0; }
#greeting .diagram{ display: block; position: relative; }
#greeting .diagram .circle{ width: var(--circle); background: rgba(var(--mainRGB), 0.04); border-radius: 50%; position: relative; padding: var(--padding01); margin: 0 auto; opacity: 0; transform: scale(0.7); transition: opacity var(--aosT), transform var(--aosT); }
#greeting .diagram .circle div{ border: 2px dashed var(--border); border-radius: inherit; position: relative; padding: var(--padding02); }
#greeting .diagram .circle div::before{ content: ""; display: block; background: #FFF; border-radius: inherit; padding-bottom: 100%; }
#greeting .diagram .circle i{ width: 100%; height: 55.901%; background: url("/img/sub/company/logo_symbol.svg") no-repeat center center / contain; position: absolute; top: 50%; transform: translateY(-50%); }

#greeting .diagram .value{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
#greeting .diagram .value .dl{ width: calc(((100% - var(--circle)) / 2) + var(--padding01)); position: absolute; opacity: 0; transition: opacity var(--aosT), transform var(--aosT); }
#greeting .diagram .value .dl i{ height: 1px; background: var(--mainColor); position: absolute; top: 50%; }
#greeting .diagram .value .dl i::before{ content: ""; width: 12px; height: 12px; background: var(--mainColor); border-radius: 50%; position: absolute; top: 50%; }
#greeting .diagram .value dl{ max-width: 100%; width: max-content; background: #FFF; border-radius: 24px; box-shadow: 20px 20px 20px rgba(var(--mainRGB), 0.08); padding: 40px; position: relative; }
#greeting .diagram .value dl dt{ font-size: 24px; font-weight: 500; color: var(--mainColor); margin-bottom: 16px; }
#greeting .diagram .value ul li{ font-size: 18px; font-weight: 300; color: #333; line-height: 1.7; padding-left: 12px; position: relative; }
#greeting .diagram .value ul li::before{ content: ""; width: 4px; height: 4px; background: #333; position: absolute; top: calc(1.7em / 2); left: 0; transform: translateY(-50%); }

#greeting .diagram .value .dl:nth-of-type(odd){ right: 0; transform: translateX(var(--aosM)); }
#greeting .diagram .value .dl:nth-of-type(odd) dl{ margin-left: auto; }
#greeting .diagram .value .dl:nth-of-type(odd) i::before{ left: 0; transform: translate(-50%, -50%); }

#greeting .diagram .value .dl:nth-of-type(even){ left: 0; transform: translateX(var(--aosP)); }
#greeting .diagram .value .dl:nth-of-type(even) i::before{ right: 0; transform: translate(50%, -50%); }

#greeting .diagram .value .dl01{ top: 0; }
#greeting .diagram .value .dl01 i{ width: 100%; right: calc((var(--circle) / 100) * 19); }
#greeting .diagram .value .dl02{ top: 36%; padding-left: 4%; }
#greeting .diagram .value .dl02 i{ width: 87%; left: calc((var(--circle) / 100) * 9); }
#greeting .diagram .value .dl03{ bottom: 4%; padding-right: 9%; }
#greeting .diagram .value .dl03 i{ width: 92%; right: calc((var(--circle) / 100) * 20); }

#greeting .diagram.aos-animate .circle{ opacity: 1; transform: scale(1); }
#greeting .diagram.aos-animate .dl{ opacity: 1; transform: translate(0, 0) !important; }


#greeting .dna{ overflow: hidden; }
#greeting .dna .grid-box{ display: grid; grid-template-columns: repeat(2, 50%); }
#greeting .dna .grid-box > *{ opacity: 0; transition: opacity var(--aosT), transform var(--aosT); }
#greeting .dna .grid-box.aos-animate > *{ opacity: 1; transform: translate(0, 0) !important; }
#greeting .dna .img{ background: #F5F5F5; text-align: center; padding: 40px; transform: translateX(var(--aosM)); }
#greeting .dna .img figure img{ box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.08); }
#greeting .dna .text{ display: flex; flex-direction: column; justify-content: center; padding-left: 120px; transform: translateX(var(--aosP)); }
#greeting .dna .text .column > *:not(:last-child){ margin-bottom: 60px; }
#greeting .dna .text .tit span{ font-family: var(--engFont); font-size: 16px; font-weight: 500; color: var(--mainColor); }
#greeting .dna .text .tit h3{ font-size: 36px; font-weight: 600; color: #111; line-height: 1.4; margin: 12px 0 20px; }
#greeting .dna .text .tit p{ font-size: 20px; font-weight: 300; color: #333; line-height: 1.7; }
#greeting .dna .text .logos ul{ display: grid; grid-template-columns: repeat(2, 50%); margin: -8px; }
#greeting .dna .text .logos ul li{ margin: 8px; }
#greeting .dna .text .logos ul li a{ display: block; } 
#greeting .dna .text .logos figure{ display: block; border: 2px solid #EEE; border-radius: 12px; text-align: center; }


#greeting .partner .logo-box ul{ display: grid; grid-template-columns: repeat(6, calc(100% / 6)); margin: -10px; }
#greeting .partner .logo-box ul li{ margin: 10px; transform: scale(.7); }
#greeting .partner .logo-box ul li.aos-animate{ transform: scale(1); }
#greeting .partner .logo-box figure{ display: block; background: #FFF; text-align: center; }

@media screen and (max-width: 1700px){
    #greeting .greeting .img{ width: 700px; }
    #greeting .greeting .text{ padding-inline: 90px var(--innerGap); }
    #greeting .greeting .text .column > *:not(:last-child){ margin-bottom: 30px; }
    #greeting .greeting .text .p-box > *:not(:last-child){ margin-bottom: 20px; }
    #greeting .greeting .text h3{ font-size: 32px; }
    #greeting .greeting .text p{ font-size: 19px; }
    #greeting .greeting .text .name{ font-size: 21px; }

    #greeting .diagram{
        --circle: 600px;
        --padding01: 30px;
        --padding02: 20px;
    }
    #greeting .diagram .value dl{ padding: 30px; }
    #greeting .diagram .value dl dt{ font-size: 22px; }
    #greeting .diagram .value .dl02{ padding-left: 0; }
    #greeting .diagram .value .dl02 i{ width: 100%; left: 0; }
    #greeting .diagram .value .dl03{ padding-right: 6%; }

    #greeting .dna .img{ padding: 35px; }
    #greeting .dna .text{ padding-left: 90px; }
    #greeting .dna .text .column > *:not(:last-child){ margin-bottom: 50px; }
    #greeting .dna .text .tit span{ font-size: 16px; }
    #greeting .dna .text .tit h3{ font-size: 32px; }
    #greeting .dna .text .tit p{ font-size: 19px; }
}

@media screen and (max-width: 1400px){
    #greeting .greeting .img{ width: 600px; }

    #greeting .diagram{
        --circle: 500px;
        --padding01: 24px;
        --padding02: 16px;
    }
    #greeting .diagram .value .dl i::before{ width: 9px; height: 9px; }
    #greeting .diagram .value .dl01 i{ right: calc((var(--circle) / 100) * 15); }
    #greeting .diagram .value .dl02{ top: 30%; }
    #greeting .diagram .value .dl03{ padding-right: 3%; }
    #greeting .diagram .value .dl03 i{ right: calc((var(--circle) / 100) * 17.5); }

    #greeting .partner .logo-box ul{ grid-template-columns: repeat(5, 20%); }
}

@media screen and (max-width: 1280px){
    #greeting .greeting .img{ width: 45%; }
    #greeting .greeting .text{ padding-left: 60px; }
    #greeting .greeting .text .column > *:not(:last-child){ margin-bottom: 25px; }
    #greeting .greeting .text .p-box > *:not(:last-child){ margin-bottom: 15px; }
    #greeting .greeting .text h3{ font-size: 28px; }
    #greeting .greeting .text p{ font-size: 18px; }
    #greeting .greeting .text .name{ font-size: 20px; }
    #greeting .greeting .text .name strong{ font-size: 5.5rem; }

    #greeting .diagram{
        --circle: 420px;
        --padding01: 20px;
        --padding02: 12px;
    }
    #greeting .diagram .value dl{ padding: 25px; }
    #greeting .diagram .value dl dt{ font-size: 20px; margin-bottom: 8px; }
    #greeting .diagram .value ul li{ font-size: 17px; }

    #greeting .dna .img{ padding: 30px; }
    #greeting .dna .text{ padding-left: 60px; }
    #greeting .dna .text .column > *:not(:last-child){ margin-bottom: 40px; }
    #greeting .dna .text .tit h3{ font-size: 28px; }
    #greeting .dna .text .tit p{ font-size: 18px; }
}

@media screen and (max-width: 1200px){
    #greeting .diagram{
        --circle: 270px;
        --padding01: 14px;
        --padding02: 14px;
    }
    #greeting .diagram .circle{ margin-bottom: 60px; transform: translateY(var(--aosP)); }
    #greeting .diagram .circle::before{ content: ""; width: 1px; height: calc(30px + var(--padding01)); border-right: 2px dashed var(--border); position: absolute; top: calc(100% - var(--padding01)); left: 50%; transform: translateX(-100%); }

    #greeting .diagram .value{ display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); position: static; margin: -10px; }
    #greeting .diagram .value .dl{ width: unset; margin: 10px; padding: 0 !important; position: relative; top: unset !important; right: unset !important; bottom: unset !important; left: unset !important; }
    #greeting .diagram .value .dl:nth-of-type(odd),
    #greeting .diagram .value .dl:nth-of-type(even){ transform: translateY(var(--aosP)); }
    #greeting .diagram .value .dl i{ width: calc(100% + 20px) !important; height: 30px; background: none; border: 2px dashed var(--border); border-bottom: none; top: 0 !important; left: unset !important; right: 50% !important; transform: translateY(-100%); }
    #greeting .diagram .value .dl i::before{ display: none; }
    #greeting .diagram .value dl{ width: 100%; height: 100%; }
    #greeting .diagram .value dl dt{ font-size: 19px; }

    #greeting .diagram .value .dl:not(:first-of-type) i{ border-left: none; }
    #greeting .diagram .value .dl:first-of-type i{ border-right: none; border-radius: 20px 0 0 0; left: 50% !important; right: unset !important; }
    #greeting .diagram .value .dl:last-of-type i{ border-radius: 0 20px 0 0; }
    #greeting .diagram .value .dl:nth-of-type(2) i{ border-top: none; }

    #greeting .partner .logo-box ul{ grid-template-columns: repeat(4, 25%); }
}

@media screen and (max-width: 1024px){
    #greeting .greeting .flex-box{ flex-direction: column; }
    #greeting .greeting .img{ width: 100%; }
    #greeting .greeting .text{ padding: 30px var(--innerGap) 0; }

    #greeting .dna .grid-box{ grid-template-columns: repeat(1, 100%); }
    #greeting .dna .img,
    #greeting .dna .text{ transform: translateY(var(--aosP)); }
    #greeting .dna .img figure img{ max-width: 60%; }
    #greeting .dna .text{ padding: 30px 0 0; }
}

@media screen and (max-width: 960px){
    #greeting .greeting .text h3{ font-size: 24px; }
    #greeting .greeting .text p{ font-size: 17px; }
    #greeting .greeting .text .name{ font-size: 18px; margin-left: -15px; }
    #greeting .greeting .text .name > *{ padding-left: 15px; }
    #greeting .greeting .text .name strong{ font-size: 6rem; }

    #greeting .diagram .circle{ margin-bottom: 30px; }
    #greeting .diagram .value{ grid-template-columns: repeat(1, 100%); }
    #greeting .diagram .value .dl i{ width: 1px !important; height: 20px !important; border-top: none !important; border-radius: 0 !important; }
    #greeting .diagram .value .dl:first-of-type i{ display: none; }
    
    #greeting .dna .text .column > *:not(:last-child){ margin-bottom: 30px; }
    #greeting .dna .text .tit span{ font-size: 15px; }
    #greeting .dna .text .tit h3{ font-size: 24px; margin: 9px 0 15px; }
    #greeting .dna .text .tit p{ font-size: 17px; }

    #greeting .partner .logo-box ul{ grid-template-columns: repeat(3, calc(100% / 3)); }
}

@media screen and (max-width: 715px){
    #greeting .dna .page-title br{ display: none; }
}

@media screen and (max-width: 640px){
    #greeting .partner .logo-box ul{ grid-template-columns: repeat(2, 50%); }
}


/* 회사소개 - 생산시설/연구소 */
#research .page-title{ padding-bottom: 100px; }
#research .sec-title{ padding-bottom: 60px; }
#research .line-section .defalut{ margin-bottom: 30px; }

#research .common-split{ --imgW: 50%; --padding: 120px; }
#research .common-split .blueBg{ padding: calc(var(--padding) / 2) var(--padding); }
#research .common-split h5{ margin-bottom: 32px; }
#research .common-split .dot-list li{ font-size: 20px; }

#research .gallery > *:not(:last-of-type){ margin-bottom: 20px; }
#research .gallery .column3,
#research .gallery .column4{ display: flex; flex-direction: column; }
#research .common-gallery{ --gap: 20px; }
#research .column12 .common-gallery{ grid-template-columns: repeat(12, calc(100% / 12)); }
#research .column12 .common-gallery > *{ grid-column: auto / span 3; }
#research .column12 .common-gallery > *.width4{ grid-column: auto / span 4; }

#research .facility-map{
    --width: 27.5%;
}
#research .facility-map{ background: url("/img/sub/company/research_facility_bg.jpg") no-repeat center center / cover; }
#research .facility-map .inner{ position: relative; text-align: center; }
#research .facility-map .inner > figure{ width: var(--width); margin: 0 auto; position: relative; }
#research .facility-map .inner > figure img{ width: 100%; height: 100%; }
#research .facility-map .svg{ width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: visible; }
#research .facility-map .svg .area{ cursor: pointer; pointer-events: all; }
#research .facility-map .svg .dot circle{ transform: scale(0); transform-box: content-box; transform-origin: center; animation: mapCircle 1.5s linear infinite; }
#research .facility-map .svg .txt rect{ transition: fill-opacity 0.4s; }
#research .facility-map .svg text{ font-family: var(--baseFont); font-size: 16px; font-weight: 400; fill: #FFF; }
#research .facility-map .svg .line{ opacity: 0; transition: opacity 0.4s; pointer-events: none; }
#research .facility-map ul li{ max-width: calc((100% - var(--width)) / 2); padding: 0 7%; position: absolute; opacity: 0; transition: opacity 0.4s; }
#research .facility-map ul li:nth-of-type(odd){ right: 0; padding-right: 0; }
#research .facility-map ul li:nth-of-type(even){ left: 0; padding-left: 0; }
#research .facility-map ul li:nth-of-type(1){ top: 17%; }
#research .facility-map ul li:nth-of-type(2){ top: 23%; }
#research .facility-map ul li:nth-of-type(3){ top: 26%; }
#research .facility-map .txt{ color: #FFF; margin-top: 24px; }
#research .facility-map .txt strong{ font-size: 22px; font-weight: 500; }
#research .facility-map .txt p{ font-size: 18px; font-weight: 300; margin-top: 8px; }
#research .facility-map .svg .on .txt rect{ fill-opacity: 1; }
#research .facility-map .svg .on .line,
#research .facility-map ul li.on{ opacity: 1; }

@media screen and (max-width: 1700px){
    #research .page-title{ padding-bottom: 70px; }
    #research .sec-title{ padding-bottom: 40px; }

    #research .common-split{ --padding: 90px; }
    #research .common-split h5{ margin-bottom: 24px; }
    #research .common-split .dot-list li{ font-size: 19px; }

    #research .facility-map .txt strong{ font-size: 21px; }
}

@media screen and (max-width: 1280px){
    #research .page-title{ padding-bottom: 40px; }
    #research .sec-title{ padding-bottom: 25px; }
    #research .line-section .defalut{ margin-bottom: 20px; }

    #research .common-split{ --padding: 60px; }
    #research .common-split h5{ margin-bottom: 16px; }
    #research .common-split .dot-list li{ font-size: 17px; }

    #research .gallery > *:not(:last-of-type){ margin-bottom: 14px; }
    #research .gallery .common-gallery{ --gap: 14px; }

    #research .facility-map .txt{ margin-top: 16px; }
    #research .facility-map .txt strong{ font-size: 20px; }
    #research .facility-map .txt p{ font-size: 17px; }
}

@media screen and (max-width: 1200px){
    #research .common-split{ --imgW: 100%; --padding: 25px; flex-direction: column; }
    #research .common-split .blueBg{ padding: 25px 30px; }  

    #research .column12 .common-gallery{ grid-template-columns: repeat(3, calc(100% / 3)); }
    #research .column12 .common-gallery > *{ grid-column: unset !important; }

    #research .facility-map{ background: none; }
    #research .facility-map .inner > figure{ width: 100%; margin-bottom: 30px; }
    #research .facility-map .svg .line{ display: none; }
    #research .facility-map ul{ display: grid; grid-template-columns: repeat(3, calc(100% / 3)); margin: -15px -7px; }
    #research .facility-map ul li{ max-width: 100%; position: static; opacity: 1; padding: 0; margin: 15px 7px; }
    #research .facility-map .txt{ color: #333; }
    #research .facility-map .txt strong{ font-weight: 600; }
    #research .facility-map .txt p{ font-weight: 300; margin-top: 4px; }
}

@media screen and (max-width: 960px){
    #research .line-section .defalut{ margin-bottom: 15px; }

    #research .facility-map .txt strong{ font-size: 18px; }
    #research .facility-map .txt p{ font-size: 16px; }

    #research .column3 .common-gallery, 
    #research .column4 .common-gallery{ grid-template-columns: repeat(2, 50%); }
}

@media screen and (max-width: 768px){
    #research .column12 .common-gallery{ grid-template-columns: repeat(2, 50%); }
    #research .column2 .common-gallery{ grid-template-columns: repeat(1, 100%); }

    #research .facility-map ul{ grid-template-columns: repeat(2, 50%); }
}

@media screen and (max-width: 640px){
    #research .page-title br.m{ display: block; }
    #research .sec-title br{ display: none; }
}


/* 회사소개 - 영업망 고객서비스 */
#network .page-title{ padding-bottom: 100px; }
#network .sec-title{ padding-bottom: 60px; }
#network .common-feature{ padding: 60px 160px; clip-path: inset(0 50% 0 50% round 20px); -webkit-clip-path: inset(0 50% 0 50% round 20px); transition: clip-path 1s; }
#network .common-feature.aos-animate{ clip-path: inset(0 0 0 0 round 20px); -webkit-clip-path: inset(0 0 0 0 round 20px); }

#network .as .blueBg{ display: flex; }
#network .as .blueBg + .blueBg{ margin-top: 40px; }
#network .as .left{ width: 600px; flex-shrink: 0; }
#network .as .left figure{ display: block; padding: 40px 59px; text-align: center; position: relative; }
#network .as .left figure figcaption{ min-width: 240px; background: var(--mainColor); font-size: 20px; font-weight: 400; color: #FFF; padding: 17px; position: absolute; top: 0; left: 0; }
#network .as .right{ flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 140px 60px; padding-left: 0; }
#network .as .text{ flex: 1 0 auto; margin-bottom: 60px; }
#network .as .text .sec-title{ text-align: left; padding-bottom: 40px; }
#network .as .text .defalut{ color: #555; }
#network .as .text .defalut > *:not(:last-child){ margin-bottom: 16px; }
#network .as .text .check-list li{ font-size: 20px; font-weight: 500; color: #555; }
#network .as .table{ max-width: 900px; }
#network .as .table .barTit{ font-size: 18px; margin-bottom: 16px; }
#network .as .table .barTit::before{ width: 3px; height: 16px; }
#network .as .table .blue-table{ --paddingTB: 10px; --paddingLR: 5px; --lineHeight: 1.7em; }
#network .as .table .blue-table th,
#network .as .table .blue-table td{ border: none !important; }

#network .service .common-feature{ background: url("/img/sub/company/network_feature01.jpg") no-repeat center center / cover; }
#network .service .common-gallery,
#network .service .common-grid{ --gap: 32px; grid-template-columns: repeat(3, calc(100% / 3)); }
#network .service .common-feature h5{ line-height: 1.4; }
#network .service .common-feature h5 em{ color: #08EAFF; line-height: inherit; }
#network .service .common-feature p{ font-size: 20px; }
#network .service .common-feature p strong{ font-weight: 400; }
#network .service .common-gallery{ margin-block: calc(var(--gap) * -1); }
#network .service .common-gallery > *{ margin-block: var(--gap); }
#network .service .common-gallery .txt{ text-align: center; margin-top: 20px; }
#network .service .common-gallery .txt > *{ display: block; }
#network .service .common-gallery .txt span{ font-size: 20px; font-weight: 500; color: #555; line-height: 1.7; margin-bottom: 8px; }
#network .service .common-gallery .txt strong{ font-size: 4rem; font-weight: 700; color: #333; }
#network .service .colorBg{ line-height: 1.7; text-align: center; padding: 40px; }
#network .service .colorBg *{ line-height: inherit; }
#network .service .colorBg p{ font-size: 22px; font-weight: 400; margin-bottom: 4px; }
#network .service .colorBg span{ font-size: 16px; font-weight: 200; } 
#network .service .common-grid{ text-align: left; }
#network .service .common-grid .item{ min-height: 382px; }
#network .service .common-grid dl{ margin-top: 24px; }
#network .service .common-grid dl dt{ font-size: 22px; font-weight: 600; color: #111; line-height: 1.4; margin-bottom: 12px; }
#network .service .common-grid .dot-list li{ font-size: 18px; }
#network .service .common-grid .hyphen{ margin-top: 4px; }
#network .service .common-grid .hyphen p{ font-size: 16px; font-weight: 300; color: #555; line-height: 1.7em; padding-left: 12px; position: relative; }
#network .service .common-grid .hyphen p::before{ content: "-"; position: absolute; top: 0; left: 0; }

#network .program .common-feature .flex{ display: flex; align-items: center; }
#network .program .common-feature .left{ flex: 1 1 auto; min-width: 0; }
#network .program .common-feature .right{ flex-shrink: 0; margin-left: 30px; }
#network .program .common-feature .txt{ text-align: left; }
#network .program .common-feature .txt h5{ line-height: 1.4; }
#network .program .tour .common-grid,
#network .program .tour .common-gallery{ --gap: 20px; }
#network .program .tour .common-grid .whiteBg{ display: flex; flex-direction: column; padding: 80px 60px; }
#network .program .tour .common-grid .tit{ flex: 1 0 auto; margin-bottom: 40px; }
#network .program .tour .common-grid .tit strong{ display: block; font-size: 32px; font-weight: 600; color: #111; line-height: 1.4; margin-bottom: 8px; }
#network .program .tour .common-grid .tit p{ font-size: 18px; font-weight: 300; color: #333; line-height: 1.7; }
#network .program .tour .common-feature{ background: #DBEFFB; }
#network .program .tour .common-feature .txt h5{ font-weight: 600; color: #111; }
#network .program .tour .common-feature .txt h5 em{ color: var(--mainColor); }
#network .program .field h4{ font-size: 32px; font-weight: 600; color: #111; line-height: 1.4; text-align: center; margin-bottom: 40px; }
#network .program .field .sec > *{ display: flex; flex-direction: column; }
#network .program .field .sec > *:not(:last-of-type){ margin-bottom: 40px; }
#network .program .field .common-grid > *{ padding: 48px; }
#network .program .field .common-grid dl{ display: flex; flex-direction: column; height: 100%; color: #333; }
#network .program .field .common-grid dl dt{ font-size: 22px; font-weight: 500; line-height: 1.4; margin-bottom: 16px; }
#network .program .field .common-grid dl dt::before{ content: ""; display: block; width: 24px; height: 24px; background: var(--mainColor) url("/img/sub/icon_list_check.svg") no-repeat center center / contain; border-radius: 50%; margin: 0 auto 8px; }
#network .program .field .common-grid dl dd{ flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; font-size: 18px; font-weight: 300; line-height: 1.7; }
#network .program .field .common-gallery figure figcaption{ font-size: 18px; padding: 12px 24px; }
#network .program .field .step .common-gallery{ --position: 0; grid-template-columns: repeat(3, calc(100% / 3)); }
#network .program .field .step .common-gallery figure{ margin-top: 0; }
#network .program .field .step .common-gallery figure figcaption{ border-radius: unset; }
#network .program .field .column2 .figure{ display: grid; grid-template-columns: repeat(2, 50%); }
#network .program .field .column2 .common-gallery figure figcaption{ min-width: 160px; text-align: center; top: unset; left: 50%; bottom: 32px; transform: translateX(-50%); }
#network .program .field .common-feature{ background: url("/img/sub/company/network_feature03.jpg") no-repeat center center / cover; }
#network .program .field .common-feature .right{ display: flex; }
#network .program .field .common-feature .right > *:not(:last-of-type){ margin-right: 40px; }

@media screen and (max-width: 1700px){
    #network .page-title{ padding-bottom: 70px; }
    #network .sec-title{ padding-bottom: 40px; }
    #network .common-feature{ padding: 40px 120px; }

    #network .as .left{ width: 500px; } 
    #network .as .left figure{ padding: 30px 45px; padding-left: 0; }
    #network .as .left figure figcaption{ min-width: 210px; font-size: 19px; padding: 14px; }
    #network .as .right{ padding: 120px 45px; padding-left: 0; }
    #network .as .text .sec-title{ padding-bottom: 30px; }
    #network .as .text .check-list li{ font-size: 19px; }
    
    #network .service .common-feature p{ font-size: 19px; }
    #network .service .common-gallery,
    #network .service .common-grid{ --gap: 24px; }  
    #network .service .common-gallery .txt{ margin-top: 16px; }
    #network .service .common-gallery .txt span{ font-size: 19px; }
    #network .service .colorBg{ padding: 30px; }
    #network .service .colorBg p{ font-size: 21px; }
    #network .service .common-grid dl dt{ font-size: 21px; }
    
    #network .program .common-feature .right img{ height: 200px; }
    #network .program .tour .common-grid .whiteBg{ padding: 60px 40px; }
    #network .program .tour .common-grid .tit{ margin-bottom: 30px; }
    #network .program .tour .common-grid .tit strong{ font-size: 28px; }
    #network .program .field h4{ font-size: 28px; margin-bottom: 30px; }
    #network .program .field .common-grid > *{ padding: 40px; } 
    #network .program .field .common-grid dl dt{ font-size: 21px; margin-bottom: 12px; } 
    #network .program .field .common-gallery figure figcaption{ font-size: 17px; padding: 10px 20px; } 
    #network .program .field .column2 .common-gallery figure figcaption{ min-width: 140px; bottom: 24px; }
}

@media screen and (max-width: 1550px){
    #network .program .field .common-grid br{ display: none; }
}

@media screen and (max-width: 1500px){
    #network .as .left{ width: 450px; } 
}

@media screen and (max-width: 1280px){
    #network .page-title{ padding-bottom: 40px; }
    #network .sec-title{ padding-bottom: 25px; }
    #network .common-feature{ padding: 30px 80px; }

    #network .as .left{ width: 400px; } 
    #network .as .left figure{ padding-right: 25px; }
    #network .as .left figure figcaption{ min-width: 180px; font-size: 17px; padding: 11px; }
    #network .as .right{ padding: 80px 25px; padding-left: 0; }
    #network .as .text .sec-title{ padding-bottom: 20px; }
    #network .as .text .defalut > *:not(:last-child){ margin-bottom: 12px; }
    #network .as .text .check-list li{ font-size: 18px; }

    #network .service .common-feature p{ font-size: 18px; }
    #network .service .common-gallery,
    #network .service .common-grid{ --gap: 16px; }  
    #network .service .common-gallery .txt{ margin-top: 12px; }
    #network .service .common-gallery .txt span{ font-size: 18px; margin-bottom: 4px; }  
    #network .service .common-gallery .txt strong{ font-size: 3.7rem; }  
    #network .service .colorBg{ padding: 20px; }
    #network .service .colorBg p{ font-size: 20px; }
    #network .service .common-grid .item{ min-height: 350px; }
    #network .service .common-grid .icon img{ max-height: 50px; }
    #network .service .common-grid dl{ margin-top: 16px; }
    #network .service .common-grid dl dt{ font-size: 20px; margin-bottom: 9px; }
    #network .service .common-grid .dot-list li{ font-size: 17px; }

    #network .program .common-feature .right img{ height: 170px; }
    #network .program .tour .common-grid .whiteBg{ padding: 45px 30px; }
    #network .program .tour .common-grid .tit{ margin-bottom: 25px; }
    #network .program .tour .common-grid .tit strong{ font-size: 24px; }
    #network .program .tour .common-grid .tit p{ font-size: 17px; }
    #network .program .field h4{ font-size: 24px; margin-bottom: 20px; }
    #network .program .field .common-grid > *{ padding: 30px; } 
    #network .program .field .common-grid dl dt{ font-size: 19px; margin-bottom: 8px; }
    #network .program .field .common-grid dl dd{ font-size: 17px; } 
    #network .program .field .common-gallery figure figcaption{ font-size: 16px; padding: 8px 16px; } 
    #network .program .field .common-feature .right > *:not(:last-of-type){ margin-right: 25px; }
}

@media screen and (max-width: 1200px){
    #network .as .blueBg{ flex-direction: column; }

    #network .as .blueBg .left{ width: 100%; }
    #network .as .blueBg .left figure{ padding-bottom: 0; }
    #network .as .blueBg .right{ padding: 30px 25px; }
    #network .as .text{ margin-bottom: 30px; }
    #network .as .table{ max-width: 100%; }

    #network .program .tour .common-grid{ grid-template-columns: repeat(1, 100%); }
    #network .program .tour .common-grid .whiteBg{ padding-block: 30px; }
}

@media screen and (max-width: 1024px){
    #network .program .field .common-grid,
    #network .program .field .step .common-gallery,
    #network .program .field .column2 .common-gallery{ grid-template-columns: repeat(1, 100%); }
    #network .program .field .step .common-gallery figure::after{ top: calc(100% + (var(--gap) / 2)); right: 50%; transform: translate(50%, -50%) rotate(90deg); }
}

@media screen and (max-width: 960px){
    #network .common-feature{ padding-inline: 40px; }

    #network .as .text .sec-title{ padding-bottom: 10px; }
    #network .as .text .check-list li{ font-size: 17px; }
    #network .as .table .responsive{ --responsiveW: 120px; }
    #network .as .table .responsive, 
    #network .as .table .responsive tbody{ display: block; }
    #network .as .table .responsive colgroup,
    #network .as .table .responsive thead{ display: none; }
    #network .as .table .responsive{ min-width: unset !important; }
    #network .as .table .responsive br{ display: none; }
    #network .as .table .responsive tr{ width: 100%; display: flex; flex-direction: column; }
    #network .as .table .responsive tr > *{ border-right: none; padding-left: calc(var(--responsiveW) + var(--paddingLR)); position: relative; }
    #network .as .table .responsive tr > *:not(:last-child){ border-bottom: 1px solid #DDD !important; }
    #network .as .table .responsive tr > *::before{ content: attr(data-th); }
    #network .as .table .responsive th span{ min-height: unset; }

    #network .service .common-feature p{ font-size: 17px; }  
    #network .service .common-gallery,
    #network .service .common-grid{ grid-template-columns: repeat(2, 50%); }
    #network .service .common-gallery .txt{ margin-top: 9px; }
    #network .service .common-gallery .txt span{ font-size: 17px; }  
    #network .service .colorBg p{ font-size: 18px; }
    #network .service .common-grid .item{ min-height: 320px; }
    #network .service .common-grid dl dt{ font-size: 19px; }
    
    #network .program .tour .common-grid .tit strong{ font-size: 21px; margin-bottom: 4px; }
    #network .program .field .common-grid > *{ padding: 20px 25px; }
    #network .program .field .common-grid br{ display: block; }
    #network .program .field .common-feature br{ display: none; }
}

@media screen and (max-width: 768px){
    #network .service .common-grid{ grid-template-columns: repeat(1, 100%); }
    #network .service .common-grid .item{ min-height: unset; }

    #network .program .common-feature .flex{ flex-direction: column; text-align: center; }
    #network .program .common-feature .left{ width: 100%; }
    #network .program .common-feature .right{ width: 100%; margin: 20px 0 0; }
    #network .program .common-feature .right img{ height: 140px; }
    #network .program .tour .common-grid .whiteBg{ padding: 30px 20px 20px; }
    #network .program .tour .common-grid .tit{ padding: 0 10px; }
    #network .program .field .column2 .common-gallery figure figcaption{ bottom: 16px; }
    #network .program .field .common-feature br{ display: block; }
    #network .program .field .common-feature .right{ justify-content: center; }
}

@media screen and (max-width: 640px){
    #network .service .common-feature br.m,
    #network .service .colorBg br.m{ display: block; }

    #network .program .page-title br.m{ display: block; }
    #network .program .tour .common-gallery{ grid-template-columns: repeat(1, 100%); }
}


/* 회사소개 - 연혁 (공통) */
#history{ overflow: hidden; }


/* 회사소개 - 연혁 - 회사연혁 */
#history.company{ overflow: hidden; }
#history.company .history-box .left h4{ font-family: var(--engFont); font-size: 7.2rem; font-weight: 700; color: #111; }
#history.company .history-box .gallery{ max-width: 700px; margin-top: 60px; }
#history.company .history-box .gallery ul{ grid-template-columns: repeat(4, 25%); }
#history.company .history-box .gallery ul li{ max-width: 160px; }

@media screen and (max-width: 1700px){
    #history.company .history-box .gallery{ margin-top: 40px; }
}

@media screen and (max-width: 1280px){
    #history.company .history-box .left h4{ font-size: 6.3rem; }  
    #history.company .history-box .gallery{ margin-top: 30px; }
}

@media screen and (max-width: 1200px){
    #history.company .history-box .left{ background: unset; padding-left: calc((var(--dotT) + var(--dotS01) + var(--dotS02)) + 20px); padding-bottom: 25px; }
    #history.company .history-box .right ol > li i{ top: calc(var(--dotT) + 2px); }
}

@media screen and (max-width: 960px){
    #history.company .history-box .left h4{ font-size: 5.7rem; } 
    #history.company .history-box .right ol > li i{ top: var(--dotT); }
    #history.company .history-box .gallery{ margin-top: 20px; }
}

@media screen and (max-width: 640px){
    #history.company .history-box .gallery ul{ grid-template-columns: repeat(2, 50%); }
    #history.company .history-box .gallery ul li{ max-width: 100%; }
}


/* 회사소개 - R&D - R&D */
#history.rnd .history-box .left{ text-align: center; padding-top: var(--gapTB); }
#history.rnd .history-box .left h4{ background: var(--mainColor); font-size: 20px; font-weight: 500; color: #FFF; padding: 12px; margin-bottom: 10px; }
#history.rnd .history-box .column > *:not(:last-child){ margin-bottom: 60px; }
#history.rnd .history-box .gallery ul{ grid-template-columns: repeat(3, calc(100% / 3)); }
#history.rnd .history-box .gallery figure{ aspect-ratio: 1 / 1.3329; }
#history.rnd .history-box .logo ul{ display: flex; flex-wrap: wrap; margin-left: -15px; margin-bottom: -15px; }
#history.rnd .history-box .logo ul li{ margin-left: 15px; margin-bottom: 15px; }
#history.rnd .history-box .box{ background: rgba(var(--mainRGB), 0.1); font-size: 18px; font-weight: 600; color: var(--mainColor); padding: 27px; }

@media screen and (max-width: 1700px){
    #history.rnd .history-box .left h4{ font-size: 19px; }
    #history.rnd .history-box .box{ font-size: 17px; padding: 22px; }
    #history.rnd .history-box .column > *:not(:last-child){ margin-bottom: 50px; }
}

@media screen and (max-width: 1380px){
    #history.rnd .history-box .box br{ display: none; }
}

@media screen and (max-width: 1280px){
    #history.rnd .history-box .left h4{ font-size: 18px; }
    #history.rnd .history-box .column > *:not(:last-child){ margin-bottom: 40px; }
    #history.rnd .history-box .box{ font-size: 16px; padding: 17px; }
}

@media screen and (max-width: 1200px){
    #history.rnd .history-box .left{ padding: 0 0 60px; }
}

@media screen and (max-width: 640px){
    #history.rnd .history-box .gallery ul{ grid-template-columns: repeat(2, 50%); }
}


/* 회사소개 - R&D - 특허 및 인증 */
@media screen and (max-width: 1000px){
    #certify .sec-title br{ display: none; }
}


/* 회사소개 - 주요활동 - 정책제안 및 세미나 */
#history.seminar{ padding-bottom: 0; }
#history.seminar .cert .common-gallery{ grid-template-columns: repeat(4, 25%); }
#history.seminar .blue-table colgroup col.th{ width: 240px; }
#history.seminar .blueBg .blue-table.border{ border-top: 1px solid var(--mainColor); }
#history.seminar .blueBg .blue-table.border table{ border-top: -1px; }
#history.seminar .blueBg .blue-table tbody th{ background: #E9F1F9; }
#history.seminar .blueBg .barTit{ margin-bottom: 20px; }

@media screen and (max-width: 1700px){
    #history.seminar .blue-table colgroup col.th{ width: 210px; }
    #history.seminar .blueBg .barTit{ margin-bottom: 16px; }
}

@media screen and (max-width: 1280px){
    #history.seminar .blue-table colgroup col.th{ width: 180px; }
    #history.seminar .blueBg .barTit{ margin-bottom: 12px; }
}

@media screen and (max-width: 960px){
    #history.seminar .cert .common-gallery{ grid-template-columns: repeat(3, calc(100% / 3)); }
    #history.seminar .column2 .common-gallery{ grid-template-columns: repeat(1, 100%); }

    #history.seminar .blue-table colgroup col.th{ width: 125px; }
    #history.seminar .blue-table .responsive{
        --responsiveW: 125px;
        --responsiveGap: 20px;
    }
    #history.seminar .blue-table .responsive, 
    #history.seminar .blue-table .responsive tbody{ display: block; }
    #history.seminar .blue-table .responsive colgroup,
    #history.seminar .blue-table .responsive thead{ display: none; }
    #history.seminar .blue-table .responsive{ min-width: unset !important; }
    #history.seminar .blue-table .responsive br{ display: none; }
    #history.seminar .blue-table .responsive tr{ width: 100%; display: flex; flex-direction: column; }
    #history.seminar .blue-table .responsive tr:not(:last-of-type){ margin-bottom: var(--responsiveGap); }
    #history.seminar .blue-table .responsive tr > *{ border-right: none; padding-left: calc(var(--responsiveW) + var(--paddingLR)); position: relative; }
    #history.seminar .blue-table .responsive tr > *:not(:last-child){ margin-bottom: -1px; }
    #history.seminar .blue-table .responsive tr > *::before{ content: attr(data-th); }
    #history.seminar .blue-table .responsive th span{ min-height: unset; }
}

@media screen and (max-width: 640px){
    #history.seminar .sec-title br.m{ display: block; }
    #history.seminar .cert .common-gallery{ grid-template-columns: repeat(2, 50%); }
    #history.seminar .blue-table colgroup col.th{ width: 120px; }
}


/* 회사소개 - 주요활동 - 대외활동 */
@media screen and (max-width: 740px){
    #history.external .sec-title br.m{ display: block; }
}


/* 회사소개 - 언론보도 */
#history.media{ padding-bottom: 0; }
#history.media .page-title{ padding-bottom: 100px; }

#history.media .sec01 .history-box.basics .gallery figure{ aspect-ratio: 360 / 190; }
#history.media .sec02 .history-box.basics .gallery figure{ aspect-ratio: 360 / 470; }

@media screen and (max-width: 1700px){
    #history.media .page-title{ padding-bottom: 70px; }
}

@media screen and (max-width: 1280px){
    #history.media .page-title{ padding-bottom: 40px; }
}

@media screen and (max-width: 700px){
    #history.media .sec-title br{ display: none; }
}


/* 회사소개 - 찾아오시는길 */
#location .map{ padding-bottom: 60px; }
#location .map .flex-box{ display: flex; }
#location .map .iframe{ flex: 1 1 auto; display: flex; min-width: 0; }
#location .map .iframe iframe{ width: 100%; height: 100%; aspect-ratio: unset !important; }
#location .map address{ width: 640px; flex-shrink: 0; background: var(--mainColor); color: #FFF; padding: 108px 100px; }
#location .map address > *:not(:last-child){ margin-bottom: 40px; }
#location .map address h3{ font-size: 20px; font-weight: 500; line-height: 1.4; padding-bottom: 17px; position: relative; }
#location .map address h3::after{ content: ""; width: 40px; height: 1px; background: #FFF; position: absolute; bottom: 0; left: 0; }
#location .map address .dl > *:not(:last-child){ margin-bottom: 12px; }
#location .map address .dl dl{ display: flex; font-size: 18px; line-height: 1.6; }
#location .map address .dl dl *{ line-height: inherit; }
#location .map address .dl dl dt{ flex-shrink: 0; width: 120px; font-weight: 400; padding-right: 40px; }
#location .map address .dl dl dd{ flex: 1 1 auto; min-width: 0; font-weight: 200; }

#location .way .grid-box{ display: grid; grid-template-columns: repeat(2, 50%); margin: -10px; }
#location .way .grid-box > *{ border: 1px solid #DDD; padding: 60px; margin: 10px; }
#location .way dl dt{ border-bottom: 1px solid #D9D9D9; font-size: 24px; font-weight: 600; color: #888; line-height: 1.4; padding-bottom: 24px; padding-left: 46px; margin-bottom: 36px; position: relative; }
#location .way dl dt::before{ content: ""; width: 36px; height: 36px; background-repeat: no-repeat; background-position: center center; background-size: contain; position: absolute; top: calc(1.4em / 2); left: 0; transform: translateY(-50%); }
#location .way dl dd:not(:last-of-type){ margin-bottom: 24px; }
#location .way dl dd,
#location .way dl dd *{ font-size: 20px; font-weight: 300; color: #333; line-height: 1.6; }
#location .way dl dd .dot-list li:not(:last-of-type){ margin-bottom: 0; }
#location .way dl dd .dot-list li::before{ top: calc(1.6em / 2); }

#location .way dl.car dt::before{ background-image: url("/img/sub/company/icon_location_car.svg"); }
#location .way dl.car dd{ display: flex; }
#location .way dl.car dd span{ flex-shrink: 0; display: block; width: 103px; font-weight: 500; color: var(--mainColor); }
#location .way dl.car dd p{ flex: 1 1 auto; min-width: 0; }

#location .way dl.public dt::before{ background-image: url("/img/sub/company/icon_location_public.svg"); }

@media screen and (max-width: 1700px){
    #location .map address{ width: 580px; padding: 80px 70px; }
    #location .map address figure img{ max-height: 55px; }
    #location .map address .dl dl dt{ width: 100px; padding-right: 30px; }

    #location .way .grid-box > *{ padding: 40px; }
    #location .way dl dt{ font-size: 22px; padding-bottom: 16px; margin-bottom: 24px; }
    #location .way dl dd,
    #location .way dl dd *{ font-size: 19px; }
}

@media screen and (max-width: 1280px){
    #location .map address{ width: 480px; padding: 50px 40px; }
    #location .map address figure img{ max-height: 50px; }
    #location .map address h3{ font-size: 19px; padding-bottom: 12px; }
    #location .map address > *:not(:last-child){ margin-bottom: 30px; }
    #location .map address .dl > *:not(:last-child){ margin-bottom: 8px; }
    #location .map address .dl dl{ font-size: 17px; }
    #location .map address .dl dl dt{ width: 85px; padding-right: 20px; }

    #location .way .grid-box > *{ padding: 30px; }
    #location .way dl dt{ font-size: 20px; padding-left: 42px; padding-bottom: 12px; margin-bottom: 20px; }
    #location .way dl dt::before{ width: 32px; height: 32px; }
    #location .way dl dd,
    #location .way dl dd *{ font-size: 18px; }
    #location .way dl.car dd span{ width: 90px; }
}

@media screen and (max-width: 1024px){
    #location .map .flex-box{ flex-direction: column; }
    #location .map .iframe iframe{ aspect-ratio: 1 / 0.8 !important; }
    #location .map address{ width: 100%; padding: 25px; }  
    
    #location .way .grid-box{ grid-template-columns: repeat(1, 100%); }
}

@media screen and (max-width: 960px){
    #location .way dl dt{ font-size: 19px; padding-left: 38px; }
    #location .way dl dt::before{ width: 28px; height: 28px; }
    #location .way dl dd,
    #location .way dl dd *{ font-size: 17px; }
}

@media screen and (max-width: 640px){
    #location .way dl.car dd{ display: block; }
    #location .way dl.car dd span{ width: 100%; margin-bottom: 4px; }
}


.img_pc_small {
   max-width: 55%;
}

@media screen and (max-width: 640px){
.img_pc_small {
   max-width: 100%;
}
}