/* 서브 비주얼 이미지 */ #visual .bg1{ background: url("/img/sub/visual/bg_company.png") no-repeat center left 53% / cover; } #visual .bg2{ background: url("/img/sub/visual/bg_affiliate.png") no-repeat center center / cover; } #visual .bg3{ background: url("/img/sub/visual/bg_product.png") no-repeat center center / cover; } #visual .bg4{ background: url("/img/sub/visual/bg_rnd.png") no-repeat center left 24% / cover; } #visual .bg5{ background: url("/img/sub/visual/bg_investor.png") no-repeat center right 33% / cover; } #visual .bg6{ background: url("/img/sub/visual/bg_esg.png") no-repeat center right 50.5% / cover; } /* 서브 비주얼 이미지 - 계열사 소개 (상세) */ /*#visual .bg2[data-idx="1"]{ background: url("/img/sub/visual/bg_affiliate_detail01.png") no-repeat center right 12% / cover; } #visual .bg2[data-idx="2"]{ background: url("/img/sub/visual/bg_affiliate_detail02.png") no-repeat center center / cover; } #visual .bg2[data-idx="3"]{ background: url("/img/sub/visual/bg_affiliate_detail03.png") no-repeat center left 32% / cover; } #visual .bg2[data-idx="4"]{ background: url("/img/sub/visual/bg_affiliate_detail04.png") no-repeat center left 40% / cover; } #visual .bg2[data-idx="5"]{ background: url("/img/sub/visual/bg_affiliate_detail05.png") no-repeat center center / cover; } #visual .bg2[data-idx="6"]{ background: url("/img/sub/visual/bg_affiliate_detail06.png") no-repeat center right / cover; } #visual .bg2[data-idx="7"]{ background: url("/img/sub/visual/bg_affiliate_detail07.png") no-repeat center center / cover; } #visual .bg2[data-idx="8"]{ background: url("/img/sub/visual/bg_affiliate_detail08.png") no-repeat center left / cover; } #visual .bg2[data-idx="9"]{ background: url("/img/sub/visual/bg_affiliate_detail09.png") no-repeat center left / cover; } #visual .bg2[data-idx="10"]{ background: url("/img/sub/visual/bg_affiliate_detail10.png") no-repeat center left 40% / cover; } #visual .bg2[data-idx="11"]{ background: url("/img/sub/visual/bg_affiliate_detail04.png") no-repeat center left 40% / cover; } #visual .bg2[data-idx="12"]{ background: url("/img/sub/visual/bg_affiliate_detail05.png") no-repeat center center / cover; } #visual .bg2[data-idx="13"]{ background: url("/img/sub/visual/bg_affiliate_detail10.png") no-repeat center left 40% / cover; } #visual .bg2[data-idx="14"]{ background: url("/img/sub/visual/bg_affiliate_detail11.png") no-repeat center left 57% / cover; }*/ /* 서브 비주얼 이미지 - 제품소개 (상세) */ #visual .bg3[data-idx="1"]{ background: url("/img/sub/visual/bg_product_detail01.png") no-repeat center left 40% / cover; } #visual .bg3[data-idx="2"]{ background: url("/img/sub/visual/bg_product_detail02.png") no-repeat center center / cover; } #visual .bg3[data-idx="3"]{ background: url("/img/sub/visual/bg_product_detail03.png") no-repeat center center / cover; } #visual .bg3[data-idx="4"]{ background: url("/img/sub/visual/bg_product_detail04.png") no-repeat center left 33% / cover; } #visual .bg3[data-idx="5"]{ background: url("/img/sub/visual/bg_product_detail05.png") no-repeat center left 40% / cover; } #visual .bg3[data-idx="6"]{ background: url("/img/sub/visual/bg_product_detail06.png") no-repeat center right / cover; } #visual .bg3[data-idx="7"]{ background: url("/img/sub/visual/bg_product_detail07.png") no-repeat center center / cover; } #visual .bg3[data-idx="8"]{ background: url("/img/sub/visual/bg_product_detail08.png") no-repeat center center / cover; } #visual .bg3[data-idx="9"]{ background: url("/img/sub/visual/bg_product_detail09.png") no-repeat center left / cover; } /* 서브 비주얼 이미지 - 제품소개 (제품문의) */ #visual .bg3[data-page="inquiry"]{ background: url("/img/sub/visual/bg_product_inquiry.png") no-repeat center left 45% / cover; } /* header */ header{ background: #FFF; } header::before{ opacity: 0; } header h1 a::after{ opacity: 1; } header h1 img{ opacity: 0; } header .depth01 > li > a{ color: #111; text-stroke-color: #111; -webkit-text-stroke-color: #111; } header .depth01 > li > a i{ background: #111; } header .search i{ filter: invert(1); -webkit-filter: invert(1); } header .lang button{ color: #111; text-stroke-color: #111; -webkit-text-stroke-color: #111; } header .lang button i{ filter: invert(1); -webkit-filter: invert(1); } header .menu i{ filter: unset; -webkit-filter: unset; } /* visual */ #visual{ position: relative; z-index: 800; } #visual .black, #visual .white{ position: sticky; top: 0; left: 0; } #visual .text{ padding: calc(var(--headerH) + 50px) 0 70px; } #visual .text h2{ font-size: 8rem; font-weight: 600; letter-spacing: -0.02em; padding-top: 50px; position: relative; } #visual .img{ clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); pointer-events: none; } #visual .img .bg{ min-height: 300px; padding-bottom: 24.672%; } #visual .img .cover{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; } /* visual - lnb */ #visual .lnb{ --paddingLR: 15px; --iconW: 18px; --iconH: 15px; } #visual .lnb ul{ display: flex; flex-wrap: wrap; align-items: center; margin: -5px 0; margin-inline: calc((var(--paddingLR) + 3px) * -1) calc(var(--paddingLR) * -1); padding-left: calc(var(--iconW) + (var(--paddingLR) * 2) + 3px); position: relative; } #visual .lnb ul li{ display: flex; flex-wrap: wrap; } #visual .lnb ul a{ display: block; font-size: 15px; font-weight: 500; letter-spacing: -0.02em; padding: 5px 0; padding-inline: calc(var(--paddingLR) + 3px) var(--paddingLR); position: relative; } #visual .lnb ul a::before{ content: ""; width: 3px; height: 3px; border-radius: 50%; position: absolute; top: 50%; left: 0; transform: translateY(-50%); } #visual .lnb ul li.home{ position: absolute; top: 0; left: 0; } #visual .lnb ul li.home a::before{ display: none; } #visual .lnb ul li.home a i{ display: block; width: var(--iconW); height: var(--iconH); mask: url("/img/sub/icon_lnb_home.svg") no-repeat center center / contain; -webkit-mask: url("/img/sub/icon_lnb_home.svg") no-repeat center center / contain; } #visual .lnb.none .local2{ display: none; } /* visual - tab */ #visual .tab{ margin-top: 20px; position: relative; } #visual .tab button{ display: none; justify-content: space-between; align-items: center; width: 100%; background: transparent; border: none; border-bottom: 2px solid var(--mainColor); font-family: var(--engFont); font-size: 20px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; text-align: left; padding: 12px 20px; } #visual .tab button::after{ content: ""; flex-shrink: 0; width: 12px; height: 7px; display: inline-block; mask: url("/img/board/icon_search_arrow.svg") no-repeat center center / contain; -webkit-mask: url("/img/board/icon_search_arrow.svg") no-repeat center center / contain; margin-left: 20px; transform: rotate(0); transition: transform 0.5s; } #visual .tab ul{ display: flex; margin: 0 -25px; } #visual .tab ul li.hidden{ display: none; } #visual .tab ul li a{ display: block; font-family: var(--engFont); font-size: 22px; font-weight: 500; letter-spacing: -0.02em; padding: 10px 25px; } #visual .tab ul li.active > a{ color: var(--mainColor); position: relative; } #visual .tab ul li.active > a::before{ content: ""; width: calc(100% - 50px); height: 2px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); } #visual .black .text h2{ color: #000; } #visual .black .lnb ul a{ color: #111; } #visual .black .lnb ul a::before{ background: #000; } #visual .black ul li.home a i{ background: #000; } #visual .black .tab button{ color: #111; } #visual .black .tab button::after{ background: #111; } #visual .black .tab ul li a{ color: #888; } #visual .black .tab ul li.active > a{ color: var(--mainColor); } #visual .black .tab ul li.active > a::before{ background: var(--mainColor); } #visual .white .text h2{ color: #FFF; } #visual .white .lnb ul a{ color: #FFF; } #visual .white .lnb ul a::before{ background: #FFF; } #visual .white ul li.home a i{ background: #FFF; } #visual .white .tab button{ color: #FFF !important; border-bottom-color: #FFF; } #visual .white .tab button::after{ background: #FFF; } #visual .white .tab ul li a{ color: rgba(255, 255, 255, 0.6); } #visual .white .tab ul li.active > a{ color: #FFF; } #visual .white .tab ul li.active > a::before{ background: #FFF; } /* visual - none */ #visual.none, #visual.none .black{ height: unset; } @media screen and (hover: hover) and (pointer: fine){ /* visual - lnb */ #visual .lnb ul li.all{ display: none !important; } /* visual - tab */ #visual .tab ul li.all{ display: none !important; } } @media screen and (max-width: 1700px){ /* visual */ #visual .text h2{ font-size: 7rem; } /* visual - tab */ #visual .tab ul li a{ font-size: 20px; } } @media screen and (max-width: 1280px){ /* visual */ #visual .text{ padding: calc(var(--headerH) + 40px) 0 40px; } #visual .text h2{ font-size: 6.5rem; padding-top: 35px; } /* visual - lnb */ #visual .lnb{ --paddingLR: 10px; } /* visual - tab */ #visual .tab{ margin-top: 10px; } #visual .tab ul{ margin-inline: -15px; } #visual .tab ul li a{ font-size: 19px; padding-inline: 15px; } #visual .tab ul li.active a::before{ width: calc(100% - 30px); } } @media screen and (max-width: 1024px){ /* visual */ #visual .text h2{ padding-top: 25px; } /* visual - tab */ #visual .tab{ margin-top: 20px; } #visual .tab button{ display: flex; } #visual .tab ul{ display: block; background: var(--mainColor); padding: 10px 0; margin: 5px 0 0; position: absolute; top: 100%; left: 0; right: 0; clip-path: inset(0 0 100% 0); -webkit-clip-path: inset(0 0 100% 0); transition: clip-path 0.5s; } #visual .tab ul li.all{ display: block !important; } #visual .tab ul li a{ font-weight: 400; color: rgba(255, 255, 255, 0.6) !important; padding: 12px 20px; } #visual .tab ul li.active > a{ color: #FFF !important; } #visual .tab ul li.active > a::before{ display: none; } #visual .tab.toggle button::after{ transform: rotate(-180deg); } #visual .tab.toggle ul{ clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); } /* tab-menu */ .tab-menu ul li{ min-height: 45px; } /* small-tab */ .small-tab ul li > *{ font-size: 17px; } } @media screen and (max-width: 900px){ /* visual */ #visual .text h2{ font-size: 6rem; } } /* common */ #sub{ --subPt: 100px; --subPb: 200px; --border: #DDD; --navyGradi: #0071BC, #003559; } #sub{ position: relative; } .sub-content{ padding-bottom: var(--subPb); } .subPt{ padding-top: var(--subPt); } .subPb{ padding-bottom: var(--subPb); } .grayBg{ background: var(--grayBg); } .overflow{ overflow: hidden; } br.m{ display: none; } /* 간격 */ .pt160{ padding-top: 160px; } .pb160{ padding-bottom: 160px; } .pt120{ padding-top: 120px; } .pb120{ padding-bottom: 120px; } /* data-aos="clip-right" */ [data-aos="clip-right"]{ --radius: 0; } [data-aos="clip-right"]{ clip-path: inset(0 100% 0 0 round var(--radius)); -webkit-clip-path: inset(0 100% 0 0 round var(--radius)); transition: clip-path var(--aosT); } [data-aos="clip-right"], [data-aos="clip-right"] img{ width: 100%; } .aos-animate[data-aos="clip-right"]{ clip-path: inset(0 0 0 0 round var(--radius)); -webkit-clip-path: inset(0 0 0 0 round var(--radius)); } /* scroll-bar */ .scroll-bar{ overflow-x: auto; overflow-y: clip; } .scroll-bar.os-theme-dark > .os-scrollbar > .os-scrollbar-track, .scroll-bar.os-theme-light > .os-scrollbar > .os-scrollbar-track{ background: #EEE; border-radius: 0; } .scroll-bar.os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle{ background: #000; border-radius: 0; } .scroll-bar.os-theme-dark > .os-scrollbar-vertical .os-scrollbar-handle, .scroll-bar.os-theme-light > .os-scrollbar-vertical .os-scrollbar-handle{ min-height: 70px; } /* page-title */ .page-title{ letter-spacing: -0.02em; text-align: center; padding-bottom: 100px; } .page-title > span{ display: block; font-family: var(--engFont); font-size: 20px; font-weight: 700; color: var(--mainColor); text-transform: uppercase; margin-bottom: 20px; } .page-title h3, .page-title h4{ font-size: 5.4rem; color: #111; } .page-title h3{ font-weight: 700; } .page-title h4{ font-weight: 600; } /* sec-title */ .sec-title{ padding-bottom: 60px; } .sec-title h4{ font-size: 5rem; font-weight: 600; color: #111; letter-spacing: -0.02em; line-height: 1.5; } .sec-title h4.small{ font-size: 4.4rem; } .sec-title p{ font-size: 22px; font-weight: 300; color: #111; letter-spacing: -0.02em; line-height: 1.6; margin-top: 40px; } .sec-title p strong{ font-weight: 600; } .sec-title p em{ font-weight: 500; color: var(--mainColor); } /* flex-title */ .flex-title{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 60px; } .flex-title > *:first-child{ margin-bottom: 0; padding-bottom: 0; } .flex-title .small-tab ul{ justify-content: flex-start; } /* blueBtn */ .blueBtn{ max-width: 100%; width: 360px; min-height: 70px; display: inline-flex; justify-content: center; align-items: center; background: var(--mainColor); font-size: 18px; font-weight: 500; color: #FFF !important; letter-spacing: -0.02em; text-align: center; padding: 10px 20px; } .blueBtn i{ flex-shrink: 0; display: inline-block; width: 12px; height: 15px; background: #FFF; mask: url("/img/board/icon_board_target.svg") no-repeat center center / contain; -webkit-mask: url("/img/board/icon_board_target.svg") no-repeat center center / contain; margin-left: 15px; } .blueBtn[download] i{ mask-image: url("/img/board/icon_download.svg"); -webkit-mask-image: url("/img/board/icon_download.svg"); } .viewmore{ display: inline-flex; align-items: center; font-size: 18px; font-weight: 400; color: #FFF !important; line-height: 1.5; letter-spacing: -0.03em; padding: 15px 0; margin: -15px 0; } .viewmore > span{ background: linear-gradient(to top, #FFF 0 1px, transparent 1px 100%) no-repeat left center; line-height: inherit; } .viewmore i{ display: inline-flex; flex-direction: column; justify-content: center; width: 30px; height: 30px; background: #FFF; border-radius: 50%; margin-right: 15px; overflow: hidden; } .viewmore i span, .viewmore i span::before, .viewmore i span::after{ display: block; width: 100%; background: url("/kr/img/main/icon_arrow_white.svg") no-repeat center left 60% / contain; } .viewmore i span{ height: 14px; filter: invert(1); -webkit-filter: invert(1); transform: translateX(0); transition: transform 0.6s; } .viewmore i span::before, .viewmore i span::after{ content: ""; height: 100%; } .viewmore i span::before{ transform: translateX(-75%); } .viewmore i span::after{ position: absolute; top: 0; left: 0; transform: translateX(-150%); } @media screen and (hover: hover) and (pointer: fine){ .viewmore > span{ background-size: 0; transition: background-size 0.6s; } .viewmore:hover > span{ background-size: 100% auto !important; } .viewmore:hover i span{ transform: translate(150%); } } /* sticky-tab */ .sticky-tab{ --min: 60px; } .sticky-tab{ background: #FFF; border-bottom: 1px solid var(--border); text-align: center; padding: 10px; margin-bottom: var(--subPt); position: sticky; top: var(--headerH); left: 0; z-index: 950; transition: top 0.4s; will-change: top; } .sticky-tab button{ width: 100%; min-height: var(--min); display: none; background: none; border: none; font-family: var(--engFont); font-size: 20px; font-weight: 600; color: #333; letter-spacing: -0.03em; text-align: left; padding: 5px 20px; padding-right: 54px; position: relative; outline: none; } .sticky-tab button::after{ content: ""; flex-shrink: 0; width: 14px; height: 9px; display: inline-block; background: url("/kr/img/common/icon_menu_arrow.svg") no-repeat center center / contain; position: absolute; top: 50%; right: 20px; transform: translateY(-50%) rotate(0); transition: transform 0.4s; } .sticky-tab ul{ max-width: 1920px; width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); margin: 0 auto; } .sticky-tab ul li{ min-height: var(--min); display: flex; flex-direction: column; justify-content: center; cursor: pointer; } .sticky-tab ul li a{ display: block; font-family: var(--engFont); font-size: 20px; font-weight: 600; color: #999; letter-spacing: -0.03em; padding: 5px; } .sticky-tab ul li.active{ background: #111; } .sticky-tab ul li.active a{ font-weight: 500; color: #FFF; } body.up .sticky-tab{ top: 0; } /* tab-menu */ .tab-menu{ text-align: center; padding-bottom: 100px; margin: -5px; } .tab-menu ul{ max-width: 100%; width: max-content; display: flex; margin: -5px auto; } .tab-menu ul li{ max-width: calc((100% - 20px) / 2); width: 400px; min-height: 80px; display: flex; flex-direction: column; justify-content: center; background: var(--grayBg); margin: 5px; cursor: pointer; } .tab-menu ul li > *{ display: block; width: 100%; background: transparent; border: none; font-family: var(--engFont); font-size: 21px; font-weight: 600; color: #999; letter-spacing: -0.03em; padding: 5px 10px; } .tab-menu ul li.active{ background: #111; } .tab-menu ul li.active > *{ font-weight: 500; color: #FFF; } /* small-tab */ .small-tab{ text-align: center; margin-bottom: 60px; } .small-tab ul{ display: flex; justify-content: center; margin: -20px; } .small-tab ul li{ position: relative; } .small-tab ul li::after{ content: ""; width: 1px; height: 14px; background: #BBB; position: absolute; top: 50%; left: 0; transform: translateY(-50%); } .small-tab ul li:first-of-type::after{ display: none; } .small-tab ul li > *{ display: block; background: none; border: none; font-size: 21px; font-weight: 600; color: #999; letter-spacing: -0.02em; padding: 20px; } .small-tab ul li.on > *{ color: #000; } /* dot-list */ .dot-list{ --lineH: 1.3em; } .dot-list li{ font-size: 18px; font-weight: 300; color: #111; letter-spacing: -0.02em; line-height: var(--lineH); padding-left: 19px; position: relative; } .dot-list li:not(:last-of-type){ margin-bottom: 10px; } .dot-list li::before{ content: ""; width: 4px; height: 4px; background: var(--mainColor); border-radius: 50%; position: absolute; top: calc(var(--lineH) / 2); left: 0; transform: translateY(-50%); } /* table-box */ .table-box{ --theadSize: 20px; --tbodySize: 19px; --paddingTB: 20px; --paddingLR: 20px; } .table-box table{ border-top: 2px solid #333; } .table-box tr > *:last-child{ border-right: none !important; } .table-box th, .table-box td{ border: 1px solid var(--border); border-left: none !important; } .table-box thead{ background: rgba(var(--mainRGB), 0.02); } .table-box thead th{ font-size: var(--theadSize); font-weight: 500; color: #000; padding: var(--paddingTB) var(--paddingLR); } .table-box thead .border th{ padding: 0; border: none; border-top: 1px solid #111; } .table-box thead .border:last-of-type th{ border-bottom: 1px solid #111; } .table-box tbody th, .table-box tbody td{ font-size: var(--tbodySize); color: #111; padding: var(--paddingTB) var(--paddingLR); } .table-box tbody th{ background: var(--grayBg); font-weight: 500; } .table-box tbody td{ font-weight: 300; } /* history-tab */ .history-tab{ background: #FFF; position: sticky; top: var(--headerH); left: 0; z-index: 500; margin-bottom: 100px; transition: top 0.4s; will-change: top; } .history-tab ul{ display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } .history-tab ul li{ min-height: 80px; position: relative; } .history-tab ul li::after{ content: ""; width: 100%; height: 5px; background: var(--mainColor); position: absolute; bottom: 0; left: 0; transform: scaleX(0); transition: transform 0.4s; } .history-tab ul li button{ width: 100%; height: 100%; background: none; border: none; font-family: var(--engFont); font-size: 19px; font-weight: 700; color: #555; letter-spacing: -0.02em; padding: 5px; transition: color 0.4s; outline: none; } .history-tab ul li.on::after{ transform: scaleX(1); } .history-tab ul li.on button{ color: var(--mainColor); } body.up .history-tab{ top: 0; } /* history-box */ .history-box{ --gapR: 109px; --circle: 30px; --dot: 6px; } .history-box{ position: relative; } .history-box .bar{ width: 2px; height: 100%; background: #EEE; position: absolute; top: 0; left: var(--left); transform: translateX(-50%); } .history-box .bar div{ height: 0; background: var(--mainColor); position: relative; transition: height 0.15s ease-out; will-change: height; } .history-box .bar i{ width: var(--circle); height: var(--circle); background: #FFF; border: 2px solid var(--mainColor); border-radius: 50%; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%); } .history-box .bar i::before{ content: ""; width: var(--dot); height: var(--dot); background: var(--mainColor); border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .history-box .flex{ display: flex; } .history-box .left{ flex-shrink: 0; width: var(--left); padding-right: var(--gapR); } .history-box .right{ flex: 1 1 auto; min-width: 0; padding-left: var(--gapR); } /* intro-box */ .intro-box{ overflow: hidden; } .intro-box .flex-box{ display: flex; opacity: 1; } .intro-box .flex-box > *{ opacity: 0; transition: opacity var(--aosT), transform var(--aosT); } .intro-box .img{ flex-shrink: 0; width: 48.75%; transform: translateY(var(--aosP)); } .intro-box .img figure, .intro-box .img figure img{ width: 100%; height: 100%; } .intro-box .img figure img{ object-fit: cover; } .intro-box .text{ flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding-right: 120px; transform: translateX(var(--aosM)); } .intro-box .text .sec-title{ padding-bottom: 0; } .intro-box .text p{ font-size: 22px; font-weight: 300; color: #333; letter-spacing: -0.02em; line-height: 1.6; margin-top: 40px; } .intro-box .text p strong{ font-weight: 500; } .intro-box .text p em{ color: var(--mainColor); font-style: normal; } .intro-box .flex-box.aos-animate > *{ opacity: 1; transform: translate(0, 0) !important; } @media screen and (max-width: 1700px){ /* common */ #sub{ --subPb: 170px; } /* 간격 */ .pt160{ padding-top: 120px; } .pb160{ padding-bottom: 120px; } .pt120{ padding-top: 90px; } .pb120{ padding-bottom: 90px; } /* page-title */ .page-title{ padding-bottom: 70px; } .page-title > span{ font-size: 18px; } /* sec-title */ .sec-title{ padding-bottom: 40px; } .sec-title p{ font-size: 20px; margin-top: 20px; } /* flex-title */ .flex-title{ margin-bottom: 40px; } /* blueBtn */ .blueBtn{ width: 300px; min-height: 60px; } /* sticky-tab */ .sticky-tab{ --min: 55px; } .sticky-tab button{ font-size: 19px; } .sticky-tab ul li a{ font-size: 19px; } /* tab-menu */ .tab-menu{ padding-bottom: 70px; } .tab-menu ul li{ width: 300px; min-height: 70px; } .tab-menu ul li > *{ font-size: 19px; } /* small-tab */ .small-tab{ margin-bottom: 40px; } .small-tab ul li > *{ font-size: 20px; } /* table-box */ .table-box{ --theadSize: 19px; --tbodySize: 18px; --paddingTB: 15px; --paddingLR: 15px; } /* history-tab */ .history-tab ul li{ min-height: 70px; } .history-tab ul li button{ font-size: 17px; } /* history-box */ .history-box{ --gapR: 70px; --circle: 26px; } /* intro-box */ .intro-box .text{ padding-right: 90px; } .intro-box .text p{ font-size: 20px; margin-top: 30px; } } @media screen and (max-width: 1280px){ /* common */ #sub{ --subPt: 60px; --subPb: 140px; } /* 간격 */ .pt160{ padding-top: 80px; } .pb160{ padding-bottom: 80px; } .pt120{ padding-top: 60px; } .pb120{ padding-bottom: 60px; } /* page-title */ .page-title{ padding-bottom: 40px; } .page-title > span{ font-size: 16px; margin-bottom: 10px; } .page-title h4{ font-size: 5rem; } /* sec-title */ .sec-title{ padding-bottom: 30px; } .sec-title p{ font-size: 18px; margin-top: 15px; } /* flex-title */ .flex-title{ margin-bottom: 20px; } /* blueBtn */ .blueBtn{ width: 250px; min-height: 55px; font-size: 17px; } .blueBtn i{ margin-left: 10px; } /* sticky-tab */ .sticky-tab{ --min: 50px; } .sticky-tab{ padding: 5px; } .sticky-tab button{ font-size: 18px; } .sticky-tab ul li a{ font-size: 18px; } /* tab-menu */ .tab-menu{ padding-bottom: 60px; } .tab-menu ul li{ width: 250px; min-height: 60px; } .tab-menu ul li > *{ font-size: 18px; } /* small-tab */ .small-tab{ margin-bottom: 30px; } .small-tab ul{ margin: -15px; } .small-tab ul li > *{ font-size: 19px; padding: 15px; } /* dot-list */ .dot-list li{ font-size: 17px; padding-left: 14px; } /* table-box */ .table-box{ --theadSize: 17px; --tbodySize: 17px; --paddingTB: 12px; --paddingLR: 10px; } /* history-tab */ .history-tab{ margin-bottom: 70px; } .history-tab ul li{ min-height: 60px; } .history-tab ul li::after{ height: 3px; } .history-tab ul li button{ font-size: 15px; } /* history-box */ .history-box{ --gapR: 40px; --circle: 22px; --dot: 4px; } /* intro-box */ .intro-box .sec-title{ padding-bottom: 20px; } .intro-box .text{ padding-right: 60px; } .intro-box .text p{ font-size: 19px; margin-top: 20px; } } @media screen and (max-width: 1200px){ /* intro-box */ .intro-box .flex-box{ flex-direction: column; } .intro-box .img{ width: 100%; } .intro-box .text{ padding: 0 0 30px; transform: translateY(var(--aosP)); } } @media screen and (max-width: 1024px){ /* tab-menu */ .tab-menu ul li{ min-height: 50px; } .tab-menu ul li > *{ font-size: 17px; } /* flex-title */ .flex-title{ flex-direction: column; align-items: unset; } .flex-title .small-tab{ margin-bottom: 60px; } .flex-title .small-tab ul{ justify-content: center; } .flex-title .sec-title{ padding-bottom: 30px; } .flex-title .blueBtn{ width: 100%; } } @media screen and (max-width: 900px){ /* page-title */ .page-title > span{ font-size: 15px; } /* sec-title */ .sec-title h4{ font-size: 4.7rem; } .sec-title h4.small{ font-size: 4rem; } /* blueBtn */ .blueBtn{ min-height: 50px; } /* history-tab */ .history-tab ul li{ min-height: 50px; } /* intro-box */ .intro-box .text p{ font-size: 18px; margin-top: 15px; } } @media screen and (max-width: 800px){ /* sticky-tab */ .sticky-tab button{ display: block; } .sticky-tab ul{ width: calc(100% - 20px); display: block; background: #111; padding: 15px 20px; position: absolute; top: calc(100% + 1px); left: 50%; transform: translateX(-50%); clip-path: inset(0 0 100% 0); -webkit-clip-path: inset(0 0 100% 0); transition: clip-path 0.4s; } .sticky-tab ul li a{ text-align: left; padding: 12px 17px; font-weight: 500; color: rgba(255, 255, 255, 0.7); } .sticky-tab ul li.active a{ background: #FFF; font-weight: 600; color: #222; } .sticky-tab.active button::after{ transform: translateY(-50%) rotate(-180deg); } .sticky-tab.active ul{ clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); } /* tab-menu */ .tab-menu ul{ width: 100%; flex-wrap: wrap; } .tab-menu ul li{ width: calc((100% - 20px) / 2); } } /* 회사소개 - 회사개요 - CEO 인사말 */ #ceo{ padding-bottom: 0; } #ceo .flex-box{ display: flex; letter-spacing: -0.02em; } #ceo .left{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 15px 0; padding-right: 120px; } #ceo .left > div > *:not(:last-child){ margin-bottom: 40px; } #ceo .left > div > span{ display: block; font-family: var(--engFont); font-size: 20px; font-weight: 700; color: var(--mainColor); } #ceo .left h4{ font-size: 38px; font-weight: 600; color: #111; line-height: 1.5; } #ceo .left .p-box p{ font-size: 20px; font-weight: 300; color: #111; line-height: 1.7; } #ceo .left .p-box p:not(:last-of-type){ margin-bottom: 20px; } #ceo .left .name{ display: flex; } #ceo .left .name strong{ display: inline-block; font-size: 21px; font-weight: 600; color: #111; } #ceo .left .name strong:not(:last-of-type){ margin-right: 10px; } #ceo .right{ flex-shrink: 0; width: 640px; } #ceo .right figure, #ceo .right figure img{ width: 100%; height: 100%; } #ceo .right figure img{ object-fit: cover; } @media screen and (max-width: 1700px){ #ceo .left{ padding-right: 90px; } #ceo .left > div > *:not(:last-child){ margin-bottom: 30px; } #ceo .left > div > span{ font-size: 18px; } #ceo .left h4{ font-size: 32px; } #ceo .left .p-box p{ font-size: 19px; } #ceo .left .name strong{ font-size: 20px; } } @media screen and (max-width: 1400px){ #ceo .left{ padding-right: 60px; } #ceo .right{ width: 540px; } } @media screen and (max-width: 1280px){ #ceo .left > div > *:not(:last-child){ margin-bottom: 20px; } #ceo .left > div > span{ font-size: 16px; } #ceo .left h4{ font-size: 28px; } #ceo .left .p-box p{ font-size: 18px; } #ceo .left .p-box p:not(:last-of-type){ margin-bottom: 12px; } #ceo .left .name strong{ font-size: 19px; } } @media screen and (max-width: 1200px){ #ceo .flex-box{ flex-direction: column-reverse; } #ceo .left{ padding: 30px 0 0; } #ceo .right{ width: 100%; } } @media screen and (max-width: 900px){ #ceo .left h4{ font-size: 24px; } } /* 회사소개 - 회사개요 - 경영이념 */ #philosophy{ padding-bottom: 0; } #philosophy section .page-title{ text-align: left; } #philosophy section .page-title.pb60{ padding-bottom: 60px; } #philosophy .intro .flex-box{ display: flex; align-items: center; opacity: 1; } #philosophy .intro .flex-box > *{ opacity: 0; transition: opacity var(--aosT), transform var(--aosT); } #philosophy .intro .text{ flex: 1 1 auto; min-width: 0; padding-right: 120px; transform: translateX(var(--aosM)); } #philosophy .intro .text h4{ font-size: 4.2rem; font-weight: 600; color: #111; letter-spacing: -0.02em; line-height: 1.5; margin-bottom: 60px; } #philosophy .intro .text p{ font-size: 20px; font-weight: 300; color: #111; letter-spacing: -0.02em; line-height: 1.7; } #philosophy .intro .img{ flex-shrink: 0; width: 680px; transform: translateY(var(--aosP)); } #philosophy .intro .img figure, #philosophy .intro .img figure img{ width: 100%; } #philosophy .intro .flex-box.aos-animate > *{ opacity: 1; transform: translate(0, 0) !important; } #philosophy .motto .grid-box{ display: grid; grid-template-columns: repeat(3, calc(100% / 3)); margin: -20px; } #philosophy .motto .item{ text-align: center; margin: 20px; } #philosophy .motto .item p{ font-size: 28px; font-weight: 700; color: var(--mainColor); letter-spacing: -0.03em; } #philosophy .motto .item .icon{ width: max-content; background: var(--mainColor); border: 10px solid rgba(255, 255, 255, 0.5); border-radius: 50%; margin: 30px auto; } #philosophy .motto .item strong, #philosophy .motto .item span{ font-size: 20px; } #philosophy .motto .item strong{ display: block; font-family: var(--engFont); font-weight: 500; color: #111; letter-spacing: -0.02em; } #philosophy .motto .item span{ display: block; font-weight: 600; color: #AAA; letter-spacing: -0.03em; margin-top: 5px; } #philosophy .vision .box{ background: url("/img/sub/company/philosophy_bg01.jpg") no-repeat center left 64% / cover; color: #FFF; letter-spacing: -0.02em; text-align: center; padding: 145px 40px; } #philosophy .vision h5{ font-family: var(--engFont); font-size: 5.2rem; font-weight: 500; color: #FFF; } #philosophy .vision p{ font-size: 24px; font-weight: 400; margin-top: 10px; } #philosophy .policy .diagram .flex-box{ display: flex; justify-content: center; } #philosophy .policy .diagram .item{ max-width: 400px; width: calc((100% + 140px) / 3); border: 2px dashed var(--border); border-radius: 50%; text-align: center; padding: 18px; margin-right: -70px; position: relative; } #philosophy .policy .diagram .item:last-of-type{ margin-right: 0; } #philosophy .policy .diagram .item .text{ letter-spacing: -0.02em; padding: 0 20px; position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); } #philosophy .policy .diagram .item .text p{ font-family: var(--engFont); font-size: 24px; font-weight: 600; color: var(--mainColor); } #philosophy .policy .diagram .item .text strong{ font-size: 28px; font-weight: 500; color: #FFF; } #philosophy .policy .diagram .item > div{ position: relative; background: var(--mainColor); border-radius: 50%; padding: 8px; } #philosophy .policy .diagram .item > div::before{ content: ""; display: block; background: #FFF; border-radius: 50%; padding-bottom: 100%; } #philosophy .policy .diagram .item.title{ border-color: transparent; z-index: 10; } #philosophy .policy .diagram .item.title > div{ background: linear-gradient(135deg, var(--navyGradi)); box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.25); } #philosophy .policy .diagram .item.title > div::before{ background: transparent; } #philosophy .strategy{ background: var(--mainColor); } #philosophy .strategy *{ color: #FFF; } #philosophy .strategy .page-title{ text-align: center; } #philosophy .strategy .page-title p{ font-size: 22px; font-weight: 200; letter-spacing: -0.02em; line-height: 1.5; margin-top: 30px; } #philosophy .strategy .content{ padding-left: 400px; position: relative; } #philosophy .strategy .content .left{ position: absolute; top: 0; bottom: 0; left: 0; z-index: 100; } #philosophy .strategy .content .left p{ font-family: var(--engFont); font-size: 7.4rem; font-weight: 600; position: relative; top: 39%; transform: translateY(-50%); } #philosophy .strategy .content .grid-box{ display: grid; grid-template-columns: repeat(3, calc(100% / 3)); margin: -10px; } #philosophy .strategy .content .grid-box > *{ margin: 10px; } #philosophy .strategy .content figure, #philosophy .strategy .content figure img{ width: 100%; } #philosophy .strategy .content dl{ text-align: center; letter-spacing: -0.02em; margin-top: 40px; } #philosophy .strategy .content dl dt{ font-size: 32px; font-weight: 600; } #philosophy .strategy .content dl dd{ font-size: 20px; font-weight: 400; line-height: 1.5; margin-top: 15px; } #philosophy .idiom{ background: url("/img/sub/company/philosophy_bg02.jpg") no-repeat center center / cover; padding-bottom: 280px; } #philosophy .idiom *{ color: #FFF; } #philosophy .idiom .inner{ max-width: 1200px; width: 100%; text-align: center; margin: 0 auto; } #philosophy .idiom .inner p{ font-size: 36px; font-weight: 600; letter-spacing: -0.02em; } #philosophy .idiom .inner p span{ display: block; font-size: 24px; font-weight: 400; line-height: 1.4; margin-top: 15px; } #philosophy .idiom .underline{ border-bottom: 1px solid rgba(255, 255, 255, 0.3); padding-bottom: 60px; margin-bottom: 60px; } #philosophy .idiom .underline strong{ font-size: 7.4rem; font-weight: 600; letter-spacing: 0.3em; } #philosophy .idiom .underline p{ font-size: 24px; font-weight: 200; letter-spacing: -0.02em; margin-top: 30px; } #philosophy .idiom .underline p b{ font-weight: 500; } @media screen and (max-width: 1700px){ #philosophy section .page-title.pb60{ padding-bottom: 40px; } #philosophy .intro .text{ padding-right: 90px; } #philosophy .intro .text h4{ margin-bottom: 40px; } #philosophy .intro .text p{ font-size: 19px; } #philosophy .motto .item p{ font-size: 24px; } #philosophy .motto .item strong, #philosophy .motto .item span{ font-size: 19px; } #philosophy .vision p{ font-size: 22px; } #philosophy .policy .diagram .item{ max-width: 360px; } #philosophy .policy .diagram .item .text p{ font-size: 22px; } #philosophy .policy .diagram .item .text strong{ font-size: 26px; } #philosophy .strategy .page-title p{ font-size: 20px; margin-top: 20px; } #philosophy .strategy .content{ padding-left: 350px; } #philosophy .strategy .content .left p{ font-size: 7rem; } #philosophy .strategy .content dl dt{ font-size: 28px; } #philosophy .strategy .content dl dd{ font-size: 19px; } #philosophy .idiom{ padding-bottom: 200px; } #philosophy .idiom .inner p{ font-size: 32px; } #philosophy .idiom .inner p span{ font-size: 22px; } #philosophy .idiom .underline strong{ font-size: 7rem; } #philosophy .idiom .underline p{ font-size: 22px; } } @media screen and (max-width: 1500px){ #philosophy .intro .text p br{ display: none; } #philosophy .intro .img{ width: 48%; } } @media screen and (max-width: 1280px){ #philosophy section .page-title.pb60{ padding-bottom: 20px; } #philosophy .intro .text{ padding-right: 60px; } #philosophy .intro .text h4{ margin-bottom: 25px; } #philosophy .intro .text p{ font-size: 18px; } #philosophy .motto .item p{ font-size: 22px; } #philosophy .motto .item .icon{ margin-block: 20px 25px; } #philosophy .motto .item strong, #philosophy .motto .item span{ font-size: 18px; } #philosophy .vision .box{ padding: 100px 30px; } #philosophy .vision p{ font-size: 20px; } #philosophy .policy .diagram .item{ max-width: 320px; padding: 12px; } #philosophy .policy .diagram .item .text p{ font-size: 20px; } #philosophy .policy .diagram .item .text strong{ font-size: 24px; } #philosophy .strategy .page-title p{ font-size: 18px; margin-top: 15px; } #philosophy .strategy .content{ padding-left: 250px; } #philosophy .strategy .content dl{ margin-top: 30px; } #philosophy .strategy .content dl dt{ font-size: 24px; } #philosophy .strategy .content dl dd{ font-size: 18px; } #philosophy .idiom{ padding-bottom: 150px; } #philosophy .idiom .page-title{ padding-bottom: 60px; } #philosophy .idiom .inner p{ font-size: 28px; } #philosophy .idiom .inner p span{ font-size: 20px; } #philosophy .idiom .underline{ padding-bottom: 40px; margin-bottom: 40px; } #philosophy .idiom .underline strong{ font-size: 6.5rem; } #philosophy .idiom .underline p{ font-size: 20px; margin-top: 20px; } } @media screen and (max-width: 1024px){ #philosophy .intro .flex-box{ flex-direction: column-reverse; } #philosophy .intro .text{ padding-right: 0; padding-top: 30px; transform: translateY(var(--aosP)); } #philosophy .intro .text h4{ margin-bottom: 20px; } #philosophy .intro .img{ width: 100%; } #philosophy .policy .diagram .item{ margin-right: -50px; } #philosophy .policy .diagram .item .text p{ font-size: 18px; } #philosophy .policy .diagram .item .text strong{ font-size: 22px; } #philosophy .strategy .content{ padding-left: 0; } #philosophy .strategy .content .left{ position: static; transform: translateY(var(--aosP)); transition-delay: unset; } #philosophy .strategy .content .left.aos-animate{ transform: translateY(0); } #philosophy .strategy .content .left br{ display: none; } #philosophy .strategy .content .left p{ font-size: 6rem; text-align: center; margin-bottom: 30px; position: static; transform: unset; } } @media screen and (max-width: 900px){ #philosophy .vision p{ font-size: 18px; } #philosophy .idiom .inner p{ font-size: 24px; } #philosophy .idiom .inner p span{ font-size: 18px; } #philosophy .idiom .underline{ padding-bottom: 35px; margin-bottom: 35px; } #philosophy .idiom .underline p{ font-size: 18px; } } @media screen and (max-width: 800px){ #philosophy .motto .grid-box{ grid-template-columns: repeat(1, 100%); padding-left: 50px; margin: -10px; } #philosophy .motto .item{ position: relative; border: 1px solid var(--border); padding: 20px; transition-delay: unset; margin: 10px; } #philosophy .motto .item p{ font-size: 20px; margin-bottom: 10px; } #philosophy .motto .item .icon{ margin: 0; position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); } #philosophy .motto .item strong, #philosophy .motto .item span{ font-size: 17px; } #philosophy .strategy .content .left p{ font-size: 5.5rem; } #philosophy .strategy .content .grid-box{ grid-template-columns: repeat(1, 100%); } #philosophy .strategy .content .item{ display: flex; align-items: center; transition-delay: unset; } #philosophy .strategy .content .item:nth-of-type(even){ flex-direction: row-reverse; } #philosophy .strategy .content figure{ flex-shrink: 0; width: 50%; } #philosophy .strategy .content dl{ flex: 1 1 auto; min-width: 0; padding-inline: 20px; margin: 0; } #philosophy .strategy .content .item:nth-of-type(odd) dl{ padding-right: 0; } #philosophy .strategy .content .item:nth-of-type(even) dl{ padding-left: 0; } } @media screen and (max-width: 750px){ #philosophy .policy .diagram{ max-width: 500px; margin: 0 auto; } #philosophy .policy .diagram .flex-box{ flex-wrap: wrap; } #philosophy .policy .diagram .item{ order: 1; width: calc((100% + 30px) / 2); margin-right: -30px; padding: 5px; } #philosophy .policy .diagram .item .text br{ display: none; } #philosophy .policy .diagram .item.title{ display: none; } } @media screen and (max-width: 600px){ #philosophy .vision br.m{ display: block; } #philosophy .vision .box{ padding-block: 70px; } #philosophy .vision p{ margin-top: 20px; } #philosophy .policy br{ display: none; } #philosophy .policy .diagram .item .text{ padding: 0 25px; } #philosophy .policy .diagram .item .text p{ font-size: 17px; } #philosophy .strategy .page-title span{ display: block; } #philosophy .strategy .content dl dt{ font-size: 22px; } #philosophy .strategy .content dl dd{ font-size: 17px; } #philosophy .idiom br.m{ display: block; } } /* 회사소개 - CI소개 */ #ci{ overflow: hidden; } #ci .symbol .flex-box{ display: flex; align-items: center; } #ci .symbol .flex-box > *{ opacity: 0; transition: opacity var(--aosT), transform var(--aosT); } #ci .symbol .left{ flex-shrink: 0; width: 47.5%; transform: translateX(var(--aosM)); } #ci .symbol .left figure{ background: var(--grayBg); text-align: center; padding: 130px 75px; text-align: center; } #ci .symbol .left figure img{ width: auto; height: auto; } #ci .symbol .right{ flex: 1 1 auto; min-width: 0; padding-left: 80px; transform: translateX(var(--aosP)); } #ci .symbol .right dl dt{ font-size: 32px; font-weight: 600; color: #111; letter-spacing: -0.02em; } #ci .symbol .right dl dd{ font-size: 20px; font-weight: 300; color: #111; letter-spacing: -0.02em; line-height: 1.6; margin-top: 30px; } #ci .symbol .right dl dd a{ width: 250px; height: 70px; display: inline-flex; justify-content: center; align-items: center; background: var(--mainColor); font-family: var(--engFont); font-size: 20px; font-weight: 400; color: #FFF; letter-spacing: -0.01em; margin-top: 30px; } #ci .symbol .right dl dd a i{ display: inline-block; width: 12px; height: 15px; background: #FFF; mask: url("/img/board/icon_download.svg") no-repeat center center / contain; -webkit-mask: url("/img/board/icon_download.svg") no-repeat center center / contain; margin-left: 10px; } #ci .symbol .flex-box.aos-animate > *{ opacity: 1; transform: translate(0, 0) !important; } #ci .logos .grid-box{ display: grid; grid-template-columns: repeat(3, calc(100% / 3)); margin: -25px; } #ci .logos .grid-box > *{ margin: 25px; } #ci .logos .item{ text-align: center; } #ci .logos .item figure{ height: 200px; display: flex; justify-content: center; align-items: center; border: 1px solid var(--border); padding: 30px; } #ci .logos .item figure img{ width: auto; height: auto; } #ci .logos .item p{ font-size: 20px; font-weight: 500; color: #111; letter-spacing: -0.02em; margin-top: 30px; } #ci .color .grid-layout{ display: grid; grid-template-columns: 520px calc(100% - 520px); } #ci .color .grid-layout > *{ opacity: 0; transition: opacity var(--aosT), transform var(--aosT); } #ci .color .left{ padding-right: 30px; transform: translateX(var(--aosM)); } #ci .color .left h5{ font-size: 32px; font-weight: 600; color: #111; letter-spacing: -0.02em; } #ci .color .right{ transform: translateY(var(--aosP)); } #ci .color .right .base{ font-size: 20px; font-weight: 300; color: #111; letter-spacing: -0.02em; line-height: 1.6; } #ci .color .right .base strong{ font-weight: 500; } #ci .color .right .box{ background: var(--mainColor); padding: 40px; margin-bottom: 30px; display: flex; flex-wrap: wrap; } #ci .color .right .box dl{ display: flex; flex-wrap: wrap; align-items: center; font-family: var(--engFont); color: #FFF; letter-spacing: -0.02em; } #ci .color .right .box dl dt{ flex-shrink: 0; width: 270px; font-size: 20px; font-weight: 600; } #ci .color .right .box dl dt span{ display: block; font-size: 17px; font-weight: 500; color: rgba(255, 255, 255, 0.6); margin-top: 5px; } #ci .color .right .box dl dd{ display: flex; flex-wrap: wrap; font-size: 18px; font-weight: 200; margin: -5px -30px; } #ci .color .right .box dl dd p{ margin: 5px 30px; } #ci .color .right .box dl dd strong{ font-weight: 400; } #ci .color .aos-animate .grid-layout > *{ opacity: 1; transform: translate(0, 0) !important; } @media screen and (max-width: 1700px){ #ci .symbol .left figure{ padding: 100px 50px; } #ci .symbol .left figure img{ width: 130px; } #ci .symbol .right dl dt{ font-size: 28px; } #ci .symbol .right dl dd{ font-size: 19px; } #ci .symbol .right dl dd a{ width: 210px; height: 65px; font-size: 19px; } #ci .logos .item figure{ height: 170px; } #ci .logos .item p{ font-size: 19px; margin-top: 20px; } #ci .color .grid-layout{ grid-template-columns: 450px calc(100% - 450px); } #ci .color .left h5{ font-size: 28px; } #ci .color .right .base{ font-size: 19px; } #ci .color .right .box dl dt{ width: 230px; font-size: 19px; } } @media screen and (max-width: 1400px){ #ci .symbol .right{ padding-left: 50px; } #ci .symbol .right br{ display: none; } #ci .logos .grid-box{ margin: -15px; } #ci .logos .grid-box > *{ margin: 15px; } } @media screen and (max-width: 1280px){ #ci .symbol .left figure img{ width: 110px; } #ci .symbol .right dl dt{ font-size: 24px; } #ci .symbol .right dl dd{ font-size: 18px; margin-top: 20px; } #ci .symbol .right dl dd a{ width: 180px; height: 60px; font-size: 18px; margin-top: 20px; } #ci .symbol .right dl dd a i{ width: 22px; height: 22px; } #ci .logos .item figure{ height: 140px; } #ci .logos .item p{ font-size: 18px; margin-top: 15px; } #ci .color .grid-layout{ grid-template-columns: 350px calc(100% - 350px); } #ci .color .left h5{ font-size: 26px; } #ci .color .right .base{ font-size: 18px; } #ci .color .right .box{ padding: 30px; margin-bottom: 20px; } #ci .color .right .box dl dt{ font-size: 18px; } #ci .color .right .box dl dd{ font-size: 17px; } } @media screen and (max-width: 1200px){ #ci .color .grid-layout{ grid-template-columns: repeat(1, 100%); } #ci .color .left{ padding-right: 0; padding-bottom: 20px; transform: translateY(var(--aosP)); } } @media screen and (max-width: 1024px){ #ci .symbol .flex-box{ flex-direction: column; } #ci .symbol .left{ width: 100%; transform: translateY(var(--aosP)); } #ci .symbol .left figure{ padding: 50px; } #ci .symbol .left figure img{ width: 100px; } #ci .symbol .right{ padding-top: 25px; padding-left: 0; transform: translateY(var(--aosP)); } #ci .logos .grid-box{ grid-template-columns: repeat(1, 100%); margin: -20px 0; } #ci .logos .item{ margin: 20px 0; transition-delay: unset !important; } } @media screen and (max-width: 900px){ #ci .symbol .right dl dt{ font-size: 22px; } #ci .symbol .right dl dd a{ width: 170px; height: 57px; } #ci .color .left h5{ font-size: 24px; } #ci .color .right .box{ padding: 25px; } #ci .color .right .box dl{ flex-direction: column; align-items: unset; } #ci .color .right .box dl dt{ margin-bottom: 20px; } } @media screen and (max-width: 850px){ #ci .color br{ display: none; } } /* 회사소개 - 그룹연혁 */ #history .page-title{ position: relative; z-index: 10; } #history .history-box{ --left: 44.375%; --tit: 100px; --pt: 180px; } #history .history-box{ margin-top: var(--tit); } #history .history-box .left, #history .history-box .right section{ opacity: 1; } #history .history-box .year h4{ font-family: var(--engFont); font-size: 5.4rem; font-weight: 700; color: #111; letter-spacing: -0.02em; padding-bottom: 30px; } #history .history-box .year figure{ display: block; padding-bottom: 69.885%; position: relative; overflow: hidden; } #history .history-box .year figure img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #history .history-box .year dl{ margin-top: 30px; } #history .history-box .year dl *{ font-size: 18px; letter-spacing: -0.02em; } #history .history-box .year dl dt{ font-family: var(--engFont); font-weight: 700; color: #333; margin-bottom: 15px; } #history .history-box .year dl dd{ font-weight: 300; color: #111; } #history .history-box .left .sticky{ margin-top: calc((var(--tit) + var(--pt)) * -1); position: sticky; top: calc((50% + var(--tabH)) - ((var(--stickyH) + var(--pt)) / 2)); left: 0; } #history .history-box .left .year-wrap .slick-track{ display: flex; } #history .history-box .left .year{ float: unset; height: auto; display: block !important; background: #FFF; opacity: 1 !important; padding-top: var(--pt); transform: translateY(100%); z-index: unset !important; transition: transform 0.5s !important; } #history .history-box .left .year.slick-current{ transform: translateY(0); } #history .history-box .left .year.slick-prev{ transform: translateY(0); } #history .history-box .clone{ display: none; } #history .history-box .item{ border-top: 1px solid var(--border); display: flex; padding: 30px 0; } #history .history-box .item h5{ flex-shrink: 0; width: 160px; font-family: var(--engFont); font-size: 32px; font-weight: 700; color: var(--mainColor); letter-spacing: -0.02em; } #history .history-box .item .dl{ flex: 1 1 auto; min-width: 0; margin-top: 8px; } #history .history-box .item .dl dl:not(:last-of-type){ margin-bottom: 20px; } #history .history-box .item .dl dl{ display: flex; align-items: baseline; } #history .history-box .item .dl dl *{ font-size: 20px; letter-spacing: -0.02em; } #history .history-box .item .dl dl dt{ flex-shrink: 0; width: 60px; font-family: var(--engFont); font-weight: 700; color: #333; } #history .history-box .item .dl dl dd{ flex: 1 1 auto; font-weight: 300; color: #111; } #history .history-box .item .dl dl dd p:not(:last-of-type){ margin-bottom: 20px; } #history .history-box .item .gallery{ width: 100%; margin-top: 20px; } #history .history-box .item .gallery ul{ max-width: 480px; display: grid; grid-template-columns: repeat(2, 50%); margin: -5px; } #history .history-box .item .gallery ul li{ margin: 5px; } #history .history-box .item .gallery ul li figure{ display: block; padding-bottom: 60.87%; position: relative; overflow: hidden; } #history .history-box .item .gallery ul li figure img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #history .history-box section:first-of-type .item:first-of-type{ border-top-color: #111; } @media screen and (hover: hover) and (pointer: fine){ #history .history-box .left .sticky{ top: calc(50% - ((var(--stickyH) + var(--tabH)) / 2)); } } @media screen and (max-width: 1700px){ #history .history-box{ --tit: 87px; --pt: 120px; } #history .history-box .year dl{ margin-top: 20px; } #history .history-box .item{ padding: 25px 0; } #history .history-box .item h5{ width: 130px; font-size: 28px; } #history .history-box .item .dl{ margin-top: 6px; } #history .history-box .item .dl dl *{ font-size: 19px; } } @media screen and (max-width: 1280px){ #history .history-box{ --tit: 65px; --pt: 80px; } #history .history-box .year h4{ padding-bottom: 20px; } #history .history-box .year dl *{ font-size: 17px; } #history .history-box .year dl dt{ margin-bottom: 10px; } #history .history-box .item{ padding: 20px 0; } #history .history-box .item h5{ width: 100px; font-size: 24px; } #history .history-box .item .dl{ margin-top: 3px; } #history .history-box .item .dl dl *{ font-size: 18px; } #history .history-box .item .dl dl dt{ width: 50px; } #history .history-box .item .dl dl dd p{ gap: 10px 12px; } } @media screen and (max-width: 1200px){ #history .page-title{ padding-bottom: 0; } #history .history-tab{ margin-bottom: var(--subPt); } #history .history-box .flex{ display: block; } #history .history-box .left{ display: none; } #history .history-box .right{ padding-left: 50px; } #history .history-box .right section{ transform: translateY(var(--aosP)); opacity: 0; transition: transform var(--aosT), opacity var(--aosT); } #history .history-box .right section.aos-animate{ transform: translateY(0); opacity: 1; } #history .history-box section:not(:last-of-type){ margin-bottom: 60px; } #history .history-box .bar{ left: 11px; } #history .history-box .clone{ display: block; margin-bottom: 20px; } } @media screen and (max-width: 900px){ #history .history-box .item h5{ font-size: 22px; } #history .history-box .item .dl{ margin-top: 2px; } #history .history-box .item .dl dl dt{ width: 40px; } } @media screen and (max-width: 750px){ #history .history-box .item{ flex-direction: column; } #history .history-box .item h5{ width: 100%; margin-bottom: 10px; } } /* 회사소개 - 인증 및 수상내역 */ #award .history-box{ --left: 410px; } #award .history-box{ padding-top: 60px; } #award .history-box .sec{ padding-top: 40px; } #award .history-box .left h5{ font-size: 5.4rem; font-weight: 700; color: #CCC; letter-spacing: -0.02em; position: relative; transition: color 0.4s; } #award .history-box .left h5 i{ width: var(--circle); height: var(--circle); background: #FFF; border: 2px solid #EEE; border-radius: 50%; position: absolute; top: 50%; right: calc(var(--gapR) * -1); transform: translate(50%, -50%); transition: border-color 0.4s; } #award .history-box .left h5 i::before{ content: ""; width: var(--dot); height: var(--dot); background: #FFF; background: #CCC; border: 2px solid #EEE; border-radius: inherit; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-sizing: border-box; transition: background 0.4s, border-color 0.4s; } #award .history-box .on .left h5{ color: #000; } #award .history-box .on .left h5 i{ border-color: var(--mainColor); } #award .history-box .on .left h5 i::before{ background: var(--mainColor); border-color: var(--mainColor); } #award .history-box .right .grid{ display: grid; grid-template-columns: repeat(2, 50%); margin: -10px; } #award .history-box .right .grid > *{ margin: 10px; } #award .history-box .right .item{ display: flex; flex-direction: column; border: 1px solid var(--border); letter-spacing: -0.02em; padding: 30px; } #award .history-box .right .tit{ flex: 1 0 auto; margin-bottom: 15px; } #award .history-box .right .tit em{ display: inline-block; background: var(--mainColor); border-radius: 99px; font-size: 15px; font-weight: 500; color: #FFF; line-height: 1; padding: 6px 15px; } #award .history-box .right .tit em.black{ background: #111; } #award .history-box .right .tit h6{ min-height: 3em; font-size: 20px; font-weight: 500; color: #111; line-height: 1.5; margin-top: 10px; } #award .history-box .right .info{ position: relative; } #award .history-box .right .info p{ min-height: 1.3em; font-size: 15px; font-weight: 500; color: #AAA; padding-right: 60px; } #award .history-box .right .info i{ width: 30px; height: 30px; border-radius: 50%; position: absolute; bottom: 0; right: 0; } #award .history-box .right .cursor{ -webkit-tap-highlight-color: transparent; /* 사파리 & 크롬용 */ -webkit-touch-callout: none; /* iOS 오래 누를 때 메뉴 제거 */ user-select: none; } #award .history-box .right .cursor{ cursor: pointer; } #award .history-box .right .cursor .info i{ background: var(--border); } #award .history-box .right .cursor .info i::before{ content: ""; display: block; height: 100%; background: #FFF; mask: url("/img/sub/company/icon_plus.svg") no-repeat center center / contain; -webkit-mask: url("/img/sub/company/icon_plus.svg") no-repeat center center / contain; } /* 팝업 - award */ #popup.award{ display: block; opacity: 0; transition: opacity 0.5s; pointer-events: none; } #popup.award.on{ opacity: 1; transition: opacity 0.5s; pointer-events: unset; } #popup.award .inner{ width: 1000px; background: #FFF; padding: 35px 40px; } #popup.award .img-wrap .slick-list{ margin-right: -20px; } #popup.award .img-wrap .slick-track{ display: flex; } #popup.award .img{ float: unset; height: auto; display: flex; flex-direction: column; justify-content: center; margin-right: 20px; } #popup.award .img figure{ width: 100%; } #popup.award .img figure img{ width: 100%; max-height: 75vh; object-fit: contain; } #popup.award .slick-dots{ display: flex; justify-content: center; margin-top: 25px; } #popup.award .slick-dots li{ width: 20px; height: 3px; background: var(--border); cursor: pointer; } #popup.award .slick-dots li:not(:last-of-type){ margin-right: 5px; } #popup.award .slick-dots li button{ display: none; } #popup.award .slick-dots li.slick-active{ width: 30px; background: var(--mainColor); } @media screen and (max-width: 1700px){ #award .history-box{ --left: 300px; } #award .history-box{ padding-top: 30px; } #award .history-box .right .item{ padding: 25px; } #award .history-box .right .tit h6{ font-size: 19px; } /* 팝업 - award */ #popup.award .inner{ padding: 25px 30px; } } @media screen and (max-width: 1280px){ #award .history-box{ --left: 200px; } #award .history-box{ padding-top: 0; } #award .history-box .right .item{ padding: 17px 20px; } #award .history-box .right .tit em{ padding: 5px 12px; } #award .history-box .right .tit h6{ font-size: 18px; } #award .history-box .right .info i{ width: 27px; height: 27px; } /* 팝업 - award */ #popup.award .img figure img{ max-height: 70vh; } } @media screen and (max-width: 1024px){ #award .history-box .bar{ left: calc(var(--circle) / 2); } #award .history-box .flex{ flex-direction: column; padding-left: var(--gapR); } #award .history-box .left{ width: 100%; padding-right: 0; padding-bottom: 15px; } #award .history-box .left h5 i{ left: calc((var(--gapR) + (var(--circle) / 2)) * -1); right: unset; transform: translate(50%, -50%); } #award .history-box .right{ padding-left: 0; } } @media screen and (max-width: 700px){ #award .history-box .right .grid{ grid-template-columns: repeat(1, 100%); } } @media screen and (max-width: 650px){ /* 팝업 - award */ #popup.award .inner{ padding: 25px; } #popup.award .close{ right: -10px; transform: translate(0, -100%); } #popup.certify .img figure img{ max-height: 60vh; } } /* 회사소개 - 찾아오시는 길 */ #location{ --gap: 50px; --line: 3; } #location .flex-box{ display: flex; flex-wrap: wrap; margin-bottom: calc(var(--gap) * -1); } #location .item{ display: flex; flex-direction: column; background: var(--grayBg); width: calc((100% - calc(var(--gap) * (var(--line) - 1))) / var(--line)); padding: 40px; margin-right: var(--gap); margin-bottom: var(--gap); position: relative; transform: translateZ(0); -webkit-transform: translateZ(0); backface-visibility: hidden; } #location .item:nth-of-type(3n){ margin-right: 0; } #location .item .bg{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; transition: opacity 0.4s; } #location .item .bg::after{ content: ""; background: rgba(0, 0, 0, 0.5); position: absolute; top: 0; right: 0; bottom: 0; left: 0; } #location .item .bg img{ width: 100%; height: 100%; object-fit: cover; } #location .item address, #location .item a{ position: relative; z-index: 10; } #location .item address{ flex: 1 0 auto; letter-spacing: -0.02em; } #location .item h6{font-size: 28px; font-weight: 500; color: #111; text-stroke: 0.015em #111; -webkit-text-stroke: 0.015em #111; padding-left: 50px; position: relative; transition: color 0.4s, text-stroke 0.4s; } #location .item h6::before{ content: ""; width: 28px; height: 32px; background: var(--mainColor); mask: url("/img/sub/company/icon_marker.svg") no-repeat center center / contain; -webkit-mask: url("/img/sub/company/icon_marker.svg") no-repeat center center / contain; position: absolute; top: 50%; left: 0; transform: translateY(-50%); transition: background 0.4s; } #location .item .dl{ margin: 55px 0; } #location .item .dl dl{ display: flex; font-size: 18px; } #location .item .dl dl:not(:last-of-type){ margin-bottom: 18px; } #location .item .dl dl dt{ flex-shrink: 0; width: 80px; font-family: var(--engFont); font-weight: 700; color: var(--mainColor); text-stroke: 0.015em var(--mainColor); -webkit-text-stroke: 0.015em var(--mainColor); transition: color 0.4s; } #location .item .dl dl dd{ flex: 1 1 auto; min-width: 0; font-weight: 300; color: #111; text-stroke: 0.015em #111; -webkit-text-stroke: 0.015em #111; transition: color 0.4s; } #location .item a{ min-height: 70px; display: flex; justify-content: center; align-items: center; background: var(--mainColor); font-size: 20px; font-weight: 400; color: #FFF; text-stroke: 0.015em transparent; -webkit-text-stroke: 0.015em transparent; letter-spacing: -0.01em; text-align: center; padding: 10px; transition: background 0.4s, color 0.4s; } @media screen and (hover: hover) and (pointer: fine){ #location .item:hover .bg{ opacity: 1; } #location .item:hover address h6{ color: #FFF; text-stroke-color: transparent; -webkit-text-stroke-color: transparent; } #location .item:hover address h6::before{ background: #FFF; text-stroke-color: transparent; -webkit-text-stroke-color: transparent; } #location .item:hover .dl dt, #location .item:hover .dl dd{ color: #FFF; text-stroke-color: transparent; -webkit-text-stroke-color: transparent; } #location .item:hover a{ background: #FFF; color: var(--mainColor); text-stroke-color: var(--mainColor); -webkit-text-stroke-color: var(--mainColor); } } @media screen and (max-width: 1700px){ #location .item{ padding: 30px; } #location .item h6{ font-size: 25px; padding-left: 45px; } #location .item h6::before{ width: 25px; height: 29px; } #location .item .dl{ margin: 45px 0; } #location .item .dl dl:not(:last-of-type){ margin-bottom: 15px; } #location .item .dl dl dt{ width: 65px; } #location .item a{ min-height: 60px; font-size: 19px; } } @media screen and (max-width: 1500px){ #location{ --gap: 30px; } } @media screen and (max-width: 1400px){ #location{ --line: 2; } #location .item:nth-of-type(3n){ margin-right: var(--gap); } #location .item:nth-of-type(2n){ margin-right: 0; } } @media screen and (max-width: 1280px){ #location .item{ padding: 25px; } #location .item h6{ font-size: 22px; padding-left: 40px; } #location .item h6::before{ width: 22px; height: 26px; } #location .item .dl{ font-size: 17px; margin: 35px 0; } #location .item .dl dl:not(:last-of-type){ margin-bottom: 10px; } #location .item .dl dl dt{ width: 60px; } #location .item a{ min-height: 50px; font-size: 18px; } } @media screen and (max-width: 850px){ #location .item{ width: 100%; margin-right: 0 !important; } } /* 회사소개 - 홍보영상 */ #video .intro .flex-box{ display: flex; align-items: center; } #video .intro .flex-box > *{ opacity: 0; transition: opacity var(--aosT), transform var(--aosT); } #video .intro.aos-animate .flex-box > *{ opacity: 1; transform: translate(0, 0) !important; } #video .intro .left{ flex-shrink: 0; width: 47.813%; transform: translateX(var(--aosM)); } #video .intro .left .video, #video .intro .left .iframe{ position: relative; overflow: hidden; } #video .intro .left .video{ display: flex; } #video .intro .left .video video{ width: 100%; } #video .intro .left .iframe{ aspect-ratio: 16 / 9; } #video .intro .left .iframe iframe{ width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #video .intro .left .cover{ display: flex; justify-content: center; align-items: center; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } #video .intro .left .cover button{ width: 80px; height: 80px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(4px); border: none; border-radius: 50%; padding: 0; } #video .intro .left .cover button::before{ content: ""; height: 12px; display: block; background: url("/img/board/icon_play.svg") no-repeat center center / contain; } #video .intro .right{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; letter-spacing: -0.02em; padding-left: 80px; transform: translateX(var(--aosP)); } #video .intro .right > *:not(:last-child){ margin-bottom: 30px; } #video .intro .right h4{ font-size: 38px; font-weight: 600; color: #111; line-height: 1.5; } #video .intro .right .p-box p{ font-size: 19px; font-weight: 300; color: #333; line-height: 1.7; } #video .intro .right .p-box p:not(:last-of-type){ margin-bottom: 15px; } #video .board{ padding-top: 100px; } @media screen and (max-width: 1700px){ #video .intro .left .cover button{ width: 70px; height: 70px; } #video .intro .right > *:not(:last-child){ margin-bottom: 25px; } #video .intro .right h4{ font-size: 32px; } } @media screen and (max-width: 1640px){ #video .intro .right br{ display: none; } } @media screen and (max-width: 1500px){ #video .intro .right{ padding-left: 60px; } } @media screen and (max-width: 1280px){ #video .intro .left .cover button{ width: 60px; height: 60px; } #video .intro .right > *:not(:last-child){ margin-bottom: 20px; } #video .intro .right h4{ font-size: 28px; } #video .intro .right .p-box p{ font-size: 18px; } #video .intro .right .p-box p:not(:last-of-type){ margin-bottom: 10px; } #video .board{ padding-top: 70px; } } @media screen and (max-width: 1024px){ #video .intro .flex-box{ flex-direction: column; } #video .intro .left{ width: 100%; } #video .intro .right{ padding-top: 25px; padding-left: 0; } } @media screen and (max-width: 900px){ #video .intro .right h4{ font-size: 24px; } } /* 계열사 소개 - 리스트 */ #affiliate{ padding-bottom: 0; } #affiliate .page-title p{ font-size: 20px; font-weight: 300; color: #555; letter-spacing: -0.02em; line-height: 1.7; } #affiliate .page-title .p-box{ margin-top: 60px; } #affiliate .page-title .p-box p:not(:last-of-type){ margin-bottom: 20px; } #affiliate .affiliate{ padding-bottom: var(--subPb); } #affiliate .affiliate .page-title{ padding-bottom: 30px; } #affiliate .affiliate .tab-menu{ background-color: #FFF; padding: 10px 0; margin-bottom: 90px; position: sticky; top: var(--headerH); z-index: 100; transition: top 0.4s; } #affiliate .affiliate .tab-content .tab:not(.active){ width: 100%; position: absolute; top: -100%; left: -100%; } #affiliate .affiliate-board{ margin-bottom: -100px; } #affiliate .affiliate-board .item{ background: #FFF; position: sticky; top: calc(50% - (var(--flexH) / 2) + (var(--tabH) / 2)); left: 0; padding-bottom: 100px; opacity: 1; transform: translateY(0); } #affiliate .affiliate-board .item .flex{ height: var(--flexH); display: flex; background: var(--grayBg); } #affiliate .affiliate-board .item .image{ flex-shrink: 0; width: 760px; position: relative; } #affiliate .affiliate-board .item .image figure, #affiliate .affiliate-board .item .image figure img{ width: 100%; height: 100%; } #affiliate .affiliate-board .item .image figure img{ object-fit: cover; } #affiliate .affiliate-board .item .image div{ padding: 60px; position: absolute; bottom: 0; left: 0; right: 0; z-index: 10; } #affiliate .affiliate-board .item .text{ flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; letter-spacing: -0.03em; padding: 70px 60px; } #affiliate .affiliate-board .item .text .title div{ display: flex; justify-content: space-between; margin-bottom: 10px; } #affiliate .affiliate-board .item .text .title figure{ height: 56px; } #affiliate .affiliate-board .item .text .title figure img{ width: auto; max-height: 100%; height: auto; } #affiliate .affiliate-board .item .text .title span{ font-size: 20px; font-weight: 600; color: #BBB; } #affiliate .affiliate-board .item .text .title h6{ font-size: 5.4rem; font-weight: 600; color: #111; } #affiliate .affiliate-board .item .text .content{ flex: 1 0 auto; margin: 45px 0; } #affiliate .affiliate-board .item .text .content p{ height: 5.1em; font-size: 19px; font-weight: 300; color: #333; letter-spacing: -0.03em; line-height: 1.7; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } #affiliate .affiliate-board .item .text .type dl dt{ font-size: 21px; font-weight: 600; color: #333; margin-bottom: 20px; } #affiliate .affiliate-board .item .text .type ul{ display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(100% / 3), 1fr)); margin: -15px; } #affiliate .affiliate-board .item .text .type ul > li{ background: #FFF; text-align: center; padding: 30px; margin: 15px; } #affiliate .affiliate-board .item .text .type .icon{ padding: 8px; } #affiliate .affiliate-board .item .text .type .icon figure{ display: inline-block; background: var(--mainColor); box-shadow: 0 0 0 8px rgba(var(--mainRGB), 0.1); border-radius: 50%; } #affiliate .affiliate-board .item .text .type p{ font-size: 16px; font-weight: 500; color: #333; margin-top: 20px; } /* item - black */ #affiliate .affiliate-board .black .flex{ background: #111; } #affiliate .affiliate-board .black .text .title figure img{ filter: invert(1) brightness(50); -webkit-filter: invert(1) brightness(50); } #affiliate .affiliate-board .black .text .title span{ font-weight: 500; color: rgba(255, 255, 255, 0.6); } #affiliate .affiliate-board .black .text .title h6{ font-weight: 500; color: #FFF; } #affiliate .affiliate-board .black .text .content p{ color: rgba(255, 255, 255, 0.8); } #affiliate .affiliate-board .black .text .type dl dt{ font-weight: 500; color: #FFF; } #affiliate .affiliate-board .black .text .type ul > li{ background: rgba(255, 255, 255, 0.1); } #affiliate .affiliate-board .black .text .type p{ font-weight: 400; color: #FFF; } /* item - blue */ #affiliate .affiliate-board .blue .flex{ background: var(--mainColor); } #affiliate .affiliate-board .blue .text .title figure img{ filter: invert(1) brightness(50); -webkit-filter: invert(1) brightness(50); } #affiliate .affiliate-board .blue .text .title span{ font-weight: 500; color: rgba(255, 255, 255, 0.6); } #affiliate .affiliate-board .blue .text .title h6{ font-weight: 500; color: #FFF; } #affiliate .affiliate-board .blue .text .content p{ color: rgba(255, 255, 255, 0.8); } #affiliate .affiliate-board .blue .text .type dl dt{ font-weight: 500; color: #FFF; } #affiliate .affiliate-board .blue .text .type ul > li{ background: rgba(255, 255, 255, 0.1); } #affiliate .affiliate-board .blue .text .type p{ font-weight: 400; color: #FFF; } /* body - up */ body.up #affiliate .affiliate .tab-menu{ top: 0; } @media screen and (max-width: 1700px){ #affiliate .page-title p{ font-size: 19px; } #affiliate .page-title .p-box{ margin-top: 40px; } #affiliate .affiliate .tab-menu{ margin-bottom: 60px; } #affiliate .affiliate-board{ margin-bottom: -70px; } #affiliate .affiliate-board .item{ padding-bottom: 70px; } #affiliate .affiliate-board .item .image div{ padding: 40px; } #affiliate .affiliate-board .item .text{ padding: 50px 40px; } #affiliate .affiliate-board .item .text .title figure{ height: 45px; } #affiliate .affiliate-board .item .text .title span{ font-size: 18px; } #affiliate .affiliate-board .item .text .content{ margin: 40px 0; } #affiliate .affiliate-board .item .text .content p{ font-size: 18px; } #affiliate .affiliate-board .item .text .type dl dt{ font-size: 20px; } #affiliate .affiliate-board .item .text .type ul > li{ padding: 25px; } #affiliate .affiliate-board .item .text .type p{ margin-top: 15px; } } @media screen and (max-width: 1500px){ #affiliate .affiliate-board .item .image{ width: 50%; } #affiliate .affiliate-board .item .text .content{ margin: 35px 0; } #affiliate .affiliate-board .item .text .type ul{ margin: -10px; } #affiliate .affiliate-board .item .text .type ul > li{ margin: 10px; } } @media screen and (max-width: 1280px){ #affiliate .page-title p{ font-size: 18px; } #affiliate .page-title .p-box{ margin-top: 30px; } #affiliate .page-title .p-box p:not(:last-of-type){ margin-bottom: 15px; } #affiliate .affiliate .page-title{ padding-bottom: 20px; } #affiliate .affiliate .tab-menu{ margin-bottom: 20px; } #affiliate .affiliate-board{ margin-bottom: -40px; } #affiliate .affiliate-board .item{ padding-bottom: 40px; } #affiliate .affiliate-board .item .image{ width: 45%; } #affiliate .affiliate-board .item .image div{ padding: 30px; } #affiliate .affiliate-board .item .text{ padding: 40px 30px; } #affiliate .affiliate-board .item .text .title figure{ height: 40px; } #affiliate .affiliate-board .item .text .title span{ font-size: 16px; } #affiliate .affiliate-board .item .text .content{ margin-top: 20px; } #affiliate .affiliate-board .item .text .content p{ font-size: 17px; } #affiliate .affiliate-board .item .text .type dl dt{ font-size: 19px; margin-bottom: 15px; } #affiliate .affiliate-board .item .text .type ul > li{ padding: 15px 20px; } #affiliate .affiliate-board .item .text .type p{ margin-top: 12px; } } @media screen and (max-width: 1024px){ #affiliate .affiliate-board .item{ position: static; opacity: 0; transform: translateY(var(--aosP)); } #affiliate .affiliate-board .item.aos-animate{ opacity: 1; transform: translateY(0); } #affiliate .affiliate-board .item .flex{ height: unset; flex-direction: column-reverse; } #affiliate .affiliate-board .item .image{ width: 100%; } #affiliate .affiliate-board .item .text .title div{ margin-bottom: 20px; } #affiliate .affiliate-board .item .text .content p{ height: unset; text-overflow: unset; overflow: unset; -webkit-box-orient: unset; -webkit-line-clamp: unset; } } @media screen and (max-width: 900px){ #affiliate .affiliate-board .item .image div{ padding: 20px; } #affiliate .affiliate-board .item .text{ padding: 25px; } #affiliate .affiliate-board .item .text .title h6{ font-size: 4.7rem; } #affiliate .affiliate-board .item .text .content{ margin-top: 15px; } } @media screen and (max-width: 800px){ #affiliate .page-title br{ display: none; } } @media screen and (max-width: 700px){ #affiliate .affiliate-board .item .text .title div{ flex-direction: column-reverse; margin-bottom: 10px; } #affiliate .affiliate-board .item .text .title figure{ margin-bottom: 30px; } #affiliate .affiliate-board .item .text .type ul{ grid-template-columns: repeat(2, 50%); } } /* 제품소개 (공통) */ #product .overflow{ padding-bottom: var(--subPb); margin-bottom: calc(var(--subPb) * -1); } /* 제품소개 - 전체 */ #product .all-board{ --line: 3; --gapR: 20px; --gapB: 100px; } #product .all-board{ display: flex; flex-wrap: wrap; margin-bottom: calc(var(--gapB) * -1); } #product .all-board .item{ width: calc((100% - calc(var(--gapR) * (var(--line) - 1))) / var(--line)); margin-right: var(--gapR); margin-bottom: var(--gapB); } #product .all-board .item:nth-of-type(3n){ margin-right: 0; } #product .all-board .item figure{ display: block; padding-bottom: 61.54%; position: relative; overflow: hidden; } #product .all-board .item figure::after{ content: ""; width: 100%; height: 100%; border: 1px solid #E5E5E5; position: absolute; top: 0; left: 0; box-sizing: border-box; } #product .all-board .item figure img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #product .all-board .item .text{ letter-spacing: -0.02em; padding-top: 30px; } #product .all-board .item .text h6{ font-size: 32px; font-weight: 600; color: #111; } #product .all-board .item .text p{ font-size: 18px; font-weight: 300; color: #111; line-height: 1.6; margin-top: 20px; } @media screen and (max-width: 1700px){ #product .all-board{ --gapB: 70px; } #product .all-board .item .text{ padding-top: 25px; } #product .all-board .item .text h6{ font-size: 28px; } #product .all-board .item .text p{ margin-top: 15px; } } @media screen and (max-width: 1280px){ #product .all-board{ --gapB: 50px; } #product .all-board .item .text{ padding-top: 20px; } #product .all-board .item .text h6{ font-size: 24px; } #product .all-board .item .text p{ font-size: 17px; margin-top: 10px; } } @media screen and (max-width: 1200px){ #product .all-board{ --line: 2; } #product .all-board .item:nth-of-type(3n){ margin-right: var(--gapR); } #product .all-board .item:nth-of-type(2n){ margin-right: 0; } } @media screen and (max-width: 900px){ #product .all-board .item .text h6{ font-size: 22px; } } @media screen and (max-width: 700px){ #product .all-board .item{ width: 100%; margin-right: 0 !important; } } /* 제품소개 - 리스트 */ #product .intro{ display: flex; letter-spacing: -0.02em; padding-bottom: 100px; opacity: 1; } #product .intro > *{ opacity: 0; transition: opacity var(--aosT), transform var(--aosT); } #product .intro .left{ flex-shrink: 0; width: 400px; padding-right: 30px; transform: translateX(var(--aosM)); } #product .intro .right{ flex: 1 1 auto; min-width: 0; transform: translateX(var(--aosP)); } #product .intro h3{ font-size: 5.4rem; font-weight: 700; color: #111; } #product .intro p, #product .intro .dot-list li{ font-size: 20px; font-weight: 300; color: #111; line-height: 1.7; } #product .intro .dot-list li::before{ top: calc(1.7em / 2); } #product .intro.aos-animate > *{ opacity: 1; transform: translate(0, 0) !important; } #product .tab-menu ul{ width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(100% / 6), 1fr)); } #product .tab-menu ul li{ max-width: unset; width: unset; } @media screen and (max-width: 1700px){ #product .intro{ padding-bottom: 70px; } #product .intro .left{ width: 300px; } #product .intro p, #product .intro .dot-list li{ font-size: 19px; } } @media screen and (max-width: 1500px){ #product .tab-menu ul{ grid-template-columns: repeat(auto-fit, minmax(calc(100% / 4), 1fr)); } } @media screen and (max-width: 1280px){ #product .intro{ padding-bottom: 40px; } #product .intro .left{ min-width: 250px; } #product .intro p, #product .intro .dot-list li{ font-size: 18px; } } @media screen and (max-width: 1100px){ #product .tab-menu ul{ grid-template-columns: repeat(auto-fit, minmax(calc(100% / 3), 1fr)); } } @media screen and (max-width: 1024px){ #product .intro{ flex-direction: column; } #product .intro .left{ width: 100%; padding-right: 0; padding-bottom: 20px; } } @media screen and (max-width: 750px){ #product .tab-menu ul{ grid-template-columns: repeat(auto-fit, minmax(calc(100% / 2), 1fr)); } } /* 연구개발 - 기술연구소 - 소개 (공통) */ #lab .history{ background: var(--grayBg); } #lab .history .flex-box{ display: flex; } #lab .history .left{ --padding: 135px; flex-shrink: 0; width: 50.938%; padding-right: var(--padding); } #lab .history .left figure, #lab .history .left figure img{ width: 100%; } #lab .history .right{ --padding: 85px; flex: 1 1 auto; min-width: 0; padding-left: var(--padding); position: relative; } #lab .history .bar{ width: 1px; height: 100%; background: #D9D9D9; position: absolute; top: 0; left: 0; } #lab .history .bar div{ height: 0; background: var(--mainColor); } #lab .history .content .item{ display: flex; align-items: flex-start; position: relative; } #lab .history .content .item:not(:last-of-type){ margin-bottom: 60px; } #lab .history .content .item::before{ content: ""; width: var(--padding); height: calc(100% - 23px); background: var(--grayBg); position: absolute; bottom: 0; left: calc(var(--padding) * -1); } #lab .history .content .item:not(:last-of-type)::before{ display: none; } #lab .history .content h6{ flex-shrink: 0; width: 150px; font-family: var(--engFont); font-size: 36px; font-weight: 600; color: #555; letter-spacing: -0.02em; position: relative; transition: color 0.4s; } #lab .history .content h6::before{ content: ""; width: 12px; height: 12px; background: #BBB; border-radius: 50%; position: absolute; top: 50%; left: calc(var(--padding) * -1); transform: translate(-50%, -50%); transition: background 0.4s, box-shadow 0.4s; } #lab .history .content .dl{ flex: 1 1 auto; padding-top: 9px; } #lab .history .content .dl dl:not(:last-of-type){ margin-bottom: 20px; } #lab .history .content dl{ display: flex; align-items: baseline; } #lab .history .content dl *{ color: #555; letter-spacing: -0.02em; } #lab .history .content dl dt{ flex-shrink: 0; width: 40px; font-family: var(--engFont); font-size: 20px; font-weight: 600; } #lab .history .content dl dd{ flex: 1 1 auto; min-width: 0; font-size: 19px; } #lab .history .content dl dd p{ position: relative; padding-left: 14px; } #lab .history .content dl dd p:only-of-type{ padding-left: 0; } #lab .history .content dl dd p:not(:last-of-type){ margin-bottom: 10px; } #lab .history .content dl dd p::before{ content: ""; width: 4px; height: 4px; background: var(--mainColor); border-radius: 50%; position: absolute; top: calc(1.3em / 2); left: 0; transform: translateY(-50%); } #lab .history .content dl dd p:only-of-type::before{ display: none; } #lab .history .content .item.on h6{ color: var(--mainColor); } #lab .history .content .item.on h6::before{ background: var(--mainColor); box-shadow: 0 0 0 9px rgba(var(--mainRGB), 0.2); } #lab .scale .page-title{ padding-bottom: 40px; } #lab .scale .table-txt{ font-size: 18px; font-weight: 300; color: #555; letter-spacing: -0.03em; text-align: right; margin-bottom: 20px; } #lab .scale .table-box tbody th, #lab .scale .table-box tbody td{ text-align: center; } @media screen and (max-width: 1700px){ #lab .history .left{ --padding: 90px; } #lab .history .right{ --padding: 60px; } #lab .history .content h6{ width: 120px; font-size: 32px; } #lab .history .content dl dt{ font-size: 19px; } #lab .history .content dl dd{ font-size: 18px; } #lab .scale .table-txt{ font-size: 17px; } } @media screen and (max-width: 1310px){ #lab .intro br{ display: none; } } @media screen and (max-width: 1280px){ #lab .history .left{ --padding: 50px; } #lab .history .right{ --padding: 35px; } #lab .history .content .item:not(:last-of-type){ margin-bottom: 40px; } #lab .history .content .item::before{ height: calc(100% - 15px); } #lab .history .content h6{ width: 100px; font-size: 28px; } #lab .history .content h6::before{ width: 8px; height: 8px; } #lab .history .content .dl{ padding-top: 7px; } #lab .history .content dl dt{ font-size: 18px; } #lab .history .content dl dd{ font-size: 17px; } #lab .history .content .item.on h6::before{ box-shadow: 0 0 0 6px rgba(var(--mainRGB), 0.2); } #lab .scale .page-title{ padding-bottom: 20px; } #lab .scale .table-txt{ font-size: 16px; margin-bottom: 10px; } } @media screen and (max-width: 1024px){ #lab .history .flex-box{ flex-direction: column; } #lab .history .left{ width: 100%; padding-right: 0; } #lab .history .right{ --padding: 25px; margin-top: 30px; padding-left: calc(var(--padding) + 10px); } #lab .history .bar{ left: 10px; } } @media screen and (max-width: 900px){ #lab .history .content .item{ flex-direction: column; } #lab .history .content h6{ width: 100%; font-size: 24px; } #lab .history .content .dl{ padding-top: 10px; } } /* 연구개발 - 기술연구소 - 연구개발전략 */ #strategy .tech .flex-box{ display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: -20px; } #strategy .tech .item{ width: calc((100% - 80px) / 5); min-height: 360px; display: flex; flex-direction: column; justify-content: center; background: #FFF; letter-spacing: -0.03em; text-align: center; padding: 20px; margin-right: 20px; margin-bottom: 20px; } #strategy .tech .item:last-of-type{ margin-right: 0 !important; } #strategy .tech .item .icon div{ display: inline-block; background: var(--mainColor); border: 10px solid rgba(255, 255, 255, 0.5); border-radius: 50%; } #strategy .tech .item p{ font-size: 22px; font-weight: 600; color: #111; margin-top: 40px; } #strategy .tech .item span{ display: block; font-family: var(--engFont); font-size: 18px; font-weight: 600; color: #CCC; text-transform: uppercase; margin-top: 10px; } #strategy .process .content{ background: url("/img/sub/rnd/strategy_bg01.jpg") no-repeat center center / cover; padding: 60px; overflow: hidden; } #strategy .process .diagram{ max-width: 100%; width: max-content; margin: 0 auto; } #strategy .process .diagram .inner{ text-align: center; position: relative; padding: 60px; } #strategy .process .diagram .grid{ display: grid; grid-template-columns: repeat(3, calc(100% / 3)); grid-template-rows: repeat(3, calc(100% / 3)); position: absolute; top: 0; right: 0; bottom: 0; left: 0; } #strategy .process .diagram .circle{ border: 1px dashed #FFF; border-radius: 50%; padding: 120px; position: relative; top: 5%; } #strategy .process .diagram .circle::before{ content: ""; width: 103%; height: 103%; background: url("/img/sub/rnd/strategy_arrows.svg") no-repeat center center / contain; position: absolute; top: 51%; left: 50.2%; transform: translate(-50%, -50%); } #strategy .process .diagram .circle::after{ content: ""; width: 100%; height: 100%; border: 1px dashed rgba(255, 255, 255, 0.4); border-radius: 50%; padding: 225px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #strategy .process .diagram .circle div{ width: 220px; position: relative; } #strategy .process .diagram .circle div::before{ content: ""; display: block; background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.20) 0%, rgba(0, 113, 188, 0.20) 91.83%, rgba(255, 255, 255, 0.20) 100%), #FFF; border-radius: 50%; padding-bottom: 100%; } #strategy .process .diagram .circle h6{ font-family: var(--engFont); font-size: 22px; font-weight: 700; color: var(--mainColor); letter-spacing: -0.02em; position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); padding: 0 20px; } #strategy .process .diagram .circle h6 span{ font-family: var(--baseFont); } #strategy .process .diagram .item > div{ width: 150px; position: relative; } #strategy .process .diagram .item > div::before{ content: ""; display: block; background: var(--mainColor); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 4px 4px 30px rgba(0, 0, 0, 0.2); border-radius: 50%; padding-bottom: 100%; box-sizing: border-box; } #strategy .process .diagram .item p{ font-family: var(--engFont); font-size: 17px; font-weight: 600; color: #FFF; letter-spacing: -0.02em; position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); } #strategy .process .diagram .item01{ grid-column: 2 / 3; } #strategy .process .diagram .item01 > div{ margin: 0 auto; transform: translateY(-3%); } #strategy .process .diagram .item02{ grid-column: 1 / 2; grid-row: 2 / 3; } #strategy .process .diagram .item02 > div{ transform: translate(0, -35%); } #strategy .process .diagram .item03{ grid-column: 3 / 4; grid-row: 2 / 3; } #strategy .process .diagram .item03 > div{ margin-left: auto; transform: translate(0, -35%); } #strategy .process .diagram .item04{ grid-column: 1 / 2; grid-row: 3 / 4; } #strategy .process .diagram .item04 > div{ transform: translate(40%, -5%); } #strategy .process .diagram .item05{ grid-column: 3 / 4; grid-row: 3 / 4; } #strategy .process .diagram .item05 > div{ transform: translate(-10%, -5%); } @media screen and (max-width: 1700px){ #strategy .tech .item{ min-height: 320px; } #strategy .tech .item p{ font-size: 21px; margin-top: 30px; } #strategy .tech .item span{ font-size: 17px; } #strategy .process .content{ padding: 40px; } } @media screen and (max-width: 1400px){ #strategy .tech .item{ width: calc((100% - 40px) / 3); transition-delay: unset; } #strategy .tech .item:nth-of-type(3n){ margin-right: 0; } } @media screen and (max-width: 1100px){ #strategy .intro p br{ display: none; } } @media screen and (max-width: 1280px){ #strategy .tech .item{ min-height: 280px; } #strategy .tech .item p{ font-size: 20px; margin-top: 20px; } #strategy .tech .item span{ font-size: 16px; } #strategy .process .diagram .circle{ padding: 90px; } #strategy .process .diagram .circle::after{ padding: 150px; } #strategy .process .diagram .circle div{ width: 180px; } #strategy .process .diagram .circle h6{ font-size: 20px; } #strategy .process .diagram .item > div{ width: 130px; } #strategy .process .diagram .item05 > div{ transform: translate(-15%, -5%); } } @media screen and (max-width: 900px){ #strategy .process .diagram .circle{ padding: 70px; } #strategy .process .diagram .circle::after{ padding: 100px; } #strategy .process .diagram .circle div{ width: 150px; } #strategy .process .diagram .circle h6{ font-size: 20px; } #strategy .process .diagram .item > div{ width: 120px; } #strategy .process .diagram .item p{ font-size: 16px; } #strategy .process .diagram .item05 > div{ transform: translate(-20%, -5%); } } @media screen and (max-width: 800px){ #strategy .tech .flex-box{ padding-left: 45px; } #strategy .tech .item{ width: 100%; min-height: unset; margin-right: 0; position: relative; padding: 30px 60px; } #strategy .tech .item .icon{ position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); } #strategy .tech .item .icon img{ width: 70px; } #strategy .tech .item p{ margin-top: 0; } } @media screen and (max-width: 600px){ #strategy .process .content{ padding: 25px; } #strategy .process .diagram{ width: 100%; } #strategy .process .diagram .inner{ padding: 0; } #strategy .process .diagram .grid{ width: 100%; display: flex; flex-wrap: wrap; justify-content: center; background: rgba(255, 255, 255, 0.1); border: 1px dashed #FFF; padding: 0 10px 10px; margin-top: 50px; position: relative; } #strategy .process .diagram .grid::before{ content: ""; width: 1px; height: 40px; border-right: 1px dashed #FFF; position: absolute; top: -10px; left: 50%; transform: translateY(-100%); } #strategy .process .diagram .grid::after{ content: ""; width: 100%; height: 10px; background: url("/img/sub/rnd/strategy_arrow.svg") no-repeat center center / contain; position: absolute; top: -10px; left: calc(50% + 1px); transform: translate(-50%, -100%); } #strategy .process .diagram .circle{ max-width: 100%; width: max-content; padding: 15px; margin: 0 auto; } #strategy .process .diagram .circle::before{ display: none; } #strategy .process .diagram .item{ width: calc((100% - 20px) / 3); flex-grow: 1; display: flex; justify-content: center; align-items: center; background: var(--mainColor); border: 1px solid rgba(255, 255, 255, 0.2); padding: 20px; margin-right: 10px; margin-top: 10px; } #strategy .process .diagram .item:nth-of-type(3n){ margin-right: 0; } #strategy .process .diagram .item:last-of-type{ margin-right: 0; } #strategy .process .diagram .item > div{ width: 100%; transform: unset !important; } #strategy .process .diagram .item > div::before{ display: none; } #strategy .process .diagram .item p{ position: static; transform: unset; } } /* 연구개발 - 연구분야 (공통) */ #research .tab-menu ul{ width: 100%; } #research .tab-menu ul li{ width: 100%; } #research .prod-grid{ display: grid; grid-template-columns: repeat(2, 50%); letter-spacing: -0.02em; text-align: center; margin: -50px -20px; } #research .prod-grid > *{ margin: 50px 20px; } #research .prod-grid .item figure, #research .prod-grid .item figure img{ width: 100%; } #research .prod-grid .item figure{ display: block; } #research .prod-grid .item dl{ margin-top: 40px; } #research .prod-grid .item dl dt{ font-family: var(--engFont); font-size: 24px; font-weight: 600; color: #111; margin-bottom: 20px; } #research .prod-grid .item dl dd{ font-size: 18px; font-weight: 300; color: #111; line-height: 1.6; } #research .blue-table{ letter-spacing: -0.02em; } #research .blue-table table{ width: calc(100% + 10px); border-collapse: unset; border-spacing: 5px; margin: -5px; } #research .blue-table th, #research .blue-table td{ padding: 20px; } #research .blue-table th{ font-family: var(--engFont); font-size: 19px; font-weight: 400; } #research .blue-table td{ background: #FFF; border: 1px solid var(--border); } #research .blue-table thead th{ background: var(--mainColor); border: 1px solid var(--mainColor); color: #FFF; } #research .blue-table tbody th{ background: #EEE; border: 1px solid #EEE; font-weight: 500; color: #111; } #research .history{ --gap: 112px; --th: 140px; } #research .history .blue-table{ text-align: center; } #research .history .blue-table colgroup col.th{ width: 275px; } #research .history .blue-table th, #research .history .blue-table td{ padding-block: 25px; } #research .history .blue-table th{ padding-inline: 10px; } #research .history .blue-table td{ padding-inline: 60px; } #research .history .blue-table ol{ display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); margin: calc((var(--gap) / 2) * -1); } #research .history .blue-table ol li{ margin: calc(var(--gap) / 2); position: relative; } #research .history .blue-table figure{ display: block; text-align: center; position: relative; } #research .history .blue-table figure::before{ content: ""; width: 100%; height: 100%; border: 1px solid var(--border); position: absolute; top: 0; left: 0; box-sizing: border-box; } #research .history .blue-table figure::after{ content: ""; width: 20px; height: 21px; background: url("/img/sub/rnd/research_history_arrow.svg") no-repeat center center / contain; position: absolute; top: 50%; left: calc((var(--gap) / 2) * -1); transform: translate(-50%, -50%); } #research .history .blue-table ol li:first-of-type figure::after{ display: none; } #research .history .blue-table dl{ font-family: var(--engFont); padding-top: 40px; position: relative; } #research .history .blue-table dl::before, #research .history .blue-table dl::after{ content: ""; position: absolute; top: 0; left: 50%; box-sizing: border-box; } #research .history .blue-table dl::before{ width: 1px; height: 25px; background: var(--border); transform: translateX(-100%); } #research .history .blue-table dl::after{ width: 11px; height: 11px; background: #FFF; border: 3px solid var(--border); border-radius: 50%; transform: translate(-50%, -50%); } #research .history .blue-table dl dt{ font-size: 20px; font-weight: 600; color: #111; margin-bottom: 15px; } #research .history .blue-table dl dd{ font-size: 16px; font-weight: 300; color: #111; line-height: 1.4; } #research .history .blue-table .column3{ max-width: 875px; margin: 0 auto; } #research .history .blue-table .column5 ol{ --gap: 80px; } #research .motion-box{ --width: 320px; --gap: 70px; --num: 44px; --circle: 100px; } #research .motion-box{ background: #FFF; border: 1px solid #DDD; padding: 115px calc(var(--width) + 25px); text-align: center; } #research .motion-box .mobile{ display: none; } #research .motion-box .relative{ display: inline-block; position: relative; z-index: 10; } #research .motion-box .cover{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; } #research .motion-box .item{ position: absolute; } #research .motion-box .item button{ background: none; border: none; padding: 0; } #research .motion-box .item button span{ width: var(--num); height: var(--num); display: inline-block; background: var(--mainColor); border-radius: 50%; font-family: var(--engFont); font-size: 21px; font-weight: 500; color: #FFF; letter-spacing: -0.03em; line-height: var(--num); text-align: center; transform: scale(1); opacity: 1; transition: transform 0.4s, opacity 0.4s; } #research .motion-box .item button i{ width: var(--circle); height: var(--circle); background: rgba(255, 255, 255, 0.2); border: 2px solid var(--mainColor); box-shadow: 0 0 30px rgba(var(--mainRGB), 50%); border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); opacity: 0; transition: transform 0.4s, opacity 0.4s; pointer-events: none; } #research .motion-box .item .box{ width: var(--width); background: #FFF; border: 1px solid rgba(var(--mainRGB), 0.3); box-shadow: 0 0 30px rgba(var(--mainRGB), 0.2); text-align: left; padding: 30px 50px; position: absolute; opacity: 0; transition: opacity 0.4s, margin 0.4s; pointer-events: none; } #research .motion-box .item .box::before{ content: ""; width: 6px; height: 6px; background: var(--mainColor); border-radius: 50%; position: absolute; } #research .motion-box .item .box::after{ content: ""; position: absolute; } #research .motion-box .item .box .mb{ margin-bottom: 20px; } #research .motion-box .item .box p{ font-family: var(--engFont); font-size: 21px; font-weight: 600; color: var(--mainColor); letter-spacing: -0.03em; } #research .motion-box .item .box ul{ margin-top: 20px; } #research .motion-box .item .box ul li{ font-family: var(--engFont); font-size: 18px; font-weight: 300; color: #111; padding-left: 24px; position: relative; } #research .motion-box .item .box ul li:not(:last-of-type){ margin-bottom: 10px; } #research .motion-box .item .box ul li::before{ content: ""; width: 4px; height: 4px; background-color: var(--mainColor); border-radius: 50%; position: absolute; top: calc(1.3em / 2); left: 0; transform: translateY(-50%); } #research .motion-box .item .box figure{ display: block; border: 1px solid #DDD; padding-bottom: 60%; position: relative; overflow: hidden; } #research .motion-box .item .box figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #research .motion-box .item.top .box{ margin-top: var(--gap); top: calc(var(--gap) * -1); left: 50%; transform: translate(-50%, -100%); } #research .motion-box .item.top .box::before{ bottom: 0; left: 50%; transform: translate(-50%, 50%); } #research .motion-box .item.top .box::after{ width: 1px; height: calc(var(--gap) - ((var(--circle) - var(--num)) / 2)); border-right: 1px dashed var(--mainColor); bottom: 0; left: 50%; transform: translate(-50%, 100%); } #research .motion-box .item.right .box{ margin-right: var(--gap); top: 50%; right: calc(var(--gap) * -1); transform: translate(100%, -50%); } #research .motion-box .item.right .box::before{ top: 50%; left: 0; transform: translate(-50%, -50%); } #research .motion-box .item.right .box::after{ width: calc(var(--gap) - ((var(--circle) - var(--num)) / 2)); height: 1px; border-bottom: 1px dashed var(--mainColor); top: 50%; left: 0; transform: translate(-100%, -50%); } #research .motion-box .item.bottom .box{ margin-bottom: var(--gap); bottom: calc(var(--gap) * -1); left: 50%; transform: translate(-50%, 100%); } #research .motion-box .item.bottom .box::before{ top: 0; left: 50%; transform: translate(-50%, -50%); } #research .motion-box .item.bottom .box::after{ width: 1px; height: calc(var(--gap) - ((var(--circle) - var(--num)) / 2)); border-right: 1px dashed var(--mainColor); top: 0; left: 50%; transform: translate(-50%, -100%); } #research .motion-box .item.left .box{ margin-left: var(--gap); top: 50%; left: calc(var(--gap) * -1); transform: translate(-100%, -50%); } #research .motion-box .item.left .box::before{ top: 50%; right: 0; transform: translate(50%, -50%); } #research .motion-box .item.left .box::after{ width: calc(var(--gap) - ((var(--circle) - var(--num)) / 2)); height: 1px; border-bottom: 1px dashed var(--mainColor); top: 50%; right: 0; transform: translate(100%, -50%); } @media screen and (hover: hover) and (pointer: fine){ #research .motion-box .item:hover{ z-index: 1000; } #research .motion-box .item:hover button span{ transform: scale(0.5); opacity: 0; } #research .motion-box .item:hover button i{ transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; } #research .motion-box .item:hover .box{ opacity: 1; pointer-events: auto; } #research .motion-box .item:hover .box{ margin: 0 !important; } } @media screen and (max-width: 1700px){ #research .prod-grid .item dl{ margin-top: 30px; } #research .prod-grid .item dl dt{ font-size: 22px; margin-bottom: 15px; } #research .blue-table th{ font-size: 18px; } #research .history{ --gap: 70px; } #research .history .blue-table colgroup col.th{ width: 200px; } #research .history .blue-table th, #research .history .blue-table td{ padding-block: 20px; } #research .history .blue-table td{ padding-inline: 40px; } #research .history .blue-table dl dt{ font-size: 19px; margin-bottom: 10px; } #research .history .blue-table .column5 ol{ --gap: 50px; } #research .motion-box{ --width: 280px; --gap: 60px; --num: 40px; --circle: 85px; } #research .motion-box .item button span{ font-size: 19px; } #research .motion-box .item .box{ padding: 25px 35px; } #research .motion-box .item .box p{ font-size: 20px; } } @media screen and (max-width: 1280px){ #research .prod-grid{ margin: -35px -12px; } #research .prod-grid > *{ margin: 35px 12px; } #research .prod-grid .item dl{ margin-top: 25px; } #research .prod-grid .item dl dt{ font-size: 20px; margin-bottom: 10px; } #research .prod-grid .item dl dd{ font-size: 17px; } #research .blue-table th, #research .blue-table td{ padding: 15px; } #research .blue-table th{ font-size: 17px; } #research .history{ --gap: 40px; } #research .history .blue-table colgroup col.th{ width: 150px; } #research .history .blue-table th, #research .history .blue-table td{ padding-block: 15px; } #research .history .blue-table td{ padding-inline: 25px; } #research .history .blue-table figure::after{ width: 17px; height: 18px; } #research .history .blue-table dl{ padding-top: 30px; } #research .history .blue-table dl::before{ height: 20px; } #research .history .blue-table dl::after{ width: 9px; height: 9px; border-width: 2px; } #research .history .blue-table dl dt{ font-size: 18px; margin-bottom: 5px; } #research .history .blue-table dl dd{ font-size: 15px; } #research .history .blue-table .column5 ol{ --gap: 40px; } #research .motion-box{ --width: 240px; --gap: 50px; --num: 35px; --circle: 65px; } #research .motion-box .item button span{ font-size: 18px; } #research .motion-box .item .box{ padding: 15px 20px; } #research .motion-box .item .box .mb{ margin-bottom: 15px; } #research .motion-box .item .box p{ font-size: 19px; } #research .motion-box .item .box ul{ margin-top: 15px; } #research .motion-box .item .box ul li{ font-size: 17px; padding-left: 14px; } } @media screen and (max-width: 1200px){ /* blue-table - responsive */ #research .blue-table.responsive table, #research .blue-table.responsive tbody{ display: block; } #research .blue-table.responsive colgroup, #research .blue-table.responsive thead{ display: none; } #research .blue-table.responsive table{ width: 100%; margin: 0; } #research .blue-table.responsive tr{ width: 100%; display: flex; border: 1px solid var(--border); flex-direction: column; padding: 10px; } #research .blue-table.responsive tr:not(:last-of-type){ margin-bottom: 20px; } #research .blue-table.responsive tr > *{width: calc(100% - var(--th) - 10px); margin-left: auto; position: relative; } #research .blue-table.responsive tr > *:not(:last-child){ margin-bottom: 10px; } #research .blue-table.responsive tr > *::before{ content: attr(data-th); width: var(--th); height: 100%; display: flex; justify-content: center; align-items: center; background: var(--mainColor); border: 1px solid var(--mainColor); font-size: 17px; font-weight: 400; color: #FFF; text-align: center; padding: 10px; position: absolute; top: 0; left: -10px; transform: translateX(-100%); box-sizing: border-box; } #research .history .blue-table table, #research .history .blue-table tbody{ display: block; } #research .history .blue-table colgroup, #research .history .blue-table thead{ display: none; } #research .history .blue-table tr{ display: flex; flex-direction: column; } #research .history .blue-table tr:not(:last-of-type){ margin-bottom: 60px; } #research .history .blue-table tr > *:not(:last-child){ margin-bottom: 10px; } #research .history .blue-table tr > *::before{ content: attr(data-th); display: block; background: var(--mainColor); font-family: var(--engFont); font-size: 17px; font-weight: 500; color: #FFF; padding: 12px 15px; box-sizing: border-box; margin: 0 -25px; margin-bottom: 25px; } #research .history .blue-table th, #research .history .blue-table td{ padding: 25px; padding-top: 0; } #research .history .blue-table th{ padding-bottom: 15px; } #research .history .blue-table th::before{ margin-bottom: 15px; } #research .history .blue-table td::before{ margin-inline: -26px; margin-top: -1px; } /* motion-box */ #research .motion-box{ --num: 30px; --circle: 50px; } #research .motion-box{ padding: 30px; } #research .motion-box .item button span{ font-size: 16px; } #research .motion-box .item .box{ box-shadow: 0 0 15px rgba(var(--mainRGB), 0.15); } #research .motion-box .relative{ margin-bottom: 30px; } #research .motion-box .relative .box{ display: none; } #research .motion-box .relative .item.on{ z-index: 1000; } #research .motion-box .relative .item.on button span{ transform: scale(0.5); opacity: 0; } #research .motion-box .relative .item.on button i{ transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; } #research .motion-box .mobile{ width: calc(100% + 60px); display: block; margin-left: -30px; } #research .motion-box .mobile .cover{ position: static; margin: -20px 0; } #research .motion-box .mobile .cover .slick-track{ display: flex; } #research .motion-box .mobile .item{ float: unset; width: 300px; height: auto; margin: 20px 0; margin-right: 20px; position: relative; top: unset !important; left: unset !important; transform: unset !important; } #research .motion-box .mobile .item button{ display: none; } #research .motion-box .mobile .item .box{ width: 100%; height: 100%; display: flex; flex-direction: column; position: static; margin: 0 !important; transform: unset !important; opacity: 1; pointer-events: auto; } #research .motion-box .mobile .item .box::before, #research .motion-box .mobile .item .box::after{ display: none; } #research .motion-box .mobile .item .box .mb{ flex: 1 0 auto; } #research .motion-box .mobile .item .box p{ display: flex; align-items: baseline; } #research .motion-box .mobile .item .box p::before{ content: attr(data-idx); flex-shrink: 0; width: var(--num); height: var(--num); display: inline-block; background: var(--mainColor); border-radius: 50%; font-family: var(--engFont); font-size: 16px; font-weight: 500; color: #FFF; letter-spacing: -0.03em; line-height: var(--num); text-align: center; margin-right: 10px; } } @media screen and (max-width: 1024px){ #research .prod-grid{ grid-template-columns: repeat(1, 100%); } #research .history{ --gap: 50px; } #research .history .blue-table br{ display: none; } #research .history .blue-table ol{ grid-template-columns: repeat(1, 100%); } #research .history .blue-table figure::after{ top: calc((var(--gap) / 2) * -1); left: 50%; transform: translate(-50%, -50%) rotate(90deg); } #research .history .blue-table .column3{ max-width: 100%; } #research .history .blue-table .column5 ol{ --gap: 50px; } } @media screen and (max-width: 900px){ #research .motion-box{ --num: 28px; } #research .motion-box{ padding: 20px 20px 30px; } #research .motion-box .item button span{ font-size: 15px; } #research .motion-box .item .box p{ font-size: 18px; } #research .motion-box .item .box p::before{ font-size: 15px; } #research .motion-box .mobile{ width: calc(100% + 40px); margin-left: -20px; } } @media screen and (max-width: 650px){ #research .history .blue-table colgroup col.th{ width: 120px; } } /* 연구개발 - 연구분야 - 연구장비 (공통) */ #research.equipment{ padding-bottom: 0; } #research.equipment .tit{ font-size: 36px; font-weight: 600; color: #111; letter-spacing: -0.02em; margin-bottom: 30px; } #research.equipment .table .sec:not(:last-of-type){ margin-bottom: 30px; } #research.equipment .table .sec .page-title{ padding-bottom: 30px; } .equipment-table{ --th: 400px; } .equipment-table{ letter-spacing: -0.02em; } .equipment-table table{ border-top: 2px solid #000 !important; } .equipment-table colgroup col.th, .equipment-table th{ width: var(--th); } .equipment-table tr > *:last-child{ border-right: none !important; } .equipment-table th, .equipment-table td{ font-size: 19px; font-weight: 300; color: #111; padding: 20px; border: 1px solid #E5E5E5; border-left: none; } .equipment-table th{ background: rgba(var(--mainRGB), 0.05); font-weight: 600; } .equipment-table .grid{ display: grid; grid-template-columns: repeat(2, 50%); margin: -5px; text-align: center; } .equipment-table .grid.column3{ grid-template-columns: repeat(3, calc(100% / 3)); } .equipment-table .grid > *{ margin: 5px; } .equipment-table .grid figure{ display: block; position: relative; margin-bottom: 15px; } .equipment-table .grid figure.border::after{ content: ""; width: 100%; height: 100%; border: 1px solid #E5E5E5; position: absolute; top: 0; left: 0; box-sizing: border-box; } .equipment-table .grid figure img{ width: 100%; } .equipment-table .grid .block{ grid-column: auto / span 2; } /* 연구개발 - 연구분야 - 연구장비 (방진) */ #research.equipment .dustproof01{ --gap01: 130px; --gap02: 30px; } #research.equipment .dustproof01{ background: #FFF; padding: 90px 20px 20px; } #research.equipment .dustproof01 .flex{ display: flex; justify-content: center; } #research.equipment .dustproof01 .flex > *:not(:last-of-type){ margin-right: var(--gap01); } #research.equipment .dustproof01 ul{ display: flex; } #research.equipment .dustproof01 ul li:not(:last-of-type){ margin-right: var(--gap02); } #research.equipment .dustproof01 figure{ position: relative; } #research.equipment .dustproof01 figure::after{ content: ""; width: 38px; height: 35px; background: url("/img/sub/rnd/equipment_dustproof_arrow01.svg") no-repeat center center / contain; position: absolute; top: 50%; right: calc((var(--gap01) / 2) * -1); transform: translate(50%, -50%); } #research.equipment .dustproof01 figure img{ width: unset; } #research.equipment .dustproof01 .flex > *:last-of-type figure::after{ display: none; } #research.equipment .dustproof02 > *{ position: relative; } #research.equipment .dustproof02 > *:not(:last-of-type){ margin-bottom: 10px; } #research.equipment .dustproof02 > *::after{ content: ""; width: 269px; height: 80px; background: url("/img/sub/rnd/equipment_dustproof_arrow02.svg") no-repeat center center / contain; position: absolute; top: -5px; left: 50%; transform: translate(-50%, -50%); } #research.equipment .dustproof02 > *:first-of-type::after{ display: none; } /* 연구개발 - 연구분야 - 연구장비 (에어) */ #research.equipment .air01 > *:not(:last-of-type){ margin-bottom: 10px; } /* 연구개발 - 연구분야 - 연구장비 (씰링) */ #research.equipment .sealing01 .sec:not(:last-of-type){ margin-bottom: 100px; } @media screen and (max-width: 1700px){ /* 연구개발 - 연구분야 - 연구장비 (공통) */ #research.equipment .tit{ font-size: 32px; } .equipment-table{ --th: 300px; } .equipment-table th, .equipment-table td{ font-size: 18px; } /* 연구개발 - 연구분야 - 연구장비 (방진) */ #research.equipment .dustproof01{ --gap01: 100px; } #research.equipment .dustproof01{ padding-top: 60px; } #research.equipment .dustproof02 > *::after{ width: 200px; height: 60px; } } @media screen and (max-width: 1280px){ /* 연구개발 - 연구분야 - 연구장비 (공통) */ #research.equipment .tit{ font-size: 28px; margin-bottom: 20px; } .equipment-table{ --th: 200px; } .equipment-table th, .equipment-table td{ font-size: 17px; padding: 15px; } .equipment-table .grid figure{ margin-bottom: 10px; } /* 연구개발 - 연구분야 - 연구장비 (방진) */ #research.equipment .dustproof01{ --gap01: 70px; } #research.equipment .dustproof01{ padding: 25px 25px 30px; } #research.equipment .dustproof01 figure::after{ width: 30px; } #research.equipment .dustproof02 > *::after{ width: 130px; height: 38px; top: 0; transform: translate(-50%, -40%); } /* 연구개발 - 연구분야 - 연구장비 (씰링) */ #research.equipment .sealing01 .sec:not(:last-of-type){ margin-bottom: 70px; } } @media screen and (max-width: 1200px){ /* 연구개발 - 연구분야 - 연구장비 (방진) */ #research.equipment .dustproof01 .flex{ flex-direction: column; justify-content: center; } #research.equipment .dustproof01 .flex > *:not(:last-of-type){ margin-right: 0; margin-bottom: var(--gap01); } #research.equipment .dustproof01 ul{ justify-content: center; } #research.equipment .dustproof01 figure::after{ top: calc(100% + (var(--gap01) / 2)); right: 50%; transform: translate(50%, -50%) rotate(90deg); } } @media screen and (max-width: 1024px){ /* 연구개발 - 연구분야 - 연구장비 (공통) */ .equipment-table .grid.column3{ grid-template-columns: repeat(2, 50%); } } @media screen and (max-width: 900px){ /* 연구개발 - 연구분야 - 연구장비 (공통) */ #research.equipment .tit{ font-size: 22px; } .equipment-table{ --th: 120px; } } @media screen and (max-width: 800px){ /* 연구개발 - 연구분야 - 연구장비 (공통) */ .equipment-table colgroup{ display: none; } .equipment-table table, .equipment-table tbody{ display: block; } .equipment-table table{ border: 1px solid #E5E5E5; padding: 15px; } .equipment-table tr{ width: 100%; display: flex; flex-direction: column; } .equipment-table tr:not(:last-of-type){ border-bottom: 1px solid #E5E5E5; margin-bottom: 15px; } .equipment-table th, .equipment-table td{ width: 100%; border: none; } .equipment-table th{ padding: 10px; } .equipment-table td{ text-align: center; padding: 20px 0; } .equipment-table tr:last-of-type td{ padding-bottom: 5px; } .equipment-table .grid{ margin-block: -12px; } .equipment-table .grid > *{ margin-block: 12px; } .equipment-table br.m{ display: block; } /* 연구개발 - 연구분야 - 연구장비 (방진) */ #research.equipment .dustproof02 .grid{ margin-block: -40px; } #research.equipment .dustproof02 .grid > *{ margin-block: 40px; } #research.equipment .dustproof02 > *::after{ top: -25px; transform: translate(-50%, 50%); } } @media screen and (max-width: 700px){ /* 연구개발 - 연구분야 - 연구장비 (공통) */ #research.equipment .intro br{ display: none; } /* 연구개발 - 연구분야 - 연구장비 (방진) */ #research.equipment .dustproof01{ padding: 15px; } } /* 연구개발 - 연구분야 - CAE 해석 (공통) */ #research.cae{ padding-bottom: 0; } #research.cae .sec .sec-title{ padding-bottom: 100px; } #research.cae .sec .sec-title p{ margin-top: 30px; } #research.cae .sec .tit{ letter-spacing: -0.02em; margin-bottom: 30px; } #research.cae .sec .tit h5{ font-size: 36px; font-weight: 600; color: #111; } #research.cae .sec .tit p{ font-size: 20px; font-weight: 300; color: #111; margin-top: 20px; } #research.cae .sec figure{ min-height: 520px; display: flex; justify-content: center; align-items: center; background: #FFF; border: 1px solid var(--border); text-align: center; padding: 50px; } #research.cae .sec .dot-list{ margin-top: 30px; } #research.cae .sec .dot-list li{ font-size: 20px; } #research.cae .intro-grid{ display: grid; grid-template-columns: repeat(2, 50%); margin: -20px; } #research.cae .intro-grid > *{ margin: 20px; } #research.cae .intro-grid .left{ display: flex; justify-content: center; align-items: center; border: 1px solid #DDD; padding: 35px; } #research.cae .intro-grid .blue-table{ --th: 150px; } #research.cae .intro-grid .blue-table colgroup col.th{ width: 15.687%; } #research.cae .intro-grid .blue-table th{ padding-inline: 10px; } #research.cae .intro-grid .blue-table td{ padding: 0; } #research.cae .intro-grid .blue-table figure{ display: block; } #research.cae .intro-grid .blue-table figure img{ width: 100%; } /* 연구개발 - 연구분야 - CAE 해석 (방진) */ #research.cae .dustproof01 > *{ flex: 1 1 auto; min-width: 0; } #research.cae .dustproof01 > *:not(:last-child){ margin-right: 50px; } /* 연구개발 - 연구분야 - CAE 해석 (에어) */ #research.cae .air01 > *{ position: relative; } #research.cae .air01 > *:not(:last-child){ margin-right: 230px; } #research.cae .air01 > *::after{ content: ""; width: 80px; height: 48px; background: url("/img/sub/rnd/cae_air_arrow.svg") no-repeat center center / contain; position: absolute; top: 50%; right: 0; transform: translate(100%, -50%); } #research.cae .air01 > *:last-child::after{ display: none; } #research.cae .air02 .arrow{ flex-shrink: 0; width: 240px; height: 144px; display: inline-flex; justify-content: center; align-items: center; padding-right: 2.5%; padding-bottom: 0.3%; margin-inline: 75px 35px; position: relative; z-index: 10; } #research.cae .air02 .arrow::before{ content: ""; width: 100%; height: 100%; background: url("/img/sub/rnd/cae_air_arrow.svg") no-repeat center center / contain; position: absolute; top: 0; left: 0; z-index: -1; } #research.cae .air02 .arrow span{ font-family: var(--engFont); font-size: 20px; font-weight: 500; color: #FFF; letter-spacing: -0.02em; text-align: center; } /* 연구개발 - 연구분야 - CAE 해석 (호스) */ #research.cae .hose01{ --gap: 320px; } #research.cae .hose01{ display: grid; grid-template-columns: repeat(2, 50%); margin: -20px; } #research.cae .hose01 > *{ margin: 20px; } #research.cae .hose01 figure{ background-color: #FFF; border: 1px solid var(--border); text-align: center; padding: 40px; } #research.cae .hose01 figure p{ max-width: 100%; width: max-content; background: rgba(64, 150, 205, 0.1); font-size: 22px; font-weight: 500; font-weight: 600; color: var(--mainColor); padding: 15px 30px; margin: 0 auto; margin-bottom: 20px; } #research.cae .hose01 .block{ grid-column: auto / span 2; display: flex; justify-content: center; align-items: center; padding: 65px; } #research.cae .hose01 .block > *{ position: relative; } #research.cae .hose01 .block > *:not(:last-of-type){ margin-right: var(--gap); } #research.cae .hose01 .block > *::after{ content: ""; width: 80px; height: 75px; background: url("/img/sub/rnd/cae_hose_arrow.svg") no-repeat center center / contain; position: absolute; top: 50%; right: calc((var(--gap) / 2) * -1); transform: translate(50%, -50%); } #research.cae .hose01 .block > *:last-of-type::after{ display: none; } #research.cae .hose01 .block p{ width: 205px; background: #008AE3; font-weight: 500; color: #FFF; margin-block: 40px 0; } /* 연구개발 - 연구분야 - CAE 해석 (씰링) */ #research.cae .sealing01 figure .arrow{ flex-shrink: 0; font-size: 20px; text-align: center; margin-inline: 50px 30px; } #research.cae .sealing01 figure .arrow > div{ position: relative; z-index: 10; } #research.cae .sealing01 figure .arrow > div::before{ content: ""; width: 100%; height: 100%; background: url("/img/sub/rnd/cae_air_arrow.svg") no-repeat center center / contain; position: absolute; top: 0; left: 0; z-index: -1; } #research.cae .sealing01 figure .arrow > div span{ width: 162px; height: 105px; display: flex; justify-content: center; align-items: center; font-weight: 500; color: #FFF; padding-right: 20%; } #research.cae .sealing01 figure .arrow p{ font-family: var(--engFont); font-weight: 600; color: #111; margin-top: 20px; margin-left: -5%; } #research.cae .sealing02 .blue-table{ --th: 120px; } #research.cae .sealing02 .blue-table{ text-align: center; } #research.cae .sealing02 .blue-table colgroup col.th{ width: var(--th); } #research.cae .sealing02 .blue-table td p{ font-family: var(--engFont); font-size: 19px; font-weight: 500; color: #111; margin-top: 10px; } @media screen and (max-width: 1700px){ /* 연구개발 - 연구분야 - CAE 해석 (공통) */ #research.cae .sec .sec-title{ padding-bottom: 70px; } #research.cae .sec .sec-title p{ margin-top: 20px; } #research.cae .sec .tit h5{ font-size: 32px; } #research.cae .sec .tit p{ font-size: 19px; margin-top: 15px; } #research.cae .sec figure{ min-height: 470px; padding: 40px; } #research.cae .sec .dot-list li{ font-size: 19px; } /* 연구개발 - 연구분야 - CAE 해석 (방진) */ #research.cae .dustproof01 > *:not(:last-child){ margin-right: 30px; } /* 연구개발 - 연구분야 - CAE 해석 (에어) */ #research.cae .air01 > *:not(:last-child){ margin-right: 180px; } #research.cae .air01 > *::after{ width: 70px; } #research.cae .air02 .arrow{ width: 200px; height: 120px; margin-inline: 35px; } #research.cae .air02 .arrow span{ font-size: 19px; } /* 연구개발 - 연구분야 - CAE 해석 (호스) */ #research.cae .hose01{ --gap: 240px; } #research.cae .hose01 figure{ padding: 30px; } #research.cae .hose01 figure p{ font-size: 20px; padding: 12px 20px; } #research.cae .hose01 .block > *::after{ width: 60px; height: 55px; } #research.cae .hose01 .block p{ width: 170px; margin-top: 30px; } /* 연구개발 - 연구분야 - CAE 해석 (씰링) */ #research.cae .sealing01 figure .arrow{ font-size: 19px; } #research.cae .sealing02 .blue-table td p{ font-size: 18px; } } @media screen and (max-width: 1400px){ /* 연구개발 - 연구분야 - CAE 해석 (호스) */ #research.cae .hose01{ margin: -10px; } #research.cae .hose01 > *{ margin: 10px; } #research.cae .hose01 .block{ padding: 30px 40px; } } @media screen and (max-width: 1280px){ /* 연구개발 - 연구분야 - CAE 해석 (공통) */ #research.cae .sec .sec-title{ padding-bottom: 40px; } #research.cae .sec .sec-title p{ margin-top: 10px; } #research.cae .sec .tit{ margin-bottom: 20px; } #research.cae .sec .tit h5{ font-size: 28px; } #research.cae .sec .tit p{ font-size: 18px; margin-top: 10px; } #research.cae .sec figure{ min-height: 420px; padding: 30px; } #research.cae .sec .dot-list{ margin-top: 20px; } #research.cae .sec .dot-list li{ font-size: 18px; } #research.cae .intro-grid{ grid-template-columns: repeat(1, 100%); margin: -15px; } #research.cae .intro-grid > *{ margin: 15px; } #research.cae .intro-grid .left{ padding: 25px; } #research.cae .intro-grid .blue-table br{ display: none; } /* 연구개발 - 연구분야 - CAE 해석 (방진) */ #research.cae .dustproof01{ flex-direction: column; } #research.cae .dustproof01 > *:not(:last-child){ margin-right: 0; margin-bottom: 20px; } /* 연구개발 - 연구분야 - CAE 해석 (에어) */ #research.cae .air01 > *:not(:last-child){ margin-right: 130px; } #research.cae .air01 > *::after{ width: 60px; } #research.cae .air02 .arrow{ width: 180px; height: 108px; margin-inline: 25px; } #research.cae .air02 .arrow span{ font-size: 17px; } /* 연구개발 - 연구분야 - CAE 해석 (호스) */ #research.cae .hose01{ --gap: 140px; } #research.cae .hose01 figure{ padding: 25px; } #research.cae .hose01 figure p{ font-size: 18px; padding: 10px 15px; } #research.cae .hose01 .block > *::after{ width: 50px; height: 45px; } #research.cae .hose01 .block p{ width: 150px; margin-top: 20px; } /* 연구개발 - 연구분야 - CAE 해석 (씰링) */ #research.cae .sealing01 figure .arrow{ font-size: 18px; } #research.cae .sealing01 figure .arrow span{ width: 140px; height: 84px; } #research.cae .sealing01 figure .arrow p{ margin-left: 0; } #research.cae .sealing02 .blue-table{ --th: 100px; } #research.cae .sealing02 .blue-table td p{ font-size: 17px; } } @media screen and (max-width: 1024px){ /* 연구개발 - 연구분야 - CAE 해석 (에어) */ #research.cae .air01{ flex-direction: column; } #research.cae .air01 .s img{ max-width: 70%; } #research.cae .air01 > *{ width: 100%; } #research.cae .air01 > *:not(:last-child){ margin-right: 0; margin-bottom: 130px; } #research.cae .air01 > *::after{ top: calc(100% + 65px); right: 50%; transform: translate(50%, -50%) rotate(90deg); } #research.cae .air02{ flex-direction: column; } #research.cae .air02 .arrow{ width: unset; height: unset; padding: 0; margin: 50px 0 20px; padding: 30px 0; } #research.cae .air02 .arrow::before{ width: 84px; height: 50px; background-position: center right; top: unset; bottom: 0; left: 50%; transform: translateX(-50%) rotate(90deg); } #research.cae .air02 .arrow::after{ content: ""; width: 25px; height: 50px; background: var(--mainColor); position: absolute; top: 0; left: 50%; z-index: -1; transform: translateX(-50%); } #research.cae .air02 .arrow span{ display: inline-block; background: #FFF; border: 1px solid var(--mainColor); color: var(--mainColor); padding: 8px 30px 10px; } /* 연구개발 - 연구분야 - CAE 해석 (호스) */ #research.cae .hose01{ grid-template-columns: repeat(1, 100%); } #research.cae .hose01 .block{ grid-column: unset; flex-direction: column; } #research.cae .hose01 .block > *:not(:last-of-type){ margin-right: 0; margin-bottom: var(--gap); } #research.cae .hose01 .block > *::after{ top: calc(100% + (var(--gap) / 2)); right: 50%; transform: translate(50%, -50%) rotate(90deg); } /* 연구개발 - 연구분야 - CAE 해석 (씰링) */ #research.cae .sealing01 figure{ flex-direction: column; } #research.cae .sealing01 figure .arrow{ display: flex; align-items: center; margin: 60px 0; } #research.cae .sealing01 figure .arrow > div{ flex-shrink: 0; padding: 30px 0; margin-right: 30px; } #research.cae .sealing01 figure .arrow > div::before{ height: 50px; background-position: center right; top: unset; left: 50%; bottom: 0; transform: translateX(-50%) rotate(90deg); } #research.cae .sealing01 figure .arrow > div::after{ content: ""; width: 25px; height: 40px; background: var(--mainColor); position: absolute; top: 0; left: 50%; z-index: -1; transform: translateX(-50%); } #research.cae .sealing01 figure .arrow > div span{ width: unset; height: unset; background: #FFF; border: 1px solid var(--mainColor); font-weight: 600; color: #111; padding: 10px 15px; position: relative; z-index: 10; } } @media screen and (max-width: 900px){ /* 연구개발 - 연구분야 - CAE 해석 (공통) */ #research.cae .sec .tit h5{ font-size: 22px; } #research.cae .sec figure{ min-height: unset; padding: 25px 20px; } #research.cae .intro-grid .left{ padding: 0; } #research.cae .intro-grid .blue-table th{ font-size: 16px; padding: 10px 5px; } /* 연구개발 - 연구분야 - CAE 해석 (호스) */ #research.cae .hose01{ --gap: 100px; } #research.cae .hose01 figure p{ font-size: 17px; } #research.cae .hose01 .block > *::after{ width: 40px; height: 35px; } } @media screen and (max-width: 600px){ /* 연구개발 - 연구분야 - CAE 해석 (공통) */ #research.cae .sec .sec-title p span{ display: block; } #research.cae .sec .tit p span{ display: block; } } /* 연구개발 - 연구분야 - 방진 - 엔진마운트 */ #research.engine-mount{ padding-bottom: 0; } #research.engine-mount .history .blue-table ol li:nth-of-type(2) figure::after{ opacity: 0.2; } #research.engine-mount .history .blue-table ol li:nth-of-type(3) figure::after{ opacity: 0.6; } @media screen and (max-width: 1450px){ #research.engine-mount .prod-grid br{ display: none; } } /* 연구개발 - 연구분야 - 방진 - 서스펜션 & 샤시 */ #research.suspension-chassis{ padding-bottom: 0; } #research.suspension-chassis .history .blue-table ol li:nth-of-type(2) figure::after{ opacity: 0.2; } #research.suspension-chassis .history .blue-table ol li:nth-of-type(3) figure::after{ opacity: 0.6; } @media screen and (max-width: 1600px){ #research.suspension-chassis .prod-grid br{ display: none; } } @media screen and (max-width: 1000px){ #research.suspension-chassis .intro-box br{ display: none; } } /* 연구개발 - 연구분야 - 에어 - 에어서스펜션 */ #research.air-suspension{ padding-bottom: 0; } #research.air-suspension .spring figure{ background: #FFF; border: 1px solid #DDD; text-align: center; padding: 100px; padding-bottom: 35px; } #research.air-suspension .spring figure .flex-box{ display: flex; justify-content: space-between; align-items: flex-start; } #research.air-suspension .spring figure .flex-box > *{ flex: 1 1 auto; min-width: 0; } #research.air-suspension .spring figure .flex-box > *:not(:first-child){ margin-left: 120px; } #research.air-suspension .spring figure p{ font-size: 18px; font-weight: 500; color: #111; letter-spacing: -0.02em; margin-top: 20px; } #research.air-suspension .blue-table{ margin-top: 100px; } #research.air-suspension .blue-table colgroup col.th{ width: 300px; } #research.air-suspension .blue-table th{ font-family: var(--engFont); padding-inline: 10px; } #research.air-suspension .blue-table td{ font-size: 18px; font-weight: 300; color: #111; } #research.air-suspension .skill .grid-box{ display: grid; grid-template-columns: repeat(3, calc(100% / 3)); margin: -25px; } #research.air-suspension .skill .grid-box > *{ margin: 25px; } #research.air-suspension .skill dl{ display: flex; flex-direction: column; justify-content: center; letter-spacing: -0.02em; text-align: center; padding: 70px 40px; } #research.air-suspension .skill dl *{ color: #FFF; } #research.air-suspension .skill dl dt{ font-size: 26px; font-weight: 500; margin-bottom: 25px; } #research.air-suspension .skill dl dd{ font-size: 19px; font-weight: 200; line-height: 1.6; } @media screen and (max-width: 1700px){ #research.air-suspension .spring figure{ padding: 70px; padding-bottom: 25px; } #research.air-suspension .spring figure .flex-box > *:not(:first-child){ margin-left: 90px; } #research.air-suspension .blue-table{ margin-top: 70px; } #research.air-suspension .blue-table colgroup col.th{ width: 250px; } #research.air-suspension .skill .grid-box{ margin: -20px; } #research.air-suspension .skill .grid-box > *{ margin: 20px; } #research.air-suspension .skill dl{ padding: 50px 25px; } #research.air-suspension .skill dl dt{ font-size: 23px; margin-bottom: 15px; } #research.air-suspension .skill dl dd{ font-size: 18px; } } @media screen and (max-width: 1280px){ #research.air-suspension .spring figure{ padding: 40px; padding-bottom: 20px; } #research.air-suspension .spring figure .flex-box > *:not(:first-child){ margin-left: 60px; } #research.air-suspension .spring figure p{ font-size: 17px; margin-top: 15px; } #research.air-suspension .blue-table{ margin-top: 40px; } #research.air-suspension .blue-table colgroup col.th{ width: 200px; } #research.air-suspension .blue-table td{ font-size: 17px; } #research.air-suspension .skill .grid-box{ margin: -10px; } #research.air-suspension .skill .grid-box > *{ margin: 10px; } #research.air-suspension .skill dl{ padding-block: 35px; } #research.air-suspension .skill dl dt{ font-size: 21px; } #research.air-suspension .skill dl dd{ font-size: 17px; } } @media screen and (max-width: 1024px){ #research.air-suspension .spring figure{ padding: 30px 30px 25px; } #research.air-suspension .spring figure .flex-box{ flex-wrap: wrap; justify-content: center; } #research.air-suspension .spring figure .flex-box > *{ flex: unset; } #research.air-suspension .spring figure .flex-box > *:not(:first-child){ margin-left: 30px; } #research.air-suspension .spring figure .flex-box > div{ width: calc((100% - 30px) / 2); margin-top: 30px; } #research.air-suspension .spring figure .flex-box > div:first-of-type{ margin-left: 0; } #research.air-suspension .skill .grid-box{ grid-template-columns: repeat(1, 100%); } } @media screen and (max-width: 900px){ #research.air-suspension .blue-table th, #research.air-suspension .blue-table td{ font-size: 16px; } #research.air-suspension .blue-table colgroup col.th{ width: 180px; } #research.air-suspension .skill .grid-box > *{ transition-delay: unset !important; } #research.air-suspension .skill dl{ padding-block: 25px; } #research.air-suspension .skill dl dt{ font-size: 19px; margin-bottom: 10px; } } /* 연구개발 - 연구분야 - 호스 - 호스 */ #research.hose{ padding-bottom: 0; } #research.hose .table .blue-table{ --th: 100px; } #research.hose .table .blue-table colgroup .th{ width: 120px; } #research.hose .table .blue-table td{ font-size: 18px; font-weight: 300; color: #111; } #research.hose .table .blue-table figure{ display: block; text-align: center; } #research.hose .table .blue-table .dot-list li{ font-family: var(--engFont); } @media screen and (max-width: 1280px){ #research.hose .table .blue-table td{ font-size: 17px; } } /* 연구개발 - 연구분야 - 씰링 - 씰링부품 */ #research.sealing{ padding-bottom: 0; } #research.sealing .intro-box .flex-box{ align-items: center; } #research.sealing .intro-box .img figure img{ width: auto; height: auto; } #research.sealing .product .sec:not(:last-of-type){ margin-bottom: 100px; } #research.sealing .product .tit{ letter-spacing: -0.02em; margin-bottom: 30px; } #research.sealing .product .tit h5{ font-size: 36px; font-weight: 600; color: #111; } #research.sealing .product .tit p{ font-size: 20px; font-weight: 300; color: #111; line-height: 1.7; margin-top: 30px; } #research.sealing .product .grid{ display: grid; grid-template-columns: repeat(4, 25%); text-align: center; margin: -15px -10px; } #research.sealing .product .grid > *{ margin: 15px 10px; } #research.sealing .product .grid figure{ display: block; background-color: #FFF; } #research.sealing .product .grid p{ font-size: 22px; font-weight: 600; color: #111; margin-top: 20px; } @media screen and (max-width: 1700px){ #research.sealing .product .tit h5{ font-size: 32px; } #research.sealing .product .tit p{ font-size: 19px; margin-top: 20px; } #research.sealing .product .grid p{ font-size: 21px; } } @media screen and (max-width: 1500px){ #research.sealing .product .tit br{ display: none; } } @media screen and (max-width: 1280px){ #research.sealing .product .sec:not(:last-of-type){ margin-bottom: 70px; } #research.sealing .product .tit{ margin-bottom: 20px; } #research.sealing .product .tit h5{ font-size: 28px; } #research.sealing .product .tit p{ font-size: 18px; margin-top: 10px; } #research.sealing .product .grid p{ font-size: 19px; margin-top: 15px; } } @media screen and (max-width: 1200px){ #research.sealing .intro-box .img figure{ border: 1px solid var(--border); } } @media screen and (max-width: 1024px){ #research.sealing .product .grid{ grid-template-columns: repeat(3, calc(100% / 3)); } } @media screen and (max-width: 900px){ #research.sealing .product .tit h5{ font-size: 22px; } #research.sealing .product .grid p{ font-size: 17px; } } @media screen and (max-width: 650px){ #research.sealing .product .grid{ grid-template-columns: repeat(2, 50%); } } /* 연구개발 - 연구분야 - 재료 (공통) */ #research.material .dot-list li{ font-family: var(--engFont); } #research.material .scroll-bar{ overflow-x: auto; overflow-y: clip; } #research.material .scroll-bar.os-theme-dark > .os-scrollbar-vertical, #research.material .scroll-bar.os-theme-light > .os-scrollbar-vertical{ display: none; } #research.material .blue-table{ padding-bottom: 15px; overflow: hidden; } #research.material .blue-table colgroup .s{ width: 200px; } #research.material .blue-table colgroup .s2{ width: 200px; } #research.material .blue-table colgroup .m{ width: 400px; } @media screen and (max-width: 1700px){ #research.material .blue-table colgroup .s{ width: 150px; } #research.material .blue-table colgroup .s2{ width: 150px; } #research.material .blue-table colgroup .m{ width: 350px; } } @media screen and (max-width: 1280px){ #research.material .blue-table colgroup .s{ width: 100px; } #research.material .blue-table colgroup .s2{ width: 120px; } #research.material .blue-table colgroup .m{ width: 300px; } } /* 연구개발 - 연구성과 - 특허 */ #patent .tab-menu ul li{ max-width: calc((100% - 40px) / 3); } /* 투자정보 - 주가정보 */ #stock .tit{ display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 1px solid #333; padding-bottom: 20px; margin-bottom: 40px; } #stock .tit h4{ font-size: 32px; font-weight: 600; color: #111; } #stock .tit span{ display: block; font-family: var(--engFont); font-size: 17px; font-weight: 600; color: #BBB; } #stock .flex-box{ display: flex; justify-content: space-between; } #stock .flex-box > *{ width: calc((100% - 80px) / 2); } #stock .flex-box .right{ display: flex; flex-direction: column; } #stock .flex-box .right .center{ flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; } #stock .tab-menu ul li{ max-width: calc((100% - 40px) / 3); } #stock .tab-content .tab:not(:first-of-type){ display: none; } #stock .small{ font-family: var(--engFont); font-size: 16px; font-weight: 500; color: #BBB; text-align: right; margin-bottom: 10px; } #stock .table-box td{ font-family: var(--engFont); text-align: right; } #stock .price .present{ background: #333; font-family: var(--engFont); font-size: 18px; font-weight: 300; color: #FFF; padding: 20px 30px; } #stock .price .present .flex, #stock .price .present dl{ display: flex; align-items: center; } #stock .price .present .flex{ flex-wrap: wrap; margin-bottom: -15px; } #stock .price .present .flex > *{ margin-bottom: 15px; } #stock .price .present dl dt{ width: 120px; flex-shrink: 0; font-size: 22px; font-weight: 400; text-align: left; } #stock .price .present dl dd{ flex: 1 1 auto; display: flex; align-items: flex-end; min-width: 0; } #stock .price .present dl dd strong{ flex: 1 1 auto; min-width: 0; display: block; font-size: 5rem; font-weight: 500; } #stock .price .present p{ flex-shrink: 0; color: rgba(255, 255, 255, 0.7); padding-left: 30px; margin-left: auto; } #stock .price .data{ background: var(--grayBg); margin-bottom: 20px; } #stock .price .data ul{ display: grid; grid-template-columns: repeat(2, 50%); } #stock .price .data ul li{ border-top: 1px solid var(--border); border-right: 1px solid var(--border); } #stock .price .data ul li:nth-of-type(1), #stock .price .data ul li:nth-of-type(2){ border-top-color: transparent; } #stock .price .data ul li:nth-of-type(even){ border-right: none; } #stock .price .data dl{ display: flex; align-items: center; color: #555; padding: 20px 25px; } #stock .price .data dl dt{ flex-shrink: 0; width: 80px; font-size: 20px; font-weight: 500; text-align: left; } #stock .price .data dl dd{ flex: 1 1 auto; min-width: 0; font-family: var(--engFont); font-size: 36px; font-weight: 600; text-align: right; } #stock .price .table-box { --theadSize: 19px; --tbodySize: 19px; --paddingTB: 15px; --paddingLR: 20px; } #stock .price .table-box colgroup col.th{ width: 120px; } #stock .price .table-box th{ padding-inline: 10px; } #stock .price .table-box td{ text-align: right; } #stock .info .tit{ border-bottom: none; margin-bottom: 0; } @media screen and (max-width: 1700px){ #stock .tit{ padding-bottom: 15px; margin-bottom: 30px; } #stock .tit h4{ font-size: 28px; } #stock .tit span{ font-size: 16px; } #stock .price .present{ font-size: 17px; } #stock .price .present dl dt{ width: 100px; font-size: 20px; } #stock .price .data dl dt{ font-size: 18px; } #stock .price .data dl dd{ font-size: 32px; } #stock .price .table-box { --theadSize: 18px; --tbodySize: 18px; } } @media screen and (max-width: 1280px){ #stock .tit{ margin-bottom: 20px; } #stock .tit h4{ font-size: 24px; } #stock .flex-box > *{ width: calc((100% - 50px) / 2); } #stock .price .present{ font-size: 16px; padding: 15px 25px; } #stock .price .present dl dt{ width: 80px; font-size: 18px; } #stock .price .data dl{ padding: 15px 20px; } #stock .price .data dl dt{ font-size: 17px; } #stock .price .data dl dd{ font-size: 28px; } #stock .price .table-box { --theadSize: 17px; --tbodySize: 17px; --paddingTB: 12px; --paddingLR: 15px; } #stock .price .table-box colgroup col.th{ width: 100px; } } @media screen and (max-width: 1200px){ #stock .flex-box{ flex-direction: column; } #stock .flex-box > *{ width: 100%; } #stock .flex-box > *:not(:last-child){ margin-bottom: 60px; } #stock .info .table-box table{ border-top: none; } #stock .info .table-box colgroup, #stock .info .table-box thead{ display: none; } #stock .info .table-box tbody{ display: block; } #stock .info .table-box tr{ display: flex; flex-direction: column; } #stock .info .table-box tr > *{ display: flex; border-right: none; margin-top: -1px; position: relative; padding: 0; } #stock .info .table-box tr > *::before{content: attr(data-th); width: 150px; flex-shrink: 0; display: flex; justify-content: center; align-items: center; background: #FAFCFE; border-right: 1px solid var(--border); font-weight: 500; text-align: center; padding: var(--paddingTB) var(--paddingLR); box-sizing: border-box; } #stock .info .table-box tr > * div{ flex: 1 1 auto; min-width: 0; padding: var(--paddingTB) var(--paddingLR); } #stock .info .table-box th{ border-top: 2px solid #000; margin-top: 30px; } #stock .info .table-box th{ border-top: 2px solid #000; margin-top: 30px; } #stock .info .table-box tr:first-of-type th:first-of-type{ margin-top: 0; } } @media screen and (max-width: 900px){ #stock .tit h4{ font-size: 22px; } #stock .price .present dl dd strong{ font-size: 5.2rem; } #stock .index .table-box table{ border-top-width: 3px; } #stock .index .table-box colgroup{ display: none; } #stock .index .table-box table, #stock .index .table-box tbody{ display: block; } #stock .index .table-box tr{ display: flex; flex-wrap: wrap; } #stock .index .table-box tr > *{ margin-top: -1px; border-right: none !important; } #stock .index .table-box th{ width: 200px; border-right: 1px solid var(--border) !important; padding-inline: 10px; } #stock .index .table-box td{ width: calc(100% - 200px); } } @media screen and (max-width: 800px){ #stock .tab-menu{ padding-bottom: 35px; } #stock .tab-menu ul li{ max-width: calc((100% - 30px) / 3); } } @media screen and (max-width: 600px){ #stock .price .present .flex{ flex-direction: column; align-items: flex-start; } #stock .price .present dl{ width: 100%; } #stock .price .present dl dd{ text-align: right; } #stock .price .present p{ padding-left: 0; } #stock .price .data ul{ grid-template-columns: repeat(1, 100%); padding: 0 15px; } #stock .price .data ul li{ border-right: 0; } #stock .price .data ul li:nth-of-type(2){ border-top-color: var(--border); } #stock .price .data dl{ padding-inline: 10px; } #stock .price .table-box colgroup{ display: none; } #stock .price .table-box table, #stock .price .table-box tbody{ display: block; } #stock .price .table-box tr{ display: flex; flex-wrap: wrap; } #stock .price .table-box tr > *{ margin-top: -1px; border-right: none !important; } #stock .price .table-box th{ width: 130px; border-right: 1px solid var(--border) !important; } #stock .price .table-box td{ width: calc(100% - 130px); } } /* 투자정보 - 투자지표 */ #investment h4{ font-size: 4rem; font-weight: 500; color: #000; padding-bottom: 50px; } #investment .scroll-bar{ padding-bottom: 15px; overflow-x: auto; overflow-y: clip; } #investment .table-box table{ min-width: 1000px; } #investment .table-box colgroup col.th{ width: 460px; } #investment .table-box tbody th{ text-align: left; } #investment .table-box tbody td{ text-align: right; } @media screen and (max-width: 1700px){ #investment h4{ padding-bottom: 30px; } #investment .table-box colgroup col.th{ width: 360px; } } @media screen and (max-width: 1280px){ #investment h4{ padding-bottom: 20px; } #investment .table-box colgroup col.th{ width: 260px; } } @media screen and (max-width: 1024px){ #investment .table-box colgroup col.th{ width: unset; } } /* ==== 지속가능경영 (공통) === */ /* esg-layout */ .esg-layout{ overflow: hidden; } .esg-layout .sec-title{ padding-bottom: 100px; } .esg-layout .item{ display: flex; align-items: center; opacity: 1; } .esg-layout .item:not(:last-of-type){ margin-bottom: 100px; } .esg-layout .item > *{ opacity: 0; transition: transform var(--aosT), opacity var(--aosT); } .esg-layout .item.aos-animate > *{ transform: translate(0, 0) !important; opacity: 1 !important; } .esg-layout .img{ width: 640px; transform: translateY(var(--aosP)); } .esg-layout .img figure{ display: block; } .esg-layout .img figure img{ width: 100%; } .esg-layout .text{ width: calc(100% - 640px); padding-inline: 160px; } .esg-layout .text span{ width: 32px; height: 32px; display: inline-flex; justify-content: center; align-items: center; background: var(--mainColor); border-radius: 50%; font-size: 16px; font-weight: 400; color: #FFF; letter-spacing: -0.02em; line-height: 1; } .esg-layout .text dl dt{ font-size: 36px; font-weight: 600; color: #111; letter-spacing: -0.02em; margin-bottom: 40px; } .esg-layout .text dl dd{ font-size: 20px; font-weight: 300; color: #333; line-height: 1.6; letter-spacing: -0.02em; } .esg-layout .item:nth-of-type(odd) .text{ padding-right: 0; transform: translateX(var(--aosP)); } .esg-layout .item:nth-of-type(even){ flex-direction: row-reverse; } .esg-layout .item:nth-of-type(even) .text{ padding-left: 0; transform: translateX(var(--aosM)); } /* esg-organ */ .esg-organ{ --max: 480px; --min: 75px; --gapR: 160px; --gapB: 20px; --dot: 6px; } .esg-organ{ margin-bottom: calc(calc(var(--gapB) * 2) * -1); } .esg-organ > ul > li{ margin-bottom: var(--gapB); position: relative; } .esg-organ > ul > li::before{ content: ""; width: 1px; height: calc(100% + var(--gapB)); border-right: 1px dashed var(--border); position: absolute; top: calc(var(--gapB) * -1); left: 50%; z-index: -1; } .esg-organ > ul > li:first-of-type::before{ display: none; } .esg-organ > ul > li:last-of-type::before{ height: calc(50% + var(--gapB)); } .esg-organ .box{ max-width: var(--max); display: flex; flex-direction: column; text-align: center; position: relative; } .esg-organ .box:only-child{ margin: 0 auto; } .esg-organ .box p span, .esg-organ .box div{ min-height: var(--min); display: flex; justify-content: center; align-items: center; font-family: var(--engFont); padding: 10px; } .esg-organ .box p{ display: flex; flex-direction: column; justify-content: center; background: linear-gradient(to bottom, var(--navyGradi)); font-size: 20px; font-weight: 500; color: #FFF; } .esg-organ .box div{ flex: 1 0 auto; background: #FFF; border: 1px solid var(--border); font-size: 18px; font-weight: 300; color: #111; } .esg-organ .flex{ display: flex; justify-content: center; } .esg-organ .flex > *{ width: calc((100% - var(--gapR)) / 2); margin-right: var(--gapR); } .esg-organ .flex > *:last-child{ margin-right: 0; } .esg-organ .flex > *::before, .esg-organ .flex > *::after{ content: ""; position: absolute; } .esg-organ .flex > *::before{ width: var(--gapR); height: 1px; border-bottom: 1px dashed var(--border); top: calc(50% - 1px); left: 0; transform: translateX(-100%); } .esg-organ .flex > *::after{ width: var(--dot); height: var(--dot); border-radius: 50%; background: #DDD; top: 50%; left: calc((var(--gapR) / 2) * -1); transform: translate(-25%, -50%); } .esg-organ .flex > *:first-of-type::before, .esg-organ .flex > *:first-of-type::after{ display: none; } .esg-organ .flex > *:only-of-type::before, .esg-organ .flex > *:only-of-type::after{ display: block; } .esg-organ .right{ justify-content: flex-start; } .esg-organ .right .box{ width: calc(50% - var(--gapR)); margin-inline: calc(50% + var(--gapR)) 0 !important; } .esg-organ .right .box::after{ left: calc(var(--gapR) * -1); } .esg-organ .grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); margin: calc(var(--gapB) * -1); margin-top: 0; position: relative; } .esg-organ .grid::before{ content: ""; width: 1px; height: var(--gapB); border-right: 1px dashed var(--border); position: absolute; top: 0; left: 50%; transform: translateY(-100%); } .esg-organ .grid > *{ margin: var(--gapB); position: relative; } .esg-organ .grid > *::before{ content: ""; width: calc(100% + (var(--gapB) * 2)); height: var(--gapB); border-top: 1px dashed var(--border); border-left: 1px dashed var(--border); position: absolute; top: 0; left: 50%; transform: translateY(-100%); } .esg-organ .grid > *::after{ content: ""; width: var(--dot); height: var(--dot); background: var(--border); border-radius: 50%; position: absolute; top: calc(var(--gapB) * -1); left: 50%; transform: translate(-45%, -50%); } .esg-organ .grid > *:last-of-type::before{ width: 1px; border-top: none; } .esg-organ .grid .box span{ margin-top: 5px; } .esg-organ > ul > li.lineH::before{ height: calc(50% + var(--gapB)); } .esg-organ > ul > li.lineX::before{ display: none; } .esg-organ > ul > li.lineX .flex > *::before, .esg-organ > ul > li.lineX .flex > *::after{ display: none; } .esg-organ .dot-list li{ padding-left: 15px; text-indent: -15px; } .esg-organ .dot-list li::before{ display: inline-block; background: #BBB; vertical-align: middle; margin-right: 16px; position: unset; } /* line-grid */ .line-grid{ --left: 240px; --paddingR: 300px; } .line-grid{ display: grid; grid-template-columns: var(--left) calc(100% - var(--left)); letter-spacing: -0.02em; } .line-grid .left{ border-top: 1px solid #000; text-align: right; padding-top: 20px; } .line-grid .left h5{ font-size: 30px; font-weight: 600; color: #000; } .line-grid .left h6{ font-size: 21px; font-weight: 600; color: #111; } .line-grid .left > span{ display: block; font-size: 20px; font-weight: 600; color: var(--mainColor); margin-top: 5px; } .line-grid .right{ padding-left: 110px; } /* dl-table */ .dl-table{ --dt: 300px; } .dl-table{ display: flex; flex-wrap: wrap; margin-bottom: -5px; } .dl-table > *{ flex-grow: 1; width: calc((100% - 5px) / 2); margin-right: 5px; margin-bottom: 5px; } .dl-table > *:nth-of-type(even){ margin-right: 0; } .dl-table > *:last-of-type{ margin-right: 0; } .dl-table dl{ display: flex; } .dl-table dl > *{ height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 25px; } .dl-table dl dt{ flex-shrink: 1; width: var(--dt); background: var(--mainColor); font-family: var(--engFont); font-size: 20px; font-weight: 400; color: #FFF; text-align: center; padding-inline: 10px; } .dl-table dl dd{ width: calc(100% - var(--dt) - 5px); border: 1px solid var(--border); margin-left: 5px; } .dl-table dl dd strong{ display: block; font-size: 18px; font-weight: 600; color: #111; margin-bottom: 10px; } /* 계열사별 내용 보기 */ .esg-affiliate{ background: var(--grayBg); padding-bottom: var(--subPb); margin-bottom: calc(var(--subPb) * -1); } .esg-affiliate .page-title, .esg-affiliate .grid{ transform: translateY(var(--aosP)); opacity: 0; transition: transform var(--aosT), opacity var(--aosT); } .esg-affiliate .grid{ display: grid; grid-template-columns: repeat(4, 25%); margin: -10px; transition-delay: 100ms; } .esg-affiliate .grid > *{ margin: 10px; } .esg-affiliate a{ display: block; background: #FFF; } .esg-affiliate figure, .esg-affiliate figure img{ width: 100%; } .esg-affiliate figure img{ height: auto; } .esg-affiliate .aos-animate .page-title, .esg-affiliate .aos-animate .grid{ transform: translateY(0); opacity: 1; } @media screen and (max-width: 1700px){ /* esg-layout */ .esg-layout .sec-title{ padding-bottom: 70px; } .esg-layout .text{ padding-inline: 120px; } .esg-layout .text span{ width: 30px; height: 30px; } .esg-layout .text dl dt{ font-size: 32px; margin-bottom: 30px; } .esg-layout .text dl dd{ font-size: 19px; } /* esg-organ */ .esg-organ{ --max: 400px; --min: 65px; --gapR: 120px; } .esg-organ .box p{ font-size: 19px; } /* line-grid */ .line-grid{ --left: 200px; --paddingR: 200px; } .line-grid .left{ padding-top: 15px; } .line-grid .left h5{ font-size: 26px; } .line-grid .left h6{ font-size: 19px; } .line-grid .left > span{ font-size: 18px; } .line-grid .right{ padding-left: 80px; } /* dl-table */ .dl-table{ --dt: 250px; } .dl-table dl > *{ padding: 20px; } .dl-table dl dt{ font-size: 19px; } } @media screen and (max-width: 1400px){ /* dl-table */ .dl-table{ --dt: 200px; } .dl-table dl dt{ font-size: 18px; } .dl-table dl dd strong{ font-size: 17px; } } @media screen and (max-width: 1500px){ /* esg-layout */ .esg-layout .img{ width: 540px; } .esg-layout .text{ width: calc(100% - 540px); } } @media screen and (max-width: 1400px){ /* esg-layout */ .esg-layout .text{ padding-inline: 70px; } } @media screen and (max-width: 1280px){ /* esg-layout */ .esg-layout .sec-title{ padding-bottom: 40px; } .esg-layout .item:not(:last-of-type){ margin-bottom: 70px; } .esg-layout .img{ width: 450px; } .esg-layout .text{ width: calc(100% - 450px); } .esg-layout .text span{ width: 27px; height: 27px; font-size: 15px; } .esg-layout .text dl dt{ font-size: 28px; margin-bottom: 20px; } .esg-layout .text dl dd{ font-size: 18px; } /* esg-organ */ .esg-organ{ --min: 60px; --gapR: 80px; --dot: 4px; } .esg-organ .box p{ font-size: 18px; } .esg-organ .box div{ font-size: 17px; } .esg-organ .grid{ margin-inline: calc((var(--gapB) / 2) * -1); } .esg-organ .grid > *::before{ width: calc(100% + var(--gapB)); } .esg-organ .grid > *{ margin-inline: calc(var(--gapB) / 2); } .esg-organ .dot-list li{ padding-left: 10px; text-indent: -10px; } .esg-organ .dot-list li::before{ margin-right: 10px; } /* line-grid */ .line-grid{ --paddingR: 100px; } .line-grid .right{ padding-left: 60px; } .line-grid .left h5{ font-size: 23px; } .line-grid .left h6{ font-size: 18px; } .line-grid .left > span{ font-size: 17px; } /* 계열사별 내용 보기 */ .esg-affiliate .grid{ grid-template-columns: repeat(3, calc(100% / 3)); } } @media screen and (max-width: 1200px){ /* line-grid */ .line-grid{ --paddingR: 0; } .line-grid{ grid-template-columns: repeat(1, 100%); } .line-grid .left{ text-align: left; padding-bottom: 15px; } .line-grid .right{ padding-left: 0; } /* dl-table */ .dl-table > *{ width: 100%; margin-right: 0; } } @media screen and (max-width: 1024px){ /* esg-layout */ .esg-layout .item{ flex-direction: column-reverse !important; } .esg-layout .img{ width: 100%; } .esg-layout .text{ width: 100%; padding: 0 0 25px !important; } .esg-layout .item:nth-of-type(odd) .text, .esg-layout .item:nth-of-type(even) .text{ transform: translateY(var(--aosP)); } } @media screen and (max-width: 900px){ /* esg-layout */ .esg-layout .text dl dt{ font-size: 22px; margin-bottom: 15px; } /* esg-organ */ .esg-organ{ --max: 100%; --min: 50px; --gapR: 20px; } .esg-organ .box p{ font-size: 17px; } .esg-organ .grid{ display: flex; flex-wrap: wrap; border: 1px dashed var(--border); padding: 10px; margin: 0; } .esg-organ .grid > *{ width: calc((100% - 10px) / 2); margin: 0; margin-right: 10px; margin-top: 10px; } .esg-organ .grid > *:nth-of-type(2n){ margin-right: 0; } .esg-organ .grid > *:nth-of-type(1), .esg-organ .grid > *:nth-of-type(2){ margin-top: 0; } .esg-organ .grid > *::before, .esg-organ .grid > *::after{ display: none; } /* line-grid */ .line-grid .left h5{ font-size: 21px; } .line-grid .left > span{ font-size: 16px; } /* dl-table */ .dl-table{ --dt: 160px; } .dl-table dl > *{ padding: 12px 15px; } .dl-table dl dt{ font-size: 17px; padding-block: 15px; } } @media screen and (max-width: 800px){ /* 계열사별 내용 보기 */ .esg-affiliate .grid{ grid-template-columns: repeat(2, 50%); } } @media screen and (max-width: 650px){ .esg-affiliate .grid{ margin: -5px; } .esg-affiliate .grid > *{ margin: 5px; } } /* 지속가능경영 - ESG 개요 - 비전 & 미션 */ #vision_mission .line-grid{ --left: 160px; } #vision_mission .line-grid .right{ padding-left: 100px; } #vision_mission .core{ letter-spacing: -0.02em; } #vision_mission .core .line-grid{ opacity: 1; } #vision_mission .core .line-grid > *{ opacity: 0; transition: opacity var(--aosT), transform var(--aosT); } #vision_mission .core .line-grid.aos-animate > *{ opacity: 1; transform: translate(0, 0) !important; } #vision_mission .core .line-grid .left{ border: none; text-align: left; padding: 0; transform: translateX(var(--aosM)); } #vision_mission .core .line-grid .right{ transform: translateY(var(--aosP)); } #vision_mission .core .left h4{ font-size: 4.2rem; font-weight: 700; color: var(--mainColor); } #vision_mission .core .right h6{ font-size: 36px; font-weight: 600; color: #111; margin-bottom: 50px; } #vision_mission .core .diagram .grid-box{ display: grid; grid-template-columns: repeat(4, 25%); text-align: center; margin: -30px; } #vision_mission .core .diagram .grid-box > *{ margin: 30px; } #vision_mission .core .diagram .item{ position: relative; } #vision_mission .core .diagram .item::before{ content: ""; display: block; padding-bottom: 100%; background: #FFF; border: 1px solid var(--mainColor); border-radius: 50%; box-sizing: border-box; } #vision_mission .core .diagram .item::after{ content: ""; width: 60px; height: 1px; background: var(--mainColor); position: absolute; top: 50%; right: 0; transform: translateX(100%); } #vision_mission .core .diagram .item:last-of-type::after, #vision_mission .core .diagram .item:nth-of-type(4n)::after{ display: none; } #vision_mission .core .diagram .item .text{ font-family: var(--engFont); color: var(--mainColor); position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); } #vision_mission .core .diagram .item .text strong{ display: block; font-size: 10rem; font-weight: 600; line-height: 1.1; } #vision_mission .core .diagram .item .text p{ font-size: 20px; font-weight: 600; margin-top: 5px; } #vision_mission .core .diagram .item:nth-of-type(even)::before{ background: linear-gradient(180deg, var(--mainColor), #003456); border-color: transparent; } #vision_mission .core .diagram .item:nth-of-type(even) .text{ color: #FFF; } #vision_mission .core .diagram .item:nth-of-type(even) .text strong{ font-weight: 500; } #vision_mission .core .diagram .item:nth-of-type(even) .text p{ font-weight: 500; } #vision_mission .overview{ --paddingTB: 25px; --paddingLR: 30px; } #vision_mission .overview{ letter-spacing: -0.02em; } #vision_mission .overview .sec{ position: relative; z-index: 10; } #vision_mission .overview .sec:not(:last-of-type){ margin-bottom: 20px; } #vision_mission .overview .sec .line-grid .left{ padding-top: 10px; } #vision_mission .overview .sec .box{ text-align: center; } #vision_mission .overview .sec .grid-box{ display: grid; grid-template-columns: repeat(4, 25%); margin: -9px; } #vision_mission .overview .sec .grid-box > *{ margin: 9px; } #vision_mission .overview .sec.sec01{ margin-bottom: 60px; z-index: 5; } #vision_mission .overview .sec01 .box{ background: var(--mainColor); padding: 35px; position: relative; } #vision_mission .overview .sec01 .box::before{ content: ""; width: 100%; height: 130px; background: linear-gradient(to bottom, rgba(0, 114, 188, 0.30), rgba(248, 248, 248, 0.30)); position: absolute; top: 100%; left: 0; clip-path: polygon(50% 100%, 0 0, 100% 0); -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0); } #vision_mission .overview .sec01 .box p{ font-size: 32px; font-weight: 500; color: #FFF; } #vision_mission .overview .sec02 .box{ background: #FFF; border: 1px solid var(--mainColor); box-shadow: 0 0 20px rgba(var(--mainRGB), 0.1); padding: 25px; } #vision_mission .overview .sec02 .box p{ font-size: 20px; font-weight: 600; color: #000; } #vision_mission .overview .sec02 .box p em{ color: var(--mainColor); } #vision_mission .overview .sec03 dl{ display: flex; flex-direction: column; text-align: center; } #vision_mission .overview .sec03 dl dt div, #vision_mission .overview .sec03 dl dd{ color: #FFF; padding: var(--paddingTB); padding-inline: 18px; } #vision_mission .overview .sec03 dl dt{ background: linear-gradient(180deg, var(--mainColor), #003456); font-size: 16px; font-weight: 300; line-height: 1.5; } #vision_mission .overview .sec03 dl dt strong{ display: block; font-size: 20px; font-weight: 500; line-height: inherit; } #vision_mission .overview .sec03 dl dd{ flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; background: var(--grayBg); border: 1px solid var(--border); border-top: none; font-size: 18px; font-weight: 300; color: #111; line-height: 1.5; } #vision_mission .overview .sec03 dl dd *{ line-height: inherit; } #vision_mission .overview .sec04 .item{ display: flex; flex-direction: column; border: 1px solid var(--border); padding: var(--paddingTB) var(--paddingLR); } #vision_mission .overview .sec04 .item ul{ flex: 1 0 auto; } #vision_mission .overview .sec04 .item ul li{ font-size: 18px; font-weight: 300; color: #111; padding-left: 12px; position: relative; } #vision_mission .overview .sec04 .item ul li:not(:last-of-type){ margin-bottom: 10px; } #vision_mission .overview .sec04 .item ul li::before{ content: "-"; position: absolute; top: 0; left: 0; } #vision_mission .overview .sec04 .item .mark{ margin-top: 40px; } #vision_mission .overview .sec04 .item .mark > div{ display: flex; justify-content: flex-end; } #vision_mission .overview .sec04 .item .mark figure{ max-width: calc((100% - 15px) / 4); margin-right: 5px; } #vision_mission .overview .sec04 .item .mark figure:last-of-type, #vision_mission .overview .sec04 .item .mark figure:nth-of-type(4n){ margin-right: 0; } #vision_mission .overview .sec04 .item .mark figure img{ width: 100%; } @media screen and (max-width: 1700px){ #vision_mission .line-grid{ --left: 140px; } #vision_mission .line-grid .right{ padding-left: 70px; } #vision_mission .core .right h6{ font-size: 30px; margin-bottom: 40px; } #vision_mission .core .diagram .item .text p{ font-size: 19px; } #vision_mission .overview{ --paddingTB: 20px; --paddingLR: 25px; } #vision_mission .overview .sec.sec01{ margin-bottom: 40px; } #vision_mission .overview .sec01 .box{ padding: 30px; } #vision_mission .overview .sec01 .box::before{ height: 100px; } #vision_mission .overview .sec01 .box p{ font-size: 28px; } #vision_mission .overview .sec02 .box{ padding: 20px; } #vision_mission .overview .sec02 .box p{ font-size: 19px; } #vision_mission .overview .sec03 dl dt div, #vision_mission .overview .sec03 dl dd{ padding-inline: 15px; } #vision_mission .overview .sec03 dl dt strong{ font-size: 19px; } } @media screen and (max-width: 1500px){ #vision_mission .core .diagram .grid-box{ margin: -20px; } #vision_mission .core .diagram .grid-box > *{ margin: 20px; } #vision_mission .core .diagram .item::after{ width: 40px; } } @media screen and (max-width: 1425px){ #vision_mission .intro-box br{ display: none; } } @media screen and (max-width: 1400px){ #vision_mission .overview .sec .grid-box{ grid-template-columns: repeat(2, 50%); } } @media screen and (max-width: 1280px){ #vision_mission .line-grid{ --left: 120px; } #vision_mission .line-grid .right{ padding-left: 40px; } #vision_mission .core .line-grid .left{ transform: translateY(var(--aosP)); } #vision_mission .core .right h6{ font-size: 24px; margin-bottom: 30px; } #vision_mission .core .diagram .item .text p{ font-size: 18px; } #vision_mission .overview{ --paddingTB: 15px; --paddingLR: 20px; } #vision_mission .overview .sec.sec01{ margin-bottom: 30px; } #vision_mission .overview .sec01 .box{ padding: 20px; } #vision_mission .overview .sec01 .box::before{ height: 80px; } #vision_mission .overview .sec01 .box p{ font-size: 24px; } #vision_mission .overview .sec02 .box{ padding: 15px; } #vision_mission .overview .sec02 .box p{ font-size: 18px; } #vision_mission .overview .sec03 dl dt div, #vision_mission .overview .sec03 dl dd{ padding: 10px 20px; } #vision_mission .overview .sec03 dl dt{ font-size: 15px; } #vision_mission .overview .sec03 dl dt strong{ font-size: 18px; } #vision_mission .overview .sec03 dl dd{ font-size: 17px; } #vision_mission .overview .sec04 .item{ padding: 20px; } #vision_mission .overview .sec04 .item ul li{ font-size: 17px; } #vision_mission .overview .sec04 .item .mark{ margin-top: 30px; } } @media screen and (max-width: 1200px){ #vision_mission .line-grid .right{ padding-left: 0; } #vision_mission .core .right{ padding-top: 10px; } #vision_mission .core .right h6{ font-size: 21px; } #vision_mission .overview .sec:not(:last-of-type){ margin-bottom: 40px !important; } #vision_mission .overview .line-grid .left{ background: #FFF; } } @media screen and (max-width: 1065px){ #vision_mission .core .diagram .grid-box{ margin: -10px; } #vision_mission .core .diagram .grid-box > *{ margin: 10px; } #vision_mission .core .diagram .item::after{ width: 20px; } } @media screen and (max-width: 900px){ #vision_mission .core .diagram{ max-width: 500px; margin: 0 auto; } #vision_mission .core .diagram .grid-box{ grid-template-columns: repeat(2, 50%); } #vision_mission .core .diagram .item:nth-of-type(even)::after{ display: none; } #vision_mission .core .diagram .item .text strong{ margin-top: 7px; } #vision_mission .core .diagram .item .text p{ font-size: 17px; margin-top: 3px; } #vision_mission .overview .sec01 .box p{ font-size: 20px; } #vision_mission .overview .sec02 .box p{ font-size: 17px; } } @media screen and (max-width: 600px){ #vision_mission .overview .sec .grid-box{ grid-template-columns: repeat(1, 100%); margin: -7px; } #vision_mission .overview .sec .grid-box > *{ margin: 7px; } } /* 지속가능경영 - ESG 개요 - 이니셔티브 및 평가결과 */ #initiative .title{ border-bottom: 1px solid #111; padding-bottom: 20px; margin-bottom: 80px; } #initiative .title h4{ font-size: 4rem; font-weight: 600; color: #111; letter-spacing: -0.02em; } #initiative .section section:not(:last-of-type){ margin-bottom: 80px; } #initiative .section h5{ margin-bottom: 50px; } #initiative .section .grid-box{ display: grid; grid-template-columns: repeat(3, calc(100% / 3)); margin: -13px; } #initiative .section .grid-box > *{ margin: 13px; } #initiative .section .item{ min-height: 230px; display: flex; align-items: center; border: 1px solid var(--border); padding: 15px 100px; } #initiative .section .item .img{ flex-shrink: 0; } #initiative .section .item .img figure img{ width: auto; max-height: 110px; height: auto; } #initiative .section .item .text{ flex-shrink: 1 1 auto; min-width: 0; letter-spacing: -0.02em; margin-left: 30px; } #initiative .section .item .text strong{ display: block; font-size: 4.8rem; font-weight: 600; color: #000; } #initiative .section .item .text p{ font-size: 18px; font-weight: 600; color: var(--mainColor); margin-top: 10px; } @media screen and (max-width: 1700px){ #initiative .title{ padding-bottom: 15px; margin-bottom: 60px; } #initiative .section h5{ margin-bottom: 40px; } #initiative .section .item{ min-height: 200px; padding-inline: 70px; } #initiative .section .item .img figure img{ max-height: 100px; } #initiative .section .item .text p{ font-size: 17px; } } @media screen and (max-width: 1400px){ #initiative .section .item{ padding-inline: 40px; } } @media screen and (max-width: 1280px){ #initiative .title{ padding-bottom: 10px; margin-bottom: 40px; } #initiative .section section:not(:last-of-type){ margin-bottom: 60px; } #initiative .section h5{ margin-bottom: 20px; } #initiative .section .grid-box{ margin: -7px; } #initiative .section .grid-box > *{ margin: 7px; } #initiative .section .item{ min-height: 170px; } #initiative .section .item .img figure img{ max-height: 85px; } #initiative .section .item .text{ margin-left: 25px; } #initiative .section .item .text p{ font-size: 16px; } } @media screen and (max-width: 1024px){ #initiative .section .grid-box{ grid-template-columns: repeat(2, 50%); } } @media screen and (max-width: 900px){ #initiative .section .item{ min-height: 150px; } } @media screen and (max-width: 650px){ #initiative .section .grid-box{ grid-template-columns: repeat(1, 100%); } #initiative .section .item{ padding-inline: 30px; } } /* 지속가능경영 - 인증현황 */ #certifications .table{ --lineW: 100px; --lineH: 15px; --theadMin: 70px; --theadLR: 40px; --tbodyMin: 100px; --tbodyPadding: 10px; } #certifications .table{ text-align: center; letter-spacing: -0.02em; padding-bottom: 7px; margin-bottom: -7px; } #certifications .table colgroup col.s{ width: 15%; } #certifications .table colgroup col.m{ width: 15%; } #certifications .table colgroup col.l{ width: 19.813%; } #certifications .table thead{ background: #F5F5F5; } #certifications .table thead tr:first-of-type > *{ border-top: none !important; } #certifications .table thead tr > *:first-child{ border-left: none !important; } #certifications .table thead tr > *:last-child{ border-right: none !important; } #certifications .table thead th{ font-size: 19px; font-weight: 500; color: #111; padding: 0 var(--theadLR); border: 1px solid #EAEAEA; border-bottom: none; } #certifications .table thead th span{ min-height: var(--theadMin); display: flex; justify-content: center; align-items: center; position: relative; padding: 10px 0; } #certifications .table tbody tr > *:last-child{ border-right: none !important; } #certifications .table tbody tr > *:first-child{ border-left: none !important; } #certifications .table tbody tr:first-of-type > *{ border-top: none; } #certifications .table tbody td{ border: 1px solid #EEE; font-size: 18px; font-weight: 500; color: #111; } #certifications .table tbody td .min{ min-height: var(--tbodyMin); display: flex; justify-content: center; align-items: center; padding: var(--tbodyPadding); position: relative; } #certifications .table tbody td span{ color: #BBB; } #certifications .table tbody td a{ width: 100%; height: calc(var(--tbodyMin) - (var(--tbodyPadding) * 2)); display: block; } #certifications .table tbody td a i{ display: inline-block; width: 24px; height: 24px; background: url("/img/sub/esg/icon_download.svg") no-repeat center center / contain; position: relative; top: 50%; transform: translateY(-50%); } @media screen and (max-width: 1700px){ #certifications .table{ --theadMin: 60px; --theadLR: 30px; --tbodyMin: 90px; } #certifications .table thead th{ font-size: 18px; } #certifications .table tbody td{ font-size: 17px; } } @media screen and (max-width: 1280px){ #certifications .table{ --lineH: 15px; --theadMin: 50px; --theadLR: 15px; --tbodyMin: 80px; } #certifications .table thead th{ font-size: 17px; } #certifications .table tbody td{ font-size: 16px; } } @media screen and (max-width: 1000px){ #certifications .table colgroup col.s{ width: 16%; } #certifications .table colgroup col.m{ width: 27%; } #certifications .table colgroup col.l{ width: 15%; } } /* 지속가능경영 - 환경 - 환경경영체계 - 환경경영 */ @media screen and (max-width: 1400px){ #management .intro br{ display: none; } } @media screen and (max-width: 650px){ #management .esg-layout br{ display: none; } } /* 지속가능경영 - 환경 - 환경경영체계 - 환경경영(상세) */ #management.detail .course .grayBox{ background: var(--grayBg); padding: 60px; letter-spacing: -0.02em; } #management.detail .course .sec:not(:last-of-type){ margin-bottom: 60px; } #management.detail .course .left{ background: var(--grayBg); } #management.detail .course .right{ text-align: center; } #management.detail .course .right .box{ background: #FFF; padding: 40px; } #management.detail .course .sec01{ margin-bottom: 80px; } #management.detail .course .sec01 .box{ background: var(--mainColor); padding: 30px; position: relative; } #management.detail .course .sec01 .box::after{ content: ""; width: 100%; height: 160px; background: linear-gradient(to bottom, rgba(0, 114, 188, 0.30), rgba(248, 248, 248, 0.30)); clip-path: polygon(50% 100%, 0 0, 100% 0); -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0); position: absolute; top: 100%; left: 0; } #management.detail .course .sec01 .box p{ font-size: 36px; font-weight: 500; color: #FFF; } #management.detail .course .sec02{ position: relative; z-index: 10; } #management.detail .course .sec02 .box dl dt{ font-size: 32px; font-weight: 600; color: #000; } #management.detail .course .sec02 .box dl dd{ font-size: 22px; font-weight: 300; color: #555; line-height: 1.6; margin-top: 25px; } #management.detail .course .sec03 .box{ border: 1px solid var(--border); } #management.detail .course .sec03 .box p{ font-size: 20px; font-weight: 300; color: #000; line-height: 1.5; } #management.detail .course .sec03 .box p:not(:last-of-type){ margin-bottom: 1.3em; } #management.detail .course .sec03 .box p strong{ font-weight: 600; color: var(--mainColor); } #management.detail .course .sec04 .grid{ display: grid; grid-template-columns: repeat(3, calc(100% / 3)); margin: -10px; } #management.detail .course .sec04 .grid > *{ margin: 10px; } #management.detail .course .sec04 dl{ display: flex; flex-direction: column; } #management.detail .course .sec04 dl dt{ display: flex; flex-direction: column; justify-content: center; background: linear-gradient(180deg, var(--navyGradi)); font-size: 20px; font-weight: 500; color: #FFF; text-align: center; } #management.detail .course .sec04 dl dt div{ min-height: 86px; display: flex; justify-content: center; align-items: center; padding: 10px; } #management.detail .course .sec04 dl dd{ flex: 1 0 auto; min-height: 270px; background: #FFF; border: 1px solid var(--border); padding: 30px 26px; } #management.detail .course .sec04 .number li{ --num: 32px; min-height: var(--num); font-size: 18px; font-weight: 300; color: #333; line-height: 1.5; padding-top: calc((var(--num) - 1.5em) / 2); padding-left: calc(var(--num) + 15px); position: relative; } #management.detail .course .sec04 .number li:not(:last-of-type){ margin-bottom: 10px; } #management.detail .course .sec04 .number li span{ width: var(--num); height: var(--num); background: #EEE; border-radius: 50%; font-size: 16px; font-weight: 500; color: #999; line-height: var(--num); text-align: center; position: absolute; top: 0; left: 0; } #management.detail .course .name{ display: flex; justify-content: center; align-items: flex-end; letter-spacing: -0.02em; text-align: center; text-align: center; margin-top: 50px; } #management.detail .course .name strong{ display: inline-block; font-size: 20px; font-weight: 600; color: #000; margin-right: 15px; } #management.detail .esg-organ .box div{ padding-block: 30px; } @media screen and (max-width: 1700px){ #management.detail .course .grayBox{ padding: 40px; } #management.detail .course .right .box{ padding: 30px; } #management.detail .course .sec01 .box{ padding: 25px; } #management.detail .course .sec01 .box p{ font-size: 32px; } #management.detail .course .sec02 .box dl dt{ font-size: 28px; } #management.detail .course .sec02 .box dl dd{ font-size: 20px; margin-top: 15px; } #management.detail .course .sec03 .box p{ font-size: 19px; } #management.detail .course .sec04 dl dt{ font-size: 19px; } #management.detail .course .sec04 dl dt div{ min-height: 75px; } #management.detail .course .sec04 dl dd{ min-height: 240px; padding: 20px; } #management.detail .course .sec04 .number li{ --num: 28px; } #management.detail .course .name{ margin-top: 35px; } #management.detail .course .name strong{ font-size: 19px; } #management.detail .course .name img{ max-height: 60px; } #management.detail .esg-organ .box div{ padding-block: 25px; } } @media screen and (max-width: 1280px){ #management.detail .course .right .box{ padding: 25px; } #management.detail .course .sec01 .box{ padding: 20px; } #management.detail .course .sec01 .box::after{ height: 100px; } #management.detail .course .sec01 .box p{ font-size: 28px; } #management.detail .course .sec02 .box dl dt{ font-size: 24px; } #management.detail .course .sec02 .box dl dd{ font-size: 18px; } #management.detail .course .sec03 .box p{ font-size: 18px; } #management.detail .course .sec04 dl dt div{ min-height: 65px; } #management.detail .course .sec04 dl dd{ min-height: 200px; } #management.detail .course .sec04 .number li{ --num: 26px; font-size: 17px; padding-left: calc(var(--num) + 10px); } #management.detail .course .sec04 .number li span{ font-size: 15px; } #management.detail .course .name{ margin-top: 20px; } #management.detail .course .name strong{ font-size: 18px; margin-right: 10px; } #management.detail .course .name img{ max-height: 50px; } #management.detail .esg-organ .box div{ padding-block: 20px; } } @media screen and (max-width: 1200px){ #management.detail .course .sec:not(:last-of-type){ margin-bottom: 40px; } #management.detail .course .sec01{ margin-bottom: 60px; } #management.detail .course .sec04 .grid{ grid-template-columns: repeat(2, 50%); } } @media screen and (max-width: 900px){ #management.detail .sec-title{ padding-bottom: 20px; } #management.detail .course br{ display: none; } #management.detail .course .grayBox{ padding: 25px; padding-top: 30px; } #management.detail .course .sec01 .box p{ font-size: 24px; } #management.detail .course .sec02 .box dl dt{ font-size: 20px; } #management.detail .course .sec02 .box dl dd{ font-size: 17px; margin-top: 10px; } #management.detail .course .sec04 dl dt div{ min-height: 55px; } #management.detail .course .sec04 dl dd{ min-height: unset; } } @media screen and (max-width: 800px){ #management.detail .course .sec04 .grid{ grid-template-columns: repeat(1, 100%); } } /* 지속가능경영 - 환경 - 기후변화 - 기후변화대응 */ @media screen and (max-width: 1410px){ #climate br{ display: none; } } /* 지속가능경영 - 사회 - 임직원 - 임직원 교육 프로세스 */ #process .development{ padding-bottom: 100px; } #process .development .dl{ border-top: 2px solid #000; letter-spacing: -0.02em; } #process .development dl{ display: flex; align-items: center; border-bottom: 1px solid var(--border); padding: 50px 0; } #process .development dl dt{ flex-shrink: 0; width: 520px; display: flex; align-items: center; } #process .development dl dt span{ display: block; } #process .development dl dt .icon{ width: 80px; flex-shrink: 0; } #process .development dl dt .title{ flex: 1 1 auto; min-width: 0; font-size: 27px; font-weight: 600; color: #111; line-height: 1.5; text-align: center; padding: 0 100px; } #process .development dl dd{ flex: 1 1 auto; min-width: 0; font-size: 18px; font-weight: 300; color: #111; line-height: 1.6; } #process .development dl dd *{ line-height: inherit; } #process .development dl dd > *:not(:last-child){ margin-bottom: 20px; } #process .development dl dd strong{ display: block; font-size: 24px; font-weight: 600; color: #111; line-height: 1.5; } #process .program .title{ margin-bottom: 60px; } #process .program .title h4{ font-size: 4rem; font-weight: 600; color: #111; letter-spacing: -0.02em; } #process .program .table-box colgroup col.th{ width: 28.75%; } #process .program .table-box thead th{ padding-inline: 5px; } #process .program .table-box tbody th{ text-align: left; } #process .program .table-box tbody td{ text-align: right; } #process .program .dl{ letter-spacing: -0.02em; } #process .program .dl dl{ margin-top: 60px; } #process .program .dl dl dt{ font-size: 22px; font-weight: 700; color: var(--mainColor); } #process .program .dl dl dd{ font-size: 20px; font-weight: 300; color: #111; line-height: 1.6; margin-top: 15px; } @media screen and (max-width: 1700px){ #process .development dl{ padding: 35px 0; } #process .development dl dt{ width: 450px; } #process .development dl dt .title{ font-size: 24px; padding: 0 70px; } #process .development dl dd > *:not(:last-child){ margin-bottom: 15px; } #process .development dl dd strong{ font-size: 21px; } #process .program .title{ margin-bottom: 40px; } #process .program .dl dl dt{ font-size: 21px; } #process .program .dl dl dd{ font-size: 19px; } } @media screen and (max-width: 1280px){ #process .development dl{ padding: 25px 0; } #process .development dl dt{ width: 370px; } #process .development dl dt .title{ font-size: 22px; padding: 0 40px; } #process .development dl dd{ font-size: 17px; } #process .development dl dd > *:not(:last-child){ margin-bottom: 10px; } #process .development dl dd strong{ font-size: 20px; } #process .program .title{ margin-bottom: 20px; } #process .program .dl dl{ margin-top: 40px; } #process .program .dl dl dt{ font-size: 20px; } #process .program .dl dl dd{ font-size: 18px; margin-top: 10px; } } @media screen and (max-width: 1024px){ #process .development dl{ display: block; } #process .development dl dt{ margin-bottom: 20px; } #process .development dl dt br{ display: none; } #process .development dl dt .icon{ width: 65px; } #process .development dl dt .title{ text-align: left; padding-inline: 20px 0; } } @media screen and (max-width: 900px){ #process .development dl dt .title{ font-size: 21px; } #process .development dl dd strong{ font-size: 18px; } #process .program .title h4{ font-size: 4.2rem; } } @media screen and (max-width: 600px){ #process .program .table-box colgroup col.th{ width: 20%; } } /* 지속가능경영 - 사회 - 임직원 - 좋은 조직 문화 */ #culture .welfare{ letter-spacing: -0.02em; } #culture .welfare .sec:not(:last-of-type){ margin-bottom: 65px; } #culture .welfare .tit{ margin-bottom: 40px; } #culture .welfare .tit h5{ border-bottom: 1px solid #111; font-size: 4rem; font-weight: 600; color: #111; padding-bottom: 20px; } #culture .welfare .tit p{ font-size: 22px; font-weight: 300; color: #111; line-height: 1.5; margin-top: 60px; } #culture .welfare .tit p strong{ font-weight: 600; } #culture .welfare .grid{ display: grid; grid-template-columns: repeat(3, calc(100% / 3)); margin: -25px; } #culture .welfare .grid > *{ margin: 25px; } #culture .welfare .item figure, #culture .welfare .item figure img{ width: 100%; } #culture .welfare .item dl dt{ font-size: 26px; font-weight: 600; color: #000; padding: 30px 0; } #culture .welfare .item dl dd{ font-size: 20px; font-weight: 300; color: #111; line-height: 1.7; } #culture .welfare .item dl dd strong{ font-weight: 500; } @media screen and (max-width: 1700px){ #culture .welfare .tit p{ font-size: 20px; margin-top: 40px; } #culture .welfare .item dl dt{ font-size: 23px; padding: 25px 0 20px; } #culture .welfare .item dl dd{ font-size: 19px; } } @media screen and (max-width: 1620px){ #culture .welfare br{ display: none; } } @media screen and (max-width: 1400px){ #culture .intro-box br{ display: none; } #culture .welfare .grid{ margin-inline: -15px; } #culture .welfare .grid > *{ margin-inline: 15px; } } @media screen and (max-width: 1280px){ #culture .welfare .tit{ margin-bottom: 30px; } #culture .welfare .tit h5{ font-size: 4.2rem; padding-bottom: 15px; } #culture .welfare .tit p{ font-size: 19px; margin-top: 20px; } #culture .welfare .item dl dt{ font-size: 21px; padding: 20px 0 15px; } #culture .welfare .item dl dd{ font-size: 18px; } } @media screen and (max-width: 1200px){ #culture .welfare .grid{ grid-template-columns: repeat(2, 50%); } } @media screen and (max-width: 900px){ #culture .welfare .item dl dt{ font-size: 20px; padding-bottom: 10px; } } @media screen and (max-width: 700px){ #culture .welfare .grid{ grid-template-columns: repeat(1, 100%); } } /* 지속가능경영 - 환경 - 안전보건 고도화 - 안전보건경영 */ @media screen and (max-width: 1400px) { #safety .intro-box br{ display: none; } } @media screen and (max-width: 800px) { #safety .esg-layout br{ display: none; } } /* 지속가능경영 - 환경 - 안전보건 고도화 - 안전보건경영(상세) */ #safety.detail .course{ letter-spacing: -0.02em; } #safety.detail .course .sec{ text-align: center; padding: 70px 100px; } #safety.detail .course .sec:not(:last-of-type){ margin-bottom: 20px; } #safety.detail .course .sec01{ background: var(--grayBg); } #safety.detail .course .sec01 .circle{ margin-bottom: 20px; position: relative; } #safety.detail .course .sec01 .circle::before{ content: ""; width: 90%; max-width: 1043px; height: calc(50% + 20px); background: linear-gradient(to top, rgba(0, 114, 188, 0.30), rgba(248, 248, 248, 0.30)); position: absolute; top: 50%; left: 50%; transform: translateX(-50%); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%); } #safety.detail .course .sec01 .circle > div{ width: 240px; background: var(--mainColor); border-radius: 50%; padding: 10px; margin: 0 auto; position: relative; } #safety.detail .course .sec01 .circle > div::before{ content: ""; display: block; border: 1px dashed #FFF; border-radius: 50%; padding-bottom: 100%; box-sizing: border-box; } #safety.detail .course .sec01 .circle .text{ color: #FFF; position: absolute; top: 50%; left: 0; right: 0; z-index: 10; transform: translateY(-50%); } #safety.detail .course .sec01 .circle .text h5{ font-size: 30px; font-weight: 500; } #safety.detail .course .sec01 .circle .text p{ font-family: var(--engFont); font-size: 20px; font-weight: 500; margin-top: 5px; } #safety.detail .course .sec01 .box{ background: #FFF; box-shadow: 0 0 20px rgba(var(--mainRGB), 0.1); padding: 40px; } #safety.detail .course .sec01 .box dl dt{ font-size: 32px; font-weight: 600; color: #111; margin-bottom: 15px; } #safety.detail .course .sec01 .box dl dt span{ display: block; font-size: 18px; color: var(--mainColor); margin-bottom: inherit; } #safety.detail .course .sec01 .box dl dd{ font-size: 18px; font-weight: 300; color: #111; } #safety.detail .course .sec02{ border: 1px solid var(--border); } #safety.detail .course .sec02 .tit h5{ font-size: 4rem; font-weight: 600; color: #111; } #safety.detail .course .sec02 .tit p{ font-size: 18px; font-weight: 300; color: #111; line-height: 1.6; margin-top: 20px; } #safety.detail .course .sec02 .content{ margin: 60px 0; } #safety.detail .course .sec02 .content .grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); margin: -10px; } #safety.detail .course .sec02 .content .grid > *{ margin: 10px; } #safety.detail .course .sec02 .content dl{ display: flex; flex-direction: column; } #safety.detail .course .sec02 .content dl dt{ display: flex; flex-direction: column; justify-content: center; background: linear-gradient(to bottom, var(--navyGradi)); font-size: 20px; font-weight: 500; color: #FFF; } #safety.detail .course .sec02 .content dl dt div{ min-height: 75px; display: flex; justify-content: center; align-items: center; padding: 10px; } #safety.detail .course .sec02 .content dl dd{ flex: 1 0 auto; border: 1px solid var(--border); text-align: left; padding: 25px; } #safety.detail .course .sec02 .content .dot-list{ --lineH: 1.6em; } #safety.detail .course .sec02 .content .dot-list li::before{ background: #BBB; } #safety.detail .course .sec02 .name{ display: flex; justify-content: center; align-items: center; } #safety.detail .course .sec02 .name *{ font-size: 20px; font-weight: 600; color: #000; } #safety.detail .course .sec02 .name span{ color: var(--mainColor); } #safety.detail .course .sec02 .name p{ display: flex; justify-content: center; margin-top: 10px; } #safety.detail .course .sec02 .name p strong:not(:last-of-type){ margin-right: 10px; } #safety.detail .course .sec02 .name figure{ margin-left: 10px; } #safety.detail .organ{ letter-spacing: -0.02em; } #safety.detail .diagram{ --max: 480px; --min: 75px; --gapR: 160px; --gapB: 20px; --dot: 6px; } #safety.detail .diagram{ margin-bottom: calc(calc(var(--gapB) * 2) * -1); } #safety.detail .diagram > ul > li{ margin-bottom: var(--gapB); position: relative; } #safety.detail .diagram > ul > li::before{ content: ""; width: 1px; height: calc(100% + var(--gapB)); border-right: 1px dashed var(--border); position: absolute; top: calc(var(--gapB) * -1); left: 50%; z-index: -1; } #safety.detail .diagram > ul > li:first-of-type::before{ display: none; } #safety.detail .diagram > ul > li:last-of-type::before{ height: calc(50% + var(--gapB)); } #safety.detail .diagram ul li .box{ max-width: var(--max); display: flex; flex-direction: column; text-align: center; position: relative; } #safety.detail .diagram ul li .box:only-child{ margin: 0 auto; } #safety.detail .diagram ul li .box p, #safety.detail .diagram ul li .box span{ min-height: var(--min); display: flex; justify-content: center; align-items: center; font-family: var(--engFont); padding: 10px; } #safety.detail .diagram ul li .box p{ background: linear-gradient(to bottom, var(--navyGradi)); font-size: 20px; font-weight: 500; color: #FFF; } #safety.detail .diagram ul li .box span{ flex: 1 0 auto; background: #FFF; border: 1px solid var(--border); font-size: 18px; font-weight: 300; color: #111; } #safety.detail .diagram .flex{ display: flex; justify-content: center; } #safety.detail .diagram .flex > *{ width: calc((100% - var(--gapR)) / 2); margin-right: var(--gapR); } #safety.detail .diagram .flex > *:last-child{ margin-right: 0; } #safety.detail .diagram .flex > *::before, #safety.detail .diagram .flex > *::after{ content: ""; position: absolute; } #safety.detail .diagram .flex > *::before{ width: var(--gapR); height: 1px; border-bottom: 1px dashed var(--border); top: calc(50% - 1px); left: 0; transform: translateX(-100%); } #safety.detail .diagram .flex > *::after{ width: var(--dot); height: var(--dot); border-radius: 50%; background: #DDD; top: 50%; left: calc((var(--gapR) / 2) * -1); transform: translate(-25%, -50%); } #safety.detail .diagram .flex > *:first-of-type::before, #safety.detail .diagram .flex > *:first-of-type::after{ display: none; } #safety.detail .diagram .flex > *:only-of-type::before, #safety.detail .diagram .flex > *:only-of-type::after{ display: block; } #safety.detail .diagram .right{ justify-content: flex-start; } #safety.detail .diagram .right .box{ width: calc(50% - var(--gapR)); margin-inline: calc(50% + var(--gapR)) 0 !important; } #safety.detail .diagram .right .box::after{ left: calc(var(--gapR) * -1); } #safety.detail .diagram .grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); margin: calc(var(--gapB) * -1); margin-top: 0; position: relative; } #safety.detail .diagram .grid::before{ content: ""; width: 1px; height: var(--gapB); border-right: 1px dashed var(--border); position: absolute; top: 0; left: 50%; transform: translateY(-100%); } #safety.detail .diagram .grid > *{ margin: var(--gapB); position: relative; } #safety.detail .diagram .grid > *::before{ content: ""; width: calc(100% + (var(--gapB) * 2)); height: var(--gapB); border-top: 1px dashed var(--border); border-left: 1px dashed var(--border); position: absolute; top: 0; left: 50%; transform: translateY(-100%); } #safety.detail .diagram .grid > *::after{ content: ""; width: var(--dot); height: var(--dot); background: var(--border); border-radius: 50%; position: absolute; top: calc(var(--gapB) * -1); left: 50%; transform: translate(-45%, -50%); } #safety.detail .diagram .grid > *:last-of-type::before{ width: 1px; border-top: none; } #safety.detail .diagram .grid .box span{ margin-top: 5px; } #safety.detail .diagram > ul > li.lineH::before{ height: calc(50% + var(--gapB)); } #safety.detail .diagram > ul > li.lineX::before{ display: none; } #safety.detail .diagram > ul > li.lineX .flex > *::before, #safety.detail .diagram > ul > li.lineX .flex > *::after{ display: none; } @media screen and (max-width: 1700px){ #safety.detail .course .sec{ padding: 40px 70px; } #safety.detail .course .sec01 .circle > div{ width: 220px; } #safety.detail .course .sec01 .circle .text h5{ font-size: 26px; } #safety.detail .course .sec01 .circle .text p{ font-size: 19px; } #safety.detail .course .sec01 .box{ padding: 30px; } #safety.detail .course .sec01 .box dl dt{ font-size: 28px; } #safety.detail .course .sec01 .box dl dt span{ font-size: 16px; } #safety.detail .course .sec02 .tit p{ font-size: 17px; margin-top: 15px; } #safety.detail .course .sec02 .content dl dt{ font-size: 19px; } #safety.detail .course .sec02 .content dl dt div{ min-height: 65px; } #safety.detail .course .sec02 .content dl dd{ padding: 20px; } #safety.detail .course .sec02 .name *{ font-size: 19px; } #safety.detail .course .name img{ max-height: 55px; } #safety.detail .diagram { --max: 400px; --min: 65px; --gapR: 120px; } #safety.detail .diagram ul li .box p{ font-size: 19px; } } @media screen and (max-width: 1600px){ #safety.detail .course .sec02 .content .grid{ grid-template-columns: repeat(3, calc(100% / 3)); } #safety.detail .course .sec02 .content .grid.half{ grid-template-columns: repeat(2, 50%); } } @media screen and (max-width: 1400px){ #safety.detail .course br{ display: none; } } @media screen and (max-width: 1280px){ #safety.detail .course .sec{ padding: 35px 40px; } #safety.detail .course .sec01 .circle{ margin-bottom: 10px; } #safety.detail .course .sec01 .circle::before{ height: calc(50% + 10px); } #safety.detail .course .sec01 .circle > div{ width: 180px; } #safety.detail .course .sec01 .circle .text h5{ font-size: 22px; } #safety.detail .course .sec01 .circle .text p{ font-size: 17px; } #safety.detail .course .sec01 .box{ padding: 30px 25px; } #safety.detail .course .sec01 .box dl dt{ font-size: 24px; } #safety.detail .course .sec01 .box dl dt span{ font-size: 15px; margin-bottom: 5px; } #safety.detail .course .sec01 .box dl dd{ font-size: 17px; } #safety.detail .course .sec02 .content{ margin: 40px 0; } #safety.detail .course .sec02 .content dl dt{ font-size: 18px; } #safety.detail .course .sec02 .content dl dt div{ min-height: 55px; } #safety.detail .course .sec02 .name *{ font-size: 18px; } #safety.detail .course .sec02 .name p{ margin-top: 7px; } #safety.detail .course .name img{ max-height: 50px; } #safety.detail .diagram { --min: 60px; --gapR: 80px; --dot: 4px; } #safety.detail .diagram ul li .box p{ font-size: 18px; } #safety.detail .diagram ul li .box span{ font-size: 17px; } #safety.detail .diagram .grid{ margin-inline: calc((var(--gapB) / 2) * -1); } #safety.detail .diagram .grid > *::before{ width: calc(100% + var(--gapB)); } #safety.detail .diagram .grid > *{ margin-inline: calc(var(--gapB) / 2); } } @media screen and (max-width: 1200px){ #safety.detail .course .sec02 .content .grid{ grid-template-columns: repeat(2, 50%); } } @media screen and (max-width: 900px){ #safety.detail .sec-title{ padding-bottom: 20px; } #safety.detail .course .sec{ padding: 30px 25px; } #safety.detail .course .sec01 .circle > div{ width: 160px; } #safety.detail .course .sec01 .circle .text h5{ font-size: 20px; } #safety.detail .course .sec01 .circle .text p{ font-size: 16px; } #safety.detail .course .sec01 .box dl dt{ font-size: 21px; } #safety.detail .course .sec02 .content .grid, #safety.detail .course .sec02 .content .grid.half{ grid-template-columns: repeat(1, 100%); } #safety.detail .diagram { --max: 100%; --min: 50px; --gapR: 20px; } #safety.detail .diagram ul li .box p{ font-size: 17px; } #safety.detail .diagram .grid{ display: flex; flex-wrap: wrap; border: 1px dashed var(--border); padding: 10px; margin: 0; } #safety.detail .diagram .grid > *{ width: calc((100% - 10px) / 2); margin: 0; margin-right: 10px; margin-top: 10px; } #safety.detail .diagram .grid > *:nth-of-type(2n){ margin-right: 0; } #safety.detail .diagram .grid > *:nth-of-type(1), #safety.detail .diagram .grid > *:nth-of-type(2){ margin-top: 0; } #safety.detail .diagram .grid > *::before, #safety.detail .diagram .grid > *::after{ display: none; } } /* 지속가능경영 - 사회 - 공급망 관리 - 공급망 관리 활동 */ #supply .process{ --gap: 30px; --defaultClip: polygon(calc(100% - var(--gap)) 0%, 100% 50%, calc(100% - var(--gap)) 100%, 0% 100%, var(--gap) 50%, 0% 0%); --startClip: polygon(calc(100% - var(--gap)) 0%, 100% 50%, calc(100% - var(--gap)) 100%, 0% 100%, 0 50%, 0% 0%); } #supply .process .diagram{ border: 1px solid var(--border); padding: 100px; } #supply .process .diagram .grid-box{ display: grid; grid-template-columns: repeat(4, 25%); margin: calc((var(--gap) / 2) * -1); } #supply .process .diagram .grid-box > *{ margin: 15px; margin: calc(var(--gap) / 2); } #supply .process .diagram dl{ display: flex; flex-direction: column; letter-spacing: -0.02em; text-align: center; } #supply .process .diagram dl dt{ position: relative; } #supply .process .diagram dl dt::before{ content: ""; width: calc(100% + var(--gap)); height: 100%; background: var(--mainColor); clip-path: var(--defaultClip); -webkit-clip-path: var(--defaultClip); position: absolute; top: 0; left: 0; } #supply .process .diagram dl dt span{ min-height: 60px; display: flex; flex-direction: column; justify-content: center; font-size: 20px; font-weight: 400; color: #FFF; padding: 10px calc(var(--gap) + 10px); position: relative; } #supply .process .diagram dl dd{ flex: 1 0 auto; background: var(--grayBg); padding: 25px; margin-top: 10px; } #supply .process .diagram ul li{ font-size: 18px; font-weight: 300; color: #333; letter-spacing: -0.02em; } #supply .process .diagram ul li:not(:last-of-type){ margin-bottom: 10px; } #supply .process .diagram dl:last-of-type dt::before{ width: 100%; } #supply .process .diagram dl:first-of-type dt::before{ clip-path: var(--startClip); -webkit-clip-path: var(--startClip); } #supply .management .grid-box{ display: grid; grid-template-columns: repeat(3, calc(100% / 3)); margin: -10px; } #supply .management .grid-box > *{ margin: 10px; } #supply .management .item{ display: flex; flex-direction: column; letter-spacing: -0.02em; } #supply .management .item .img{ position: relative; z-index: 10; } #supply .management .item .img img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; z-index: -1; } #supply .management .item .img dl{ min-height: 340px; display: flex; flex-direction: column; color: #FFF; padding: 40px; } #supply .management .item .img dl dt{ flex: 1 0 auto; font-size: 4rem; font-weight: 500; margin-bottom: 20px; } #supply .management .item .img dl dt span{ display: block; font-family: var(--engFont); font-size: 20px; color: rgba(255, 255, 255, 0.6); margin-bottom: 10px; } #supply .management .item .img dl dd{ font-size: 20px; font-weight: 200; line-height: 1.5; } #supply .management .item .content{ flex: 1 0 auto; border: 1px solid var(--border); border-top: none; padding: 25px; padding-bottom: 35px; } #supply .management .item .content .dot-list{ display: grid; grid-template-columns: repeat(2, 50%); margin: -5px; } #supply .management .item .content .dot-list li{ margin: 5px; } #supply .management .item .content .dot-list li::before{ background: #BBB; } #supply .process{ --th: 260px; } #supply .process .box{ background: var(--grayBg); padding: 60px 100px; } #supply .process .table{ margin: -5px 0; } #supply .process .table .tr{ display: grid; grid-template-columns: calc(var(--th) + 20px) auto; margin: 0 -5px; } #supply .process .table .tr > *{ margin: 5px; } #supply .process .table .th{ display: flex; flex-direction: column; justify-content: center; font-size: 20px; font-weight: 500; color: var(--mainColor); text-align: center; padding: 10px; position: relative; } #supply .process .table .th strong{ font-weight: inherit; vertical-align: middle; } #supply .process .table .thead .th{ background: var(--mainColor); font-weight: 400; color: #FFF; padding-block: 22px; } #supply .process .table .tbody .tr:not(:last-of-type){ margin-bottom: 30px; } #supply .process .table .tbody .th{ background: #E0EBF3; border: 1px solid rgba(var(--mainRGB), 0.2); } #supply .process .table .tbody .th::after{ content: ""; width: 100%; height: 10px; background: url("/img/sub/esg/supply_arrow.svg") no-repeat center center / contain; position: absolute; top: calc(100% + 20px); left: 0; transform: translateY(-50%); } #supply .process .table .tbody .tr:last-of-type .th::after{ display: none; } #supply .process .table .tbody .td{ background: #FFF; border: 1px solid var(--border); padding: 35px 25px; } #supply .process .table .tbody .row{ grid-row: auto / span 2; } #supply .process .table .dot-list li::before{ background: #BBB; } @media screen and (max-width: 1700px){ #supply .process .diagram{ padding: 70px; } #supply .process .diagram dl dt span{ min-height: 55px; font-size: 19px; } #supply .process .diagram dl dd{ padding: 20px; } #supply .management .item .img dl{ min-height: 300px; padding: 30px; } #supply .management .item .img dl dt span{ font-size: 18px; } #supply .management .item .img dl dd{ font-size: 19px; } #supply .process{ --th: 200px; } #supply .process .box{ padding: 40px 70px; } #supply .process .table .th{ font-size: 19px; } #supply .process .table .thead .th{ padding-block: 18px; } } @media screen and (max-width: 1420px){ #supply .intro br{ display: none; } } @media screen and (max-width: 1280px){ #supply .process{ --gap: 20px; } #supply .process .diagram{ padding: 40px; } #supply .process .diagram dl dt span{ min-height: 50px; font-size: 18px; } #supply .process .diagram ul li{ font-size: 17px; } #supply .management .item .img dl{ min-height: 250px; padding: 20px; } #supply .management .item .img dl dt span{ font-size: 16px; margin-bottom: 5px; } #supply .management .item .img dl dd{ font-size: 18px; } #supply .management .item .content{ padding: 20px; } #supply .process{ --th: 200px; } #supply .process .box{ padding: 30px 40px; } #supply .process .table .th{ font-size: 18px; } #supply .process .table .thead .th{ padding-block: 15px; } #supply .process .table .tbody .td{ padding: 20px; } } @media screen and (max-width: 1250px){ #supply .management .grid-box{ grid-template-columns: repeat(2, 50%); } #supply .management .item{ transition-delay: unset; } } @media screen and (max-width: 1024px){ #supply .process .diagram .grid-box{ grid-template-columns: repeat(2, 50%); } #supply .process .diagram dl:nth-of-type(even) dt::before{ width: 100%; } } @media screen and (max-width: 900px){ #supply .process .diagram{ padding: 25px; } #supply .management .grid-box{ grid-template-columns: repeat(1, 100%); } #supply .management .item .img dl dt{ font-size: 4.4rem; } #supply .process{ --th: 100px; } #supply .process .box{ padding: 25px; } #supply .process .table .tr{ margin: 0 -3px; } #supply .process .table .tr > *{ margin: 3px; } #supply .process .table .th{ font-size: 17px; } #supply .process .table .tbody .tr:not(:last-of-type){ margin-bottom: 18px; } #supply .process .table .tbody .th::after{ height: 8px; top: calc(100% + 12px); } #supply .process .table .dot-list li{ font-size: 16px; } } /* 지속가능경영 - 사회 - 공급망 관리 - 협력사 지원(상생) */ #partnership{ padding-bottom: 0; } @media screen and (max-width: 1550px){ #partnership .esg-layout br{ display: none; } } @media screen and (max-width: 1400px){ #partnership .intro-box br{ display: none; } } /* 지속가능경영 - 사회 - 사회공헌 - 사업영역/추진체계 */ #activity .company .grayBox{ background: var(--grayBg); padding: 60px; } #activity .company .sec{ position: relative; } #activity .company .sec:not(:last-of-type){ margin-bottom: 20px; } #activity .company .line-grid .left{ background: var(--grayBg); padding-top: 10px; } #activity .company .line-grid .left .eng{ font-weight: 500; } #activity .company .line-grid .right{ text-align: center; } #activity .company .box{ background: #FFF; padding: 25px; } #activity .company .box > *:not(:last-child){ margin-bottom: 20px; } #activity .company .box h6{ font-size: 26px; font-weight: 600; color: #111; } #activity .company .box strong{ display: block; font-size: 20px; font-weight: 600; color: #111; } #activity .company .box p{ font-size: 18px; font-weight: 300; color: #111; line-height: 1.6; } #activity .company .sec01 .box{ background: var(--mainColor); position: relative; z-index: 10; } #activity .company .sec01 .box::before{ content: ""; width: 100%; height: 30px; background: linear-gradient(to bottom, rgba(0, 114, 188, 0.3), rgba(248, 248, 248, 0.3)); position: absolute; top: 100%; left: 0; z-index: -1; clip-path: polygon(50% 100%, 0 0, 100% 0); -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0); } #activity .company .sec01 .box strong{ font-weight: 500; color: #FFF; } #activity .company .sec02{ z-index: 10; } #activity .company .sec03 .box{ border: 1px solid var(--border); padding: 40px; } #activity .activity{ letter-spacing: -0.02em; } #activity .activity .tit{ border-bottom: 1px solid #111; padding-bottom: 20px; margin-bottom: 60px; } #activity .activity .tit h4{ font-size: 4rem; font-weight: 600; color: #111; } #activity .activity .grid-box{ display: grid; grid-template-columns: repeat(2, 50%); margin: -20px; } #activity .activity .grid-box > *{ margin: 20px; } #activity .activity dl{ min-height: 330px; background: var(--grayBg); padding: 30px; } #activity .activity dl dt{ display: flex; align-items: center; font-size: 26px; font-weight: 600; color: #000; margin-bottom: 30px; } #activity .activity dl dt .icon{ flex-shrink: 0; display: inline-block; background: var(--mainColor); border: 10px solid rgba(255, 255, 255, 0.5); border-radius: 50%; margin-right: 30px; } #activity .activity dl dd{ font-size: 20px; font-weight: 300; color: #111; line-height: 1.7; } @media screen and (max-width: 1700px){ #activity .company .grayBox{ padding: 40px; } #activity .company .box{ padding: 20px; } #activity .company .box h6{ font-size: 23px; } #activity .company .box strong{ font-size: 19px; } #activity .company .sec03 .box{ padding: 30px; } #activity .activity .tit{ padding-bottom: 15px; margin-bottom: 40px; } #activity .activity dl dt{ font-size: 23px; margin-bottom: 20px; } #activity .activity dl dt .icon{ margin-right: 20px; } #activity .activity dl dt .icon img{ width: 70px; } #activity .activity dl dd{ font-size: 19px; } } @media screen and (max-width: 1450px){ #activity .company br{ display: none; } } @media screen and (max-width: 1280px){ #activity .company .box{ padding: 15px; } #activity .company .box > *:not(:last-child){ margin-bottom: 15px; } #activity .company .box p{ font-size: 17px; } #activity .company .box h6{ font-size: 20px; } #activity .company .box strong{ font-size: 18px; } #activity .company .sec03 .box{ padding: 25px; } #activity .activity .tit{ padding-bottom: 10px; margin-bottom: 25px; } #activity .activity dl{ padding: 25px; } #activity .activity dl dt{ font-size: 21px; margin-bottom: 15px; } #activity .activity dl dt .icon{ border-width: 7px; margin-right: 15px; } #activity .activity dl dt .icon img{ width: 60px; } #activity .activity dl dd{ font-size: 18px; } } @media screen and (max-width: 1024px){ #activity .activity .grid-box{ margin: -15px; } #activity .activity .grid-box > *{ margin: 15px; } } @media screen and (max-width: 900px){ #activity .company .grayBox{ padding: 25px; } #activity .activity dl dt{ font-size: 20px; } #activity .activity dl dt .icon{ border-width: 6px; } #activity .activity dl dt .icon img{ width: 57px; } } @media screen and (max-width: 850px){ #activity .activity .grid-box{ grid-template-columns: repeat(1, 100%); } #activity .activity dl{ min-height: unset; } } /* 지속가능경영 - 사회 - 사회공헌 - 주요 사회공헌 활동 */ #contribution{ padding-bottom: 0; } /* 지속가능경영 - 사회 - 사회공헌 - 정기봉사처 */ #volunteer{ padding-bottom: 0; } @media screen and (max-width: 1400px){ #volunteer br{ display: none; } } /* 지속가능경영 - 거버넌스 - 이사회 (공통) */ #directorate .table-box{ --paddingTB: 15px; --paddingLR: 15px; } #directorate .table-box{ padding-bottom: 15px; } #directorate .table-box thead{ --paddingLR: 5px; } #directorate .table-box tbody td{ text-align: right; } #directorate .table-box tbody td strong{ display: block; font-weight: 500; text-align: left; } #directorate .table-box tbody td span{ font-weight: 500; text-align: center; } #directorate .table-box tbody td p{ text-align: center; } @media screen and (max-width: 1700px){ #directorate .table-box{ --paddingTB: 12px; --paddingLR: 12px; } } /* 지속가능경영 - 거버넌스 - 이사회 - 이사회 구성 */ #directorate.structure .table-box colgroup col.s{ width: 80px; } #directorate.structure .table-box colgroup col.m{ width: 150px; } #directorate.structure .table-box colgroup col.l{ width: 20%; } #directorate.structure .table01 .table-box table{ min-width: 1200px; } #directorate.structure .table02 .table-box table{ min-width: 1100px; } #directorate.structure .table02 .table-box colgroup col.m{ width: 120px; } #directorate.structure .table02 .table-box tbody td{ text-align: center; } @media screen and (max-width: 1700px){ #directorate.structure .table-box colgroup col.s{ width: 75px; } #directorate.structure .table-box colgroup col.m{ width: 120px; } #directorate.structure .table02 .table-box colgroup col.m{ width: 100px; } } @media screen and (max-width: 1280px){ #directorate.structure .table-box colgroup col.s{ width: 65px; } } /* 지속가능경영 - 거버넌스 - 이사회 - 이사회 운영현황 */ #directorate.status .small-tab ul li > *{ font-family: var(--engFont); } #directorate.status .tab-content .tab:not(:first-of-type){ display: none; } #directorate.status .table-box table{ min-width: 1100px; } #directorate.status .table-box colgroup col.s{ width: 60px; } #directorate.status .table-box colgroup col.m{ width: 75px; } #directorate.status .table-box colgroup col.l{ width: 150px; } #directorate.status .table-box table td{ text-align: center; } #directorate.status .table-box table td span{ font-weight: 500; text-align: center; } #directorate.status .table-box table td p{ text-align: center; } @media screen and (max-width: 1280px){ #directorate.status .table-box colgroup col.s{ width: 55px; } #directorate.status .table-box colgroup col.m{ width: 70px; } #directorate.status .table-box colgroup col.l{ width: 130px; } } /* 지속가능경영 - 거버넌스 - 이사회 - 소위원회 구성 */ #directorate.subcommittee .sec:not(:last-of-type){ padding-bottom: 60px; } #directorate.subcommittee .table-box table{ min-width: 900px; } #directorate.subcommittee .table-box colgroup col.s{ width: 60px; } #directorate.subcommittee .table-box colgroup col.mm, #directorate.subcommittee .table-box colgroup col.m{ width: 130px; } #directorate.subcommittee .table-box colgroup col.l{ width: 170px; } #directorate.subcommittee .table-box table td{ text-align: center; } #directorate.subcommittee .table-box td ul{ text-align: left; } #directorate.subcommittee .table-box td ul li{ font-weight: 500; padding-left: 15px; position: relative; } #directorate.subcommittee .table-box td ul li:not(:last-of-type){ margin-bottom: 7px; } #directorate.subcommittee .table-box td ul li::before{ content: "-"; position: absolute; top: 0; left: 0; } #directorate.subcommittee .table-box .table03{ min-width: 1100px; } #directorate.subcommittee .small-tab{ margin-bottom: 30px; } #directorate.subcommittee .small-tab ul{ justify-content: unset; } #directorate.subcommittee .small-tab ul li > *{ font-family: var(--engFont); } #directorate.subcommittee .tab-content .tab:not(:first-of-type){ display: none; } @media screen and (max-width: 1700px){ #directorate.subcommittee .table-box colgroup col.mm, #directorate.subcommittee .table-box colgroup col.m{ width: 115px; } } @media screen and (max-width: 1280px){ #directorate.subcommittee .table-box colgroup col.s{ width: 50px; } #directorate.subcommittee .table-box colgroup col.mm{ width: 100px; } #directorate.subcommittee .table-box colgroup col.m{ width: 80px; } #directorate.subcommittee .table-box colgroup col.l{ width: 130px; } } /* 지속가능경영 - 거버넌스 - 이사회 - 주주권리 */ #directorate.shareholders .table-box table{ min-width: 850px; } #directorate.shareholders .table-box colgroup col.l{ width: 18.75%; } #directorate.shareholders .table-box colgroup col.m{ width: 170px; } #directorate.shareholders .table-box colgroup col.s{ width: 130px; } #directorate.shareholders .table-box colgroup col.xs{ width: 80px; } #directorate.shareholders .table-box thead th{ padding-inline: 5px; } #directorate.shareholders .table-box tbody th{ text-align: center; padding-inline: 10px; } #directorate.shareholders .table-box tbody td{ padding-inline: 15px; } #directorate.shareholders .table-box tbody td strong{ display: block; font-weight: 500; text-align: center; } #directorate.shareholders .table-box tbody td p{ text-align: center; } @media screen and (max-width: 1700px){ #directorate.shareholders .table-box colgroup col.m{ width: 150px; } #directorate.shareholders .table-box colgroup col.s{ width: 110px; } #directorate.shareholders .table-box colgroup col.xs{ width: 70px; } } @media screen and (max-width: 900px){ #directorate.shareholders .sec-title{ padding-bottom: 20px; } } /* 지속가능경영 - 거버넌스 - 윤리 및 반부패 - 윤리선언 */ #declaration .flex-box{ display: flex; letter-spacing: -0.02em; opacity: 1; } #declaration .flex-box > *{ opacity: 0; transition: opacity var(--aosT), transform var(--aosT); } #declaration .text{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding-right: 120px; transform: translateX(var(--aosM)); } #declaration .text .column > *:not(:last-child){ margin-bottom: 25px; } #declaration .text .column p{ font-size: 20px; font-weight: 300; color: #111; line-height: 1.7; } #declaration .text .column p strong{ font-size: 26px; font-weight: 600; color: var(--mainColor); line-height: 1.5; } #declaration .text .column .box{ background: var(--grayBg); padding: 40px; } #declaration .text .column .box ul li{ font-size: 18px; font-weight: 300; color: #111; } #declaration .text .column .box ul li:not(:last-of-type){ margin-bottom: 15px; } #declaration .text .name{ display: flex; align-items: center; font-size: 20px; font-weight: 500; color: #111; margin-top: 40px; } #declaration .text .name strong{ display: inline-block; font-family: var(--pointFont); font-size: 34px; font-weight: 400; margin-left: 30px; } #declaration .img{ flex-shrink: 0; width: 640px; transform: translateY(var(--aosP)); } #declaration .img figure, #declaration .img figure img{ width: 100%; height: 100%; } #declaration .img figure img{ object-fit: cover; } #declaration .flex-box.aos-animate > *{ opacity: 1; transform: translate(0, 0) !important; } @media screen and (max-width: 1700px){ #declaration .text{ padding-right: 90px; } #declaration .text .column > *:not(:last-child){ margin-bottom: 20px; } #declaration .text .column p{ font-size: 19px; } #declaration .text .column p strong{ font-size: 23px; } #declaration .text .column .box{ padding: 30px; } #declaration .text .name{ font-size: 19px; margin-top: 30px; } #declaration .text .name strong{ font-size: 30px; } #declaration .img{ width: 550px; } } @media screen and (max-width: 1400px){ #declaration .text br{ display: none; } } @media screen and (max-width: 1280px){ #declaration .text{ padding-right: 90px; } #declaration .text .column > *:not(:last-child){ margin-bottom: 15px; } #declaration .text .column p{ font-size: 18px; } #declaration .text .column p strong{ font-size: 21px; } #declaration .text .column .box{ padding: 20px 25px; } #declaration .text .column .box ul li{ font-size: 17px; } #declaration .text .column .box ul li:not(:last-of-type){ margin-bottom: 12px; } #declaration .text .name{ font-size: 17px; margin-top: 20px; } #declaration .text .name strong{ font-size: 26px; margin-left: 20px; } #declaration .img{ width: 45%; } } @media screen and (max-width: 1024px){ #declaration .flex-box{ flex-direction: column-reverse; } #declaration .text{ padding-right: 0; padding-top: 30px; transform: translateY(var(--aosP)); } #declaration .img{ width: 100%; } } /* 지속가능경영 - 거버넌스 - 윤리 및 반부패 - 윤리 정책 및 강령 */ #code .flex-title{ justify-content: space-between; } #code .sec-title{ position: static; } #code .blueBtn{ width: 240px; } #code .policy .flex-title{ border-bottom: 1px solid #111; padding-bottom: 20px; } #code .policy .flex-title h5{ font-size: 4rem; font-weight: 600; color: #111; letter-spacing: -0.02em; } #code .policy .content .grid-box{ display: grid; grid-template-columns: repeat(4, 25%); margin: -15px; } #code .policy .content .grid-box > *{ margin: 15px; } #code .policy .content dl{ display: flex; flex-direction: column; letter-spacing: -0.02em; text-align: center; } #code .policy .content dl > *{ display: flex; justify-content: center; padding: 10px 15px; } #code .policy .content dl dt{ min-height: 65px; align-items: center; background: linear-gradient(to bottom, var(--navyGradi)); font-size: 20px; font-weight: 500; color: #FFF; } #code .policy .content dl dd{ min-height: 85px; flex: 1 0 auto; flex-direction: column; border: 1px solid var(--border); border-top: none; font-size: 18px; font-weight: 300; color: #111; letter-spacing: -0.02em; } #code .code .flex-title{ align-items: flex-start; margin: 0; } #code .code .content .line-grid:not(:last-of-type){ margin-bottom: 100px; } #code .code .content .line-grid .right{ padding-left: var(--paddingR); } #code .code .content .right dl{ letter-spacing: -0.02em; } #code .code .content .right dl:not(:last-of-type){ margin-bottom: 40px; } #code .code .content .right dl dt{ font-size: 22px; font-weight: 600; color: #111; margin-bottom: 10px; } #code .code .content .right dl dd{ font-size: 20px; font-weight: 300; color: #111; line-height: 1.6; } @media screen and (max-width: 1700px){ #code .blueBtn{ width: 200px; } #code .policy .content dl dt{ min-height: 55px; font-size: 19px; } #code .policy .content dl dd{ min-height: 75px; } #code .code .content .line-grid:not(:last-of-type){ margin-bottom: 70px; } #code .code .content .right dl dt{ font-size: 21px; } #code .code .content .right dl dd{ font-size: 19px; } } @media screen and (max-width: 1400px){ #code .policy .content .grid-box{ margin: -10px; } #code .policy .content .grid-box > *{ margin: 10px; } } @media screen and (max-width: 1280px){ #code .blueBtn{ width: 170px; } #code .policy .flex-title{ padding-bottom: 15px; } #code .policy .content dl dt{ min-height: 50px; font-size: 18px; } #code .policy .content dl dd{ min-height: 65px; font-size: 17px; } #code .code .content .line-grid:not(:last-of-type){ margin-bottom: 50px; } #code .code .content .right dl:not(:last-of-type){ margin-bottom: 30px; } #code .code .content .right dl dt{ font-size: 20px; } #code .code .content .right dl dd{ font-size: 18px; } } @media screen and (max-width: 1200px){ #code .policy .content .grid-box{ grid-template-columns: repeat(3, calc(100% / 3)); } } @media screen and (max-width: 1024px){ #code .relative{ position: relative; } #code .blueBtn{ width: 100%; position: absolute; bottom: 0; left: 0; } #code .policy .relative{ padding-bottom: 60px; margin-bottom: 10px; } #code .code .relative{ padding-bottom: 75px; margin-bottom: 15px; } #code .code .content .left{ border-top: none; border-bottom: 1px solid #000; padding-block: 0 10px; margin-bottom: 25px; } #code .code .content .left br{ display: none; } } @media screen and (max-width: 900px){ #code .policy .content dl dt{ min-height: 45px; font-size: 17px; } #code .policy .content dl dd{ min-height: 60px; font-size: 16px; } #code .code .content .right dl dt{ font-size: 19px; } #code .code .content .right dl dd{ font-size: 17px; } } @media screen and (max-width: 800px){ #code .policy .content .grid-box{ grid-template-columns: repeat(2, 50%); } } @media screen and (max-width: 650px){ #code .policy .content .grid-box{ margin: -5px; } #code .policy .content .grid-box > *{ margin: 5px; } } /* 지속가능경영 - 거버넌스 - 온라인 신문고 - 이용안내 */ #guide .mark{ text-align: right; margin-bottom: 20px; } #guide .blueBtn{ width: 400px; } #guide .line-grid .left > span{ font-weight: 300; } #guide .line-grid .right{ letter-spacing: -0.02em; padding-left: var(--paddingR); } #guide .line-grid .right .base{ font-size: 20px; font-weight: 300; color: #111; line-height: 1.6; } #guide .line-grid .right .bold{ font-size: 22px; font-weight: 500; color: #111; } #guide .blue-grid{ display: grid; grid-template-columns: repeat(3, calc(100% / 3)); margin: -10px; } #guide .blue-grid > *{ margin: 10px; } #guide .blue-grid dl{ display: flex; flex-direction: column; } #guide .blue-grid dl dt{ min-height: 86px; display: flex; justify-content: center; align-items: center; background: linear-gradient(to bottom, var(--navyGradi)); font-size: 20px; font-weight: 500; color: #FFF; text-align: center; padding: 10px; } #guide .blue-grid dl dd{ flex: 1 0 auto; border: 1px solid var(--border); border-top: none; padding: 30px; } #guide .blue-grid .dot-list li::before{ background: #BBB; } #guide .workflow{ --num: 50px; --gapR: 40px; --gapB: 70px; } #guide .workflow ol li:not(:last-of-type){ margin-bottom: var(--gapB); } #guide .workflow ol li:first-of-type .box::after{ display: none; } #guide .workflow .flex{ display: flex; } #guide .workflow .flex > *{ width: calc((100% - var(--gapR)) / 2); } #guide .workflow .flex > *:not(:last-child){ margin-right: var(--gapR); } #guide .workflow .box{ display: flex; align-items: center; border: 1px solid var(--border); padding: 30px; position: relative; } #guide .workflow .box::after{ content: ""; width: 30px; height: 30px; background: url("/img/sub/esg/guide_workflow_arrow.svg") no-repeat center center / contain; position: absolute; top: calc((var(--gapB) / 2) * -1); left: 50%; transform: translate(-50%, -50%); } #guide .workflow .box span{ flex-shrink: 0; display: inline-block; width: var(--num); height: var(--num); background: var(--mainColor); border-radius: 50%; font-family: var(--engFont); font-size: 21px; font-weight: 400; color: #FFF; line-height: var(--num); text-align: center; margin-right: 50px; } #guide .workflow .box > div > *:not(:last-child){ margin-bottom: 20px; } #guide .workflow .box p{ font-size: 22px; font-weight: 500; color: #111; } #guide .workflow .box ul li{ font-size: 20px; font-weight: 300; color: #111; padding-left: 15px; position: relative; } #guide .workflow .box ul li:not(:last-of-type){ margin-bottom: 10px; } #guide .workflow .box ul li::before{ content: "-"; position: absolute; top: 0; left: 0; } #guide .dl-box dl:not(:last-of-type){ margin-bottom: 60px; } #guide .dl-box dl dt{ font-size: 22px; font-weight: 500; color: #333; } #guide .dl-box dl dd{ margin-top: 20px; } @media screen and (max-width: 1700px){ #guide .blueBtn{ width: 380px; } #guide .line-grid .right .base{ font-size: 19px; } #guide .line-grid .right .bold{ font-size: 21px; } #guide .blue-grid dl dt{ min-height: 70px; font-size: 19px; } #guide .workflow{ --num: 45px; } #guide .workflow .box{ padding: 25px; } #guide .workflow .box::after{ width: 25px; height: 25px; } #guide .workflow .box span{ font-size: 19px; margin-right: 35px; } #guide .workflow .box p{ font-size: 21px; } #guide .workflow .box ul li{ font-size: 19px; } #guide .dl-box dl dt{ font-size: 21px; } #guide .dl-box dl dd{ margin-top: 15px; } } @media screen and (max-width: 1400px){ #guide .workflow{ --num: 40px; --gapR: 25px; --gapB: 60px; } #guide .workflow .box{ padding: 20px; } #guide .workflow .box::after{ width: 20px; height: 20px; } #guide .workflow .box span{ font-size: 17px; margin-right: 30px; } } @media screen and (max-width: 1280px){ #guide .blueBtn{ width: 360px; } #guide .line-grid .right .base{ font-size: 18px; } #guide .line-grid .right .bold{ font-size: 20px; } #guide .blue-grid dl dt{ min-height: 60px; font-size: 18px; } #guide .blue-grid dl dd{ padding: 25px; } #guide .workflow .box > div > *:not(:last-child){ margin-bottom: 15px; } #guide .workflow .box p{ font-size: 20px; } #guide .workflow .box ul li{ font-size: 18px; } #guide .dl-box dl:not(:last-of-type){ margin-bottom: 40px; } #guide .dl-box dl dt{ font-size: 20px; } #guide .dl-box dl dd{ margin-top: 10px; } } @media screen and (max-width: 1200px){ #guide .line-grid .left{ border-top: none; border-bottom: 1px solid #000; margin-bottom: 20px; } #guide .line-grid .left br{ display: none; } } @media screen and (max-width: 1024px){ #guide .blueBtn{ width: 100%; } #guide .blue-grid{ grid-template-columns: repeat(2, 50%); } } @media screen and (max-width: 900px){ #guide .blue-grid dl dt{ min-height: 50px; } #guide .workflow{ --num: 25px; --gapR: 10px; --gapB: 40px; } #guide .workflow .box{ padding: 15px 12px; } #guide .workflow .box::after{ width: 15px; height: 15px; } #guide .workflow .box span{ font-size: 15px; margin-right: 15px; } #guide .workflow .box p{ font-size: 17px; } #guide .workflow .box ul li{ font-size: 17px; } } @media screen and (max-width: 650px){ #guide .blue-grid{ grid-template-columns: repeat(1, 100%); } #guide .workflow br{ display: none; } } /* 개인정보처리방침 */ #policy{ position: relative; padding-top: 0; } #policy .privacy{ border-top: 1px solid var(--border); padding-top: var(--subPt); } #policy .privacy *{ font-size: 19px; font-weight: 300; color: #111; line-height: 1.6; } #policy .privacy h6{ font-size: 22px; font-weight: 600; color: #111; } #policy .privacy dl dt{ font-weight: 500; } #policy .privacy dl dd{ margin-top: 5px; } #policy .privacy .dot-dl dl dt{ padding-left: 19px; position: relative; } #policy .privacy .dot-dl dl dt::before{ content: ""; width: 4px; height: 4px; background: #111; border-radius: 50%; position: absolute; top: calc(1.6em / 2); left: 0; transform: translateY(-50%); } #policy .privacy .box{ background: var(--grayBg); border: 1px solid var(--border); padding: 20px 25px; margin-top: 15px; } #policy .privacy .dot-list li::before{ top: calc(1.6em / 2); } #policy .privacy .hyphen-list > li{ padding-left: 15px; position: relative; } #policy .privacy .hyphen-list > li:not(:last-of-type){ margin-bottom: 10px; } #policy .privacy .hyphen-list > li::before{ content: "-"; line-height: inherit; position: absolute; top: 0; left: 0; } #policy .privacy .hyphen-list > li .box{ margin: 10px 0 20px; } #policy .privacy .dot-list li:not(:last-of-type){ margin-bottom: 5px; } #policy .privacy > *:not(:last-child){ margin-bottom: 100px; } #policy .privacy .sec > *:not(:last-child){ margin-bottom: 20px; } #policy .privacy .p-box > *:not(:last-child){ margin-bottom: 15px; } #policy .privacy .dl > *{ margin-top: 40px; } @media screen and (max-width: 1700px){ #policy .privacy *{ font-size: 18px; } #policy .privacy h6{ font-size: 21px; } #policy .privacy .box{ padding: 15px 20px; } #policy .privacy > *:not(:last-child){ margin-bottom: 80px; } #policy .privacy .dl > *{ margin-top: 30px; } } @media screen and (max-width: 1620px){ #policy br{ display: none; } } @media screen and (max-width: 1280px){ #policy .privacy *{ font-size: 17px; } #policy .privacy h6{ font-size: 20px; } #policy .privacy .dot-dl dl dt{ padding-left: 14px; } #policy .privacy .dot-list > li:not(:last-of-type){ margin-bottom: 5px; } #policy .privacy .box{ padding: 10px 17px; } #policy .privacy > *:not(:last-child){ margin-bottom: 60px; } #policy .privacy .sec > *:not(:last-child){ margin-bottom: 15px; } #policy .privacy .p-box > *:not(:last-child){ margin-bottom: 10px; } #policy .privacy .dl > *{ margin-top: 20px; } } /* 고무소재 표 (공통) */ .prod-table h4{ font-size: 36px; font-weight: 600; color: #111; padding-bottom: 30px; } .prod-table .scroll-bar{ overflow-x: auto; overflow-y: clip; padding-bottom: 15px; } .prod-table .blue-table{ min-width: 1000px; overflow: hidden; } .prod-table .blue-table col.m{ width: 250px; } .prod-table .blue-table col.l{ width: 250px; } .prod-table .blue-table col.img{ width: 310px; } .prod-table .blue-table td{ font-size: 18px; font-weight: 300; color: #111; } .prod-table .blue-table figure{ display: block; text-align: center; } .prod-table .blue-table .column{ text-align: center; } .prod-table .blue-table .column > li:not(:last-of-type){ margin-bottom: 12px; } @media screen and (max-width: 1700px){ .prod-table h4{ font-size: 32px; } .prod-table .blue-table col.m{ width: 200px; } .prod-table .blue-table col.l{ width: 200px; } .prod-table .blue-table col.img{ width: 260px; } } @media screen and (max-width: 1280px){ .prod-table h4{ font-size: 28px; padding-bottom: 20px; } .prod-table .blue-table col.m{ width: 140px; } .prod-table .blue-table col.l{ width: 180px; } .prod-table .blue-table col.img{ width: 210px; } .prod-table .blue-table td{ font-size: 17px; } .prod-table .blue-table .column > li:not(:last-of-type){ margin-bottom: 10px; } } @media screen and (max-width: 900px){ .prod-table h4{ font-size: 24px; } }