/* 메인 반응형은 main.css */

/* 360 ~ 768 */
@media (max-width:768px) {
    .ver-pc { display: none; }
    .ver-mo { display: block; }

    input[type=text], input[type=email], input[type=password] { width: 100%; padding: 0 12px; font-size: 16px; }
    input[type=radio], input[type=checkbox] { width: 16px; height: 16px; }
    textarea { padding: 12px; font-size: 16px; }
    .custom-select .default_option,
    .custom-select .select_ul li,
    .search-input input { font-size: 16px; }
    .tbl table th > div,
    .tbl table td > div { padding: 16px 10px; font-size: 16px; }
    .tbl table td.list-prev:before,
    .tbl table td.list-next:before { top: 18px; left: 15%; }
    .tbl table table { table-layout: auto; }
    col.ver-mo { display: table-column; }
    .tbl table td .file-wrap { flex-direction: column; }
    .tbl table td .file-wrap .file-add { width: 100%; }

    /* 레이어 팝업 공통 */
    .pop-layer { width: 90% !important; }
    .pop-layer .pop-container { max-height: 70vh; }
    .pop-layer .pop-tit { min-height: 26px; }
    .pop-layer .pop-tit span { font-size: 26px; line-height: 39px; }
    .pop-layer .p-40,
    .pop-layer .px-40 { padding: 24px; }
    .pop-layer .pt-0 { padding-top: 0; }
    .pop-layer .tbl-title { gap: 0; }
    .pop-layer .tbl-title strong { margin-right: 10px; }
    .pop-layer .tbl table tr { display: grid; gap: 10px; }
    .pop-layer .tbl table th { border: 0; }
    .pop-layer .tbl table th div,
    .pop-layer .tbl table td div { font-size: 16px; line-height: 24px; }
    .pop-layer .tbl table th > div { padding: 20px 0 0; }
    .pop-layer .tbl table td > div { padding: 0 0 20px; }
    .pop-layer .tbl table tfoot td > div { padding-top: 20px; }
    .pop-layer .tbl table tfoot td > div label { font-size: 16px; line-height: 24px; }
    .pop-layer .txt-l > p { padding-left: 10px; text-indent: -10px; }
    .pop-layer .h300 { height: 150px; }


    #header { height: 60px; }
    #header .hdwrap { padding: 22px 18px; }
    #header .hdwrap img { width: 144px; }
    #header .hdwrap .gnb { display: none; }
    #header .navbar { position: absolute; top: 0; left: 0; width: 100%; }
    #header .navbar .nav-container { display: block; position: relative; height: 60px; }
    #header .navbar .nav-container .checkbox { z-index: 2; position: absolute; top: 0; right: 0; display: block; width: 60px; height: 60px; opacity: 0; cursor: pointer; }
    #header .navbar .nav-container .hamburger-lines { z-index: 1; position: absolute; top: 24px; right: 18px; display: flex; flex-direction: column; justify-content: space-between; width: 18px; height: 14px; box-sizing: border-box; }
    #header .navbar .nav-container .hamburger-lines .line { display: block; width: 100%; height: 2px; background: #000; box-sizing: border-box; }
    #header .navbar .nav-container .hamburger-lines .line1 { transform-origin: 0% 0%; transition: transform 0.4s ease-in-out; }
    #header .navbar .nav-container .hamburger-lines .line2 { transition: transform 0.2s ease-in-out; }
    #header .navbar .nav-container .hamburger-lines .line3 { transform-origin: 0% 100%; transition: transform 0.4s ease-in-out; }
    #header .navbar .nav-container .menu-items { display: flex; flex-direction: column; gap: 12px; width: 100%; height: 100vh; padding: 84px 18px 24px; background: #fff; transform: translate(-150%); transition: transform 0.5s ease-in-out; box-sizing: border-box; }
    #header .navbar .nav-container .menu-items li dl { display: flex; flex-direction: column; gap: 12px; }
    #header .navbar .nav-container .menu-items li dl dt,
    #header .navbar .nav-container .menu-items li dl dt a { font-weight: 700; font-size: 22px; line-height: 33px; }
    #header .navbar .nav-container .menu-items li dl dt ~ dd { display: none; }
    #header .navbar .nav-container .menu-items li dl dt.on ~ dd { display: block; }
    #header .navbar .nav-container .menu-items li dl dt a svg { position: absolute; top: 2px; left: 48px; width: 18px; }
    #header .navbar .nav-container .menu-items li dl dt.submenu:after { content: ""; position: absolute; top: 10px; right: 6px; width: 12px; height: 12px; background: #000; clip-path: polygon(8% 17%, 0% 25%, 50% 84%, 100% 25%, 92% 17%, 50% 65%); }
    #header .navbar .nav-container .menu-items li dl dt.on:after { transform: rotate(180deg); }
    #header .navbar .nav-container .menu-items li dl dd a { padding-left: 10px; font-size: 16px; line-height: 24px; color: #333; }
    #header .navbar .nav-container .menu-items li:last-child { display: flex; gap: 20px; padding-top: 15px; border-top: 1px solid #eee; }
    #header .navbar .nav-container .menu-items li:last-child a { font-weight: 700; font-size: 18px; line-height: 27px; color: #ccc; }
    #header .navbar .nav-container .menu-items li:last-child a.now { color: #000; border-bottom: 2px solid #000; }
    #header .navbar .nav-container input[type="checkbox"]:checked ~ .menu-items { transform: translateX(0); }
    #header .navbar .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 { transform: rotate(45deg); }
    #header .navbar .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 { transform: scaleY(0); }
    #header .navbar .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 { transform: rotate(-45deg); }
    #footer .ftwrap { display: block; height: 100%; padding: 24px 18px; text-align: center; }
    #footer .ftwrap .txt { margin-bottom: 20px; }
    #footer .ftwrap .link .menulist,
    #footer .ftwrap .link .menu { width: 100%; }
    #footer .ftwrap .link .menulist { height: 48px; }
    #footer .ftwrap .link .menu { bottom: 54px; }
    #scroll-top button { width: 50px; height: 50px; }
    #wrapper { min-width: auto; }
    #container { padding: 0 18px; }
    #container > .mt-120 { margin-top: 60px; }
    #container > .pt-120 { padding-top: 60px; }
    #container > .py-80 { padding: 40px 0; }
    .inner { width: 100%; }
    .px-18 { padding-left: 18px; padding-right: 18px; }

    /* .page-title { padding-bottom: 20px; } */
    .tbl-title { flex-wrap: wrap; }
    .tit-wrap { gap: 0; text-align: center; }
    .tit-wrap .text-24 { font-size: 18px; }
    .tit-wrap .text-48 { font-size: 32px; }
    .tit-wrap .text-64 { font-size: 36px; }
    .tit-wrap .leading-36 { line-height: 27px; }
    .tit-wrap .leading-72 { line-height: 48px; }
    .tit-wrap .leading-96 { line-height: 54px; }
    .sub-menu { gap: 20px; flex-wrap: wrap; padding: 20px 20px 0; }
    .sub-menu li a { display: inline-block; font-size: 18px; line-height: 27px; }
    .sub-menu li:before { display: none; }
    .sub-banner { height: 160px; font-size: 18px; line-height: 25px; background-size: cover !important; }

    /* 회사소개 */
    #history .inner { padding: 40px 18px; }
    #history .tit-wrap { position: static; float: none; margin-right: 0; margin-bottom: 80px; }
    #history .tit-wrap p { margin-top: 10px; }
    #history .tit-wrap + div { width: 100%; }
    #history .thumbnail { height: 150px; }
    #history .thumbnail .p-20 { padding: 10px 0 0 10px; }
    #history ul { display: flex; gap: 20px; flex-direction: column; }
    #history ul li { gap: 0; flex-direction: column; }
    #history ul li.list:before { display: none; }
    #history ul li.list > span { padding: 0; line-height: 27px; }
    #history ul li.list > div span { padding-left: 10px; line-height: 28px; word-break: keep-all; }
    #history ul li.list > div span:before { content: ""; display: block; position: absolute; top: 12px; left: 0; width: 3px; height: 3px; background: #000; border-radius: 20px; }
    #finance .inner { padding: 40px 18px; flex-direction: column; }
    #finance .tit-wrap { margin-bottom: 80px; }
    #finance .finance-counter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #finance .finance-counter li.flex { width: 100%; height: 135px; padding: 20px 0 0 !important; }
    #finance .finance-counter li .text-36 { font-size: 32px; }
    #finance .finance-counter li .leading-54 { line-height: 48px; }
    #global .inner { padding: 40px 0; }
    #global .tit-wrap { padding: 0 18px; }
    #global .map-wrap { width: 100%; }
    #global .map-wrap .gap-40 { gap: 25px; }
    #global .map-wrap .grid { padding: 0 18px; }
    #global .map-wrap .grid li { width: 100%; height: 54px; padding-left: 12px; }
    #global .map-wrap .grid li.now { padding-left: 10px; }
    #global .map-wrap .grid li span:first-child { width: 23px; gap: 0; text-indent: -9999px; font-size: 0; }
    #global .map-wrap .grid li .ico-location { display: none; }
    #contact .inner { padding: 40px 0; }
    #contact .tit-wrap { padding: 0 18px; }
    #contact ul { gap: 10px; padding: 0 18px; margin-top: 10px; }
    #contact ul li { flex-wrap: wrap; padding-left: 10px; font-size: 16px; line-height: 22.4px; }
    #contact ul li.list:before { top: 8px; left: 0; width: 3px; height: 3px; }
    #customer .inner { padding: 40px 18px; flex-direction: column; }
    #customer .tit-wrap { position: static; float: none; margin-right: 0; margin-bottom: 80px; }
    #customer .tit-wrap p { margin-top: 10px; }
    #customer .tit-wrap .btn-xl { margin: 40px auto 0; }
    #customer .tit-wrap + div { width: 100%; gap: 40px; }
    #customer ul li { padding-left: 0; padding-right: 0; }
    #customer ul li .text-18 { font-size: 16px; }
    #customer ul li .text-22 { font-size: 18px; }
    #customer ul li .leading-27 { line-height: 24px; }
    #customer ul li .leading-33 { line-height: 27px; }
    #customer ul li .gap-15 { gap: 10px; }
    #ci .inner { padding: 40px 18px; }
    #ci .inner .gap-40 { gap: 0; }
    #ci .tit-wrap + .flex { flex-direction: column; text-align: center; }
    #ci .tit-wrap + .flex p { margin-top: 10px; font-weight: 400; line-height: 27px; }
    #ci .tit-wrap + .flex .btn-ci { margin: 40px auto; }
    #ci .ci-box:before { font-size: 14px !important; line-height: 20px; }
    #ci .ci-box { padding: 44px 24px 24px; grid-template-columns: none; }
    #ci .ci-box span img { max-width: 132px; }
    #ci .ci-box span:first-child { border: 0; border-bottom: 1px solid #e0e0e0; }
    #ci .ci-box span:first-child img { max-width: 227px; }
    #ci .ci-box.black { margin-top: 25px; }
    #ci .ci-box.black span:first-child { border: 0; border-bottom: 1px solid #333; }

    /* 사업영역 */
    .biz-wrap > ul { display: grid; gap: 80px 20px; grid-template-columns: 1fr 1fr; padding: 60px 18px; }
    .biz-wrap > ul li.gap-60 { gap: 20px; }
    .biz-wrap > ul li .fc-blue { margin-bottom: 20px; }
    .biz-wrap > ul li div .font-900 { font-weight: 800; }
    .biz-wrap > ul li div .text-50 { font-size: 40px; }
    .biz-wrap > ul li div .leading-75 { line-height: 60px; }
    .biz-wrap > ul li div p.pt-40 { padding-top: 30px; margin-top: 10px; }
    .biz-wrap > ul li div p .list-s { padding-left: 10px; }
    .biz-wrap > ul li div p .list-s:before { left: 0; }
    .biz-wrap > ul > li:last-child { grid-column: 1 / 3; }
    .biz-wrap > ul > li:last-child .gap-40 { gap: 0; }
    .biz-wrap > ul > li:last-child li { font-weight: 700; font-size: 18px; line-height: 27px; }
    .biz-wrap > ul > li:last-child li.list-m:before { width: 3px; height: 3px; }
    .biz-wrap > ul > li:last-child li .pl-15 { padding-left: 10px; }
    .flow-wrap { padding-top: 40px; padding-bottom: 40px; }
    .biz-service { flex-direction: column; }
    .biz-service > strong { padding: 60px 0 40px; font-size: 32px; line-height: 48px; }
    .biz-service > ul li { padding: 40px 0; flex-direction: column-reverse; }
    .biz-service > ul li:last-child { border-bottom: 0; }
    .biz-service > ul li dl dt { padding-top: 20px; font-size: 24px; line-height: 36px; }
    .biz-service > ul li dl dd { word-break: keep-all; }
    .biz-service > ul li dl dd.mt-10,
    .biz-service > ul li dl dd.mt-30 { margin-top: 20px; }
    .biz-service > ul li .w400 { width: 100%; }
    .biz-service > ul li .app-box:hover > div { display: none; }
    #business_summary .tit-wrap { padding-bottom: 40px; }
    #business_summary .tit-wrap p { margin-top: 10px; }
    #business_summary .txt-wrap { padding-top: 60px; padding-bottom: 60px; }
    #business_summary .txt-wrap .mt-20 { margin-top: 10px; }
    #business_summary .text-28 { font-size: 24px; }
    #business_summary .text-48 { font-size: 32px; }
    #business_summary .leading-42 { line-height: 36px; }
    #business_summary .leading-72 { line-height: 48px; }
    #business_summary .biz-service { padding: 0; }
    #business_summary .biz-service > ul { width: 100%; padding: 0 20px; box-sizing: border-box; }
    #business_summary .biz-service > ul li { flex-direction: column; }
    #business_summary .biz-service > ul li .thumbnail { height: 240px; }
    #business_summary .accordion .accordion-item .accordion-cnt > p { padding-left: 40px; margin-bottom: 20px; }
    #business_summary .business { padding-top: 60px; flex-direction: column; }
    #business_summary .business .tit-wrap { padding-bottom: 0; }
    #business_summary .business img { width: 100%; max-width: 360px; margin: 0 auto; }
    #business_consumer .tit-wrap { padding-bottom: 40px; }
    #business_seller .tit-wrap { padding-bottom: 40px; }
    #business_seller .font-500.text-22 { font-size: 18px; line-height: 27px; }
    #business_seller .biz-wrap > ul > li.gap-80 { gap: 60px; }
    #business_cross .tit-wrap { padding-bottom: 40px; }
    #business_cross .biz-wrap > ul > li:last-child { gap: 0; }
    #business_cross .biz-wrap > ul > li:last-child p { margin-top: 40px; }

    /* IR 자료실 */
    #ir_board .tit-wrap { padding-bottom: 60px; }
    #ir_board .tbl li { padding: 15px 0 15px 10px; font-size: 16px; }
    #ir_board .tbl li span { width: 90px; }
    #ir_board .tbl li .btn-download { width: 40px; height: 40px; }
    #ir_finance .tit-wrap { padding-bottom: 60px; }
    #ir_finance .graph { width: 324px; height: 328px; }
    #ir_list .tit-wrap { padding-bottom: 40px; }
    #ir_view .tit-wrap { padding-bottom: 60px; }

    /* 윤리경영 */
    .ethics-tab { gap: 6px; margin-top: 60px; margin-bottom: 40px; }
    .ethics-tab a { height: 40px; padding: 0 16px; font-size: 16px; line-height: 24px; }
    #ethics_business .gap-80 { gap: 60px; }
    #ethics_business .mt-80 { margin-top: 60px; }
    #ethics_business .mt-80 .mb-40 { margin-bottom: 20px; }
    #ethics_business .ethics-swiper { margin-top: 20px; }
    #ethics_business .ethics-swiper .swiper-button-prev,
    #ethics_business .ethics-swiper .swiper-button-next { display: none; }
    #ethics_business .ethics-swiper .swiper-wrapper { flex-direction: column; gap: 20px; }
    #ethics_business .ethics-swiper .swiper-slide { height: 200px; background-size: cover !important; }
    #ethics_business .ethics-swiper .swiper-slide .slide-txt { padding: 15px; }
    #ethics_business .ethics-swiper .swiper-slide .slide-txt .text-24 { font-size: 18px; }
    #ethics_business .ethics-swiper .swiper-slide .slide-txt .leading-36 { line-height: 27px; }
    #ethics_business .ethics-swiper .swiper-slide .txt-tit .ico { right: 15px; }
    #ethics_business .toggle-list > li { padding: 23px 0; font-size: 16px; }
    #ethics_business .toggle-list > li span { padding: 0 50px 0 10px; }
    #ethics_business .toggle-list > li span:after { right: 10px; }
    #ethics_business .toggle-list li .cont-box { padding: 23px 10px 0; margin-top: 23px; }
    #ethics_online .text-28 { font-size: 26px; }
    #ethics_online .leading-42 { line-height: 39px; }
    #ethics_online .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #ethics_online .grid li { padding: 30px 0; font-size: 14px; line-height: 19.6px; }
    #ethics_online .grid li:nth-child(2) { border-top-right-radius: 10px; }
    #ethics_online .grid li:nth-child(3) { border-top-right-radius: 0; }
    #ethics_online .grid li:nth-child(4) { border-bottom-left-radius: 0; }
    #ethics_online .grid li:nth-child(5) { border-bottom-left-radius: 10px; }



    #ethics_form .gap-80 { gap: 40px; }
    #ethics_form .text-28 { font-size: 26px; }
    #ethics_form .text-28 + span { font-size: 14px; line-height: 21px; }
    #ethics_form .leading-42 { line-height: 39px; }
    #ethics_form .ethics-guide ul li { font-size: 14px; }
    #ethics_form .ethics-guide ul li.list-s.black:before { top: 12px; }
    #ethics_form .tbl td div { font-size: 14px; }
    #ethics_form p,
    #ethics_form p + .text-18 { font-size: 14px; }
    #ethics_form p { padding-left: 10px; text-indent: -10px; }
    #ethics_form .tbl-col table tr { display: grid; gap: 10px; }
    #ethics_form .tbl-col table th { border: 0; }
    #ethics_form .tbl-col table th > div { padding: 20px 10px 0; }
    #ethics_form .tbl-col table td > div { padding: 0 10px 20px; }
    #ethics_form .tbl-col table td > div .email-wrap,
    #ethics_form .tbl-col table td > div .custom-select { width: 100%; }
    #ethics_form .tbl-col table td > div .h300 { height: 200px; }
    #ethics_form .tbl-col table td > div.grid-cols-3 { gap: 10px; grid-template-columns: none; margin-top: 15px; }
        /* 레이어 */
        #ethics_guide p.text-16 { font-size: 14px; }
        #ethics_guide td div > span { display: none; }
        #ethics_guide .tbl table td > div dl dt { padding-left: 15px; text-indent: -15px; }
    #ethics_confirm .gap-80 { gap: 40px; }
    #ethics_confirm strong.text-32 { font-size: 26px; line-height: 39px; }
    #ethics_confirm .check_form { padding: 60px 18px; }
    #ethics_confirm #basic-form { width: 100%; }
    #ethics_confirm #basic-form li span { display: none; }
    #ethics_confirm #basic-form li input { width: 100%; }
    #ethics_confirm #basic-form .gap-20 { gap: 10px; }
    #ethics_confirm .tbl table tr { display: grid; grid-template-columns: 120px 1fr; }
    #ethics_confirm .tbl table tr th { display: flex; align-items: center; border-left: 0; border-right: 1px solid #eee; }
    #ethics_confirm .tbl table tr.grid-none { grid: none; }
    #ethics_confirm a.text-16 { font-size: 14px; }
    #ethics_confirm .btn-all { font-size: 16px; }

    /* 보도자료 */
    #pr_list .tit-wrap { padding-bottom: 40px; }
    #pr_view .tit-wrap { padding-bottom: 60px; }

    /* IR 자료실 > 전자공고 + 보도자료 table list view 공통 */
    .tbl-list .tbl td a.text-18 { font-size: 16px; }
    .tbl-list #view_list td:first-child { display: none; }
    .tbl-list #view_list td:last-child div { padding-left: 0; padding-right: 0; font-size: 14px; }
    .tbl-list .btn-all.mt-60,
    .tbl-view .btn-all.mt-60 { margin-top: 40px; }
    .tbl-view .tbl-title { gap: 10px; margin-bottom: 16px; flex-direction: column; }
    .tbl-view .tbl-title strong { font-size: 22px; line-height: 33px; }
    .tbl-view .tbl-title span { font-size: 14px; line-height: 21px; }
    .tbl-view .tbl td > div { padding-left: 0; padding-right: 0; font-size: 14px; }
    .tbl-view #pr-view img { width: 100%; }
    .tbl-view tfoot td .truncate a { font-size: 14px; }
}
/* 360 ~ 500 */
@media (max-width:500px) {
    .biz-menu { display: grid; grid-template-columns: 1fr 1fr 1fr 1.3fr; gap: 0; }
    .biz-menu li span { display: block; }
    .biz-menu li a { line-height: 24px !important; }
    .biz-wrap > ul { grid-template-columns: 1fr; }
    .biz-wrap > ul li:last-child { grid-column: auto; }
}
/* 360 ~ 600 */
@media (max-width:600px) {
    #ir_finance table.overflow-x-auto { width: 600px; }
}