/* 서브 비주얼 */ #sub .sub-visual .bg{ padding: 13% 0 8.5%; } #sub .bg1{ background: url("/img/sub/company_bg.jpg") no-repeat center center / cover; } #sub .bg2{ background: url("/img/sub/product_bg.jpg") no-repeat center center / cover; } /* #sub .bg3{ background: url("/img/sub/apply_bg.jpg") no-repeat center center / cover; } 적용 산업 비주얼 이미지 */ #sub .bg3{ background: url("/img/sub/reference_bg.jpg") no-repeat center center / cover; } #sub .bg4{ background: url("/img/sub/rnd_bg.jpg") no-repeat center center / cover; } #sub .bg5{ background: url("/img/sub/ir_bg.jpg") no-repeat center center / cover; } #sub .bg6{ background: url("/img/sub/support_bg.jpg") no-repeat center center / cover; } #sub .sub-visual{ text-align: center; color: #fff; } #sub .sub-visual h2{ font-size: 6rem; font-weight: 700; margin-bottom: 15px; } #sub .sub-visual p{ font-size: 1.8rem; font-weight: 200; line-height: 1.8555; } #sub .sub-visual p span{ display: block; line-height: inherit; } #sub .sub-visual p span:first-of-type{ margin-right: 60px; } #sub .sub-visual p span:last-of-type{ margin-left: 60px; } /* lnb */ #sub .lnb{ height: 70px; background: #fff; display: flex; justify-content: center; align-items: center; border-bottom: 1px solid #eee; /* position: sticky; top: 0; left: 0; */ z-index: 70; } #sub .lnb .depth{ position: relative; height: 100%; } #sub .lnb .depth::after{ content: ""; width: 1px; height: 15px; background: #000; opacity: 0.15; position: absolute; top: 50%; right: 0; transform: translateY(-50%); } #sub .lnb .depth:last-of-type::after{ display: none; } #sub .lnb .depth button{ width: 250px; height: 100%; font-size: 1.8rem; font-weight: 600; color: #111; text-align: left; border: none; background: none; padding: 0; padding: 0 35px; padding-right: 60px; position: relative; cursor: pointer; } #sub .lnb .depth button::after{ content: url("/img/sub/lnb_arrow.png"); position: absolute; top: 50%; right: 34px; transform: translateY(-50%); } #sub .lnb .depth ul{ width: 100%; position: absolute; z-index: 80; background: #111; padding: 25px 0; border-radius: 0 0 10px 10px; display: none; } #sub .lnb .depth ul li a{ display: inline-block; width: 100%; font-size: 1.6rem; font-weight: 400; color: #fff; opacity: 0.6; padding: 5px 35px; transition: all 0.3s; } #sub .lnb .depth ul li a::after{ content: "→"; margin-left: 10px; opacity: 0; transition: all 0.3s; } #sub .lnb .depth ul li:hover a{ font-weight: 600; opacity: 1; } #sub .lnb .depth ul li:hover a::after{ opacity: 1; } /* 회사 소개 sub-depth */ .sub-depth{ background: #F5F5F5; /* padding: 90px 0; */ padding: 50px 0; } .sub-depth ul{ display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: -7px; } .sub-depth ul li{ width: calc((100% - 21px) / 4); margin-right: 7px; margin-bottom: 7px; } .sub-depth ul li:last-of-type{ margin-right: 0; } .sub-depth ul li a{ width: 100%; height: 70px; display: flex; justify-content: center; align-items: center; background: #fff; border: 1px solid #DDD; border-radius: 10px; font-size: 1.8rem; font-weight: 400; color: #111; padding: 10px; transition: all 0.5s; } .sub-depth ul li.on a, .sub-depth ul li:hover a{ background: #111; border: 1px solid #111; font-weight: 600; color: #fff; } /* 제품 소개 lnb */ #sub .lnb2.none .depth1::after{ display: none; } #sub .lnb2.none .depth2{ display: none; } #sub .sub-content{ padding-top: 105px; padding-bottom: 117px; } @media screen and (max-width: 1500px){ #sub .sub-visual h2{ font-size: 1.6rem; font-size: 5rem; } /* 회사 소개 sub-depth */ .sub-depth ul li a{ height: 60px; font-size: 1.7rem; } } @media screen and (max-width: 1200px){ #sub .sub-visual .bg{ padding: 18% 0 12%; } #sub .sub-visual h2{ font-size: 4rem; } #sub .sub-visual p{ font-size: 1.6rem; } #sub .sub-visual p span:first-of-type{ margin-right: 50px; } #sub .sub-visual p span:last-of-type{ margin-left: 50px; } #sub .lnb{ height: 60px; } #sub .lnb .depth button{ font-size: 1.6rem; } #sub .sub-content{ padding-top: 80px; padding-bottom: 100px; } /* 회사 소개 sub-depth */ /* .sub-depth{ padding: 50px 0; } */ .sub-depth ul li a{ height: 55px; font-size: 1.6rem; } } @media screen and (max-width: 1000px){ #sub .lnb{ padding: 0 20px; } #sub .lnb .depth{ width: calc(100% / 3); } #sub .lnb .depth button{ width: 100%; padding: 0 20px; padding-right: 50px; } #sub .lnb .depth button::after{ right: 20px; } #sub .lnb .depth ul{ padding: 10px 0; } #sub .lnb .depth ul li a{ padding: 5px 25px; } } @media screen and (max-width: 900px){ /* 회사 소개 sub-depth */ .sub-depth{ padding: 30px 0; } } @media screen and (max-width: 800px){ #sub .sub-visual .bg{ padding: 150px 0 70px; } #sub .sub-visual h2{ font-size: 3.5rem; } #sub .lnb .depth{ width: calc(100% / 2); } #sub .lnb .depth1{ display: none; } /* 회사 소개 sub-depth */ .sub-depth ul{ justify-content: flex-start; } .sub-depth ul li{ width: calc((100% - 14px) / 3); } .sub-depth ul li:nth-of-type(3n){ margin-right: 0; } /* 제품 소개 lnb */ #sub .lnb2.none .depth1{ display: block; } } @media screen and (max-width: 700px){ } @media screen and (max-width: 600px){ #sub .lnb .depth ul li a{ font-size: 1.5rem; } /* 회사 소개 sub-depth */ .sub-depth ul li{ width: calc((100% - 7px) / 2); } .sub-depth ul li:nth-of-type(3n){ margin-right: 7px; } .sub-depth ul li:nth-of-type(2n){ margin-right: 0; } } /* 공통 */ body.lock{ overflow: hidden; } /* #header{ position: absolute; } */ .page-title{ text-align: center; margin-bottom: 70px; } .page-title *{ color: #111; } .page-title > span{ display: inline-block; font-family: var(--Poppins); font-size: 2rem; font-weight: 700; color: var(--mainColor); text-transform: uppercase; letter-spacing: 0; } .page-title h3{ font-size: 6rem; font-weight: 700; margin-top: 20px; } .page-title p{ font-size: 2.4rem; font-weight: 300; margin-top: 40px; line-height: 1.7166; letter-spacing: 0; } .squre-title{ padding-top: 20px; margin-bottom: 40px; } .squre-title h5{ display: inline-block; font-size: 3.5rem; font-weight: 700; color: #111; position: relative; } .squre-title h5::after{ content: url("/img/sub/squre_title.svg"); position: absolute; top: -25px; right: -23px; } .center .black-btn{ margin: 0 auto; } .black-btn{ display: flex; justify-content: center; align-items: center; width: 265px; height: 60px; background: #191919; border: none; font-size: 2rem; font-weight: 600; color: #fff; line-height: 1; } a.black-btn:active, a.black-btn:visited, a.black-btn:link{ color: #fff; } .blue{ color: var(--mainColor); } .red{ color: #8f120a; } /* .tab-menu */ .tab-menu{ margin-bottom: 40px; background: #fff; } .tab-menu ul{ display: flex; flex-wrap: wrap; } .tab-menu ul li{ font-size: 2rem; font-weight: 600; color: #111; text-align: center; padding: 20px; border: 1px solid #DDD; position: relative; transition: all 0.3s; } .tab-menu ul li:not(:first-of-type){ border-left: none; } .tab-menu ul li a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; } .tab-menu ul li.on, .tab-menu ul li:hover{ background: var(--mainColor); border: 1px solid var(--mainColor); color: #fff; } .tab-menu.sticky{ position: sticky; /* top: 118px; */ top: 73px; left: 0; z-index: 50; } /* selectric-select (공통) */ .selectric-items .selectric-scroll::-webkit-scrollbar{ width: 20px; } .selectric-items .selectric-scroll::-webkit-scrollbar-thumb{ height: 20px; background: #D9D9D9; background-clip: padding-box; border: 6px solid transparent; border-radius: 100px; } .selectric-items .selectric-scroll::-webkit-scrollbar-track{ background-clip: padding-box; border: 5px; border: 5px solid transparent; border-radius: 100px; } /* viewmore */ .viewmore{ display: flex; align-items: center; max-width: max-content; background: var(--mainColor); border-radius: 7px; font-size: 1.7rem; font-weight: 400; color: #FFF !important; padding: 15px 20px; } .viewmore i{ margin-left: 42px; } @media screen and (max-width: 1500px){ .page-title{ margin-bottom: 50px; } .page-title > span{ font-size: 1.8rem; } .page-title h3{ font-size: 5rem; margin-top: 10px; } .page-title p{ font-size: 2rem; margin-top: 20px; } .squre-title{ margin-bottom: 30px; } .squre-title h5{ font-size: 3rem; } .black-btn{ width: 220px; height: 55px; font-size: 1.8rem; } /* .tab-menu */ .tab-menu ul li{ font-size: 1.8rem; padding: 15px 20px; } /* viewmore */ .viewmore{ padding: 13px 15px; } .viewmore i{ margin-left: 30px; } } @media screen and (max-width: 1450px){ .tab-menu.sticky{ top: 105px; } } @media screen and (max-width: 1250px){ .page-title{ margin-bottom: 30px; } .page-title > span{ font-size: 1.6rem; } .page-title h3{ font-size: 4rem; } .page-title p{ font-size: 1.8rem; } .squre-title{ padding-top: 10px; margin-bottom: 20px; } .squre-title h5{ font-size: 2.5rem; } .squre-title h5::after{ top: -15px; transform: scale(0.8); transform-origin: center left; } .black-btn{ width: 170px; height: 50px; font-size: 1.7rem; } /* .tab-menu */ .tab-menu ul li{ font-size: 1.7rem; } /* viewmore */ .viewmore{ font-size: 1.6rem; } .viewmore i{ margin-left: 20px; } } @media screen and (max-width: 900px){ .page-title > span{ font-size: 1.5rem; } .page-title h3{ font-size: 3.2rem; } .black-btn{ width: 160px; height: 45px; font-size: 1.6rem; } } /* 개인정보 처리방침 */ #sub .sub-visual.visual7{ display: none; } #sub .lnb.lnb7{ display: none; } #policy.sub-content{ padding-top: 200px; } @media screen and (max-width: 1450px){ #policy.sub-content{ padding-top: 150px; } #policy br{ display: none; } } /* .search-box */ .search-box{ margin-bottom: 30px; } .search-box .flex-box{ display: flex; justify-content: flex-end; } .search-box .flex-box > div, .search-box .selectric .label{ height: 70px; } .search-box .flex-box *{ font-family: var(--baseFont); font-size: 1.8rem; font-weight: 200; color: #111; } .search-box .selectric, .search-box .flex-box input{ border: 1px solid #DDD; border-radius: 10px; background: #fff; } .search-box .selectric .label, .search-box .flex-box input{ padding: 0 40px; } .search-box .selectric-select{ width: 300px; margin-right: 10px; } .search-box .selectric{ height: 100%; } .search-box .selectric .label{ display: flex; align-items: center; margin: 0; } .search-box .selectric .button{ width: 60px; height: 100%; } .search-box .selectric .button:after{ background: #fff url("/img/sub/search_arrow.svg") no-repeat center right 30px / auto; width: 100%; height: 100%; border: none; } .search-box .selectric-items{ background: #fff; border: 1px solid #DDD; border-radius: 10px; overflow: hidden; } .search-box .flex-box .input{ width: 680px; position: relative; } .search-box .flex-box input{ width: 100%; height: 100%; padding-right: 80px; appearance: none; } .search-box .flex-box input::placeholder{ color: #111; } .search-box .flex-box button{ width: 80px; height: 100%; position: absolute; top: 0; right: 0; z-index: 10; padding: 0; border: none; background: none; } .search-box .flex-box button img{ width: 24px; } /* .paging */ .paging{ margin-top: 40px; } .paging a{ height: 30px; font-family: var(--baseFont); font-size: 1.6rem; font-weight: 400; color: 111; opacity: 0.5; border: none; background: none; } .paging ul{ margin: 0; } .paging ul li.on a{ opacity: 1; font-size: 1.6rem; font-weight: 700; color: #111; opacity: 1; border: none; background: none; position: relative; } .paging ul li.on a::after{ content: ""; width: 10px; height: 2px; background: #AAA; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); } .paging .arr a{ font-size: 2rem; color: #AAA; } .paging .arr a:not(:last-child){ margin-right: 0; } .paging .arr a.first i:first-of-type, .paging .arr a.last i:first-of-type{ position: relative; right: -11px; } .paging .arr a.first i:last-of-type, .paging .arr a.last i:last-of-type{ position: relative; left: -2px; } @media screen and (max-width: 700px){ .paging ul li:not(:last-child){ margin-right: 0; } .paging a{ width: 30px; } } /* .board-table (공통) */ .board-table{ border-top: 1px solid #000; min-height:200px;} .board-table tr{ border-bottom: 1px solid #EEE; position: relative; transition: all 0.5s; } .board-table td{ padding: 40px 0; transition: inherit; } .board-table tr a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 20; } .board-table .date{ text-align: center; } .board-table .date span{ display: inline-block; width: 100%; font-family: var(--Poppins); font-size: 1.8rem; font-weight: 400; color: #CCC; } .board-table .date span.day{ font-size: 3.5rem; font-weight: 600; margin-bottom: 10px; } .board-table h5{ width: 90%; font-size: 2.4rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .board-table p{ width: 90%; font-size: 1.8rem; font-weight: 200; color: #777; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 10px; } .board-table .icon{ display: flex; flex-direction: column; justify-content: center; align-items: center; width: 65px; height: 65px; background: #F5F5F5; border-radius: 50%; margin: 0 auto; overflow: hidden; position: relative; transition: inherit; } .board-table .icon img{ max-width: 25px; width: 100%; position: relative; transition: inherit; } .board-table .icon img.download{ top: 0; } .board-table .icon img.arrow{ left: -50%; transform: translateX(50%); } .board-table tr:hover{ background: #FAFAFA; border-bottom: 1px solid var(--mainColor); } .board-table tr:hover .icon{ background: var(--mainColor); } .board-table tr:hover img{ filter: invert(1); } .board-table tr:hover img.download{ top: 5px; } .board-table tr:hover img.arrow{ left: 0; transform: translateX(0); } .board-table .secret td:nth-of-type(1)::before{ content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 50; cursor: pointer; } .board-table .secret h5::before{ content: "\e964"; font-family: "xeicon"; font-weight: normal; font-style: normal; display: inline-block; margin-right: 5px; } /* .board-table (기본) */ #board .board-table colgroup col:nth-of-type(1){ width: 170px; } #board .board-table colgroup col:nth-of-type(3){ width: 125px; } /* .border-table (다운로드만 있을 때) */ .board-table.download h5{ margin-bottom: 0; } /* .thumbnail-list (기본) */ .thumbnail-list ul{ display: flex; flex-wrap: wrap; margin-bottom: -60px; } .thumbnail-list ul li{ width: calc((100% - 80px) / 3); margin-right: 40px; margin-bottom: 60px; position: relative; } .thumbnail-list ul li:nth-of-type(3n){ margin-right: 0; } .thumbnail-list ul li figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: 62%; border-radius: 10px; } .thumbnail-list ul li figure img{ width: 100%; height: 100%; max-height: 338px; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .thumbnail-list ul li h5{ width: 100%; font-size: 2rem; font-weight: 600; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .thumbnail-list ul li > span{ font-size: 1.6rem; font-weight: 400; color: #777; } .thumbnail-list ul li a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 20; } .thumbnail-list .paging{ margin-top: 100px; } /* @media screen and (max-width: 1350px){ .thumbnail-list ul li{ width: calc((100% - 80px) / 3); } .thumbnail-list ul li:nth-of-type(4n){ margin-right: 40px; } .thumbnail-list ul li:nth-of-type(3n){ margin-right: 0; } } */ @media screen and (max-width: 1250px){ .thumbnail-list ul li h5{ font-size: 1.8rem; } } @media screen and (max-width: 1200px){ .thumbnail-list ul{ margin-bottom: -40px; } .thumbnail-list ul li{ width: calc((100% - 40px) / 3); margin-right: 20px; margin-bottom: 40px; } } @media screen and (max-width: 900px){ .thumbnail-list ul{ margin-bottom: -30px; } .thumbnail-list ul li{ width: calc((100% - 20px) / 2); margin-bottom: 30px; } .thumbnail-list ul li:nth-of-type(3n){ margin-right: 20px; } .thumbnail-list ul li:nth-of-type(2n){ margin-right: 0; } .thumbnail-list ul li h5{ font-size: 1.7rem; } .thumbnail-list ul li > span{ font-size: 1.5rem; } } /* 상세 페이지 */ #view .title-box{ padding: 40px 50px 25px; border-top: 1px solid #000; } #view .title-box *{ font-size: 1.6rem; font-weight: 400; color: #777; } #view .title-box h4{ font-size: 3.5rem; font-weight: 600; color: #111; line-height: 1.5; } #view .title-box h4 span{ font-size: 3.5rem; } #view .title-box h4 span::before{ content: "- "; } #view .title-box .flex-box{ display: flex; justify-content: space-between; margin-top: 30px; } #view .title-box ul{ width: calc(100% - 120px); } #view .title-box ul li a{ max-width: 100%; display: inline-block; overflow: hidden; line-height: 1.8; white-space: nowrap; text-overflow: ellipsis; position: relative; padding: 5px 0; padding-left: 50px; } #view .title-box ul li a::before{ content: ""; display: inline-block; width: 35px; height: 35px; background: var(--mainColor) url("/img/sub/clip_icon.svg") no-repeat center center / auto; border-radius: 50%; position: absolute; top: 50%; left: 0; transform: translateY(-50%); } #view .title-box ul li a::after{ content: ""; width: calc(100% - 50px); height: 1px; background: #AAA; position: absolute; bottom: 5px; right: 0; } #view .title-box .flex-box span{ display: inline-block; padding-top: 10px; } #view .content-box{ font-size: 1.7rem; padding: 50px; border-top: 1px solid #EEE; border-bottom: 1px solid #EEE; } #view .link-box table *{ font-size: 1.8rem; } #view .link-box table tr{ border-bottom: 1px solid #EEE; } #view .link-box table th{ width: 175px; padding: 0 50px; position: relative; } #view .link-box table th::after{ content: ""; width: 1px; height: 15px; background: #DDD; position: absolute; top: 50%; right: 0; transform: translateY(-50%); } #view .link-box table th img{ margin-left: 11px; position: relative; top: 7px; } #view .link-box table td{ padding: 30px 40px; position: relative; } #view .link-box table td p{ width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } #view .link-box table td p span{ color: #777; } #view .link-box table td p span::before{ content: "- "; } #view .link-box table td .none{ color: #999; } #view .link-box table td a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; } #view .center{ margin-top: 70px; } @media screen and (max-width: 1500px){ /* .search-box */ .search-box .flex-box > div, .search-box .selectric .label{ height: 60px; } .search-box .flex-box .selectric-select{ width: 250px; } .search-box .flex-box .input{ width: 550px; } /* .board-table (공통) */ .board-table td{ padding: 30px 0; } .board-table .date span.day{ font-size: 3rem; margin-bottom: 5px; } .board-table h5{ font-size: 2.2rem; } /* 상세 페이지 */ #view .title-box{ padding: 30px 50px 25px; } #view .title-box h4{ font-size: 3rem; } #view .title-box h4 span{ font-size: 3rem; } } @media screen and (max-width: 1250px){ /* .search-box */ .search-box{ margin-bottom: 15px; } .search-box .flex-box > div, .search-box .selectric .label{ height: 55px; } .search-box .flex-box *{ font-size: 1.7rem; } .search-box .selectric .label, .search-box .flex-box input{ padding: 0 20px; } .search-box .selectric .button{ padding-right: 50px; } .search-box .selectric .button::after{ background-position: center right 20px; } .search-box .flex-box .input{ width: 400px; } .search-box .flex-box input{ padding-right: 65px; } .search-box .flex-box button{ width: 65px; } /* .board-table (공통) */ .board-table td{ padding: 25px 0; } .board-table .date span{ font-size: 1.7rem; } .board-table .date span.day{ font-size: 2.5rem; margin-bottom: 0; } .board-table h5{ width: 95%; font-size: 2rem; } .board-table p{ width: 95%; font-size: 1.8rem; margin-top: 7px; } .board-table .icon{ width: 60px; height: 60px; } /* .board-table (기본) */ #board .board-table colgroup col:nth-of-type(1){ width: 120px; } #board .board-table colgroup col:nth-of-type(3){ width: 100px; } /* 상세 페이지 */ #view .title-box{ padding: 30px 30px 15px; } #view .title-box h4{ font-size: 2.5rem; } #view .title-box h4 span{ font-size: 2.5rem; } #view .title-box .flex-box{ margin-top: 15px; } #view .title-box ul li a::before{ width: 30px; height: 30px; background-size: 35%; } #view .title-box ul li a::after{ width: calc(100% - 40px); } #view .title-box ul li a{ padding-left: 40px; } #view .content-box{ padding: 30px; } #view .link-box table *{ font-size: 1.7rem; } #view .link-box table th{ width: 130px; padding: 0 30px; } #view .link-box table td{ padding: 30px; } #view .center{ margin-top: 40px; } } @media screen and (max-width: 900px){ /* .search-box */ .search-box .flex-box > div, .search-box .selectric .label{ height: 50px; } .search-box .flex-box *{ font-size: 1.6rem; } .search-box .flex-box .selectric-select{ width: 200px; } /* .board-table (공통) */ .board-table .date span{ font-size: 1.5rem; } .board-table .date span.day{ font-size: 2.2rem; } .board-table h5{ font-size: 1.8rem; } .board-table p{ font-size: 1.6rem; } /* 상세 페이지 */ #view .title-box{ padding: 20px; padding-bottom: 5px; } #view .title-box *{ font-size: 1.5rem; } #view .title-box h4{ font-size: 2.3rem; } #view .title-box h4 span{ font-size: 2.3rem; } #view .title-box .flex-box{ flex-direction: column-reverse; margin-top: 10px; } #view .title-box ul{ width: 100%; position: relative; padding-top: 10px; } #view .title-box ul::before{ content: ""; width: calc(100% + 40px); height: 1px; background: #EEE; position: absolute; top: 0; left: -20px; } #view .title-box .flex-box span{ width: 100%; text-align: right; margin-bottom: 15px; padding-top: 0; } #view .content-box{ padding: 20px; } #view .link-box table *{ font-size: 1.6rem; } #view .link-box table th{ width: 107px; padding: 0 20px; } #view .link-box table th img{ top: 5px; } #view .link-box table td{ padding: 20px; } } @media screen and (max-width: 800px){ /* .board-table (기본) */ #board .board-table colgroup col{ display: none; } #board .board-table tr{ width: 100%; display: flex; flex-direction: column-reverse; } #board .board-table td{ padding: 15px; } #board .board-table tr td:nth-of-type(1), #board .board-table tr td:nth-of-type(2){ width: calc(100% - 85px); } #board .board-table .date{ display: flex; flex-direction: row-reverse; justify-content: flex-end; padding-top: 0; } #board .board-table .date span{ width: auto; } #board .board-table .date span.day{ font-size: 1.5rem; font-weight: 400; position: relative; } #board .board-table .date span.day::before{ content: "."; display: inline-block; margin-right: 1px; } #board .board-table tr td:nth-of-type(2){ padding-bottom: 10px; } #board .board-table h5{ width: 100%; } #board .board-table p{ width: 100%; } #board .board-table tr td:nth-of-type(3){ padding: 0; } #board .board-table .icon{ position: absolute; top: 50%; right: 15px; transform: translateY(-50%); } } @media screen and (max-width: 670px){ /* .search-box */ .search-box .flex-box{ flex-direction: column; } .search-box .flex-box .selectric-select, .search-box .flex-box .input{ width: 100%; } .search-box .selectric-select{ margin-right: 0; margin-bottom: 10px; } } /* .table-box */ .table-box table{ position: relative; } .table-box table th{ background: #F5F5F5; border-right: 1px solid #DDD; border-bottom: 1px solid #ddd;} .table-box table thead{ position: relative; } .table-box table thead::before, .table-box table thead::after{ content: ""; width: 100%; height: 1px; background: #000; position: absolute; left: 0; } .table-box table thead::before{ top: 0; } .table-box table thead::after{ bottom: 0; } .table-box table thead th{ font-size: 2rem; font-weight: 600; padding: 17px 20px; } .table-box table thead td{ position: relative; text-align: center; padding: 20px; border-right: 1px solid #ddd; } .table-box table thead tr td:last-of-type{ border-right: none; } .table-box table tbody *{ font-size: 1.8rem; } .table-box table tbody th{ font-weight: 400; border-bottom: 1px solid #DDD; } .table-box table tbody td{ font-weight: 300; padding: 15px; text-align: center; border: 1px solid #DDD; } .table-box table tr th.left, .table-box table tbody th.left, .table-box table tr td.left{ text-align: left !important; } .table-box table tbody tr td:last-of-type{ border-right: none; } /* 스크롤바 커스텀 */ .table-box::-webkit-scrollbar{ width: 20px; } .table-box::-webkit-scrollbar-thumb{ height: 20px; background: #D9D9D9; background-clip: padding-box; border: 6px solid transparent; border-radius: 100px; } .table-box::-webkit-scrollbar-track{ background-clip: padding-box; border: 5px; border: 5px solid transparent; border-radius: 100px; } @media screen and (max-width: 1250px){ .table-box table thead th{ font-size: 1.8rem; } .table-box table tbody *{ font-size: 1.6rem; } .table-box table tbody td{ padding: 10px; } } @media screen and (max-width: 900px){ .table-box table thead th{ font-size: 1.7rem; } } @media screen and (max-width: 720px){ .table-box table tbody * { font-size: 1.5rem;} .table-box table tbody td { padding: 5px;} } /* 회사소개 - 기업정보 - 회사소개 */ #introduce.sub-content{ overflow: hidden; } #introduce .company .logo{ width: 100%; text-align: center; margin: 140px 0 150px; } #introduce .company .img-box{ text-align: center; overflow: hidden; } #introduce .company .box{ display: flex; justify-content: space-between; align-items: center; margin-top: -75px; background: #fff; padding: 105px 110px; position: relative; z-index: 10; border-bottom: 1px solid #E8E8E8; } #introduce .company .text{ width: calc(100% - 330px); color: #111; } #introduce .company .text h4{ font-size: 4rem; font-weight: 700; margin-bottom: 30px; } #introduce .company .text p{ font-size: 1.8rem; font-weight: 200; line-height: 2; letter-spacing: 0; } #introduce .company .introImg {width: 100%; text-align: center;} #introduce .company .greeting .inner{ background: url("/img/sub/company/greeting_bg.jpg") no-repeat center center / cover; padding: 70px; position: relative; z-index: 10; } #introduce .company .greeting h5{ font-family: var(--Gmarket); font-size: 4rem; font-weight: 300; color: #FFF; letter-spacing: -0.02em; text-align: center; margin-bottom: 20px; } #introduce .company .greeting h5 strong{ font-weight: 700; } #introduce .company .greeting h5 img{ width: auto; height: 3.5rem; vertical-align: text-top; } #introduce .company .greeting .flex-box{ max-width: 890px; margin: 0 auto; margin-top: 70px; display: flex; justify-content: space-between; align-items: center; } #introduce .company .greeting .item{ max-width: 250px; width: calc((100% - 40px) / 3); position: relative; } #introduce .company .greeting .item::before{ content: ""; display: block; padding-bottom: 100%; background: linear-gradient(to bottom, #0060A9, #910000); border-radius: 50%; opacity: 0.45; } #introduce .company .greeting .item .icon{ max-width: 100%; padding: 30px; text-align: center; position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); } #introduce .table{ padding: 130px 0 150px; } #introduce .table .figure:not(:last-of-type){ margin-bottom: 100px; } #introduce .table .figcaption{ margin-bottom: 40px; position: relative; padding: 0 20px; } #introduce .table .figcaption::before{ content: ""; width: 100%; height: 1px; background: var(--mainColor); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; } #introduce .table .figcaption h6{ max-width: 900px; width: 100%; margin: 0 auto; text-align: center; font-size: 3rem; font-weight: 200; color: #fff; background: var(--mainColor); padding: 18px; } #introduce .info{ background: url("/img/sub/company/introduce_bg02.jpg") no-repeat center center/ cover; padding: 150px 0 100px; } #introduce .info *{ color: #fff; } #introduce .info .info-list{ display: flex; justify-content: space-between; } #introduce .info .info-list > li{ width: calc((100% - 50px) / 3); padding-left: 25px; position: relative; } #introduce .info .info-list > li:nth-of-type(1){ max-width: 310px } #introduce .info .info-list > li:nth-of-type(2){ max-width: 405px } #introduce .info .info-list > li:nth-of-type(3){ max-width: 440px } #introduce .info .info-list > li::before{ content: ""; width: 1px; height: calc(100% - 238px); background: #fff; opacity: 0.1; position: absolute; bottom: 0; left: 0; transform: translateY(0); } #introduce .info .icon p{ font-size: 3rem; font-weight: 600; margin-top: 65px; position: relative; } #introduce .info .icon p::before{ content: ""; width: 5px; height: 3rem; background: #fff; position: absolute; top: 4px; left: -25px; } #introduce .info .icon p span{ font-size: 2.4rem; font-weight: 400; } #introduce .info .info-list dl{ margin-top: 50px; } #introduce .info .info-list dl dt{ font-size: 2.4rem; font-weight: 600; margin-bottom: 30px; } #introduce .info .info-list dl dd{ font-size: 1.6rem; font-weight: 200; } #introduce .info .info-list dl dd *{ line-height: 1.925; } #introduce .info .info-list dl dd.flex{ display: flex; } #introduce .info .info-list dl dd strong{ white-space: nowrap; margin-right: 3px; } #introduce .info .info-list dl dd ul li{ position: relative; padding-left: 10px; } #introduce .info .info-list dl dd ul li::before{ content: ""; width: 3px; height: 3px; background: #fff; border-radius: 50%; position: absolute; top: 13px; left: 0; } @media screen and (max-width: 1500px){ #introduce .company .logo{ margin: 100px 0; } #introduce .company .box{ padding: 80px; margin-top: -50px; } #introduce .company .text h4{ font-size: 3rem; margin-bottom: 20px; } #introduce .table { padding: 120px 0; } #introduce .table .figcaption h6{ font-size: 2.5rem; padding: 15px; } #introduce .info{ padding: 100px 0; } #introduce .info .icon p{ font-size: 2.5rem; margin-top: 40px; } #introduce .info .icon p::before{ height: 2.5rem; } #introduce .info .info-list > li::before{ height: calc(100% - 200px); } #introduce .info .info-list dl dt{ font-size: 2rem; margin-bottom: 20px; } #introduce .info .icon p span{ font-size: 1.8rem; } #introduce .company .greeting h5{ font-size: 3rem; } #introduce .company .greeting h5 img{ height: 2.8rem; } } @media screen and (max-width: 1250px){ #introduce .company .logo{ margin: 60px 0; } #introduce .company .logo img{ transform: scale(0.7); } #introduce .company .text h4{ font-size: 2.5rem; } #introduce .company .text p{ font-size: 1.7rem; } #introduce .table { padding: 80px 0; } #introduce .table .figure:not(:last-of-type){ margin-bottom: 50px; } #introduce .table .figcaption h6{ font-size: 2rem; padding: 10px 15px; } #introduce .info .info-list > li::before{ height: calc(100% - 167px); } #introduce .info .icon p{ font-size: 2.2rem; margin-top: 25px; } #introduce .info .icon p::before{ height: 2.2rem; } #introduce .info .info-list dl{ margin-top: 30px; } #introduce .company .greeting .inner{ padding: 40px; } #introduce .company .greeting h5{ font-size: 2.5rem; margin-bottom: 10px; } #introduce .company .greeting h5 img{ height: 2.4rem; } #introduce .company .greeting .flex-box{ max-width: 600px; margin-top: 40px; } } @media screen and (max-width: 1100px){ #introduce .info .info-list{ flex-wrap: wrap; margin-bottom: -50px; } #introduce .info .info-list > li{ width: calc((100% - 25px) / 2); margin-bottom: 50px; } #introduce .info .info-list > li:nth-of-type(1), #introduce .info .info-list > li:nth-of-type(2), #introduce .info .info-list > li:nth-of-type(3){ max-width: 100%; } } @media screen and (max-width: 1000px){ #introduce .company .box{ padding: 60px; margin-top: -30px; } } @media screen and (max-width: 950px){ #introduce .company .box{ flex-direction: column; } #introduce .company .text{ width: 100%; margin-top: 50px; } } @media screen and (max-width: 900px){ #introduce .page-title p br{ display: none; } #introduce .company .logo{ margin: 0 0 20px; } #introduce .company .logo img{ transform: scale(0.5); } #introduce .company .box{ padding: 50px 20px 30px; } #introduce .company .text h4{ font-size: 2.2rem; margin-bottom: 10px; } #introduce .table .figcaption h6{ font-size: 1.7rem; } #introduce .info .info-list dl dt{ font-size: 1.8rem; margin-bottom: 10px; } #introduce .info .icon p span{ font-size: 1.6rem; } #introduce .company .greeting h5{ font-size: 2.1rem; } #introduce .company .greeting h5 img{ height: 2rem; } } @media screen and (max-width: 750px){ #introduce .info .info-list > li{ width: 100%; } #introduce .company .greeting .inner{ padding: 40px 25px; } #introduce .company .greeting .inner::before{ content: ""; background: #000; opacity: 0.3; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; } #introduce .company .greeting h5 span{ display: block; } } @media screen and (max-width: 600px){ #introduce .company .introImg { width: 140vw; display: flex; position: relative; left: 50%; transform: translateX(-50%); } } /* 회사소개 - 기업정보 - 주요연혁 */ #history.sub-content{ padding-bottom: 0; } #history .scroll-box{ position: relative; padding-bottom: 110px; } #history .scroll-box * { color: #fff; } #history .img{ height: 100%; position: absolute; top: 0; left: 0; right: 0; z-index: -20; opacity: 1 !Important; } #history .img .sticky{ transition: all 1s; } #history .img .bg{ width: 1400px; margin: 0 auto; background: url("/img/sub/company/history_bg.jpg") no-repeat center center / cover; padding-bottom: 26.3%; transition: all 1s; } #history .img .bg::after{ content: ""; width: 1400px; height: 100%; background: rgba(0, 0, 0, 0.5); opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 1s; } #history .img.aos-animate .sticky{ width: 100%; position: sticky; top: 0; left: 0; } #history .img.aos-animate .bg{ width: 100%; padding-bottom: 100vh; } #history .img.aos-animate .bg::after{ width: 100%; opacity: 1; } #history .history{ position: relative; z-index: 10; padding-top: 26.3%; } #history .text-box{ text-align: center; margin-top: -105px; position: relative; z-index: 10; } #history .text-box h2{ font-family: var(--Poppins); font-size: 16.4rem; font-weight: 700; color: #fff; text-shadow: 4px 4px 30px rgba(0, 0, 0, 0.15); letter-spacing: -0.03em; text-transform: uppercase; } #history .text-box p{ font-size: 2.4rem; font-weight: 500; color: #111; margin-top: 30px; transition: color 0.5s; transition-delay: 0.5s; } #history .img.aos-animate + .history .text-box p{ color: #fff; transition-delay: unset; } #history .history .flex-box{ display: flex; padding-top: 110px; } #history .history .list-box{ width: 350px; } #history .history .list-box .sticky{ position: sticky; top: 50%; left: 0; } #history .history .list-box ul li{ font-size: 1.6rem; font-weight: 400; color: rgba(255, 255, 255, 0.5); padding-left: 35px; transition: all 0.5s; position: relative; cursor: pointer; } #history .history .list-box ul li:not(:last-of-type){ margin-bottom: 20px; } #history .history .list-box ul li::before{ content: ""; width: 5px; height: 5px; background: #fff; border-radius: 50%; opacity: 0.5; position: absolute; top: 48%; left: 4px; transform: translateY(-50%); } #history .history .list-box ul li.on{ font-size: 2.2rem; font-weight: 700; color: #fff; } #history .history .list-box ul li.on::before{ width: 12px; height: 12px; background: transparent; border: 1px solid #fff; opacity: 1; top: 52%; left: 0; } #history .history .dl-box{ width: calc(100% - 350px); } #history .dl-box .offset:not(:last-of-type){ margin-bottom: 50px; } #history .dl-box dl{ display: flex; justify-content: space-between; } #history .dl-box dl:not(:last-of-type){ margin-bottom: 50px; } #history .dl-box dl dt{ font-size: 3rem; font-weight: 700; } #history .dl-box dl dd{ width: calc(100% - 170px); } #history .dl-box dl dd *{ font-size: 1.8rem; font-weight: 400; } #history .dl-box dl dd ul{ margin-top: 7px; } #history .dl-box dl dd ul li:not(:last-of-type){ margin-bottom: 17px; } @media screen and (max-width: 1500px){ #history .text-box{ margin-top: -80px; } #history .text-box h2{ font-size: 12rem; } #history .text-box p{ font-size: 2.2rem; } } @media screen and (max-width: 1440px){ #history .img .bg{ width: calc(100% - 40px); } #history .img .bg::after{ width: calc(100% - 40px); } } @media screen and (max-width: 1250px){ #history .text-box{ margin-top: -55px; } #history .text-box h2{ font-size: 8.5rem; } #history .text-box p{ margin-top: 15px; } #history .history .flex-box{ padding-top: 80px; } #history .history .list-box{ width: 250px; } #history .history .dl-box{ width: calc(100% - 250px); } #history .dl-box dl dt{ font-size: 2.5rem; } #history .dl-box dl dd{ width: calc(100% - 100px); } #history .dl-box dl dd ul{ margin-top: 4px; } } @media screen and (max-width: 1000px){ #history .history .flex-box{ flex-direction: column; } #history .history .list-box{ width: 100%; } #history .history .list-box ul{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: -20px; } #history .history .list-box ul li{ width: calc((100% - 60px) / 4); margin-bottom: 20px; } #history .history .dl-box{ width: 100%; padding-top: 50px; } } @media screen and (max-width: 900px){ #history .text-box{ margin-top: -40px; } #history .text-box h2{ font-size: 6rem; } #history .text-box p{ font-size: 1.8rem; } #history .history .list-box ul li.on{ font-size: 1.8rem; } #history .dl-box dl dt{ font-size: 2.2rem; } #history .dl-box dl dd *{ font-size: 1.7rem; } } @media screen and (max-width: 770px){ #history .history .list-box ul li{ width: calc((100% - 20px) / 2); } } /* 회사소개 - 기업정보 - 오시는 길 */ #location .tab-menu ul li{ width: calc(100% / 6); } #location section{ overflow: hidden; } #location section:not(:last-of-type){ margin-bottom: 80px; } #location .iframes{ border: 1px solid #DDD; overflow: hidden; } #location .iframes .root_daum_roughmap{ width: 100%; } #location .iframes .root_daum_roughmap .wrap_map{ height: 600px; } #location .iframes .root_daum_roughmap .map_border{ display: none; } #location .flex-box{ display: flex; justify-content: flex-end; position: relative; } #location .icon{ width: 270px; height: calc(100% + 70px); background: var(--mainColor); text-align: center; position: absolute; bottom: 0; left: 0; z-index: 10; display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 1; transform: translateX(-100%); } #location .icon.aos-animate{ transform: translateZ(0); } #location .icon *{ color: #fff; } #location .icon span{ display: inline-block; font-family: var(--Poppins); font-size: 1.6rem; font-weight: 400; margin-top: 30px; } #location .icon h5{ font-size: 3.5rem; font-weight: 700; margin-top: 10px; } #location .info{ width: calc(100% - 270px); padding: 50px 20px 30px; padding-left: 140px; } #location .info dl{ display: flex; align-items: flex-start; } #location .info dl:not(:last-of-type){ margin-bottom: 10px; } #location .info dl *{ line-height: 2; } #location .info dl dt{ font-size: 2rem; font-weight: 700; padding-left: 40px; padding-right: 4px; position: relative; } #location .info dl dt::before{ position: absolute; top: 62%; left: 0; transform: translateY(-50%); } #location .info dl.address dt::before{ content: url("/img/sub/company/address_icon.png"); } #location .info dl.number dt::before{ content: url("/img/sub/company/number_icon.png"); } #location .info dl.fax dt::before{ content: url("/img/sub/company/fax_icon.png"); } #location .info dl dd{ width: calc(100% - 90px); font-size: 1.8rem; font-weight: 200; margin-top: 2px; } @media screen and (max-width: 1500px){ #location .iframes .root_daum_roughmap .wrap_map{ height: 500px; } #location .icon span{ font-size: 1.5rem; } #location .icon h5{ font-size: 3rem; } #location .info{ padding-left: 100px; } #location .info dl dt{ font-size: 1.8rem; } #location .info dl dd{ font-size: 1.7rem; } } @media screen and (max-width: 1250px){ #location .icon{ width: 230px; height: calc(100% + 50px); } #location .icon h5{ font-size: 2.5rem; } #location .info{ width: calc(100% - 230px); padding: 30px 20px; padding-left: 50px; } } @media screen and (max-width: 1000px){ #location .iframes .root_daum_roughmap .wrap_map{ height: 400px; } #location .icon{ width: 200px; height: calc(100% + 30px); } #location .info{ width: calc(100% - 200px); } } @media screen and (max-width: 900px){ #location .tab-menu ul li{ width: calc(100% / 3); } #location .tab-menu ul li:nth-of-type(3n) + li{ border-left: 1px solid #ddd; } #location .tab-menu ul li:not(:nth-of-type(1), :nth-of-type(2), :nth-of-type(3)){ border-top: none; } #location .icon h5{ font-size: 2.2rem; } #location .info dl dt{ font-size: 1.7rem; } #location .info dl dd{ font-size: 1.6rem; } } @media screen and (max-width: 800px){ #location .flex-box{ flex-direction: column; margin-top: -30px; } #location .icon{ width: 260px; height: auto; flex-direction: row; position: relative; padding: 30px; } #location .icon div{ padding-left: 20px; } #location .icon span{ margin-top: 0; } #location .info{ width: 100%; padding: 20px; } #location .info dl:not(:last-of-type){ margin: 0; } } /* 회사소개 - 기업이념 - CEO 인사말 */ #ceo section:not(:last-of-type){ padding-bottom: 115px; } #ceo .page-title{ text-align: left; margin-bottom: 60px; } #ceo .title-box{ position: relative; } #ceo .title-box .text h3{ font-family: var(--Poppins); font-size: 8.0rem; font-weight: 200; letter-spacing: -0.03em; line-height: 1.1111; text-transform: uppercase; } #ceo .title-box .text p{ font-size: 3rem; font-weight: 200; letter-spacing: -0.03em; line-height: 1.5333; margin-top: 5px; } #ceo .title-box .img{ width: 50%; position: absolute; top: 50%; right: 0; z-index: -10; transform: translateY(-50%); } #ceo .title-box .img img{ border-radius: 200px 0 0 0; } #ceo .flex-box{ display: flex; justify-content: space-between; } #ceo .flex-box .half{ width: calc((100% - 80px) / 2); } #ceo .flex-box .half p{ font-size: 1.7rem; font-weight: 200; letter-spacing: -0.03em; line-height: 1.8; } #ceo .flex-box .half p:not(:last-of-type){ margin-bottom: 20px; } #ceo .flex-box .wrap{ display: flex; flex-direction: column; justify-content: space-between; } #ceo .name{ text-align: right; } #ceo .name span{ display: inline-block; font-size: 1.7rem; font-weight: 500; letter-spacing: 0; padding-right: 15px; } #ceo .name strong{ font-size: 3rem; font-weight: 600; letter-spacing: 0; } #ceo .table-box{ position: relative; } #ceo .table-box::before{ content: ""; width: 100%; height: 1px; background: #000; position: absolute; top: 0; left: 0; z-index: 10; } #ceo .table-box th{ width: 300px; } #ceo .table-box td{ text-align: left; } @media screen and (max-width: 1500px){ #ceo .page-title{ margin-bottom: 30px; } #ceo .title-box .text h3{ font-size: 7.5rem; } #ceo .title-box .text p{ font-size: 2.5rem; } #ceo .title-box .img{ top: 45%; } #ceo .name strong{ font-size: 2.5rem; } } @media screen and (max-width: 1250px){ #ceo section:not(:last-of-type){ padding-bottom: 80px; } #ceo .page-title{ margin-bottom: 20px; } #ceo .title-box .text h3{ font-size: 6.5rem; } #ceo .title-box .text p{ font-size: 2.2rem; } #ceo .flex-box .half{ width: calc((100% - 50px) / 2); } #ceo .table-box th{ width: 200px; } #ceo .table-box td{ padding: 10px; } } @media screen and (max-width: 1100px){ #ceo .title-box .img{ width: 62%; } } @media screen and (max-width: 1000px){ #ceo section:not(:last-of-type){ padding-bottom: 50px; } #ceo .title-box{ display: flex; flex-direction: column; } #ceo .title-box .img{ width: 100%; position: static; text-align: right; transform: translateY(0); margin-top: -100px; } #ceo .title-box .img img{ max-width: 650px; width: 100%; } #ceo .flex-box{ flex-direction: column; } #ceo .flex-box .half{ width: 100%; } #ceo .flex-box .half:not(:last-of-type){ margin-bottom: 20px; } } @media screen and (max-width: 900px){ #ceo .title-box .text h3{ font-size: 5rem; } #ceo .title-box .text p{ font-size: 2rem; } #ceo .name span{ font-size: 1.6rem; } #ceo .table-box th{ width: 120px; } } @media screen and (max-width: 750px ){ #ceo .title-box .img{ margin-top: -10%; } } @media screen and (max-width: 450px){ #ceo .title-box br{ display: none; } } /* 회사소개 - 기업이념 - Vision / Values */ #vision section:not(:last-of-type){ padding-bottom: 130px; } /* #vision .value{ padding-top: 100px; } */ #vision .value ul{ display: flex; } #vision .value ul li{ width: calc((100% / 3) + 50px); text-align: center; border-radius: 50%; border: 1px solid rgba(0, 56, 127, 0.15); padding-bottom: calc((100% / 3) + 32px); position: relative; } #vision .value ul li:not(:last-of-type){ margin-right: -50px; } #vision .value ul li::after{ content: url("/img/sub/company/vision_after.png"); position: absolute; top: 50%; right: 11px; transform: translateY(-50%); } #vision .value ul li:last-of-type::after{ display: none; } #vision .value ul li .box{ position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); padding: 0 50px; } #vision .value ul li h4{ font-family: var(--Poppins); font-size: 4rem; font-weight: 700; color: var(--mainColor); letter-spacing: -0.04em; text-transform: uppercase; margin: 50px 0 15px; letter-spacing: 0; } #vision .value ul li span{ font-size: 2.4rem; font-weight: 500; } #vision .base ul{ display: flex; flex-wrap: wrap; margin-bottom: -26px; } #vision .base ul li{ width: calc((100% - 78px) / 4); margin-right: 26px; margin-bottom: 26px; text-align: center; padding: 45px 20px; background: rgba(0, 56, 127, 0.1); border-radius: 20px; } #vision .base ul li.gray{ background: #F5F5F5; } #vision .base ul li:nth-of-type(4n){ margin-right: 0; } #vision .base ul li span{ font-family: var(--Poppins); font-size: 2.4rem; font-weight: 700; color: var(--mainColor); letter-spacing: -0.04em; } #vision .base ul li p{ font-size: 2rem; font-weight: 500; line-height: 1.5; letter-spacing: -0.03em; margin-top: 20px; } #vision .trend .squre-title{ margin-bottom: 70px; } #vision .trend h4{ font-size: 4rem; font-weight: 700; text-align: center; } #vision .trend ul{ display: flex; margin-top: 45px; } #vision .trend ul li{ width: calc((100% - 50px) / 3); margin-right: 25px; position: relative; border-radius: 35px; overflow: hidden; } #vision .trend ul li:nth-of-type(3n){ margin-right: 0; } #vision .trend ul li p{ display: flex; justify-content: center; align-items: center; min-height: 2.8em; font-size: 2.4rem; font-weight: 500; color: #fff; line-height: 1.4; text-align: center; position: absolute; bottom: 75px; left: 0; right: 0; } @media screen and (max-width: 1500px){ #vision section:not(:last-of-type){ padding-bottom: 100px; } #vision .value ul li h4{ font-size: 3.5rem; margin: 35px 0 5px; } #vision .value ul li span{ font-size: 2.2rem; } #vision .base ul li{ padding: 40px 10px; } #vision .base ul li span{ font-size: 2.2rem; } #vision .base ul li p{ font-size: 1.8rem; } #vision .trend h4{ font-size: 3.2rem; } #vision .trend ul li p{ font-size: 2.2rem; bottom: 50px; } } @media screen and (max-width: 1250px){ #vision section:not(:last-of-type){ padding-bottom: 80px; } /* #vision .value{ padding-top: 60px; } */ #vision .value ul li h4{ font-size: 3rem; } #vision .value ul li span{ font-size: 2rem; } #vision .base ul li span{ font-size: 2rem; } #vision .base ul li p{ font-size: 1.7rem; } #vision .trend .squre-title{ margin-bottom: 40px; } #vision .trend h4{ font-size: 2.8rem; } #vision .trend ul{ margin-top: 30px; } #vision .trend ul li p{ font-size: 2rem; } } @media screen and (max-width: 1200px){ #vision .base ul li{ width: calc((100% - 52px) / 3); } #vision .base ul li:nth-of-type(4n){ margin-right: 26px; } #vision .base ul li:nth-of-type(3n){ margin-right: 0; } #vision .base ul li:nth-of-type(5n), #vision .base ul li:nth-of-type(7n){ background: rgba(0, 56, 127, 0.1); } #vision .base ul li:nth-of-type(6n), #vision .base ul li:nth-of-type(8n), #vision .base ul li:nth-of-type(10n){ background: #F5F5F5; } #vision .trend ul li p{ font-size: 1.8rem; bottom: 30px; } } @media screen and (max-width: 1000px){ #vision .value ul{ flex-wrap: wrap; justify-content: center; } #vision .value ul li{ width: 54%; padding-bottom: 53.7%; } #vision .value ul li:not(:last-of-type){ margin-right: -8%; } #vision .value ul li:nth-of-type(2){ margin-right: 0; } #vision .value ul li:nth-of-type(3){ margin-top: -13%; } #vision .value ul li::after{ top: 73.5%; right: 4.5%; transform: translateY(0); } #vision .value ul li:nth-of-type(2)::after{ display: none; } #vision .trend ul{ flex-wrap: wrap; margin-bottom: -25px; } #vision .trend ul li{ width: calc((100% - 25px) / 2); margin-bottom: 25px; } #vision .trend ul li:nth-of-type(2n){ margin-right: 0; } #vision .trend ul li p{ min-height: auto; } } @media screen and (max-width: 970px){ #vision .page-title br{ display: none; } } @media screen and (max-width: 900px){ /* #vision .value{ padding-top: 30px; } */ #vision .value ul li h4{ font-size: 2.5rem; margin: 25px 0 5px; } #vision .value ul li span{ font-size: 1.8rem; } #vision .base ul{ margin-bottom: -20px; } #vision .base ul li{ width: calc((100% - 26px) / 2); margin-right: 20px; margin-bottom: 20px; } #vision .base ul li:nth-of-type(4n){ margin-right: 20px; } #vision .base ul li:nth-of-type(3n){ margin-right: 20px; } #vision .base ul li:nth-of-type(2n){ margin-right: 0; } #vision .base ul li:nth-of-type(3n), #vision .base ul li:nth-of-type(7n), #vision .base ul li:nth-of-type(11n){ background: #F5F5F5; } #vision .base ul li:nth-of-type(4n), #vision .base ul li:nth-of-type(9n){ background: rgba(0, 56, 127, 0.1); } #vision .trend .squre-title{ margin-bottom: 30px; } #vision .trend h4{ font-size: 2.2rem; } } @media screen and (max-width: 650px){ #vision .value ul li{ width: 70%; padding-bottom: 70%; } #vision .value ul li:not(:last-of-type){ margin-right: 0; margin-bottom: 60px; } #vision .value ul li:nth-of-type(3){ margin-top: 0; } #vision .value ul li::after{ top: calc(100% + 18px); right: 50%; transform: translateX(50%); } #vision .value ul li:nth-of-type(2)::after{ display: block; } #vision .base ul li br{ display: none; } #vision .trend ul{ margin-bottom: -20px; } #vision .trend ul li{ width: calc((100% - 20px) / 2); margin-right: 20px; margin-bottom: 20px; } } /* 회사소개 - 기업이념 - Corporate Identity */ #ci section:not(:last-of-type){ margin-bottom: 150px; border-bottom: 1px solid #E8E8E8; } #ci figure{ width: 100%; display: flex; justify-content: center; align-items: center; border: 1px solid #DDD; padding: 15px; pointer-events: none; } #ci figure img{ max-width: calc(100% - 30px); max-height: calc(100% - 10px); pointer-events: none; } #ci .pattern{ height: 500px; background: url("/img/sub/company/ci_pattern.png"); padding: 50px; } #ci .gray{ background: #F5F5F5; border: none; } #ci h6{ font-size: 2.4rem; font-weight: 700; letter-spacing: -0.04em; text-transform: uppercase; margin-bottom: 20px; } #ci .figure-list{ display: flex; flex-wrap: wrap; margin-bottom: -13px; } #ci .figure-list li{ width: calc((100% - 39px) / 4); margin-right: 13px; margin-bottom: 13px; } #ci .figure-list li:nth-of-type(4n){ margin-right: 0; } #ci .figure-list li figure.gray img{ mix-blend-mode: darken; } #ci .figure-list li p{ font-family: var(--Poppins); font-size: 1.4rem; font-weight: 300; letter-spacing: 0; text-align: center; margin-top: 10px; } #ci section.mean{ margin-bottom: 130px; padding-bottom: 130px; } #ci .mean *{ font-family: var(--Poppins); letter-spacing: -0.04em; } #ci .mean .text{ margin-top: 35px; } #ci .mean .text p{ text-align: center; font-size: 2rem; font-weight: 600; margin-bottom: 80px; } #ci .mean .discription p { text-align: center; font-size: 2rem; font-weight: 600; margin-bottom: 20px; } #ci .mean ul{ display: flex; flex-wrap: wrap; gap: 30px 60px; } #ci .mean ul li{ display: flex; align-items: center; } #ci .mean ul li .spelling{ display: flex; justify-content: center; align-items: center; width: 90px; height: 90px; background: var(--mainColor); border-radius: 10px; font-size: 4rem; font-weight: 700; color: #fff; } #ci .mean ul li p{ display: inline-block; width: auto; font-size: 2.4rem; font-weight: 700; padding-left: 20px; } #ci .mean .center{ margin-top: 50px; } #ci .mean .center a{ width: max-content; display: flex; justify-content: center; align-items: center; gap: 0 40px; background: var(--mainColor); border-radius: 10px; font-size: 1.8rem; font-weight: 500; color: #fff; padding: 15px 20px; margin: 0 auto; } #ci .higens{ padding-bottom: 90px; } #ci .higens .flex-box{ display: flex; justify-content: space-between; } #ci .higens .flex-box .half{ width: calc((100% - 40px) / 2); } #ci .higens .flex-box .half figure{ height: 250px; } #ci .higens h4{ min-height: 3em; font-size: 3.5rem; font-weight: 700; line-height: 1.5; margin: 60px 0; } #ci .higens ul{ display: flex; justify-content: space-between; } #ci .higens .plus ul li{ width: calc((100% - 95px) / 3); } #ci .higens .s ul li{ width: calc((100% - 60px) / 2); } #ci .higens dl dt{ font-size: 2.4rem; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 15px; } #ci .higens dl dd{ font-size: 1.8rem; font-weight: 200; color: #777; line-height: 1.6; letter-spacing: -0.03em; } #ci .robotics .section{ padding-bottom: 130px; } #ci .robotics h6{ font-family: var(--Poppins); } #ci .robotics .figure:not(:last-of-type){ margin-bottom: 50px; } #ci .robotics .figure p{ font-family: var(--Poppins); font-size: 2rem; font-weight: 300; color: #777; text-align: center; margin-top: 10px; } #ci .robotics .figure-list{ margin-bottom: -25px; } #ci .robotics .figure-list li{ margin-bottom: 25px; } #ci .robotics .figure-list li figure{ height: 160px; } #ci .robotics .figure-list li.square figure{ height: auto; position:relative; padding-bottom: 93%;} #ci .robotics .figure-list li.square figure img{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); max-width: inherit; max-height: 100%;} #ci .robotics .color{ margin-top: 130px; } #ci .robotics .color *{ font-family: var(--Poppins); letter-spacing: -0.04em; } #ci .robotics .color ul{ display: flex; gap: 40px 80px; } #ci .robotics .color ul li{ display: flex; align-items: center; } #ci .robotics .color ul li div{ width: 130px; height: 130px; } #ci .robotics .color ul li dl{ padding-left: 10px; /* padding-left: 30px; */ } #ci .robotics .color ul li dl dt{ font-size: 1.8rem; font-weight: 700; margin-bottom: 13px; } #ci .robotics .color ul li dl dd{ font-size: 1.4rem; font-weight: 300; line-height: 1.8; } #ci .robotics .regulations .figure-list li p{ font-family: var(--baseFont); font-size: 1.5rem; } #ci .robotics .regulations .figure-list li figure{ position: relative; overflow: hidden; } #ci .robotics .regulations .figure-list li figure::after{ content: ""; width: 200%; height: 1px; background: #E60012; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(25deg); } #ci .partnership .section:not(:last-of-type){ margin-bottom: 60px; } #ci .partnership h6{ padding-left: 35px; position: relative; } #ci .partnership h6::before{ content: ""; width: 6px; height: 6px; background: #111; border-radius: 50%; position: absolute; top: 13px; left: 15px; } #ci .partnership .figure-list li figure{ height: 100px; } @media screen and (max-width: 1500px){ #ci section:not(:last-of-type){ margin-bottom: 120px; } #ci .pattern{ height: 450px; } #ci h6{ font-size: 2.2rem; margin-bottom: 10px; } #ci .mean .text p{ margin-bottom: 50px; } #ci .mean .discription p{ font-size: 1.8rem; } #ci .mean ul li .spelling{ width: 80px; height: 80px; font-size: 3.5rem; } #ci .mean ul li p{ font-size: 2.2rem; } #ci .mean .center a{ font-size: 1.7rem; } #ci .higens h4{ font-size: 3rem; margin: 30px 0; } #ci .higens dl dt{ font-size: 2.2rem; margin-bottom: 10px; } #ci .higens .plus ul li{ width: calc((100% - 50px) / 3); } #ci .higens .s ul li{ width: calc((100% - 25px) / 2); } #ci .robotics .section{ padding-bottom: 100px; } #ci .robotics .color{ margin-top: 100px; } #ci .robotics .color ul li div{ width: 110px; height: 110px; } } @media screen and (max-width: 1460px){ #ci .mean ul li{ width: calc((100% - 120px) / 3); } } @media screen and (max-width: 1300px){ #ci .robotics .color ul{ gap: 40px; } #ci .robotics .figure-list li figure{ height: 130px; } #ci .robotics .regulations .figure-list li figure::after{ transform: translate(-50%,-50%) rotate(24deg); } } @media screen and (max-width: 1250px){ #ci section:not(:last-of-type){ margin-bottom: 100px; } #ci .pattern{ height: 350px; } #ci h6{ font-size: 2rem; } #ci .robotics .figure p{ font-size: 1.8rem; } #ci .figure-list li{ width: calc((100% - 13px) / 2); } #ci .figure-list li:nth-of-type(2n){ margin-right: 0; } #ci section.mean{ margin-bottom: 100px; padding-bottom: 100px; } #ci .mean .discription p{ font-size: 1.7rem; } #ci .mean ul li .spelling{ width: 70px; height: 70px; font-size: 3rem; } #ci .mean ul li p{ font-size: 2rem; } #ci .mean .center a{ font-size: 1.6rem; padding: 15px 20px; } #ci .higens .flex-box .half figure{ height: 200px; } #ci .higens h4{ font-size: 2.5rem; margin: 20px 0; } #ci .higens dl dt{ font-size: 2rem; } #ci .higens dl dd{ font-size: 1.7rem; } #ci .robotics .color{ margin-top: 60px; } #ci .robotics .color ul li dl{ padding-left: 20px; } } @media screen and (max-width: 1200px){ #ci .higens ul{ flex-direction: column; } #ci .higens .plus ul li, #ci .higens .s ul li{ width: 100%; } #ci .higens .plus ul li:not(:last-of-type), #ci .higens .s ul li:not(:last-of-type){ margin-bottom: 20px; } #ci .robotics .color ul{ flex-wrap: wrap; } #ci .robotics .color ul li{ width: calc((100% - 40px) / 2); } } @media screen and (max-width: 900px){ #ci section:not(:last-of-type){ margin-bottom: 60px; } #ci .pattern{ height: 250px; } #ci .robotics .figure p{ font-size: 1.7rem; } #ci section.mean{ margin-bottom: 60px; padding-bottom: 60px; } #ci .mean .text p{ font-size: 1.7rem; margin-bottom: 30px; } #ci .mean ul li{ width: calc((100% - 60px) / 2); } #ci .mean ul li .spelling{ width: 60px; height: 60px; font-size: 2.5rem; } #ci .mean ul li p{ font-size: 1.8rem; } #ci .higens .flex-box{ flex-direction: column; } #ci .higens .flex-box .half{ width: 100%; } #ci .higens .flex-box .half:not(:last-of-type){ margin-bottom: 50px; } #ci .higens .flex-box .half figure{ height: 150px; } #ci .higens h4{ min-height: auto; font-size: 2.3rem; } #ci .higens dl dt{ font-size: 1.9rem; } #ci .robotics .section{ padding-bottom: 60px; } #ci .robotics .color{ margin-top: 30px; } #ci .robotics .color ul li{ width: calc((100% - 25px) / 2); } #ci .robotics .color ul li div{ width: 90px; height: 90px; } #ci .robotics .color ul li dl dt{ font-size: 1.6rem; margin-bottom: 5px; } #ci .partnership .section:not(:last-of-type){ margin-bottom: 30px; } } @media screen and (max-width: 550px){ #ci .mean ul{ gap: 30px 20px; } #ci .mean ul li{ width: calc((100% - 20px) / 2); } #ci .robotics .color ul{ gap: 25px; } } /* 회사소개 - 사업소개 (공통) */ #business{ overflow: hidden; } #business .page-title{ margin-bottom: 95px; } #business .squre-title{ margin-bottom: 50px; } #business section:not(:last-of-type){ padding-bottom: 155px; } #business .intro ul li{ display: flex; } #business .intro ul li > div{ width: 50%; min-height: 600px; padding: 50px 0; } #business .intro ul li .image{ position: relative; overflow: hidden; } #business .intro ul li .image img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #business .intro ul li .text{ display: flex; justify-content: center; align-items: center; } #business .intro ul li dl *{ color: #333; letter-spacing: -0.03em; line-height: 1.8; } #business .intro ul li dl dt{ font-size: 2rem; font-weight: 600; margin-bottom: 20px; } #business .intro ul li dl dd{ font-size: 1.7rem; font-weight: 200; } #business .intro ul li dl dd p:not(:last-of-type){ margin-bottom: 20px; } #business .intro ul li:nth-of-type(even){ flex-direction: row-reverse; } #business .intro ul li:nth-of-type(odd) .text{ padding-left: 100px; padding-right: 80px; } #business .intro ul li:nth-of-type(even) .text{ padding-left: 80px; padding-right: 100px; } #business .figcaption{ margin-bottom: 40px; position: relative; padding: 0 20px; } #business .figcaption::before{ content: ""; width: 100%; height: 1px; background: var(--mainColor); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; } #business .figcaption h6{ max-width: 900px; width: 100%; margin: 0 auto; text-align: center; font-size: 3rem; font-weight: 200; color: #fff; background: var(--mainColor); padding: 18px; } #business .p-box{ padding-top: 20px; } #business .p-box p{ font-size: 1.8rem; font-weight: 400; color: #000; letter-spacing: -0.02em; line-height: 1.5; } #business .underTxt{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 30px; margin-top: 15px; } #business .underTxt p{ font-size: 1.5rem; font-weight: 300; color: #999; } #business .underTxt .flex{ display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 20px; text-align: right; } /* 회사소개 - 사업소개 - 로봇 구동모듈 */ #business.robot .module .grid-box ul{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 25px; } #business.robot .module .grid-box ul li{ padding: 35px 30px; background: #F5F5F5; border-radius: 20px; } #business.robot .module .grid-box ul li:last-of-type{ grid-column: 2 / 4; } #business.robot .module .grid-box dl{ height: 100%; } #business.robot .module .grid-box dl img{ mix-blend-mode: darken; } #business.robot .module .grid-box dl dd{ height: calc(100% - 35px); display: flex; justify-content: center; align-items: center; text-align: center; margin-top: 15px; } #business.robot .module .flex-box{ margin-top: 25px; } #business.robot .module .flex-box ul{ display: flex; flex-wrap: wrap; margin-bottom: -25px; } #business.robot .module .flex-box ul li{ width: calc((100% - 50px) / 3); margin-right: 25px; margin-bottom: 25px; padding: 45px 50px; border: 1px solid #CCC; border-radius: 20px; } #business.robot .module .flex-box ul li:nth-of-type(3n){ margin-right: 0; } #business.robot .module .flex-box dl dt{ font-size: 2.4rem; font-weight: 700; color: #111; letter-spacing: -0.02em; margin-bottom: 20px; } #business.robot .module .flex-box dl dd{ font-size: 1.7rem; font-weight: 200; color: #666; letter-spacing: -0.03em; } #business.robot .module .flex-box dl dd p{ line-height: 1.8; position: relative; padding-left: 15px; text-transform: uppercase; } #business.robot .module .flex-box dl dd p::before{ content: ""; width: 3px; height: 3px; background: #111; border-radius: 50%; position: absolute; top: 13px; left: 0; } #business.robot .module .flex-box dl dd p span{ font-weight: 600; color: #111; } #business.robot .case .squre-title{ margin-bottom: 20px; } /* 로봇 엑츄에이터 수정 (2024-08-30) */ #business.robot .paradigm .scroll-x{ margin: -10px; padding-right: 40px; overflow-x: auto; overflow-y: clip; } #business.robot .paradigm .scroll-x::-webkit-scrollbar{ width: 20px; } #business.robot .paradigm .scroll-x::-webkit-scrollbar-thumb{ height: 20px; background: #D9D9D9; background-clip: padding-box; border: 6px solid transparent; border-radius: 100px; } #business.robot .paradigm .scroll-x::-webkit-scrollbar-track{ background-clip: padding-box; border: 5px; border: 5px solid transparent; border-radius: 100px; } #business.robot .paradigm table{ min-width: 900px; border-collapse: unset; border-spacing: 10px; } #business.robot .paradigm table *{ font-size: 1.7rem; font-weight: 400; color: #111; letter-spacing: -0.02em; } #business.robot .paradigm table colgroup col.th{ width: 150px; } #business.robot .paradigm table th, #business.robot .paradigm table td{ padding: 20px; background: transparent; } #business.robot .paradigm table tr.none th, #business.robot .paradigm table tr.none td{ padding: 0; } #business.robot .paradigm table thead th{ background: var(--mainColor); font-weight: 500; color: #fff; } #business.robot .paradigm table tbody th{ border: 1px solid #DDD; } #business.robot .paradigm table td{ background: #F1F5F9; text-align: center; } #business.robot .paradigm table td.gray{ background: #F5F5F5; } #business.robot .paradigm table td.none{ background: transparent; } #business.robot .paradigm table td ul{ display: flex; justify-content: space-between; } #business.robot .paradigm table td ul li{ width: calc((100% - 10px) / 2); background: #F1F5F9; padding: 20px; } #business.robot .paradigm table .flex{ display: flex; justify-content: space-between; } #business.robot .paradigm table span.blue{ color: var(--mainColor); } #business.robot .paradigm table span.red{ color: #8B0C02; } #business.robot .paradigm table img{ width: 100%; } #business.robot .paradigm .arrow{ position: relative; } #business.robot .paradigm .arrow::before{ content: ""; width: calc((100% * 5) + 240px); height: 4px; background: linear-gradient(to right, #EEE, #8B0C02); position: absolute; top: 50%; right: -40px; z-index: -1; transform: translateY(-50%); } #business.robot .paradigm .arrow::after{ content: ""; width: 20px; height: 24px; background: #8B0C02; position: absolute; top: 50%; right: -50px; transform: translateY(-50%); clip-path: polygon(100% 50%, 0 0, 0 100%); -webkit-clip-path: polygon(100% 50%, 0 0, 0 100%); } #business.robot .paradigm .small{ display: flex; flex-wrap: wrap; justify-content: space-between; font-size: 1.6rem; font-weight: 300; letter-spacing: -0.02em; padding-right: 40px; margin-top: 20px; } #business.robot .paradigm .small p{ color: #333; } #business.robot .paradigm .small span{ color: #666; } #business.robot .diagram .flex-box{ display: flex; justify-content: space-between; } #business.robot .diagram .half{ width: calc((100% - 90px) / 2); display: flex; flex-direction: column; text-align: center; } #business.robot .diagram h6{ font-size: 2.2rem; font-weight: 600; color: #111; letter-spacing: -0.02em; margin-bottom: 50px; } #business.robot .diagram figure{ width: 100%; flex: 1 0 auto; padding: 20px; border: 1px solid var(--mainColor); position: relative; } #business.robot .diagram figure::after{ content: ""; width: 90px; height: calc(100% + 2px); background: linear-gradient(to right, #fff, var(--mainColor)); clip-path: polygon(100% 50%, 0 0, 0 100%); -webkit-clip-path: polygon(100% 50%, 0 0, 0 100%); opacity: 0.2; position: absolute; top: -1px; right: -1px; transform: translateX(100%); } #business.robot .diagram .half:last-of-type figure::after{ display: none; } #business.robot .diagram figure figcaption{ max-width: calc(100% - 40px); width: 400px; min-height: 60px; display: flex; justify-content: center; align-items: center; background: var(--mainColor); font-size: 1.8rem; font-weight: 500; color: #fff; margin: -20px auto 0; padding: 10px 20px; transform: translateY(-50%); } #business.robot .table .flex-box{ display: flex; justify-content: space-between; gap: 20px; } #business.robot .table .left img{ height: 100%; } #business.robot .table .right ul{ height: 100%; margin-bottom: -10px; } #business.robot .table .right ul li{ position: relative; margin-bottom: 10px; } #business.robot .table .right ul li p{ font-size: 1.8rem; font-weight: 700; color: #FFF; letter-spacing: -0.02em; position: absolute; top: 0; left: 0; padding: 20px; } /* 회사소개 - 사업소개 - 모빌리티 구동모듈 */ #business.mobility .intro ul li:nth-of-type(odd){ flex-direction: row-reverse; } #business.mobility .intro ul li:nth-of-type(even){ flex-direction: row; } #business.mobility .intro ul li:nth-of-type(odd) .text{ padding-left: 80px; padding-right: 100px; } #business.mobility .intro ul li:nth-of-type(even) .text{ padding-left: 100px; padding-right: 80px; } #business.mobility .model .squre-title{ margin-bottom: 20px; } #business.mobility .model .guide{ font-size: 1.8rem; font-weight: 200; color: #333; letter-spacing: -0.03em; line-height: 1.8; margin-bottom: 45px; } #business.mobility .table-box table thead td::before{ content: ""; width: calc(100% - 10px); height: calc(100% - 10px); background: #F5F5F5; position: absolute; top: 50%; left: 50%; z-index: -1; transform: translate(-50%, -50%); } #business.mobility .table-box table thead td img{ mix-blend-mode: darken; } #business.mobility .model .table-box:not(:last-of-type){ margin-bottom: 50px; } #business.mobility .case ul{ display: flex; flex-wrap: wrap; margin-bottom: -20px; } #business.mobility .case ul li{ width: calc((100% - 20px) / 2); margin-right: 20px; margin-bottom: 20px; background: #F5F5F5; display: flex; flex-direction: column; justify-content: space-between; } #business.mobility .case ul li:nth-of-type(2n){ margin-right: 0; } #business.mobility .case ul li .title-box{ display: flex; justify-content: space-between; padding: 40px 50px; } #business.mobility .case ul li dl{ width: calc(58.5% - 15px); padding-top: 20px; } #business.mobility .case ul li dl dt{ font-size: 3rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 15px; } #business.mobility .case ul li dl dd{ font-size: 1.8rem; font-weight: 300; letter-spacing: -0.03em; line-height: 1.8; padding-left: 15px; position: relative; } #business.mobility .case ul li dl dd::before{ content: ""; width: 3px; height: 3px; background: #111; border-radius: 50%; position: absolute; top: 14px; left: 0; } #business.mobility .case ul li .title-box img{ mix-blend-mode: darken; } #business.mobility .case ul li .title-box figure{ width: 41.5%; } #business.mobility .case .image-box{ background: #DDD; } #business.mobility .techBox { display: flex; flex-wrap: wrap;} #business.mobility .techBox ul { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;} #business.mobility .techBox li { display: flex; flex-direction: column; flex-wrap: wrap; gap: 20px; padding: 40px; border: 1px solid #ddd;} #business.mobility .techBox li .txtBox { position: relative; padding-top: 20px; border-top: 1px dashed #ddd} /* #business.mobility .techBox li .txtBox:before { position: absolute; content: ""; width: 100%; height: 1px; background: #000; top: -15px; left: 0;} */ #business.mobility .techBox li h6 { font-size:2.0rem; font-weight:700; color:#111; margin-bottom:20px;} #business.mobility .techBox li p { position: relative; font-size:1.8rem; font-weight:400; color:#111; padding-left: 10px;} #business.mobility .techBox li p:before { position: absolute; content: ""; width: 3px; height: 3px; background: #000; top: 10px; left: 0;} /* 회사소개 - 사업소개 - 산업용 모터 */ #business.industrial .border{ border: 1px solid #DDD; } #business.industrial .flex-box{ display: flex; justify-content: space-between; } #business.industrial .image-box{ width: 39.3%; } #business.industrial .image{ display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } #business.industrial .image p{ font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.5; text-align: center; } #business.industrial .text-box{ width: 60.7%; padding: 35px 0; padding-left: 100px; } #business.industrial .content{ margin-bottom: 50px; } #business.industrial .content p{ font-size: 1.8rem; font-weight: 400; letter-spacing: -0.03em; line-height: 1.7; } #business.industrial .content p:not(:last-of-type){ margin-bottom: 20px; } #business.industrial .dl dt{ font-size: 2.4rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.5; margin-bottom: 20px; } #business.industrial .dl dd{ padding-left: 10px; } #business.industrial .dl dd p{ font-size: 1.7rem; font-weight: 200; color: #666; letter-spacing: -0.03em; line-height: 1.8; position: relative; padding-left: 15px; } #business.industrial .dl dd p::before{ content: ""; width: 3px; height: 3px; background: #111; border-radius: 50%; position: absolute; top: calc(1.8em / 2); left: 0; transform: translateY(-50%); } #business.industrial .dl dd span{ display: inline-block; color: #111; font-weight: 600; } #business.industrial .normal .flex-box:not(:last-of-type){ margin-bottom: 50px; } #business.industrial .normal .image-box.image{ padding: 30px; } #business.industrial .normal .image-box p{ margin-top: 40px; } #business.industrial .normal .border-box{ display: flex; justify-content: space-between; margin-top: 65px; padding: 10px; } #business.industrial .normal .border-box .dl{ width: 31.7%; padding: 40px 40px 30px; } #business.industrial .normal .list{ width: 68.3%; display: flex; justify-content: space-between; } #business.industrial .normal .list li{ width: calc((100% - 20px) / 3); background: #F5F5F5; border-radius: 20px; padding: 30px; } #business.industrial .normal .list li img{ mix-blend-mode: darken; } #business.industrial .normal .list li p{ margin-top: 70px; } #business.industrial .internal{ padding-bottom: 220px; } #business.industrial .internal .image-box{ margin-bottom: 40px; position: relative; } #business.industrial .internal .image{ padding: 60px 30px; } #business.industrial .internal .image p{ margin-top: 25px; } #business.industrial .internal .image p span{ display: inline-block; width: 100%; font-size: 1.6rem; font-weight: 400; } #business.industrial .internal .btn-box{ position: absolute; bottom: -40px; left: 0; right: 0; display: flex; justify-content: center; align-items: center; } #business.industrial .internal .btn-box button{ width: 30px; height: 30px; background: #EEE; border: none; border-radius: 50%; } #business.industrial .internal .btn-box button img{ position: relative; top: 2px; } #business.industrial .internal .btn-box .slick-dots{ display: flex !important; padding: 0 30px; } #business.industrial .internal .btn-box .slick-dots li{ width: 10px; height: 10px; background: #D9D9D9; border-radius: 5.5px; transition: all 0.5s; } #business.industrial .internal .btn-box .slick-dots li:not(:last-of-type){ margin-right: 5px; } #business.industrial .internal .btn-box .slick-dots li.slick-active{ width: 30px; background: #111; } #business.industrial .internal .btn-box .slick-dots li button{ display: none; } #business.industrial .internal .text-box { display: flex; flex-direction: column; justify-content: space-between; } #business.industrial .internal .text-box ul{ display: flex; flex-wrap: wrap; align-items: center; gap: 27px 17px; padding-bottom: 5px; } #business.industrial .moter .table-box colgroup col:nth-of-type(1){ width: 26.8%; } #business.industrial .moter .table-box colgroup col:nth-of-type(4){ width: 20.4%; } #business.industrial .moter .table-box colgroup col:nth-of-type(5){ width: 18.3%; } #business.industrial .moter .table-box thead tr th:last-of-type{ border-right: none; } #business.industrial .moter .table-box tbody th{ background: none; } #business.industrial .moter .table-box tbody tr td:first-of-type{ border-left: none; } #business.industrial .moter .table-box tbody tr td:last-of-type{ padding-right: 0; } #business.industrial .moter .table-box .left{ text-align: left; font-weight: 600; padding: 16px 20px; border-right: none; position: relative; } #business.industrial .moter .table-box tbody{ position: relative; } #business.industrial .moter .table-box tbody::before{ content: ""; width: 100%; height: 1px; background: #111; position: absolute; bottom: -1px; left: 0; } #business.industrial .moter .table-box tbody th.left::before, #business.industrial .moter .table-box tbody th.left::after{ content: ""; width: 100%; height: 1px; background: #111; position: absolute; left: 0; } #business.industrial .moter .table-box tbody th.left::before{ top: -1px; } #business.industrial .moter .table-box tbody th.left::after{ bottom: -1px; } #business.industrial .moter .table-box tbody strong{ font-weight: 600; } #business.industrial .moter .table-box .flex{ display: flex; justify-content: center; align-items: center; gap: 25px; } #business.industrial .moter .table-box .flex.four{ flex-wrap: wrap; gap: 10px; } #business.industrial .moter .table-box .flex.four figure{ width: calc((100% - 10px) / 2); } #business.industrial .moter .table-box tbody figure{ padding: 10px 0; } #business.industrial .moter .table-box .dot *{ text-align: left; font-size: 1.7rem; color: #666; line-height: 1.8; letter-spacing: -0.03em; } #business.industrial .moter .table-box .dot dt{ font-weight: 400; color: #111; } #business.industrial .moter .table-box .dot dd{ position: relative; font-weight: 200; padding-left: 15px; } #business.industrial .moter .table-box .dot dd::before{ content: ""; width: 3px; height: 3px; background: #666; border-radius: 50%; position: absolute; top: 14px; left: 0; } #business.industrial .moter .table-box figcaption{ font-size: 1.6rem; font-weight: 600; color: #111; letter-spacing: -0.03em; margin-top: 20px; } #business.industrial .moter .table-box .four figcaption{ font-size: 1.4rem; } #business.industrial .moter .table-box figcaption sup{ font-size: 1rem; } #business.industrial .moter p.guide{ font-size: 1.4rem; font-weight: 200; color: #666; letter-spacing: -0.03em; margin-top: 25px; } #business.industrial .series-box{ display: flex; gap: 30px; border: 1px solid #DDD; padding: 30px; margin-top: 75px; } #business.industrial .series-box .box{ width: calc((100% - 60px) / 4); display: flex; flex-direction: column; } #business.industrial .series-box .box.wide{ width: calc(((100% - 60px) / 4) * 2); } #business.industrial .series-box .tit{ background: var(--mainColor); border-radius: 20px; font-size: 2.4rem; font-weight: 700; color: #fff; text-align: center; padding: 15px; margin-bottom: 20px; } #business.industrial .series-box ul{ display: flex; flex-wrap: wrap; gap: 60px 20px; flex: 1 0 auto; background: #F5F5F5; border-radius: 20px; padding: 40px 20px; text-align: center; } #business.industrial .series-box ul li p{ font-size: 2rem; font-weight: 700; color: #111; line-height: 1.5; letter-spacing: -0.03em; margin-top: 20px; } #business.industrial .series-box .box.wide ul li{ width: calc((100% - 20px) / 2); } /* 회사소개 - 사업소개 - 서보 시스템 */ #business.servo .series-box .box{ width: calc((100% - 60px) / 3); } #business.servo .series-box ul{ justify-content: center; } #business.servo .normal .bottom{ display: flex; justify-content: space-between; align-items: flex-end; padding-top: 50px; } #business.servo .normal .image-box{ min-height: 560px; } #business.servo .normal .text-box{ display: flex; flex-direction: column; justify-content: center; position: relative; } #business.servo .normal .text-box .right{ position: absolute; bottom: 0; right: 0; } #business.servo .catapulting .img{ width: 47%; padding-right: 100px; } #business.servo .catapulting .text{ width: 53%; display: flex; flex-direction: column; justify-content: center; padding: 30px 0; } #business.servo .catapulting .text h6{ font-size: 2.8rem; font-weight: 600; color: #111; letter-spacing: -0.02em; margin-bottom: 30px; } #business.servo .catapulting .text p{ font-size: 1.8rem; font-weight: 400; color: #111; letter-spacing: -0.02em; line-height: 1.6; } #business.servo .catapulting .text p:not(:last-of-type){ margin-bottom: 30px; } #business.servo .catapulting .text a{ margin-top: 60px; } @media screen and (max-width: 1500px){ /* 로봇 엑츄에이터 수정 (2024-08-30) */ #business.robot .diagram h6{ font-size: 2rem; } #business.robot .diagram figure figcaption{ font-size: 1.7rem; } #business.robot .table .right ul li p{ font-size: 1.7rem; } /* 회사소개 - 사업소개 - 모빌리티 구동모듈 */ #business.mobility .case ul li .title-box{ padding: 30px 40px; } #business.mobility .case ul li dl dt{ font-size: 2.5rem; } /* 회사소개 - 사업소개 - 산업용 모터 */ #business.industrial .text-box{ padding-left: 50px; } #business.industrial .normal .border-box .dl{ padding-left: 20px; } #business.industrial .normal .list li p{ margin-top: 40px; } #business.industrial .internal{ padding-bottom: 180px; } #business.industrial .series-box .tit{ font-size: 2.2rem; } #business.industrial .series-box ul li p{ font-size: 1.8rem; } /* 회사소개 - 사업소개 - 서보 시스템 */ #business.servo .normal .image-box{ min-height: 460px; } #business.servo .catapulting .text h6{ font-size: 2.4rem; } #business.servo .catapulting .text p{ font-size: 1.7rem; } #business.servo .catapulting .text a{ margin-top: 40px; } } @media screen and (max-width: 1250px){ /* 회사소개 - 사업소개 (공통) */ #business .page-title{ margin-bottom: 50px; } #business .squre-title{ margin-bottom: 30px; } #business section:not(:last-of-type){ padding-bottom: 100px; } #business .intro ul li:nth-of-type(odd) .text{ padding: 50px; } #business .intro ul li:nth-of-type(even) .text{ padding: 50px; } #business .p-box{ padding-top: 10px; } #business .p-box p{ font-size: 1.7rem; } /* 회사소개 - 사업소개 - 로봇 구동모듈 */ #business.robot .module .flex-box ul li{ padding: 25px 30px; } #business.robot .module .flex-box dl dt{ font-size: 2.2rem; } #business.robot .table .right ul li p{ font-size: 1.6rem; padding: 15px; } /* 로봇 엑츄에이터 수정 (2024-08-30) */ #business.robot .paradigm table *{ font-size: 1.6rem; } #business.robot .paradigm table th, #business.robot .paradigm table td{ padding: 15px; } #business.robot .diagram h6{ font-size: 1.8rem; } #business.robot .diagram figure figcaption{ min-height: 50px; font-size: 1.6rem; } /* 회사소개 - 사업소개 - 모빌리티 구동모듈 */ #business.mobility .intro ul li:nth-of-type(odd) .text{ padding: 50px; } #business.mobility .intro ul li:nth-of-type(even) .text{ padding: 80px; } #business.mobility .model .guide{ font-size: 1.7rem; margin-bottom: 30px; } #business.mobility .table-box{ overflow-x: scroll; } #business.mobility .table-box table{ width: 1000px; } #business.mobility .case ul li dl dt{ font-size: 2.2rem; } #business.mobility .case ul li dl dd{ font-size: 1.7rem; } /* 회사소개 - 사업소개 - 산업용 모터 */ #business.industrial .text-box{ padding: 20px 0; padding-left: 50px; } #business.industrial .content p{ font-size: 1.7rem; } #business.industrial .content p:not(:last-of-type){ margin-bottom: 10px; } #business.industrial .dl dt{ font-size: 2.2rem; margin-bottom: 10px; } #business.industrial .image-box p{ font-size: 1.8rem; } #business.industrial .image p{ font-size: 1.8rem; } #business.industrial .normal .border-box .dl{ padding-left: 10px; } #business.industrial .internal{ padding-bottom: 120px; } #business.industrial .moter .table-box table thead th{ padding: 10px; } #business.industrial .moter .table-box .left{ padding: 10px; } #business.industrial .moter .table-box .dot *{ font-size: 1.5rem; } #business.industrial .moter .table-box figcaption{ font-size: 1.5rem; } #business.industrial .series-box{ margin-top: 30px; } #business.industrial .series-box .tit{ font-size: 2rem; padding: 10px; } #business.industrial .series-box ul{ padding: 20px; } #business.industrial .series-box ul li p{ font-size: 1.6rem; margin-top: 10px; } /* 회사소개 - 사업소개 - 서보 시스템 */ #business.servo .normal .bottom{ padding-top: 20px; } #business.servo .catapulting br{ display: none; } #business.servo .catapulting .text h6{ font-size: 2.2rem; margin-bottom: 20px; } #business.servo .catapulting .text p{ font-size: 1.6rem; } #business.servo .catapulting .text p:not(:last-of-type){ margin-bottom: 20px; } #business.servo .catapulting .text a{ margin-top: 30px; } } @media screen and (max-width: 1150px){ /* 로봇 엑츄에이터 수정 (2024-08-30) */ #business.robot .paradigm .scroll-x{ padding-right: 25px; } #business.robot .paradigm table colgroup col.th{ width: 120px; } #business.robot .paradigm .arrow::before{ width: calc((100% * 5) + 190px); right: -20px; } #business.robot .paradigm .arrow::after{ width: 15px; height: 18px; right: -25px; } #business.robot .paradigm .small{ flex-direction: column; gap: 10px; padding-right: 0; } /* 회사소개 - 사업소개 - 모빌리티 구동모듈 */ #business.mobility .techBox ul { gap: 20px;} #business.mobility .case ul li .title-box{ flex-direction: column-reverse; align-items: center; } #business.mobility .case ul li .title-box figure{ width: 100%; text-align: center; } #business.mobility .case ul li dl{ width: 100%; } } @media screen and (max-width: 1100px){ /* 로봇 엑츄에이터 수정 (2024-08-30) */ #business.robot .diagram .flex-box{ flex-direction: column; } #business.robot .diagram .half{ width: 100%; } #business.robot .diagram .half:not(:last-of-type){ margin-bottom: 60px; } #business.robot .diagram h6{ margin-bottom: 40px; } #business.robot .diagram figure::after{ width: 100%; height: 40px; background: linear-gradient(to bottom, #fff, var(--mainColor)); top: 100%; right: 0; transform: translate(0, 0); clip-path: polygon(100% 0, 0 0, 50% 100%); -webkit-clip-path: polygon(100% 0, 0 0, 50% 100%); } /* 회사소개 - 사업소개 - 산업용 모터 */ #business.industrial .flex-box{ flex-direction: column; align-items: center; } #business.industrial .image-box{ width: 100%; max-width: 550px; } #business.industrial .image-box figure img{ width: 80%; margin: 0 auto; } #business.industrial .text-box{ width: 100%; padding: 30px 0 0; } #business.industrial .normal .image-box.image{ padding: 50px; } #business.industrial .normal .border-box{ flex-direction: column-reverse; } #business.industrial .normal .border-box .dl{ width: 100%; padding: 30px 10px; } #business.industrial .normal .list{ width: 100%; } #business.industrial .dl dd{ display: flex; flex-wrap: wrap; justify-content: space-between; } #business.industrial .dl dd p:nth-of-type(odd){ width: 40%; } #business.industrial .dl dd p:nth-of-type(even){ width: calc(60% - 20px); } /* 회사소개 - 사업소개 - 서보 시스템 */ #business.servo .normal .image-box{ min-height: auto; } #business.servo .normal .text-box .right{ position: static; margin-top: 20px; } #business.servo .normal .text-box .right a{ margin-left: auto; } #business.servo .catapulting .img{ width: auto; padding-right: 0; padding-bottom: 30px; } #business.servo .catapulting .text{ width: 100%; padding: 0; } } @media screen and (max-width: 1000px){ /* 회사소개 - 사업소개 (공통) */ #business .intro ul li{ flex-direction: column; align-items: center; } #business .intro ul li:nth-of-type(even){ flex-direction: column; } #business .intro ul li:not(:last-of-type){ margin-bottom: 50px; } #business .intro ul li > div{ width: 100%; min-height: auto; } #business .intro ul li .image{ max-width: 700px; padding-bottom: 56.5%; } #business .intro ul li .text{ margin-top: 30px; } #business .intro ul li:nth-of-type(odd) .text{ padding: 0; } #business .intro ul li:nth-of-type(even) .text{ padding: 0; } /* 회사소개 - 사업소개 - 로봇 구동모듈 */ #business.robot .module .grid-box ul{ grid-template-columns: 1fr 1fr; } #business.robot .module .grid-box ul li:last-of-type{ grid-column: 1 / 3; } #business.robot .module .flex-box ul li{ width: calc((100% - 25px) / 2); } #business.robot .module .flex-box ul li:nth-of-type(2n){ margin-right: 0; } #business.robot .table .flex-box{ flex-direction: column; } #business.robot .table .right ul{ display: flex; flex-wrap: wrap; } #business.robot .table .right ul li{ width: calc((100% - 30px) / 4); } #business.robot .table .right ul li:not(:last-of-type){ margin-right: 10px; } /* 회사소개 - 사업소개 - 모빌리티 구동모듈 */ #business.mobility .intro ul li:nth-of-type(odd){ flex-direction: column; } #business.mobility .intro ul li:nth-of-type(even){ flex-direction: column; } #business.mobility .intro ul li:nth-of-type(odd) .text{ padding: 0; } #business.mobility .intro ul li:nth-of-type(even) .text{ padding: 0; } #business.mobility .techBox ul { grid-template-columns: repeat(2, 1fr); } #business.mobility .techBox li { padding:20px; } #business.mobility .case ul li .title-box{ padding: 20px 30px; } /* 회사소개 - 사업소개 - 산업용 모터 */ #business.industrial .moter .table-box{ overflow-x: scroll; } #business.industrial .moter .table-box table{ width: 1000px; } } @media screen and (max-width: 900px){ /* 회사소개 - 사업소개 (공통) */ #business section:not(:last-of-type){ padding-bottom: 80px; } #business .squre-title{ margin-bottom: 20px; } #business .intro ul li dl dt{ font-size: 1.9rem; margin-bottom: 10px; } #business .intro ul li dl dd{ font-size: 1.6rem; font-weight: 200; } #business .p-box p{ font-size: 1.6rem; } #business .underTxt .flex{ flex-direction: column; } /* 회사소개 - 사업소개 - 로봇 구동모듈 */ #business.robot .module .flex-box dl dt{ font-size: 1.9rem; margin-bottom: 10px; } #business.robot .module .flex-box dl dd{ font-size: 1.6rem; } /* 회사소개 - 사업소개 - 모빌리티 구동모듈 */ #business.mobility .model .guide{ margin-bottom: 15px; } #business.mobility .case ul li dl dt{ font-size: 2rem; } #business.mobility .case ul li dl dd{ font-size: 1.6rem; } /* 회사소개 - 사업소개 - 산업용 모터 */ #business.industrial .image-box p{ font-size: 1.7rem; } #business.industrial .image p{ font-size: 1.7rem; } #business.industrial .series-box{ flex-direction: column; padding: 20px; } #business.industrial .series-box .box{ width: 100% !important; } #business.industrial .series-box ul li{ width: calc((100% - 20px) / 2); } } @media screen and (max-width: 800px){ /* 회사소개 - 사업소개 (공통) */ #business br{ display: none; } /* 회사소개 - 사업소개 - 로봇 구동모듈 */ #business.robot .module .grid-box ul{ gap: 10px; } #business.robot .module .grid-box ul li{ padding: 20px; } #business.robot .module .grid-box dl dt img{ width: 100px; } #business.robot .module .flex-box{ margin-top: 10px; } #business.robot .module .flex-box ul{ margin-bottom: -10px; } #business.robot .module .flex-box ul li{ width: calc((100% - 10px) / 2); margin-right: 10px; margin-bottom: 10px; padding: 20px 25px; } /* 회사소개 - 사업소개 - 모빌리티 구동모듈 */ #business.mobility .case ul li{ width: 100%; margin-right: 0; } /* 회사소개 - 사업소개 - 산업용 모터 */ #business.industrial .normal .list{ flex-wrap: wrap; margin-bottom: -10px; } #business.industrial .normal .list li{ width: calc((100% - 10px) / 2); margin-bottom: 10px; } } @media screen and (max-width: 740px){ #business.robot .table .flex-box{ gap: 10px; } #business.robot .table .right ul li{ width: calc((100% - 10px) / 2); } #business.robot .table .right ul li:nth-of-type(even){ margin-right: 0; } #business.robot .table .right ul li img{ width: 100%; } /* 회사소개 - 사업소개 - 산업용 모터 */ #business.industrial .dl dd p:nth-of-type(odd){ width: 100%; } #business.industrial .dl dd p:nth-of-type(even){ width: 100%; } } @media screen and (max-width: 700px){ #business.servo .normal .bottom{ flex-direction: column; align-items: flex-start; } #business.servo .normal .bottom .right{ width: 100%; } #business.servo .normal .bottom .right a{ margin-left: auto; } #business.servo .normal .bottom a{ margin-top: 20px; } } @media screen and (max-width: 600px){ /* 회사소개 - 사업소개 - 로봇 구동모듈 */ #business.robot .module .grid-box dl dt img{ width: 80px; } #business.robot .module .flex-box ul li{ width: 100%; margin-right: 0; } #business.mobility .techBox ul { grid-template-columns: repeat(1, 1fr);} #business.mobility .techBox ul .imgBox {text-align:center;} } /* 회사소개 - 홍보센터 - 홍보영상 */ #video .thumbnail-list li{ cursor: pointer; } #video .thumbnail-list li h5{ width: 100%; height: 3em; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin: 15px 0 10px; word-break: break-all; white-space: wrap; } /* 회사소개 - 홍보센터 - 홍보영상 (팝업) */ #popup{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 300; background: rgba(0, 0, 0, 0.95); display: flex; justify-content: center; align-items: center; display: none; } #popup .close{ width: 30px; height: 30px; border: none; background: none; margin-bottom: 34px; } #popup .video-box{ width: 1000px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } #popup .iframe{ width: 100%; position: relative; overflow: hidden; padding-bottom: 56.25%; } #popup .iframe iframe{ width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } @media screen and (max-width: 1500px){ #video .thumbnail-list ul li h5{ margin: 10px 0; } } @media screen and (max-width: 1250px){ #video .thumbnail-list ul li h5{ margin: 5px 0 10px; } } @media screen and (max-width: 1200px){ /* 회사소개 - 홍보센터 - 홍보영상 (팝업) */ #popup .video-box{ width: 85%; } } /* 제품소개 - 리스트 */ #product.sub-content:not(.result){ padding-top: 0; } #product .filter ul{ display: flex; flex-wrap: wrap; } #product .gray-bg{ background: #F5F5F5; padding: 90px 0; margin-bottom: 90px; } #product .gray-bg .flex-box{ display: flex; justify-content: space-between; align-items: flex-start; } #product .gray-bg .selectric-wrapper, #product .gray-bg .filter ul li a{ height: 70px; border-radius: 10px; } #product .gray-bg .selectric .label, #product .gray-bg .selectric-items ul, #product .gray-bg .selectric-items li, #product .gray-bg .filter ul li a{ font-size: 1.8rem; } #product .gray-bg .select-box{ display: flex; align-items: center; } #product .gray-bg .select-box > span{ font-size: 2.4rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.5; } /* gray-bg 영역 제거된 ID 상단 여백 추가 */ #product .w1400 {padding-top:90px;} #technique .w1400 {padding-top:90px;} /* select 커스텀 */ #product .gray-bg .selectric-select{ width: 370px; margin-left: 30px; } #product .gray-bg .selectric-select .selectric{ height: 100%; border: 1px solid #111; border-radius: 10px; } #product .gray-bg .selectric .label{ display: flex; align-items: center; height: 100%; background: #F5F5F5; font-weight: 600; color: #111; margin: 0; padding-left: 40px; padding-right: 70px; } #product .gray-bg .selectric .button{ width: 70px; height: 100%; } #product .gray-bg .selectric .button:after{ content: ""; width: auto; height: auto; background: #F5F5F5 url("/img/sub/product/select_icon.svg") no-repeat center center / auto; border: none; } #product .gray-bg .selectric-items{ background: #F5F5F5; border: 1px solid #111; border-radius: 10px; overflow: hidden; top: calc(100% - 1px); } #product .gray-bg .selectric-items li{ padding: 10px 40px; } #product .gray-bg .filter{ width:100%; /* width: calc(100% - 580px); */ } #product .gray-bg .filter ul{ margin-bottom: -7px; } #product .gray-bg .filter ul li{ width: calc((100% - 21px) / 4); margin-right: 7px; margin-bottom: 7px; } #product .gray-bg .filter ul li:nth-of-type(4n){ margin-right: 0; } #product .gray-bg .filter ul li a{ width: 100%; display: flex; justify-content: center; align-items: center; text-align: center; font-size: 1.8rem; font-weight: 400; color: #111; letter-spacing: -0.02em; background: #fff; border: 1px solid #DDD; padding: 10px; transition: all 0.5s; } #product .gray-bg .filter ul li.on a, #product .gray-bg .filter ul li:hover a{ font-weight: 600; color: #fff; background: #111; border: 1px solid #111; } #product .filter2{ overflow: hidden; } #product .filter2 ul{ justify-content: center; gap: 0 60px; border-top: 1px solid #EEE; border-bottom: 1px solid #EEE; } #product .filter2 ul li{ position: relative; } #product .filter2 ul li::after{ content: ""; width: 100vw; height: 1px; background: #EEE; position: absolute; bottom: -1px; left: 0; z-index: -1; transform: translateX(-50%); } #product .filter2 ul li a{ display: inline-block; font-size: 1.8rem; font-weight: 400; color: #111; letter-spacing: -0.02em; padding: 25px 10px; position: relative; transition: all 0.5s; } #product .filter2 ul li a::before{ content: ""; width: 100%; height: 1px; background: #111; position: absolute; bottom: -1px; left: 0; transform: scaleX(0); transform-origin: center; transition: transform 0.5s; } #product .filter2 ul li.on a, #product .filter2 ul li:hover a{ font-weight: 600; } #product .filter2 ul li.on a::before, #product .filter2 ul li:hover a::before{ transform: scaleX(1); } #product .thumbnail-list{ margin-top: 40px; } #product .thumbnail-list ul li{ margin-bottom: -70px; } #product .thumbnail-list ul li{ width: calc((100% - 80px) / 5); margin-right: 20px; margin-bottom: 70px; } #product .thumbnail-list ul li:nth-of-type(5n){ margin-right: 0; } #product .thumbnail-list ul li figure{ padding-bottom: 102.3%; background: #F5F5F5; } #product .thumbnail-list ul li figure img{ max-width: calc(100% - 60px); width: auto; max-height: calc(100% - 60px); height: auto; mix-blend-mode: darken; transition: all 0.5s; } #product .thumbnail-list ul li h5{ text-align: center; margin-top: 20px; white-space: normal; text-overflow: unset; overflow: unset; } #product .thumbnail-list ul li:hover img{ transform: translate(-50%, -50%) scale(1.1); } @media screen and (max-width: 1500px){ #product .gray-bg .selectric-wrapper, #product .gray-bg .filter ul li a{ height: 60px; } #product .gray-bg .selectric .label, #product .gray-bg .selectric-items ul, #product .gray-bg .selectric-items li, #product .gray-bg .filter ul li a{ font-size: 1.7rem; } #product .gray-bg .selectric-select{ width: 300px; } #product .gray-bg .selectric .label{ padding-left: 20px; padding-right: 50px; } #product .gray-bg .selectric-select .button{ width: 50px; } #product .gray-bg .selectric-items li{ padding: 10px 20px; } #product .gray-bg .select-box > span{ font-size: 2rem; } #product .filter2 ul li a{ font-size: 1.7rem; } } @media screen and (max-width: 1400px){ /* #product .gray-bg .filter{ width: calc(100% - 480px); } */ } @media screen and (max-width: 1200px){ #product .gray-bg{ padding: 50px 0; margin-bottom: 50px; } #product .gray-bg .flex-box{ flex-direction: column; } #product .gray-bg .selectric-wrapper, #product .gray-bg .filter ul li a{ height: 55px; } #product .gray-bg .selectric .label, #product .gray-bg .selectric-items ul, #product .gray-bg .selectric-items li, #product .gray-bg .filter ul li a{ font-size: 1.6rem; } #product .gray-bg .selectric-select{ max-width: 300px; width: calc(100% - 80px); margin-left: 15px } #product .gray-bg .select-box > span{ font-size: 1.8rem; } #product .gray-bg .filter{ width: 100%; margin-top: 15px; } #product .filter2 ul{ gap: 0 30px; } #product .filter2 ul li a{ font-size: 1.6rem; padding: 15px 10px; } #product .thumbnail-list ul li{ width: calc((100% - 60px) / 4); } #product .thumbnail-list ul li:nth-of-type(5n){ margin-right: 20px; } #product .thumbnail-list ul li:nth-of-type(4n){ margin-right: 0; } #product .thumbnail-list ul li h5{ margin-top: 10px; } } @media screen and (max-width: 900px){ #product .gray-bg{ padding: 30px 0; margin-bottom: 50px; } #product .thumbnail-list ul{ margin-bottom: -30px; } #product .thumbnail-list ul li{ width: calc((100% - 40px) / 3); margin-bottom: 30px; } #product .thumbnail-list ul li:nth-of-type(4n){ margin-right: 20px; } #product .thumbnail-list ul li:nth-of-type(3n){ margin-right: 0; } #product .thumbnail-list ul li h5{ margin-top: 5px; } } @media screen and (max-width: 800px){ #product .gray-bg .filter ul li{ width: calc((100% - 14px) / 3); } #product .gray-bg .filter ul li:nth-of-type(4n){ margin-right: 7px; } #product .gray-bg .filter ul li:nth-of-type(3n){ margin-right: 0; } } @media screen and (max-width: 700px){ #product .thumbnail-list ul li{ width: calc((100% - 20px) / 2); } #product .thumbnail-list ul li:nth-of-type(3n){ margin-right: 20px; } #product .thumbnail-list ul li:nth-of-type(2n){ margin-right: 0; } } @media screen and (max-width: 600px){ #product .gray-bg .filter ul li{ width: calc((100% - 7px) / 2); } #product .gray-bg .filter ul li:nth-of-type(3n){ margin-right: 7px; } #product .gray-bg .filter ul li:nth-of-type(2n){ margin-right: 0; } } /* 제품소개 - 상세 */ #detail.sub-content{ padding-top: 0; } #detail .view-list{ padding: 40px 0; } #detail .view-list a{ max-width: fit-content; display: flex; align-items: center; font-family: var(--Poppins); font-size: 1.8rem; font-weight: 700; color: var(--mainColor); } #detail .view-list span{ display: flex; justify-content: center; align-items: center; width: 45px; height: 45px; background: var(--mainColor); border-radius: 50%; margin-right: 20px; } #detail .detail-top{ padding-bottom: 110px; } #detail .detail-top .flex-box > div{ width: 50%; } #detail .detail-top .figure{ padding-right: 100px; } #detail .detail-top .image-wrap{ position: relative; } #detail .detail-top .image-wrap .slick-dots{ position: absolute; bottom: 20px; left: 0; right: 0; display: flex; justify-content: center; } #detail .detail-top .image-wrap .slick-dots li{ width: 12px; height: 12px; background: #D9D9D9; border-radius: 10px; transition: all 0.5s; } #detail .detail-top .image-wrap .slick-dots li:not(:last-of-type){ margin-right: 10px; } #detail .detail-top .image-wrap .slick-dots li.slick-active{ width: 30px; background: #111; } #detail .detail-top .image-wrap .slick-dots li button{ display: none; } #detail .detail-top .figure figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: calc(100% - 2px); border: 1px solid #DDD; } #detail .detail-top .figure figure img{ max-width: calc(100% - 60px); width: auto; max-height: calc(100% - 60px); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #detail .detail-top .figure > ul{ display: flex; margin-top: 10px; } #detail .detail-top .figure > ul li{ width: calc((100% - 16px) / 3); margin-right: 8px; } #detail .detail-top .figure > ul li:nth-of-type(3n){ margin-right: 0; } #detail .detail-top .figure > ul li a{ display: inline-block; width: 100%; text-align: center; background: #111; font-size: 2rem; font-weight: 600; color: #fff; letter-spacing: -0.02em; padding: 15px; } #detail .detail-top .figure > ul li a::after{ content:"\e980"; font-family: "xeicon"; font-weight: normal; font-style: normal; margin-left: 10px; position: relative; top: 1px; } #detail .detail-top .text{ padding-top: 45px; } #detail .detail-top .text .title{ margin-bottom: 60px; } #detail .detail-top .text .title p{ font-size: 2.4rem; font-weight: 700; color: var(--mainColor); margin-bottom: 10px; } #detail .detail-top .text .title h3{ font-size: 6rem; font-weight: 700; letter-spacing: -0.02em; } #detail .detail-top .text .dl dl:not(:last-of-type){ margin-bottom: 80px; } #detail .detail-top .text dl dt{ font-size: 2.4rem; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 20px; } #detail .detail-top .text dl dd{ font-size: 1.7rem; font-weight: 300; /* font-weight: 200; */ color: #111; /* color: #666; */ letter-spacing: -0.03em; line-height: 1.2; padding-left: 10px; } #detail .detail-top .text dl dd p{ padding-left: 15px; position: relative; } #detail .detail-top .text dl dd p:not(:last-of-type){ margin-bottom: 15px; } #detail .detail-top .text dl dd p::before{ content: ""; width: 3px; height: 3px; background: #111; border-radius: 50%; position: absolute; top: 10px; left: 0; } #detail .detail-top .text dl dd p span{ font-weight: 600; color: #111; } #detail .detail-wrap section{ padding: 100px 0 145px; overflow: hidden; } #detail .detail-wrap section:last-of-type{ padding-bottom: 0; } #detail .detail-menu{ background: #fff; position: sticky; top: 69px; left: 0; z-index: 50; } #detail .detail-menu ul{ display: flex; justify-content: center; border-top: 1px solid #EEE; border-bottom: 1px solid #EEE; } #detail .detail-menu ul li a{ display: inline-block; font-size: 1.8rem; font-weight: 400; color: #777; letter-spacing: -0.02em; padding: 25px 65px; position: relative; } #detail .detail-menu ul li a::before{ content: ""; width: calc(100% - 130px); height: 1px; background: #111; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%) scaleX(0); transform-origin: center; transition: all 0.5s; } #detail .detail-menu ul li.on a, #detail .detail-menu ul li:hover a{ font-weight: 600; color: #111; } #detail .detail-menu ul li.on a::before, #detail .detail-menu ul li:hover a::before{ transform: translateX(-50%) scaleX(1); } #detail section{ font-size: 1.7rem; line-height: 1.5; } #detail section .article:not(:last-of-type){ margin-bottom: 120px; } #detail section .article .section:not(:last-of-type){ margin-bottom: 80px; } #detail .flex-box{ display: flex; } /* 제품 상세 콘텐츠 3배열 */ #detail section .article.blockBox { display: flex; flex-wrap: wrap; justify-content: space-between;} #detail section .article.blockBox .section:first-of-type dl {} #detail .small-txt{ font-size: 1.4rem; font-weight: 400; color: #777; margin-top: 10px; line-height: 1.53; } #detail .small-txt *{ line-height: inherit; } #detail .table-box table{ table-layout: inherit; } #detail .table-box.fixed table{ table-layout: fixed; } #detail .table-box thead tr th:last-of-type{ border-right: none; } #detail .table-box thead tr{ border-bottom: 1px solid #DDD; text-align: center; } #detail .table-box tbody th{ background: none; /* font-size: 2rem; */ font-weight: 600; text-align: center; } #detail .table-box thead th, #detail .table-box thead td, #detail .table-box tbody th, #detail .table-box tbody tr td{ font-size: 1.7rem; } #detail .table-box thead th, #detail .table-box thead td{ padding: 12px 15px; } #detail .table-box tbody th{ padding: 10px; } #detail .table-box tbody tr td{ padding: 10px 5px; } #detail .table-box tbody tr td:first-of-type{ border-left: none; } #detail .table-box table tr td.left { padding: 10px 15px; } #detail .table-box table sup, #detail .table-box table sub{ font-size: 1rem; } #detail .table-box table.static thead{ position: static; } #detail .table-box thead.thead::after{ display: none; } #detail .table-box thead.thead th{ border-bottom: 1px solid #111; } #detail .table-box thead.thead tr:last-of-type{ border-bottom: none; } #detail .table-box tbody.gray th{ background: #F5F5F5; } #detail p.right{ font-size: 1.5rem; color: #777; text-align: right; margin-bottom: 5px; } #detail .table-box + ul{ margin-top: 10px; } #detail .table-box + ul li, #detail .table-box + p{ font-size: 1.4rem; color: #777; } #detail .table-box + p{ margin-top: 10px; } #detail .table-box + p.guide{ color: #666; } #detail .article > ul li:not(:last-of-type), #detail .section > ul li:not(:last-of-type){ margin-bottom: 5px; } #detail .article > p, #detail .section > p{ line-height: 1.5; } #detail .article > dl, #detail .section > dl{ margin-bottom: -5px; } #detail .article > dl > dt, #detail .article > dl > dd, #detail .section > dl > dt, #detail .section > dl > dd{ margin-bottom: 5px; } #detail .article > dl dd, #detail .section > dl dd{ padding-left: 15px; } #detail .article .padding{ padding-left: 10px; } #detail .table-box.scroll{ overflow-x: scroll; } #detail .table-box.scroll thead th, #detail .table-box.scroll tbody tr th, #detail .table-box.scroll tbody tr td{ font-size: 1.5rem; } #detail .table-box tbody ul{ text-align: left; padding: 0 20px; } #detail .table-box tbody ul li:not(:last-of-type){ margin-bottom: 5px; } #detail .table-box .border{ border-right: 1px solid #DDD !important; } #detail .table-box .bb{ border-bottom: 1px solid #DDD !important; } #detail figure{ width: 100% } #detail .margin40{ margin: 40px 0; } #detail .table-box span.s{ font-size: 1.4rem; } #detail .table-box .slash{ position: relative; z-index: -1; } #detail .table-box .slash > div{ display: flex; flex-direction: column; gap: 20px; } #detail .table-box .slash > div::before{ content: ""; width: 100%; height: 100%; background: #ddd; position: absolute; left: 0; bottom: 0; z-index: -1; clip-path: polygon(0 0, 0% 100%, 100% 100%); } #detail .table-box .slash > div::after{ content: ""; width: calc(100% - 1px); height: calc(100% - 1px); background: #F5F5F5; position: absolute; left: 0; bottom: 0; z-index: -1; clip-path: polygon(0 0, 0% 100%, 100% 100%); } #detail .table-box .slash span{ display: inline-block; width: 100%; } #detail .num-list li{ padding-left: 25px; position: relative; color: #111; } #detail .num-list li:not(:last-of-type){ margin-bottom: 8px; } #detail .num-list li::before{ content: attr(data-num); width: 19px; height: 19px; background: var(--mainColor); border-radius: 50%; position: absolute; top: 0; left: 0; font-size: 1.1rem; font-weight: 300; color: #fff; display: flex; justify-content: center; align-items: center; line-height: 1; } /* 인증서 리스트 */ #detail .certify-list{ display: flex; flex-wrap: wrap; gap: 25px; position: relative; z-index: 10; padding-bottom: 100px; } #detail .certify-list::before{ content: ""; width: 100vw; height: calc(100% + 100px); background: #F5F5F5; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: -1; } #detail .certify-list li{ width: calc((100% - 50px) / 3); margin-bottom: 0 !important; } #detail .certify-list li figure{ width: 100%; position: relative; overflow: hidden; background: #fff; border: 1px solid #DDD; padding-bottom: 143%; margin-bottom: -5px; } #detail .certify-list li figure img{ max-width: calc(100% - 40px); max-height: calc(100% - 40px); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #detail #write .squre-title, #detail #certify .squre-title{ margin-bottom: 30px; } #detail #table .squre-title{ margin-bottom: 50px; } #detail #certify{ overflow: hidden; } #detail #certify .figure{ margin-bottom: 120px; } #detail #certify .table-box colgroup col:nth-of-type(1){ width: 13%; } #detail #certify .table-box tbody td{ text-align: left; padding: 20px 40px; } #detail #certify .table-box tbody td ul{ padding-left: 10px; } #detail #certify .table-box tbody td ul li{ font-weight: 400; color: #111; padding-left: 15px; position: relative; } #detail #certify .table-box tbody td ul li::before{ content: ""; width: 3px; height: 3px; background: #111; border-radius: 50%; position: absolute; top: 11px; left: 0; } #detail #certify .gray-bg{ background: #F5F5F5; padding: 145px 0; margin-top: 145px; position: relative; } #detail #certify .gray-bg::after{ content: ""; width: 100vw; height: 100%; background: #F5F5F5; position: absolute; top: 50%; left: 50%; z-index: -1; transform: translate(-50%, -50%); } #detail #certify .gray-bg ul{ display: flex; flex-wrap: wrap; margin-bottom: -70px; } #detail #certify .gray-bg ul li{ width: calc((100% - 50px) / 3); margin-right: 25px; margin-bottom: 70px; } #detail #certify .gray-bg ul li:nth-of-type(3n){ margin-right: 0; } #detail #certify .gray-bg ul li figure{ width: 100%; position: relative; overflow: hidden; border: 1px solid #DDD; background: #fff; padding-bottom: 142%; } #detail #certify .gray-bg ul li figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #detail #certify .gray-bg ul li p{ font-size: 2.4rem; font-weight: 600; text-align: center; margin-top: 20px; } #detail .more{ padding-top: 100px; } #detail .more .flex-box{ justify-content: space-between; align-items: center; } #detail .more .btn-box{ display: flex; } #detail .more .btn-box button:first-of-type{ margin-right: 7px; } #detail .more .btn-box button{ width: 50px; height: 50px; background: #fff; border: 1px solid #DDD; border-radius: 50%; transition: all 0.3s; } #detail .more .btn-box button img{ transition: all 0.3s; } #detail .more .btn-box button:hover{ background: #111; } #detail .more .btn-box button:hover img{ filter: invert(1); } #detail .more .squre-title{ margin-bottom: 0; } #detail .more .relation-wrap{ margin-top: 50px; } #detail .more .relation-wrap .slick-list{ margin-right: -20px; } #detail .more .relation-wrap .slick-track{ margin: 0; } #detail .more .relation{ margin-right: 20px; position: relative; } #detail .more .relation figure{ width: 100%; position: relative; background: #F5F5F5; overflow: hidden; padding-bottom: 103%; border-radius: 10px; margin-bottom: -5px; } #detail .more .relation figure img{ max-width: calc(100% - 60px); max-height: calc(100% - 60px); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 0.5s; mix-blend-mode: darken; } #detail .more .relation p{ font-size: 2rem; font-weight: 600; text-align: center; letter-spacing: -0.02em; line-height: 1.5; margin-top: 20px; } #detail .more .relation a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 20; } #detail .more .relation:hover img{ transform: translate(-50%, -50%) scale(1.1); } @media screen and (max-width: 1500px){ #detail .detail-top .figure > ul li a{ font-size: 1.8rem; } #detail .detail-top .text .title{ margin-bottom: 40px; } #detail .detail-top .text .title p{ font-size: 2.2rem; } #detail .detail-top .text .title h3{ font-size: 5rem; } #detail .detail-top .text .dl dl:not(:last-of-type){ margin-bottom: 50px; } #detail .detail-top .text dl dt{ font-size: 2.2rem; } #detail .detail-menu ul li a{ padding: 20px 45px; } #detail .detail-menu ul li a::before{ width: calc(100% - 90px); } #detail .detail-wrap section{ padding: 70px 0 100px; } #detail #certify .gray-bg ul li p{ font-size: 2.2rem; } #detail .more{ padding-top: 70px; } #detail .more .relation p{ font-size: 1.8rem; margin-top: 10px; } } @media screen and (max-width: 1300px){ #detail .detail-top .figure{ padding-right: 60px; } } @media screen and (max-width: 1250px){ #detail .view-list{ padding: 25px 0; } #detail .view-list a{ font-size: 1.7rem; } #detail .view-list span{ width: 35px; height: 35px; margin-right: 10px; } #detail .detail-top{ padding-bottom: 60px; } #detail .detail-top .figure > ul li a{ font-size: 1.7rem; padding: 12px; } #detail .detail-top .text{ padding-top: 20px; } #detail .detail-top .text .title p{ font-size: 2rem; } #detail .detail-top .text .title h3{ font-size: 4rem; } #detail .detail-top .text dl dt{ font-size: 2rem; } #detail .detail-menu ul li a{ font-size: 1.7rem; padding: 15px 40px; } #detail .detail-menu ul li a::before{ width: calc(100% - 80px); } #detail .detail-wrap section{ padding: 60px 0; } #detail .table-box tbody th{ font-size: 1.7rem; } #detail section .article:not(:last-of-type){ margin-bottom: 80px; } #detail section .article .section:not(:last-of-type){ margin-bottom: 50px; } #detail .table-box{ overflow-x: scroll; } #detail .table-box table{ width: 1250px; } #detail .table-box img{ max-width: 1250px; } /* 인증서 리스트 */ #detail .certify-list{ padding-bottom: 60px; } #detail #property ul li{ width: calc((100% - 80px) / 3); } #detail #property ul li:nth-of-type(5n){ margin-right: 40px; } #detail #property ul li:nth-of-type(3n){ margin-right: 0; } #detail #certify .figure{ margin-bottom: 80px; } #detail #certify .table-box tbody td ul li::before{ top: 8px; } #detail #certify .table-box tbody td{ padding: 15px 25px; } #detail #certify .gray-bg{ padding: 100px 0; margin-top: 100px; } #detail #certify .gray-bg ul{ margin-bottom: -40px; } #detail #certify .gray-bg ul li{ margin-bottom: 40px; } #detail #certify .gray-bg ul li p{ font-size: 2rem; margin-top: 10px; } #detail .more{ padding-top: 60px; } #detail .more .relation-wrap{ margin-top: 30px; } #detail .more .btn-box button{ width: 45px; height: 45px; } #detail .more .relation p{ font-size: 1.7rem; } } @media screen and (max-width: 1200px){ #detail .detail-menu{ top: 58px; } } @media screen and (max-width: 1000px){ #detail .detail-top .flex-box{ flex-direction: column; align-items: center; } #detail .detail-top .flex-box > div{ width: 100%; } #detail .detail-top .figure{ max-width: 600px; padding-right: 0; } #detail .detail-top .text{ padding-top: 40px; } /* 인증서 리스트 */ #detail .certify-list{ gap: 20px; } #detail .certify-list li{ width: calc((100% - 20px) / 2); } #detail #certify .gray-bg ul li{ width: calc((100% - 25px) / 2); } #detail #certify .gray-bg ul li:nth-of-type(3n){ margin-right: 25px; } #detail #certify .gray-bg ul li:nth-of-type(2n){ margin-right: 0; } } @media screen and (max-width: 900px){ #detail .detail-top .figure > ul{ margin-top: 5px; } #detail .detail-top .figure > ul li a{ font-size: 1.6rem; } #detail .detail-top .text .title{ margin-bottom: 30px; } #detail .detail-top .text .title p{ font-size: 1.6rem; margin-bottom: 5px; } #detail .detail-top .text .title h3{ font-size: 3rem; } #detail .detail-top .text dl dt{ font-size: 1.8rem; margin-bottom: 10px; } #detail .detail-top .text dl dd p:not(:last-of-type){ margin-bottom: 10px; } #detail .detail-menu ul li a{ font-size: 1.6rem; padding: 13px 25px; } #detail .detail-menu ul li a::before{ width: calc(100% - 50px); } #detail section{ font-size: 1.6rem; } #detail section .article.blockBox { flex-direction: column;} #detail .margin40{ margin: 20px 0; } #detail .section > ul li:not(:last-of-type){ margin-bottom: 10px; } #detail .table-box thead th, #detail .table-box thead td, #detail .table-box tbody th, #detail .table-box tbody tr td{ font-size: 1.5rem; } #detail .table-box thead th:not(.left){ padding: 10px 5px; } #detail #certify .gray-bg{ padding: 60px 0; margin-top: 60px; } #detail #certify .gray-bg ul li p{ font-size: 1.8rem; margin-top: 5px; } #detail .more .relation p{ font-size: 1.6rem; } } /* 적용실적 */ .thumbnail-list ul li figure{ padding-bottom: 77%; } .thumbnail-list ul li h5{ margin-top: 25px; } .thumbnail-list ul li h5 span{ font-weight: 200; } .thumbnail-list ul li h5 span::before{ content: "- "; } .apply_industrial {margin-top:80px;} .apply_industrial .itemBox{} .apply_industrial .itemBox .squre-title {display:flex; align-items: center; gap: 30px; justify-content: space-between;} .apply_industrial .itemBox .squre-title .linkBtn { padding: 15px 20px; background: #00387F; border-radius: 7px;} .apply_industrial .itemBox .squre-title .linkBtn a { display: flex; gap: 42px; justify-content: space-between; align-items: center;color:#fff; font-size:1.7rem; font-weight:400; text-align:left;} .apply_industrial .itemBox:not(:last-of-type) {padding-bottom:155px;} .apply_industrial .itemBox .listBox {display: flex; justify-content: space-between; flex-wrap: wrap;} .apply_industrial .itemBox ul {display: grid; grid-template-columns: repeat(6, 1fr); width:100%; gap:20px;} .apply_industrial .itemBox ul li {display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 20px; height:230px; padding:30px; background: #fff; border: 1px #dbdbdb solid;} .apply_industrial .itemBox ul li figure { display: flex; align-content: center; justify-content: center; align-items: center; width:100px; height:100px;} .apply_industrial .itemBox ul li figure img { max-width: 100px; max-height: 100px;} .apply_industrial .itemBox ul li p {font-size:2.0rem; font-weight:600; color:#222; text-align:center;} .apply_industrial .dataBox{} .apply_industrial .dataBox ul { width: 100%; display: flex; justify-content: space-between; gap:20px;} .apply_industrial .dataBox ul li { display: flex; flex-wrap: wrap; align-items: center; position: relative;} .apply_industrial .dataBox ul li figure { width: 100%; position: relative; overflow: hidden; border-radius:15px;} .apply_industrial .dataBox ul li:hover img {transform: translate(0%, 0%) scale(1.1); transition: all 0.5s;} .apply_industrial .dataBox ul li img { } .apply_industrial .dataBox ul li p { position: absolute; left: 30px; bottom: 30px;font-size: 2.5rem; font-weight: 700; color: #fff; text-align: left;} .apply_industrial .dataBox ul li a { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 20;} @media screen and (max-width: 1400px){ .apply_industrial .dataBox ul {display: grid; grid-template-columns: repeat(4, 1fr);} .apply_industrial .itemBox .squre-title .linkBtn { padding: 13px 15px; } .apply_industrial .itemBox .squre-title .linkBtn a { gap: 30px; } } @media screen and (max-width: 1250px){ .thumbnail-list ul li h5{ margin-top: 20px; } .apply_industrial .itemBox ul {display: grid; grid-template-columns: repeat(5, 1fr);} .apply_industrial .itemBox .squre-title .linkBtn a { font-size:1.6rem; gap: 20px; } } @media screen and (max-width: 900px){ .thumbnail-list ul li h5{ margin-top: 10px; } .apply_industrial .itemBox ul {display: grid; grid-template-columns: repeat(4, 1fr);} .apply_industrial .dataBox ul {display: grid; grid-template-columns: repeat(2, 1fr);} } @media screen and (max-width: 720px){ .apply_industrial .itemBox ul {display: grid; grid-template-columns: repeat(3, 1fr);} } @media screen and (max-width: 600px){ .apply_industrial .itemBox ul li figure img { max-width: 80px; max-height: 80px;} .apply_industrial .itemBox ul li p {font-size:1.7rem;} } @media screen and (max-width: 540px){ .apply_industrial .itemBox ul {display: grid; grid-template-columns: repeat(3, 1fr);} .apply_industrial .itemBox ul li {height: 180px; padding:10px;} .apply_industrial .itemBox ul li img {max-width:70px; max-height:70px;} } /* 연구개발 - R&D 센터 */ #rnd{ overflow: hidden; } #rnd section:not(:last-of-type){ padding-bottom: 150px; } #rnd .page-title{ margin-bottom: 15px; } #rnd .squre-title{ margin-bottom: 20px; } #rnd section > p{ font-size: 1.8rem; font-weight: 200; color: #777; line-height: 1.8; } #rnd .margin-top{ margin-top: 50px; } #rnd section.top{ padding-bottom: 130px; } #rnd .top > p{ text-align: center; } #rnd .top .figure{ margin-top: 95px; } #rnd .roadmap ul{ display: flex; } #rnd .roadmap ul li{ width: calc((100% - 75px) / 4); margin-right: 25px; } #rnd .roadmap ul li:nth-of-type(4n){ margin-right: 0; } #rnd .roadmap ul li .title{ padding: 10px 0; padding-right: 52px; position: relative; } #rnd .roadmap ul li .title::after{ content: ""; width: 62px; height: 100%; background: url("/img/sub/rnd/rnd_after.svg") no-repeat center left / contain; position: absolute; top: 50%; right: 0; transform: translateY(-50%); } #rnd .roadmap ul li .title p{ display: flex; justify-content: center; align-items: center; font-size: 2.6rem; font-weight: 700; color: #fff; letter-spacing: -0.02em; background: var(--mainColor); border-radius: 10px; padding: 20px; } #rnd .roadmap ul li .title p span{ display: inline-block; font-size: 4rem; margin-left: 10px; } #rnd .roadmap ul li dl{ margin-top: 60px; } #rnd .roadmap ul li dt{ font-size: 3rem; font-weight: 700; color: #000; line-height: 1.1; margin-bottom: 25px; } #rnd .roadmap ul li dt span{ display: inline-block; width: 100%; font-size: 1.8rem; font-weight: 500; color: var(--mainColor); } #rnd .roadmap ul li dd{ font-size: 1.8rem; font-weight: 200; color: #777; line-height: 1.6; } #rnd .future ul{ display: flex; margin-bottom: -20px; } #rnd .future ul li{ width: calc((100% - 40px) / 2); margin-right: 40px; margin-bottom: 20px; text-align: center; } #rnd .future ul li:nth-of-type(2n){ margin-right: 0; } #rnd .future ul li figure{ width: 100%; border: 1px solid #DDD; } #rnd .future ul li p{ font-size: 2.4rem; font-weight: 700; letter-spacing: -0.02em; margin-top: 25px; } #rnd .group .flex-box{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; } #rnd .group .box dl{ text-align: center; } #rnd .group .box dl *{ font-size: 2.4rem; font-weight: 700; letter-spacing: -0.02em; } #rnd .group .box dl dt{ max-width: 100%; width: 290px; color: #fff; background: var(--mainColor); padding: 25px; border-radius: 10px; margin: 0 auto; } #rnd .group .box ul{ display: flex; justify-content: space-between; gap: 10px; padding-top: 50px; position: relative; } #rnd .group .box ul::before{ content: ""; width: 1px; height: 25px; border-left: 1px dashed #000; position: absolute; top: 0; left: 50%; transform: translateX(-50%); } #rnd .group .box ul::after{ content: ""; width: calc(100% - 90px); height: 1px; border-top: 1px dashed var(--mainColor); position: absolute; top: 25px; left: 50%; transform: translateX(-50%); } #rnd .group .box ul li{ width: 90px; min-height: 300px; display: flex; justify-content: center; align-items: center; border: 3px solid var(--mainColor); border-radius: 10px; color: var(--mainColor); writing-mode: vertical-lr; text-orientation: upright; padding: 25px 0; position: relative; } #rnd .group .box ul li::before{ content: ""; width: 1px; height: 25px; border-left: 1px dashed #000; position: absolute; top: 0; transform: translateY(-100%); } #rnd .people ul{ display: flex; flex-wrap: wrap; margin-bottom: -27px; } #rnd .people ul li{ width: calc((100% - 81px) / 4); margin-right: 27px; margin-bottom: 27px; position: relative; padding-bottom: calc((100% - 81px) / 4); background: #F5F5F5; border-radius: 50%; } #rnd .people ul li:nth-of-type(4n){ margin-right: 0; } #rnd .people dl{ position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); text-align: center; padding: 0 30px; } #rnd .people dl dt{ font-size: 3.5rem; font-weight: 700; color: var(--mainColor); letter-spacing: -0.02em; margin-bottom: 35px; } #rnd .people dl dd{ width: 100%; display: flex; justify-content: center; align-items: center; min-height: 3.9em; font-size: 1.8rem; font-weight: 400; letter-spacing: -0.02em; } #rnd .people .table-box{ margin-top: 90px; position: relative; } #rnd .people .table-box table thead{ position: static; } #rnd .people .table-box tr th, #rnd .people .table-box tr td{ padding: 25px 20px; } #rnd .people .table-box tr th:last-of-type{ border-right: none; } #rnd .people .table-box tr td:first-of-type{ border-left: none; } @media screen and (max-width: 1500px){ #rnd .top .figure{ margin-top: 60px; } #rnd .roadmap ul li .title p{ font-size: 2.4rem; } #rnd .roadmap ul li .title p span{ font-size: 3.7rem; } #rnd .roadmap ul li dl{ margin-top: 30px; } #rnd .roadmap ul li dt{ font-size: 2.5rem; } #rnd .roadmap ul li dt span{ font-size: 1.7rem; } #rnd .future ul li p{ font-size: 2.2rem; } #rnd .group .box dl *{ font-size: 2.2rem; } #rnd .group .box dl dt{ max-width: 230px; padding: 15px 20px; } #rnd .group .flex-box{ justify-content: center; gap: 60px 100px; } #rnd .group .box ul::after{ width: calc(100% - 70px); } #rnd .group .box ul li{ width: 70px; } #rnd .people dl dt{ font-size: 3rem; margin-bottom: 20px; } #rnd .people dl dd{ font-size: 1.7rem; } #rnd .people .table-box{ margin-top: 60px; } #rnd .people .table-box tr th, #rnd .people .table-box tr td{ padding: 20px 15px; } } @media screen and (max-width: 1250px){ #rnd section:not(:last-of-type){ padding-bottom: 100px; } #rnd section > p{ font-size: 1.7rem; } #rnd .margin-top{ margin-top: 30px; } #rnd .top .figure{ margin-top: 30px; } #rnd .roadmap ul li .title{ padding-right: 45px; } #rnd .roadmap ul li .title::after{ width: 55px; } #rnd .roadmap ul li .title p{ font-size: 2.2rem; } #rnd .roadmap ul li .title p span{ font-size: 3rem; } #rnd .roadmap ul li dt{ font-size: 2.2rem; margin-bottom: 10px; } #rnd .roadmap ul li dd{ font-size: 1.7rem; } #rnd .future ul li p{ font-size: 2rem; margin-top: 10px; } #rnd .group .box dl *{ font-size: 2rem; } #rnd .group .box ul li{ min-height: 250px; } #rnd .people dl dt{ font-size: 2.5rem; } #rnd .people .table-box{ margin-top: 60px; } #rnd .people .table-box tr th, #rnd .people .table-box tr td{ padding: 15px 10px; } } @media screen and (max-width: 1100px){ #rnd .top br{ display: none; } #rnd .roadmap ul{ flex-wrap: wrap; margin-bottom: -60px; } #rnd .roadmap ul li{ width: calc((100% - 25px) / 2); margin-bottom: 60px; } #rnd .roadmap ul li:nth-of-type(2n){ margin-right: 0; } #rnd .roadmap ul li dl{ margin-top: 20px; } #rnd .future ul li{ width: calc((100% - 20px) / 2); margin-right: 20px; } } @media screen and (max-width: 1050px){ #rnd .future br{ display: none; } #rnd .people ul{ justify-content: center; } #rnd .people ul li{ width: 330px; padding-bottom: 330px; } #rnd .people ul li:nth-of-type(2n){ margin-right: 0; } } @media screen and (max-width: 900px){ #rnd section:not(:last-of-type){ padding-bottom: 70px; } #rnd section > p{ font-size: 1.6rem; } #rnd .roadmap ul li .title p{ font-size: 2.2rem; } #rnd .roadmap ul li .title p span{ font-size: 2.7rem; } #rnd .roadmap ul li dt{ font-size: 2rem; } #rnd .roadmap ul li dt span{ font-size: 1.6rem; } #rnd .roadmap ul li dd{ font-size: 1.6rem; } #rnd .future ul li p{ font-size: 1.8rem; } #rnd .group .box dl *{ font-size: 1.8rem; } #rnd .group .box dl dt{ max-width: 185px; padding: 10px; } #rnd .group .box ul::after{ width: calc(100% - 55px); } #rnd .group .box ul li{ width: 55px; min-height: 230px; } #rnd .people ul{ max-width: 600px; margin: 30px auto 0; } #rnd .people ul li{ width: calc((100% - 27px) / 2); padding-bottom: calc((100% - 27px) / 2); } #rnd .people dl dt{ font-size: 2.2rem; margin-bottom: 5px; } #rnd .people .table-box{ margin-top: 30px; } #rnd .people .table-box tr th, #rnd .people .table-box tr td{ padding: 10px 5px; } } @media screen and (max-width: 650px){ #rnd .roadmap ul{ margin-bottom: -40px; } #rnd .roadmap ul li{ width: 100%; margin-right: 0; margin-bottom: 40px; transition-delay: unset !important; } #rnd .roadmap ul li .title{ padding-right: 30px; } #rnd .roadmap ul li .title::after{ width: 41px; } #rnd .roadmap ul li .title p{ padding: 10px; } #rnd .roadmap ul li dl{ margin-top: 10px; } #rnd .future ul{ flex-wrap: wrap; margin-bottom: -30px; } #rnd .future ul li{ width: 100%; margin-right: 0; margin-bottom: 30px; } } /* 연구개발 - 연구성과, 국책과제, 보유 특허 */ #list .filter-box{ display: flex; justify-content: space-between; margin-bottom: 30px; position: relative; z-index: 10; } #list .filter{ width: 300px; margin-right: 10px; } #list .filter .selectric-select *{ font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; color: #111; } #list .filter .selectric{ height: 70px; background: var(--mainColor); border-radius: 10px; border: none; } #list .filter .selectric .label{ height: 100%; display: flex; align-items: center; margin: 0; padding-left: 40px; padding-right: 60px; color: #fff; } #list .filter .selectric .button{ width: 60px; height: 100%; } #list .filter .selectric .button::after{ width: 100%; height: 100%; background: var(--mainColor) url("/img/sub/rnd/select_white.svg") no-repeat center center / auto; border: none; } #list .filter .selectric-items{ background: #fff; border: none; border-radius: 10px; overflow: hidden; top: calc(100% + 1px); } #list .filter .selectric-items li{ font-weight: 400; } #list .filter .selectric-items li:not(:last-of-type){ border-bottom: 1px solid #fff; } #list .filter .selectric-items li.highlighted, #list .filter .selectric-items li:hover{ background: var(--mainColor); color: #fff; } #list .filter-box .search-box{ margin-bottom: 0; } #list .slide-list .box{ border-bottom: 1px solid #111; transition: background 0.5s; } #list .slide-list .box:first-of-type{ border-top: 1px solid #111; } #list .slide-list .box:hover{ background: #FAFAFA; border-bottom: 1px solid var(--mainColor); } #list .slide-list .title-box{ padding: 45px 30px; position: relative; cursor: pointer; } #list .slide-list .title-box .title { display:flex; gap:15px; align-items: center;} #list .slide-list .title-box h4{ width: calc(100% - 85px); font-size: 2.4rem; font-weight: 600; letter-spacing: -0.02em; transition: all 0.8s; } #list .slide-list .title-box p {font-size:20px; font-weight:500; } #list .slide-list .title-box p.type01{ color:#666; } #list .slide-list .title-box p.type02{ color:var(--mainColor);} #list .slide-list .title-box .button{ width: 65px; height: 65px; background: #EEE; border-radius: 50%; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); display: flex; justify-content: center; align-items: center; transition: all 0.5s; } #list .slide-list .title-box .button img{ position: relative; top: 0; filter: invert(0); transform: scaleY(1); transition: all 0.5s; } #list .certified colgroup col:nth-of-type(2) { width:15%;} #list .certified tr {vertical-align: baseline;} #list .certified td {padding:20px 0;} #list .certified td.certi {display: flex; flex-direction: row; justify-content: flex-start; align-items: center; flex-wrap: nowrap; } #list .certified td.certi p {width:26%; padding-left:10px;} #list .certified td.certi p span {font-weight:400;} #list .certified td.downBtn .icon{display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 20px; width: 150px; border-radius: 15px; text-align: center;} #list .certified td.downBtn .icon .item {display: flex; flex-direction: column;} #list .certified td.downBtn p { width: auto; font-size: 1.6rem;} #list .certified td.downBtn:hover p {color:#fff;} #list .slide-list .content-wrap{ display: none; } #list .slide-list .step-box{ padding: 10px 30px 40px; border-bottom: 1px solid rgba(0, 0, 0, 0.3); } #list .slide-list .step-box dl{ display: flex; justify-content: space-between; } #list .slide-list .step-box dl dt{ width: 90px; height: 35px; font-size: 1.6rem; font-weight: 600; color: #fff; letter-spacing: -0.02em; padding: 7px 0; background: #111; border-radius: 10px; text-align: center; } #list .slide-list .step-box dl dd{ width: calc(100% - 135px); padding-top: 4px; } #list .slide-list .step-box ul{ display: flex; flex-wrap: wrap; gap: 10px 30px; } #list .slide-list .step-box ul li{ font-size: 1.8rem; font-weight: 200; color: #777; letter-spacing: -0.02em; line-height: 1.5; } #list .slide-list .step-box ul li span{ font-weight: 600; color: #111; } #list .slide-list .content-box{ padding: 40px 30px; } #list .slide-list .box.active{ background: #F5F5F5; } #list .slide-list .box.active h4{ font-size: 3.5rem; } #list .slide-list .box.active .button{ background: var(--mainColor); } #list .slide-list .box.active .button img{ filter: invert(1); transform: scaleY(-1); top: -1px; } @media screen and (max-width: 1500px){ #list .filter{ width: 250px; } #list .filter .selectric{ height: 60px; } #list .filter .selectric-select *{ font-size: 1.8rem; } #list .slide-list .title-box{ padding: 40px 30px; } #list .slide-list .title-box h4{ font-size: 2.2rem; } #list .slide-list .title-box .button{ width: 60px; height: 60px; } #list .slide-list .content-box{ padding: 30px; } #list .slide-list .box.active h4{ font-size: 3rem; } } @media screen and (max-width: 1300px){ #list .certified td.certi { justify-content: flex-start; align-items: flex-start; flex-direction: column; padding-left:40px;} #list .certified td.certi p { width: 100%; padding-left:0;} } @media screen and (max-width: 1250px){ #list .filter-box{ margin-bottom: 15px; } #list .filter .selectric-select *{ font-size: 1.7rem; } #list .filter .selectric{ height: 55px; } #list .filter .selectric .label{ padding: 0 20px; } #list .slide-list .title-box{ padding: 30px 20px; } #list .slide-list .title-box h4{ /*width: calc(100% - 80px);*/ font-size: 2rem; } #list .slide-list .title-box .button{ width: 55px; height: 55px; } #list .slide-list .step-box{ padding: 10px 20px 30px; } #list .slide-list .step-box dl dd{ width: calc(100% - 110px); } #list .slide-list .step-box ul{ gap: 10px 20px; } #list .slide-list .step-box ul li{ font-size: 1.7rem; } #list .slide-list .content-box{ padding: 30px 20px; } #list .slide-list .box.active h4{ font-size: 2.8rem; } } @media screen and (max-width: 1000px){ #list .slide-list .step-box dl{ flex-direction: column; } #list .slide-list .step-box dl dt{ margin-bottom: 5px; } #list .slide-list .step-box dl dd{ width: 100%; } #list .certified td.certi {padding-left:20px;} #list .certified colgroup col:nth-of-type(2) { width: 10%;} #list .certified tr td:nth-of-type(1) { width: 78%;} #list .certified td.downBtn .icon { flex-direction: column; gap: 10px; width: 80px; height: 80px;} #list .certified td.certi h5 { white-space: break-spaces;overflow: hidden; word-wrap: break-word; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical;line-height: 1.5; -webkit-line-clamp: 2; word-break: break-all;} #list .certified td.downBtn p { font-size: 1.4rem;} } @media screen and (max-width: 960px){ #list .filter, #list .search-box .flex-box .selectric-select{ width: 200px; } } @media screen and (max-width: 900px){ #list .filter-box {flex-direction: column;} #list .filter .selectric{ height: 50px; } #list .search-box .flex-box{ flex-direction: column; align-items: flex-end; } #list .filter, #list .search-box .flex-box .selectric-select{ width: calc((100% - 10px) / 2); } #list .filter{ margin-right: 0; } #list .search-box .selectric-select{ margin-right: 0; margin-bottom: 10px; } #list .search-box .flex-box .input{ width: 100%; } #list .slide-list .title-box{ padding: 20px; } #list .slide-list .title-box h4{ /*width: calc(100% - 65px);*/ font-size: 1.8rem; } #list .slide-list .title-box .button{ width: 50px; height: 50px; } #list .slide-list .step-box{ padding: 10px 20px 20px; } #list .slide-list .step-box ul{ gap: 5px 20px; } #list .slide-list .step-box ul li{ font-size: 1.6rem; } #list .slide-list .step-box dl dt{ width: 80px; height: 30px; font-size: 1.5rem; } #list .slide-list .content-box{ padding: 20px; } #list .slide-list .box.active h4{ font-size: 2.3rem; } } @media screen and (max-width: 900px){ #list .filter{ position: absolute; top: 0; left: 0; z-index: 10; } #list .search-box{ width: 100%; } #list .search-box{} } @media screen and (max-width: 780px){ #list .slide-list .title-box .title { display: flex; gap: 5px; align-items: flex-start; flex-direction: column; } } @media screen and (max-width: 480px){ #list .certified td.certi { padding-left: 10px; } #list .certified tr td:nth-of-type(1) { width: 70%; } } /* 자료실 - 품질인증 */ #quality .tab-menu li{ display: flex; align-items: center; justify-content: center; width: calc(100% / 8); font-size: 1.7rem; padding: 20px 5px;} #quality .certificate { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; /* justify-content: space-between; */ gap: 20px; } #quality .certificate .Item {display: flex; flex-direction: column; align-items: center; gap: 20px; /* width: 23%; */ width: calc((100% - 60px) / 4);} #quality .certificate .Item .imgBox {width:auto; border:1px solid #f3f3f3;} #quality .certificate .txtBox {font-size: 2rem; font-weight: 600; text-transform: uppercase;} #quality .certificate .btnBox {padding:10px 20px; background:#00387F; border-radius: 10px;} #quality .certificate .btnBox a {display: flex; align-items: center; gap: 10px; color:#fff; font-size: 1.6rem; font-weight: 300; } #quality .certificate .btnBox a .item {display: flex; flex-direction: column;} #quality .certificate .btnBox a .item img { width:20px; filter: invert(1);} /* #quality .environment .squre-title h5 {margin-bottom:20px;} */ #environment .env_con .banner { display: flex; align-items: flex-end; background-image: url(/img/sub/reference/environment_img01.jpg); width: 100%; height: 350px; border-radius: 25px 25px 0 0;} #environment .env_con .banner .txtBox { position: relative;} #environment .env_con .banner .txtBox:before { position: absolute; content: ""; top: 30px; left: 40px; width: 20px; height: 3px; background: #fff; } #environment .env_con .banner p { padding: 40px; font-size: 2.3rem; font-weight: 500; color: #fff; line-height: 1.5;} #environment .env_con .itemBox {} #environment .env_con .itemBox .item {background: #f3f3f3; border-radius: 0 0 25px 25px; padding:30px;} #environment .env_con .itemBox .item ul { display: flex; flex-wrap: wrap; justify-content: flex-start; flex-direction: column; gap: 25px; } #environment .env_con .itemBox .item li { position: relative; font-size: 1.8rem; font-weight: 400; line-height: 1.3; padding-left:20px;} #environment .env_con .itemBox .item li:before { position: absolute; content: ""; top: 12px; left: 10px; width: 3px; height: 3px; background: #111;} #environment .env_con .itemBox .item .coment { position: relative; margin-top:40px; padding: 40px 0 10px 10px; } #environment .env_con .itemBox .item .coment:before { position: absolute; content: ""; top: 0px; left: 10px; width: 98%; height: 1px; background: #dbdbdb; } #environment .env_con .itemBox .item .coment p { font-size: 1.8rem; font-weight: 400; line-height: 1.7; word-break: keep-all;} #quality .squre-title { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;} #quality .squre-title h6 {font-size: 2rem; font-weight: 600; text-transform: uppercase; margin: 10px 0;} #quality .squre-title p { font-size: 1.8rem; font-weight: 200; color: #333; letter-spacing: -0.03em; line-height: 1.8; margin-bottom: 45px;} #quality .squre-title .linkBtn { padding: 15px 20px; background: #00387F; border-radius: 7px;} #quality .squre-title .linkBtn:hover {background: #00387F;} #quality .squre-title .linkBtn a { display: flex; gap: 42px; justify-content: space-between; align-items: center;color:#fff; font-size:1.7rem; font-weight:400; text-align:left;} #quality .table-title h5{font-size: 2rem; font-weight: 600; text-transform: uppercase; margin-bottom: 10px;} #quality .table-title h6{font-size: 2rem; font-weight: 600; text-transform: uppercase; margin-bottom: 10px;} #quality .duble { display: flex; flex-wrap: nowrap; gap: 40px;} #quality .duble .table-box{} #quality .quality-table {margin-bottom:80px;} #quality .section.lineBox {border-bottom:1px solid #ddd; margin-bottom:40px;} #quality .quality-table table {table-layout: inherit;} #quality .quality-table tr {position: relative;} #quality .quality-table tr th::before, #quality .quality-table tr th::after { content: ""; width: 100%; background: #ddd; position: absolute; left: 0;} #quality .quality-table tr th::before {top:0;} #quality .quality-table tr th::after {bottom:0;} #quality .quality-table tr th {background: #F5F5F5; border-right: 1px solid #DDD; border-bottom: 1px solid #ddd;} #quality .quality-table tr th, #quality .quality-table tr td {position: relative; padding:12px 15px; font-size:1.5rem; font-weight:400; text-align:center; border-bottom:1px solid #ddd;} #quality .quality-table tr th.none {border-bottom:none;} #quality .quality-table tr td.left {text-align:left;} #quality .quality-table tr td.justify {text-align: justify;} #quality .quality-table tr td:first-of-type { border-left: none;} #quality .quality-table tr td:last-of-type { border-right: none;} #quality .quality-table tr td a i {color:var(--mainColor);} /* 자료실 - 품질인증 (팝업) */ @media screen and (max-width: 1300px){ #quality .tab-menu li { width: calc(100% / 4);} #quality .tab-menu li:nth-of-type(5), #quality .tab-menu li:nth-of-type(6), #quality .tab-menu li:nth-of-type(7), #quality .tab-menu li:nth-of-type(8){border-top:none;} #quality .tab-menu li:nth-of-type(5) { border-left:1px solid #ddd;} } @media screen and (max-width: 1024px){ #quality.scroll .quality-table table {display: block;} #quality.scroll .quality-table tbody {overflow: scroll; display: block; width: auto; overflow-x: auto; white-space: nowrap;} #environment .env_con .banner p { font-size: 2.0rem; } #environment .env_con .banner p br { display:none; } #environment .env_con .itemBox .item { padding: 30px 10px;} #environment .env_con .itemBox .item li { font-size: 1.6rem; } #environment .env_con .itemBox .item .coment p { font-size: 1.6rem; } } @media screen and (max-width: 800px){ #quality .certificate .Item { /* width: 30%; */ width: calc((100% - 40px) / 3); } } @media screen and (max-width: 720px){ #quality .tab-menu li { width: calc(100% / 3); font-size:1.5rem;} #quality .tab-menu li:nth-of-type(4){border-top:none;} #quality .tab-menu li:nth-of-type(4), #quality .tab-menu li:nth-of-type(7){ border-left:1px solid #ddd;} #quality .tab-menu li:nth-of-type(5){ border-left:none;} } @media screen and (max-width: 540px){ #quality .certificate .Item { /* width: 46%; */ width: calc((100% - 20px) / 2); } } @media screen and (max-width: 500px){ #quality .tab-menu li { font-size:1.4rem;} } #popup .figure-box{ max-width: 450px; width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } #popup .figure-box figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: 141%; } #popup .figure-box figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } @media screen and (max-width: 1500px){ #popup .figure-box{ max-width: 400px; } } @media screen and (max-width: 1000px){ #popup .figure-box{ max-width: 350px; } } @media screen and (max-width: 800px){ #popup .figure-box{ width: 80%; } } /* 승인자료 */ #approval {} #approval .tab-menu li {display: flex; align-items: center; justify-content: center; width: calc(100% / 3); font-size: 1.7rem; padding: 20px 5px;} #approval form { margin-bottom:40px;} #approval form.flex {display:flex; flex-direction: row-reverse;} #approval form.flex .search-box { grid-template-columns: repeat(3, 1fr);} #approval .search-box { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; width: 100%; max-width: 1400px; flex-direction: row; margin: 0 auto; margin-bottom: 20px; } #approval .search-box * { font-family: var(--baseFont); font-size: 1.8rem; font-weight: 200; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 38px;} #approval .search-box tr {} #approval .search-box td {} #approval .search-box td select { width:100%; height:60px; background:#fff; padding:5px 20px 5px 20px; border: 1px solid #DDD; border-radius:10px; outline:none; background: url('/img/sub/search_arrow.svg') no-repeat center right 10px / auto; -o-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none;} #approval .search-box td.bg select {background-color:#00387f17; border: none;} #approval .search-box td select.bg{background-color:#00387f17; border: none;} #approval .search-box td select option {padding: 3px 0;} #approval .approval-table .coment td {border-bottom:none;} #approval .approval-table .coment td .br {display:none;} #approval .btnBox ul { display: flex; gap: 20px; justify-content: flex-end;} #approval .btnBox ul li {display: flex; align-items: center; justify-content: center; gap: 10px; width: 120px; background: #f3f3f3; border-radius: 10px; color: #000; font-size: 1.5rem;} #approval .btnBox ul li label { display: flex; gap:10px; -ms-user-select: none; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; user-select: none;} #approval .btnBox ul li.button a { display: flex; justify-content: center; align-items: center; width: 100%; height: 60px; color: #fff; background: var(--mainColor); border-radius: 10px;} #approval .approval-table { margin-top:40px;} #approval .approval-table #layer3.servo { margin-bottom: 40px;} #approval .approval-table h5 { font-size:1.8rem; font-weight:600; margin-bottom:10px;} #approval .approval-table table { table-layout: inherit;} #approval .approval-table table tr { position: relative; min-width: 1720px;} #approval .approval-table table th, #approval .approval-table table td { position: relative; padding: 12px 5px; font-size: 1.5rem; text-align: center; border-bottom: 1px solid #ddd;} #approval .approval-table table th { font-weight: 400; background: #F5F5F5; border-right: 1px solid #DDD;} #approval .approval-table table td { font-weight: 300; word-wrap: break-word;} #approval .approval-table table tr > *:last-child{ border-right: none; } #approval .approval-table tr td a i {color: var(--mainColor);} #approval .approval-table table td:first-of-type { border-left: none;} #approval .approval-table table td.download div{ display: grid; gap:5px; grid-template-columns: repeat(3, 1fr); justify-items: center; } #approval .approval-table table td a { display: flex; align-items: center; flex-wrap: wrap; flex-direction: row; justify-content: center; width:100px;} #approval .approval-table table td a.w130 {width:130px;} #approval .approval-table table td a.btn {padding:5px 10px; background:#191919; color:#fff; border-radius:5px;} #approval .approval-table table td a:hover p {color:#000; text-decoration: underline;} #approval .approval-table table td a.btn:hover p { color:#fff; text-decoration: none;} @media screen and (max-width: 1700px){ #approval .approval-table .general table { display: flex; justify-content: center;} #approval .approval-table .general tbody {overflow-x: scroll; display: block; width: auto; overflow-x: auto; white-space: nowrap;} } @media screen and (max-width: 1400px){ #approval .search-box { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%;} #approval .btnBox { margin-left: 3%;} } @media screen and (max-width: 1100px){ #approval .coment .br {display:block;} } @media screen and (max-width: 800px){ #approval .search-box { display: grid; grid-template-columns: repeat(3, 1fr);} #approval .approval-table .servo table { display: flex; justify-content: center;} #approval .approval-table .servo tbody {overflow: scroll; display: block; width: auto; overflow-x: auto; white-space: nowrap;} } @media screen and (max-width: 500px){ #approval .search-box * { font-size: 1.6rem;} #approval .search-box { gap:10px;} #approval .approval-table .coment td {font-size:1.4rem;} } /* 자료실 - 카다로그 */ #catalog .tab-menu li{ width: calc(100% / 5);} #catalog .techFilter { display: flex; justify-content: space-between; position: relative; z-index: 9999;} #catalog .filter{ width: 300px; margin-right: 10px; } #catalog .filter .selectric-select *{ font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; color: #111; } #catalog .filter .selectric{ height: 60px; background: var(--mainColor); border-radius: 10px; border: none; } #catalog .filter .selectric .label{ height: 100%; display: flex; align-items: center; margin: 0; padding-left: 40px; padding-right: 60px; color: #fff; } #catalog .filter .selectric .button{ width: 60px; height: 100%; } #catalog .filter .selectric .button::after{ width: 100%; height: 100%; background: var(--mainColor) url("/img/sub/rnd/select_white.svg") no-repeat center center / auto; border: none; } #catalog .filter .selectric-items{ background: #fff; border: none; border-radius: 10px; overflow: hidden; top: calc(100% + 1px); } #catalog .filter .selectric-items li{ font-weight: 400; } #catalog .filter .selectric-items li:not(:last-of-type){ border-bottom: 1px solid #fff; } #catalog .filter .selectric-items li.highlighted, #list .filter .selectric-items li:hover{ background: var(--mainColor); color: #fff; } @media screen and (max-width: 1500px){ #catalog .filter{ width: 250px; } #catalog .filter .selectric-select *{ font-size: 1.8rem; } } @media screen and (max-width: 1250px){ #catalog .filter .selectric{ height: 55px; } #catalog .filter .selectric-select *{ font-size: 1.7rem; } #catalog .filter .selectric .label{ padding: 0 20px; } } @media screen and (max-width: 1200px){ #catalog .tab-menu li{ width: calc(100% / 4); } #catalog .tab-menu li:nth-of-type(5){ border-left: 1px solid #DDD; } #catalog .tab-menu li:nth-of-type(5), #catalog .tab-menu li:nth-of-type(6), #catalog .tab-menu li:nth-of-type(7){ border-top: none; } } @media screen and (max-width: 970px){ #catalog .filter, #catalog .search-box .flex-box .selectric-select{ width: 200px; } } @media screen and (max-width: 900px){ #catalog .techFilter{flex-direction: column; } #catalog .techFilter .filter-box{ position: relative; z-index: 10; } #catalog .filter .selectric{ height: 50px; } #catalog .search-box .flex-box{ width: 100%; flex-direction: column; align-items: flex-end; } #catalog .filter, #catalog .search-box .flex-box .selectric-select{ width: calc((100% - 10px) / 2); } #catalog .filter{ margin-right: 0; position: absolute; top: 0; left: 0; z-index: 10; } #catalog .search-box .selectric-select{ margin-right: 0; margin-bottom: 10px; } #catalog .search-box .flex-box .input{ width: 100%; } } @media screen and (max-width: 700px){ #catalog .tab-menu li{ width: calc(100% / 2); display: flex; flex-wrap: wrap; align-items: center; justify-content: center;} #catalog .tab-menu li:nth-of-type(4){ border-top: none; } #catalog .tab-menu li:nth-of-type(3), #catalog .tab-menu li:nth-of-type(7){ border-left: 1px solid #DDD; } } /* 자료실 - 기술자료 */ #technique.sub-content{ padding-top: 0; } #technique #product .w1400{ padding-top: 0; } #technique #product .gray-bg .filter ul li{ width: calc((100% - 14px) / 3); margin-right: 7px; } #technique #product .gray-bg .filter ul li:nth-of-type(3n){ margin-right: 0; } #technique .tab-menu li{ width: calc(100% / 5); display: flex; flex-wrap: wrap; align-items: center; justify-content: center;} #technique .techFilter { display: flex; justify-content: space-between; position: relative; z-index: 9999;} #technique .filter{ width: 300px; margin-right: 10px; } #technique .filter .selectric-select *{ font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; color: #111; } #technique .filter .selectric{ height: 60px; background: var(--mainColor); border-radius: 10px; border: none; } #technique .filter .selectric .label{ height: 100%; display: flex; align-items: center; margin: 0; padding-left: 40px; padding-right: 60px; color: #fff; } #technique .filter .selectric .button{ width: 60px; height: 100%; } #technique .filter .selectric .button::after{ width: 100%; height: 100%; background: var(--mainColor) url("/img/sub/rnd/select_white.svg") no-repeat center center / auto; border: none; } #technique .filter .selectric-items{ background: #fff; border: none; border-radius: 10px; overflow: hidden; top: calc(100% + 1px); } #technique .filter .selectric-items li{ font-weight: 400; } #technique .filter .selectric-items li:not(:last-of-type){ border-bottom: 1px solid #fff; } #technique .filter .selectric-items li.highlighted, #list .filter .selectric-items li:hover{ background: var(--mainColor); color: #fff; } @media screen and (max-width: 1500px){ #technique .filter{ width: 250px; } #technique .filter .selectric-select *{ font-size: 1.8rem; } } @media screen and (max-width: 1250px){ #technique .filter .selectric{ height: 55px; } #technique .filter .selectric-select *{ font-size: 1.7rem; } #technique .filter .selectric .label{ padding: 0 20px; } } @media screen and (max-width: 970px){ #technique .filter, #technique .search-box .flex-box .selectric-select{ width: 200px; } } @media screen and (max-width: 900px){ #technique .techFilter{flex-direction: column; } #technique .techFilter .filter-box{ position: relative; z-index: 10; } #technique .filter .selectric{ height: 50px; } #technique .search-box .flex-box{ width: 100%; flex-direction: column; align-items: flex-end; } #technique .filter, #technique .search-box .flex-box .selectric-select{ width: calc((100% - 10px) / 2); } #technique .filter{ margin-right: 0; position: absolute; top: 0; left: 0; z-index: 10; } #technique .search-box .selectric-select{ margin-right: 0; margin-bottom: 10px; } #technique .search-box .flex-box .input{ width: 100%; } } @media screen and (max-width: 700px){ #technique #product .gray-bg .filter ul li{ width: calc((100% - 7px) / 2); } #technique #product .gray-bg .filter ul li:nth-of-type(3n){ margin-right: 7px; } #technique #product .gray-bg .filter ul li:nth-of-type(2n){ margin-right: 0; } } /* 고객지원 - 고객상담 */ #counsel .policy-box{ margin-bottom: 100px; } #counsel .policy-box table{ position: relative; } #counsel .policy-box table::before{ content: ""; width: 100%; height: 1px; background: #000; position: absolute; top: 0; left: 0; } #counsel .policy-box table th, #counsel .policy-box table td{ padding: 20px; } #counsel .policy-box table th{ font-size: 2rem; font-weight: 600; border-right: 1px solid #DDD; } #counsel .policy-box table td{ text-align: center; font-size: 1.8rem; font-weight: 200; color: #777; border: 1px solid #DDD; } #counsel .policy-box table td:first-of-type{ border-left: none; } #counsel .policy-box table th:last-of-type, #counsel .policy-box table td:last-of-type{ border-right: none; } #counsel .agree{ margin-top: 25px; } #counsel .agree input{ display: none; } #counsel .agree label{ display: inline-block; font-size: 1.8rem; font-weight: 600; padding-left: 45px; position: relative; cursor: pointer; } #counsel .agree label::before{ content: ""; width: 25px; height: 25px; border: 1px solid #DDD; border-radius: 5px; position: absolute; top: 49%; left: 10px; transform: translateY(-50%); } #counsel .agree input:checked + label::before{ border: 1px solid #111; } #counsel .agree input:checked + label::after{ content:"\e928"; font-family:'xeicon'; font-weight: normal; font-style: normal; position: absolute; top: 50%; left: 15px; transform: translateY(-50%); } #counsel .form-box table tr{ border-bottom: 1px solid #DDD; } #counsel .form-box table tr:first-of-type{ border-top: 1px solid #DDD; } #counsel .form-box table th{ width: 220px; font-size: 2rem; font-weight: 600; text-align: left; vertical-align: top; padding: 27px 20px; } #counsel .form-box table th span{ color: #910000; } #counsel .form-box table td{ padding: 10px 20px; } #counsel .form-box table td *{ font-family: var(--baseFont); font-size: 1.8rem; font-weight: 400; } #counsel .form-box .flex{ display: flex; align-items: center; } #counsel .form-box input[type="text"], #counsel .form-box input[type="tel"], #counsel .form-box .selectric-select{ width: 300px; height: 60px; } #counsel .form-box input[type="text"], #counsel .form-box input[type="tel"], #counsel .form-box textarea{ background: #F7F7F7; border: none; border-radius: 10px; padding: 0 20px; appearance: none; } #counsel .form-box input::placeholder{ color: #111; } #counsel .form-box tr td .selectric-select:not(:last-of-type){ margin-right: 10px; } #counsel .form-box textarea{ resize: none; width: 100%; height: 300px; padding: 20px; } #counsel .form-box tr td span{ display: inline-block; } #counsel .form-box tr td span.hyphen{ width: 10px; height: 1px; background: #000; margin: 0 5px; } #counsel .form-box tr td span.at{ margin: 0 15px; } /* selectric-select 커스텀 */ #counsel .form-box .selectric-wrapper{ height: 100%; } #counsel .form-box .selectric-select .selectric{ border: none; border-radius: 10px; height: 100%; } #counsel .form-box .selectric .label{ display: flex; align-items: center; height: 100%; background: #F7F7F7; font-weight: 400; color: #111; margin: 0; padding-left: 20px; padding-right: 50px; } #counsel .form-box .selectric .button{ width: 50px; height: 100%; } #counsel .form-box .selectric .button:after{ content: ""; width: auto; height: auto; background: #F7F7F7 url("/img/sub/form_select.svg") no-repeat center center / auto; border: none; } #counsel .form-box .selectric-items{ background: #F7F7F7; border: none; border-radius: 10px; overflow: hidden; } #counsel .form-box .selectric-items li{ padding: 10px 20px; } #counsel .form-box input[type="text"].max{ width: 100%; } #counsel .form-box input[type="text"].max615{ max-width: 610px; width: 100%; } #counsel .form-box input[type="text"].max215{ max-width: 215px; width: 100%; } #counsel .form-box .number .selectric-select{ margin-right: 10px; } #counsel .form-box .email .selectric-select{ margin-left: 10px; } #counsel .form-box .spam .img{ width: 130px; height: 60px; border-radius: 10px; overflow: hidden; position: relative; } #counsel .form-box .spam .img img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #counsel .form-box .spam button{ display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; background: #111; border: none; border-radius: 10px; margin-left: 5px; margin-right: 10px; } #counsel .form-box .center{ margin-top: 70px; } #counsel .info{ padding-top: 160px; } #counsel .info ul{ display: flex; flex-wrap: wrap; margin-bottom: -20px; } #counsel .info ul li{ width: calc((100% - 20px) / 2); margin-right: 20px; margin-bottom: 20px; text-align: center; background: #F5F5F5; border-radius: 20px; padding: 50px 20px 40px; } #counsel .info ul li:nth-of-type(even){ margin-right: 0; } #counsel .info ul li dt{ font-size: 2.4rem; font-weight: 600; margin-bottom: 20px; } #counsel .info ul li dd{ font-size: 1.8rem; font-weight: 400; color: #666; line-height: 1.6; } @media screen and (max-width: 1500px){ #counsel .policy-box table th{ font-size: 1.9rem; } #counsel .form-box table td *{ font-size: 1.7rem; } #counsel .form-box table th{ font-size: 1.9rem; } #counsel .form-box input[type="text"], #counsel .form-box input[type="tel"], #counsel .form-box .selectric-select{ height: 55px; } #counsel .form-box .spam .img{ height: 55px; } #counsel .form-box .spam button{ width: 55px; height: 55px; } #counsel .info{ padding-top: 100px; } #counsel .info ul li dt{ font-size: 2.2rem; margin-bottom: 10px; } #counsel .info ul li dd{ font-size: 1.7rem; } } @media screen and (max-width: 1250px){ #counsel .policy-box{ margin-bottom: 60px; } #counsel .policy-box table th, #counsel .policy-box table td{ padding: 15px; } #counsel .policy-box table th{ font-size: 1.8rem; } #counsel .policy-box table td{ font-size: 1.6rem; } #counsel .agree{ margin-top: 15px; } #counsel .agree label{ font-size: 1.6rem; padding-left: 40px; } #counsel .agree label::before{ width: 20px; height: 20px; } #counsel .agree input:checked + label::after{ top: 46%; left: 13px; } #counsel .form-box table th{ width: 180px; font-size: 1.8rem; } #counsel .form-box tr:not(.area, .spam) .flex{ justify-content: space-between; } #counsel .form-box table tr.number .flex .select-wrapper, #counsel .form-box table tr.number .flex input{ width: calc((100% - 30px) / 3); } #counsel .form-box table tr.phone .flex .select-wrapper, #counsel .form-box table tr.phone .flex input{ width: calc((100% - 40px) / 3); } #counsel .form-box table tr.email .flex .select-wrapper, #counsel .form-box table tr.email .flex input{ width: calc((100% - 57px) / 3); } #counsel .form-box .center{ margin-top: 40px; } #counsel .info ul li{ padding: 40px 20px; } #counsel .info ul li dt{ font-size: 2rem; } } @media screen and (max-width: 1000px){ #counsel .form-box table tr{ display: flex; flex-direction: column; } #counsel .form-box table th, #counsel .form-box table td{ width: 100%; padding: 10px 15px; } #counsel .form-box table th{ padding-bottom: 0; } #counsel .form-box table td{ padding-bottom: 15px; } #counsel .info ul li{ width: 100%; margin-right: 0; padding: 25px 20px; } } @media screen and (max-width: 900px){ #counsel .policy-box{ margin-bottom: 40px; } #counsel .policy-box table th, #counsel .policy-box table td{ padding: 10px; } #counsel .policy-box table th{ font-size: 1.7rem; } #counsel .policy-box table td{ font-size: 1.5rem; } #counsel .form-box table th{ font-size: 1.7rem; } #counsel .form-box table td *{ font-size: 1.6rem; } #counsel .form-box input[type="text"], #counsel .form-box input[type="tel"], #counsel .form-box .selectric-select{ width: 100%; height: 45px; } #counsel .form-box .spam .img{ height: 45px; } #counsel .form-box .spam button{ width: 45px; height: 45px; } #counsel .form-box input[type="text"].max615{ max-width: 100%; } #counsel .info{ padding-top: 60px; } #counsel .info ul li dt{ font-size: 1.8rem; } #counsel .info ul li dd{ font-size: 1.6rem; } } @media screen and (max-width: 885px){ #counsel .form-box table tr.area .selectric-select{ width: calc((100% - 10px) / 2); } } @media screen and (max-width: 700px){ #counsel .form-box .flex{ flex-wrap: wrap; } #counsel .form-box tr td span.at{ margin: 0 5px; } #counsel .form-box table tr.number .flex .selectric-select{ width: 100%; margin-right: 0; margin-bottom: 10px; } #counsel .form-box table tr.number .flex input{ width: calc((100% - 20px) / 2); } #counsel .form-box table tr.email .flex input{ width: calc((100% - 24px) / 2); } #counsel .form-box table tr.email .flex .selectric-select{ width: 100%; margin-top: 10px; margin-left: 0; } #counsel .form-box table tr.spam .flex input{ max-width: 100%; width: calc(100% - 190px); } } @media screen and (max-width: 600px){ #counsel .policy-box table th, #counsel .policy-box table td{ padding: 10px 5px; } } /* 고객지원 - 영업소 / 서비스 */ #office.sub-content{ padding-bottom: 0; } #office .map{ position: relative; max-width: 1600px; margin: 0 auto; display: flex; flex-direction: row-reverse; } #office .iframe{ height: 900px; /* max-width: 1600px; */ width: calc(100% - 570px); margin: 0 auto;position: relative; } #office .iframe .root_daum_roughmap{ width: 100%; height: 100%; } #office .iframe .root_daum_roughmap .wrap_map{ height: 900px; } #office .iframe .root_daum_roughmap .map_border{ display: none; } #office .search-area{ /* width: 1370px; margin: 0 auto; position: absolute; bottom: 0; left: 50%; z-index: 50; transform: translateX(-50%); */ display: flex; justify-content: flex-end; pointer-events: none; } #office .search-area .inner{ /* max-width: 570px; width: 100%; */ width: 570px; background: #fff; pointer-events: auto; } #office .iframe .marker-wrap{ border-radius: 5px; border: 2px solid var(--mainColor) !important; } #office .iframe .marker-wrap > div:first-of-type{ background: url("/img/sub/support/marker_after.svg") no-repeat center center / contain !important; transform: translateY(-4px); z-index: 10; } #office .iframe .marker-box{ width: 150px; font-size: 1.5rem; font-weight: 500; color: #111; text-align: center; padding: 6px 0 8px; cursor: pointer; } #office .iframe .marker-wrap img[alt="close"]{ display: none; } #office .search-form{ background: var(--mainColor); padding: 40px; padding-top: 50px; } #office .search-form h5{ font-size: 2.4rem; font-weight: 600; color: #fff; margin-bottom: 25px; } #office .search-form .selectric, #office .search-form input{ height: 55px; background: #fff; border: none; border-radius: 5px; } #office .search-form .selectric .label, #office .search-form input{ padding: 0 20px; } #office .search-form .select *, #office .search-form input{ font-family: var(--baseFont); font-size: 1.8rem; font-weight: 400; } #office .search-form .select{ display: flex; justify-content: space-between; margin-bottom: 10px; } #office .search-form .selectric-select{ width: calc((100% - 12px) / 2); } #office .search-form .selectric .label{ display: flex; align-items: center; width: 100%; height: 100%; margin: 0; padding-right: 50px; } #office .search-form .button{ width: 50px; height: 100%; } #office .search-form .button::after{ width: 100%; height: 100%; background: #fff url("/img/sub/form_select.svg") no-repeat center right 20px / auto; border: none; margin: 0; } #office .search-form .selectric-items{ border-radius: 5px; background: #fff; overflow: hidden; } #office .search-form .input{ position: relative; } #office .search-form .input input{ width: 100%; padding-right: 60px; appearance: none; } #office .search-form .input button{ width: 60px; height: 55px; position: absolute; top: 0; right: 0; background: none; border: none; } #office .search-form .input button img{ width: 20px; } #office .map-wrap{ position: relative; } #office .map-list{ height: 560px; overflow-y: scroll; padding-left: 40px; padding-right: 20px; position: relative; } #office .map-list ul li{ padding: 35px 0; padding-right: 50px; border-bottom: 1px solid #EEE; position: relative; } #office .map-list ul li::before, #office .map-list ul li::after{ position: absolute; top: 50%; right: 0; transform: translateY(-50%); transition: all 0.5s; } #office .map-list ul li::before{ content: url("/img/sub/support/map_arrow.svg"); opacity: 1; } #office .map-list ul li::after{ content: url("/img/sub/support/map_arrow_hover.svg"); opacity: 0; } #office .map-list dl dt{ font-size: 2rem; font-weight: 600; margin-bottom: 8px; } #office .map-list dl dd{ font-size: 1.7rem; font-weight: 400; color: #666; } #office .map-list .number{ margin-top: 20px; position: relative; } #office .map-list .number .icon{ position: absolute; top: 45%; left: 0; transform: translateY(-50%); } #office .map-list .number .icon img {width:80%;} #office .map-list .number p{ font-size: 1.6rem; font-weight: 200; color: #666; padding-left: 35px; } #office .map-list ul li a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 20; } #office .map-list ul li:hover::before{ opacity: 0; } #office .map-list ul li:hover::after{ opacity: 1; } #office .map-popup{ max-width: 570px; width: 100%; height: 100%; background: #fff; position: absolute; top: 0; left: 0; z-index: 30; padding: 40px; display: none; } #office .map-popup p{ font-size: 2rem; font-weight: 600; margin-bottom: 20px; } #office .map-popup dl{ display: flex; align-items: flex-start; font-size: 1.7rem; font-weight: 400; color: #666; padding: 20px 0; border-bottom: 1px solid #EEE; } #office .map-popup dl:first-of-type{ border-top: 1px solid #EEE; } #office .map-popup dl dt{ min-width: 93px; font-weight: 600; color: #111; padding-left: 30px; padding-right: 20px; position: relative; } #office .map-popup dl dt::before{ font-family: "xeicon"; font-size: 2.5rem; font-weight: normal; font-style: normal; color: var(--mainColor); position: absolute; top: 50%; left: 0; transform: translateY(-50%); } #office .map-popup dl dt.address::before{ content:"\eb59"; } #office .map-popup dl dt.call::before{ content:"\e9d3"; top: 55%; } #office .map-popup dl dt.fax::before{ content:"\e9bc"; } #office .map-popup dl dt.email::before{ content:"\ea06"; } #office .map-popup .center{ text-align: center; margin-top: 20px; } #office .map-popup button{ padding: 10px 25px; background: var(--mainColor); border: none; font-size: 1.6rem; font-weight: 600; color: #fff; } /* 스크롤바 커스텀 */ #office .map-list::-webkit-scrollbar{ width: 20px; } #office .map-list::-webkit-scrollbar-thumb{ height: 20px; background: #D9D9D9; background-clip: padding-box; border: 6px solid transparent; border-radius: 100px; } #office .map-list::-webkit-scrollbar-track{ background-clip: padding-box; border: 5px; border: 5px solid transparent; border-radius: 100px; } @media screen and (max-width: 1640px){ #office .map{ padding: 0 20px; } } @media screen and (max-width: 1600px){ #office .iframe{ height: 900px; width:90%; margin: 0 auto;position: relative; } } @media screen and (max-width: 1500px){ #office .search-form h5{ font-size: 2.2rem; margin-bottom: 15px; } #office .search-form select, #office .search-form input{ height: 50px; } #office .search-form .input button{ height: 50px; } } @media screen and (max-width: 1410px){ /* #office .search-area{ width: 100%; padding: 0 20px; } */ } @media screen and (max-width: 1280px){ #office .map{ flex-direction: column; } #office .iframe{ width: 100%; } #office .iframe{ height: 400px; } #office .iframe .root_daum_roughmap .wrap_map{ height: 400px; } #office .search-area{ margin-top: 30px; } #office .search-area .inner{ width: 100%; } #office .map-list{ height: 450px; } #office .map-popup{ max-width: 100%; } } /* @media screen and (max-width: 1000px){ #office .search-area{ position: static; transform: translateX(0); padding: 0; padding: 0 20px; margin-top: 30px; } #office .search-area .inner{ max-width: 100%; } } */ @media screen and (max-width: 900px){ #office .search-form h5{ font-size: 2rem; } #office .search-form .selectric, #office .search-form input{ height: 45px; } #office .search-form .select *, #office .search-form input{ font-size: 1.7rem; } #office .search-form .input button{ height: 45px; } #office .map-list dl dt{ font-size: 1.8rem; margin-bottom: 5px; } #office .map-list dl dd{ font-size: 1.6rem; } #office .map-list .number{ margin-top: 10px; } #office .map-list .number p{ font-size: 1.5rem; } #office .map-popup p{ font-size: 1.8rem; margin-bottom: 15px; } #office .map-popup dl{ font-size: 1.6rem; } #office .map-popup dl dt::before{ font-size: 2.2rem; } #office .map-popup button{ font-size: 1.5rem; } } @media screen and (max-width: 600px){ #office .search-form{ padding: 30px 20px; } /* #office .map-list{ height: 450px; } */ #office .map-list{ padding: 0; padding-left: 20px; padding-right: 15px; } #office .map-list ul li{ padding: 20px; padding-left: 0; padding-right: 40px; } #office .map-popup{ padding: 20px; } } /* 고객지원 - 정기교육 */ #education{ overflow: hidden; } #education .tab-menu ul{ max-width: 840px; width: 100%; margin: 0 auto; } #education .tab-menu ul li{ width: 50%; } #education .flex-box{ display: flex; align-items: center; } #education .flex-box > div{ width: 50%; } #education .image figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: 86%; margin-bottom: -6px; } #education .image figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #education .text{ padding-left: 60px; } #education .text .mark{ display: inline-block; background: var(--mainColor); border-radius: 40px; font-size: 1.8rem; font-weight: 600; color: #fff; line-height: 1; padding: 10px 25px; } #education .text .mark.end{ background: #F5F5F5; color: #666; } #education .text h4{ font-size: 3.5rem; font-weight: 700; line-height: 1.5; margin: 60px 0 30px; } #education .text .time{ font-size: 1.8rem; font-weight: 200; line-height: 1.5rem; letter-spacing: -0.03em; padding-left: 25px; position: relative; } #education .text .time::before{ content:"\ea2c"; font-family:'xeicon'; font-weight: normal; font-style: normal; position: absolute; top: 4px; left: 0; } #education .text .time span{ font-weight: 700; } #education .text .content{ margin: 40px 0 50px; } #education .text .content p{ font-size: 1.7rem; font-weight: 200; color: #777; line-height: 1.8; letter-spacing: -0.03em; word-break: break-all; } #education .text .black-btn{ padding: 0 40px; justify-content: space-between; } #education .eduInfo {} #education .eduInfo .text { display:flex; justify-content: center; align-items: center; flex-direction: column; border:1px #e1e1e1 solid; border-radius: 15px; gap: 15px; padding: 50px 0;} #education .eduInfo .text h5 { font-size:3.0rem; font-weight:700; line-height: 1.5; } #education .eduInfo .text p { font-size: 1.8rem; font-weight: 200; line-height: 1.5rem; letter-spacing: -0.03em; } @media screen and (max-width: 1500px){ #education .text .mark{ font-size: 1.7rem; padding: 10px 20px; } #education .text h4{ font-size: 3rem; margin: 40px 0 25px; } #education .text .content{ margin: 30px 0 40px; } #education .text .black-btn{ padding: 0 30px; } } @media screen and (max-width: 1250px){ #education .text{ padding-left: 40px; } #education .text .mark{ font-size: 1.6rem; padding: 10px 15px; } #education .text h4{ font-size: 2.7rem; margin: 30px 0 15px; } #education .text .time{ font-size: 1.7rem; } #education .text .content{ margin: 20px 0 30px; } #education .text .content p{ font-size: 1.6rem; } #education .text .black-btn{ padding: 0 20px; } } @media screen and (max-width: 1000px){ #education .flex-box{ flex-direction: column; } #education .flex-box > div{ width: 100%; } #education .image{ max-width: 700px; } #education .text{ padding-left: 0; margin-top: 30px; } } @media screen and (max-width: 900px){ #education .text h4{ font-size: 2.3rem; } } /* 고객지원 - 정기교육 (상세) */ #view.education .title-box{ padding-bottom: 5px; } #view.education .title{ text-align: center; padding-left: 130px; position: relative; max-width: fit-content; width: 100%; margin: 0 auto; } #view.education .title .mark{ display: inline-block; background: var(--mainColor); border-radius: 40px; font-size: 1.8rem; font-weight: 600; color: #fff; line-height: 1; padding: 10px 25px; position: absolute; top: 7px; left: 0; } #view.education .title .mark.end{ background: #F5F5F5; color: #666; } #view.education .title h4{ display: inline-block; } #view.education .flex-box{ align-items: flex-start; position: relative; padding-top: 12px; } #view.education .flex-box::before{ content: ""; width: calc(100% + 100px); height: 1px; background: #EEE; position: absolute; top: 0; left: -50px; } #view.education .title-box .time{ font-size: 1.8rem; font-weight: 200; line-height: 1.5rem; letter-spacing: -0.03em; padding-left: 25px; position: relative; color: #111; margin-top: 9px; } #view.education .title-box .time::before{ content:"\ea2c"; font-family:'xeicon'; font-weight: normal; color: #111; font-style: normal; position: absolute; top: 4px; left: 0; } #view.education .title-box .time span{ font-size: 1.8rem; font-weight: 700; color: #111; margin-bottom: 0; padding: 0; } #view.education .title-box ul{ max-width: calc(100% - 350px); width: fit-content; text-align: right; } #view.education .title-box ul li a::before{ background: #111 url("/img/sub/clip_icon.svg") no-repeat center center / auto; } #view.education .center{ margin-top: 40px; } #view #counsel{ margin-top: 140px; } @media screen and (max-width: 1500px){ #view.education .title{ padding-left: 100px; } #view.education .title .mark{ font-size: 1.7rem; padding: 10px 20px; top: 4px; } #view #counsel{ margin-top: 100px; } } @media screen and (max-width: 1250px){ #view.education .title{ padding-left: 85px; } #view.education .title .mark{ font-size: 1.6rem; padding: 10px 15px; top: 1px; } #view.education .title-box .time, #view.education .title-box .time span{ font-size: 1.7rem; } #view.education .flex-box{ margin-top: 30px; } #view.education .flex-box::before{ width: calc(100% + 60px); left: -30px; } } @media screen and (max-width: 900px){ #view.education .title{ padding-left: 0; padding-top: 45px; } #view.education .title .mark{ top: 0; left: 50%; transform: translateX(-50%); } #view.education .flex-box{ flex-direction: column; align-items: flex-start; padding-top: 0; margin-top: 15px; } #view.education .flex-box::before{ width: calc((100% + 40px)); left: -20px; } #view.education .title-box .time{ margin: 12px 0 10px; } #view.education .title-box .time span{ width: fit-content; } #view.education .title-box ul{ max-width: 100%; width: 100%; } #view #counsel{ margin-top: 80px; } } /* 비밀번호 */ .popup{ width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.6); position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999; display: none; } .popup .blank{ width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .popup .inner{ width: 100%; max-width: 400px; background: #ffffff; border: 1px solid #DEDEDE; border-radius: 10px; padding: 40px 30px; position: absolute; top: 50%; left: 50%; z-index: 100; transform: translate(-50%, -50%); } .popup h5{ font-size: 2.0rem; font-weight: 700; margin: 0 0 10px; } .popup .inputBox{ display: flex; flex-direction: column; gap: 10px 0; margin: 30px 0;} .popup .flexBox{ display: flex; gap: 0 10px; } .popup .flexBox.column{ gap: 5px 0; } .popup input{ width: 100%; height: 45px; appearance: none; -webkit-appearance: none; border-radius: 8px; -webkit-border-radius: 8px; padding: 0 15px; border: none; } input.border, input:focus.border, textarea.border, textarea:focus.border, button.border, button:focus.border, select.border { border: 1px solid rgba(217, 217, 217, 0.9); } .popup input::placeholder{ font-size: 1.5rem; } .popup button{ display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 8px; background: #fff; border: none; } .popup button.border{ font-size: 1.5rem; padding: 0 15px; border: 1px solid rgba(217, 217, 217, 0.9); } .popup .bottom{ display: flex; gap: 0 10px; } .popup .bottom button{ width: calc(50% - 5px); height: 50px; color: #ffffff; font-size: 1.6rem; } .popup button.gray{ background: rgba(217, 217, 217, 0.9); } .popup button.blue{ background: var(--mainColor); } /* 회사소개 - IR (공통) */ #ir .page-title p{ font-family: var(--Poppins); font-size: 2rem; margin-top: 10px; } #ir section:not(:first-of-type){ padding-top: 150px; } #ir section:not(:last-of-type){ padding-bottom: 150px; border-bottom: 3px solid #212121; } #ir .board-table{ min-height: auto; } #ir .board-table colgroup col{ width: 100%; } #ir .board-table td{ padding: 25px 0; } #ir .center{ margin-top: 70px; } #ir .center a{ width: 210px; height: 60px; display: flex; justify-content: center; align-items: center; background: var(--mainColor); border-radius: 5px; font-size: 2rem; font-weight: 600; color: #fff; margin: 0 auto; } #ir .center a::after{ content: url("/img/sub/company/moreview_arrow.svg"); display: inline-block; margin-left: 40px; position: relative; top: 1px; } #ir .board-table.basic colgroup col:first-of-type{ width: 130px; } #ir .board-table.basic tr td:last-of-type{ padding: 25px 15px; } #ir .board-table.two colgroup col:last-of-type{ width: 155px; } #ir .board-table.two span{ font-family: var(--Poppins); font-size: 1.8rem; font-weight: 400; color: #666; } #ir .board-table.padding td{ padding: 45px 30px; } #ir .board-table.download colgroup col:last-of-type{ width: 125px; } #ir .board-table.download td{ padding: 30px; } #ir .paging{ margin-top: 75px; } #ir .nodata{ font-size: 2.4rem; font-weight: 500; color: #777; text-align: center; padding: 60px !important; } #ir .contact .page-title{ text-align: left; } #ir .contact dl{ display: flex; } #ir .contact .dl dl:not(:last-of-type){ margin-bottom: 15px; } #ir .contact dl *{ font-size: 1.7rem; font-weight: 400; color: #333; } #ir .contact dl dt{ width: 120px; padding-left: 30px; position: relative; } #ir .contact dl dt::before{ font-family: "xeicon"; font-size: 2.2rem; font-weight: normal; color: var(--mainColor); font-style: normal; position: absolute; top: calc(1.5em / 3); left: 0; transform: translateY(-50%); } #ir .contact dl.address dt::before{ content: "\eb59"; } #ir .contact dl.call dt::before{ content: "\e9d3"; } #ir .contact dl.email dt::before{ content: "\ea06"; } #ir .contact dl dd{ width: calc(100% - 120px); } @media screen and (max-width: 1500px){ #ir section:not(:first-of-type){ padding-top: 100px; } #ir section:not(:last-of-type){ padding-bottom: 100px; } #ir .page-title p{ font-size: 1.8rem; } #ir .board-table.padding td{ padding: 30px; } #ir .center a{ width: 180px; height: 55px; font-size: 1.8rem; } #ir .board-table.two span{ font-size: 1.7rem; } #ir .board-table.download colgroup col:last-of-type{ width: 105px; } #ir .board-table.download td{ padding: 20px; } #ir .nodata{ font-size: 2.2rem; padding: 50px !important; } } @media screen and (max-width: 1250px){ #ir section:not(:first-of-type){ padding-top: 80px; } #ir section:not(:last-of-type){ padding-bottom: 80px; } #ir .page-title p{ font-size: 1.6rem; margin-top: 5px; } #ir .board-table td{ padding: 15px 0; } #ir .center{ margin-top: 40px; } #ir .center a{ width: 160px; height: 50px; font-size: 1.7rem; } #ir .center a::after{ margin-left: 20px; } #ir .board-table.basic colgroup col:first-of-type{ width: 90px; } #ir .board-table.basic tr td:last-of-type{ padding: 15px; } #ir .board-table.two colgroup col:last-of-type{ width: 135px; } #ir .board-table.two span{ font-size: 1.5rem; } #ir .board-table.padding td{ padding: 25px; } #ir .board-table.download colgroup col:last-of-type{ width: 100px; } #ir .board-table.download td{ padding: 10px 20px; } #ir .paging{ margin-top: 40px; } #ir .nodata{ font-size: 2rem; padding: 50px !important; } #ir .contact .dl dl:not(:last-of-type){ margin-bottom: 10px; } #ir .contact dl *{ font-size: 1.6rem; } #ir .contact dl dt{ width: 100px; } #ir .contact dl dt::before{ font-size: 2rem; } #ir .contact dl dd{ width: calc(100% - 100px); } } @media screen and (max-width: 800px){ #ir .board-table.basic colgroup{ display: none; } #ir .board-table.basic tr{ width: 100%; display: flex; flex-direction: column-reverse; } #ir .board-table.basic tr td{ width: 100%; padding: 15px; } #ir .board-table.basic .date{ display: flex; flex-direction: row-reverse; justify-content: flex-end; padding-top: 0; } #ir .board-table.basic .date span{ width: auto; } #ir .board-table.basic .date span.day{ font-size: 1.5rem; font-weight: 400; position: relative; } #ir .board-table.basic .date span.day::before{ content: "."; display: inline-block; margin-right: 1px; } #ir .board-table.basic td:nth-of-type(2){ padding-bottom: 10px; } #ir .board-table.two colgroup{ display: none; } #ir .board-table.two tr{ display: flex; flex-wrap: wrap; } #ir .board-table.two tr td:first-of-type{ width: 100%; padding-bottom: 0; } #ir .board-table.two tr td:last-of-type{ padding-top: 10px; } #ir .board-table.padding td{ padding: 20px; } #ir .nodata{ font-size: 1.8rem; } } /* 회사소개 - IR - IPO 정보 */ #ir .ipo .diagram{ max-width: 1110px; margin: 0 auto; margin-bottom: 70px; } #ir .ipo .diagram ul{ display: flex; flex-wrap: wrap; gap: 45px 90px; } #ir .ipo .diagram ul li{ width: calc((100% - 360px) / 5); text-align: center; } #ir .ipo .diagram ul li .circle{ width: 100%; padding-bottom: 100%; border-radius: 50%; position: relative; } #ir .ipo .diagram ul li .circle::before{ content: ""; width: 100%; height: 100%; border: 2px dashed #CFCFCF; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-sizing: border-box; } #ir .ipo .diagram ul li .circle.solid::before{ border: 2px solid var(--mainColor); } #ir .ipo .diagram ul li .circle::after{ content: url("/img/sub/company/ir_arrow.svg"); position: absolute; top: 50%; right: -45px; transform: translate(50%, -50%); } #ir .ipo .diagram ul li:last-of-type .circle::after{ display: none; } #ir .ipo .diagram ul li .text{ position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); } #ir .ipo .diagram ul li .text span{ display: block; font-size: 1.8rem; font-weight: 500; color: #111; margin-top: 5px; } #ir .ipo .diagram ul li .day{ position: relative; padding-top: 30px; } #ir .ipo .diagram ul li .day::before{ content: ""; width: 1px; height: 30px; background: #9F9F9F; position: absolute; top: 0; left: 50%; transform: translateX(-50%); } #ir .ipo .diagram ul li .day::after{ content: ""; width: 5px; height: 5px; background: #9F9F9F; border-radius: 50%; position: absolute; top: 30px; left: 50%; transform: translate(-50%, -50%); } #ir .ipo .diagram ul li .day span{ display: block; font-size: 2rem; font-weight: 500; color: #111; padding-top: 10px; } @media screen and (max-width: 1700px){ #ir .ipo .diagram ul li .text span{ font-size: 1.7rem; } #ir .ipo .diagram ul li .day span{ font-size: 1.8rem; } } @media screen and (max-width: 1250px){ #ir .ipo .diagram{ margin-bottom: 40px; } #ir .ipo .diagram ul li .text span{ font-size: 1.6rem; } #ir .ipo .diagram ul li .day span{ font-size: 1.7rem; } } @media screen and (max-width: 1100px){ #ir .ipo .diagram ul{ gap: 35px 70px; } #ir .ipo .diagram ul li{ width: calc((100% - 280px) / 5); } #ir .ipo .diagram ul li .circle::after{ right: -35px; } } @media screen and (max-width: 950px){ #ir .ipo .diagram{ max-width: 700px; } #ir .ipo .diagram ul li{ width: calc((100% - 140px) / 3); } #ir .ipo .diagram ul li:nth-of-type(3n) .circle::after{ display: none; } #ir .ipo .diagram ul li .day{ padding-top: 20px; } #ir .ipo .diagram ul li .day::before{ height: 20px; } #ir .ipo .diagram ul li .day::after{ top: 20px; } } @media screen and (max-width: 600px){ #ir .ipo .diagram{ max-width: 350px; } #ir .ipo .diagram ul li{ width: calc((100% - 70px) / 2); } #ir .ipo .diagram ul li:nth-of-type(3n) .circle::after{ display: block; } #ir .ipo .diagram ul li:nth-of-type(2n) .circle::after{ display: none; } } /* 회사소개 - IR - faq */ .faq-list{ border-top: 1px solid #000; } .faq-list ul li{ border-bottom: 1px solid #EEE; } .faq-list ul li .faq-title{ display: flex; justify-content: space-between; align-items: baseline; padding: 30px; cursor: pointer; } .faq-list ul li .faq-title h5{ width: calc(100% - 80px); font-family: var(--Poppins); font-size: 2rem; font-weight: 600; color: #111; padding: calc((50px - 1.3em) / 2) 0; padding-left: 75px; position: relative; } .faq-list ul li .faq-title h5::before{ content: "Q"; font-size: 3.5rem; font-weight: 600; color: #CCC; position: absolute; top: 25px; left: 0; transform: translateY(-50%); } .faq-list ul li .faq-title button{ width: 50px; height: 50px; background: #F5F5F5; border: none; border-radius: 50%; transform: rotate(0); transition: background 0.5s, transform 0.5s; } .faq-list ul li .faq-title button img{ vertical-align: middle; filter: invert(0); -webkit-filter: invert(0); transition: filter 0.5s; } .faq-list ul li .faq-content{ padding: 55px 30px; font-size: 1.7rem; border-top: 1px solid var(--mainColor); display: none; } .faq-list ul li .faq-content .content{ padding-left: 75px; position: relative; } .faq-list ul li .faq-content .content::before{ content: "A"; font-family: var(--Poppins); font-size: 3.5rem; font-weight: 600; color: var(--mainColor); line-height: 1; position: absolute; top: -8px; left: 0; } .faq-list ul li.on .faq-title button{ background: var(--mainColor); transform: rotate(-180deg); } .faq-list ul li.on .faq-title button img{ filter: invert(1); -webkit-filter: invert(1); } @media screen and (max-width: 1700px){ .faq-list ul li .faq-title h5::before, .faq-list ul li .faq-content .content::before{ font-size: 3rem; } .faq-list ul li .faq-title h5{ font-size: 1.8rem; } .faq-list ul li .faq-content{ padding: 40px 30px; } .faq-list ul li .faq-content .content::before{ top: -4px; } } @media screen and (max-width: 1250px){ .faq-list ul li .faq-title h5, .faq-list ul li .faq-content .content{ padding-left: 40px; } .faq-list ul li .faq-title h5::before, .faq-list ul li .faq-content .content::before{ font-size: 2.6rem; } .faq-list ul li .faq-title{ padding: 10px; } .faq-list ul li .faq-title h5{ font-size: 1.7rem; } .faq-list ul li .faq-title button{ width: 40px; height: 40px; } .faq-list ul li .faq-content{ padding: 20px 10px } .faq-list ul li .faq-content .content::before{ top: -2px; } } /* 회사소개 - IR - 주주구성 */ #ir .composition .flex-box{ display: flex; align-items: flex-end; } #ir .composition .graph{ width: 39%; } #ir .composition .table{ width: 61%; padding-left: 55px; } #ir .composition .table table tr{ text-align: right; } #ir .composition .table table tr > *:nth-of-type(1){ width: 55%; text-align: left; } #ir .composition .table table th{ font-size: 2rem; font-weight: 600; color: #111; padding: 27px 30px; } #ir .composition .table table td{ font-size: 1.8rem; font-weight: 500; color: #444; padding: 23px 30px; } #ir .composition .table table td span{ display: inline-block; width: 20px; height: 20px; background: #0C2D5F; border-radius: 50%; margin-right: 10px; vertical-align: middle; position: relative; top: -2px; } #ir .composition .table table thead tr{ border-bottom: 1px solid var(--mainColor); } #ir .composition .table table tbody tr:last-of-type{ border-top: 1px solid #DDD; border-bottom: 1px solid var(--mainColor); } #ir .composition .table table tr:nth-of-type(1) td span{ } #ir .composition .table table tr:nth-of-type(2) td span{ opacity: 0.8; } #ir .composition .table table tr:nth-of-type(3) td span{ opacity: 0.6; } #ir .composition .table table tr:nth-of-type(4) td span{ opacity: 0.5; } #ir .composition .table table tr:nth-of-type(5) td span{ opacity: 0.3; } #ir .composition .table table tr:nth-of-type(6) td span{ opacity: 0.2; } @media screen and (max-width: 1500px){ #ir .composition .table table th{ font-size: 1.8rem; } #ir .composition .table table td{ font-size: 1.7rem; } } @media screen and (max-width: 1250px){ #ir .composition .table table tr > *:nth-of-type(1){ width: 50%; } #ir .composition .table table th{ font-size: 1.7rem; padding: 25px 20px; } #ir .composition .table table td{ font-size: 1.6rem; padding: 20px 20px; } } @media screen and (max-width: 1000px){ #ir .composition .flex-box{ flex-direction: column; } #ir .composition .graph{ width: 100%; text-align: center; padding: 0 30px; } #ir .composition .table{ width: 100%; padding-left: 0; margin-top: 30px; } } @media screen and (max-width: 600px){ #ir .composition .table table th{ padding: 15px 10px; } #ir .composition .table table td{ padding: 15px 10px; } } /* 제품소개 - 로봇 - 협동/서비스 로봇 - ARES series */ #ares.sub-content{ padding-bottom: 0; overflow: hidden; } #ares .series{ padding-bottom: 120px; } #ares .series .flex-box{ display: flex; flex-wrap: wrap; margin-bottom: -60px; } #ares .series .item{ width: calc((100% - 40px) / 2); margin-right: 40px; margin-bottom: 60px; } #ares .series .item:nth-of-type(even){ margin-right: 0; } #ares .series .item .figure{ border: 1px solid #DDD; border-radius: 10px; padding: 60px; text-align: center; } #ares .series .item .txt h5{ font-size: 4rem; font-weight: 700; color: var(--mainColor); letter-spacing: -0.02em; margin-bottom: 15px; } #ares .series .item .txt p{ font-size: 2rem; font-weight: 400; color: #111; letter-spacing: -0.02em; } #ares .series .item figure:first-of-type{ margin: 40px 0; } #ares .series .item ul{ margin-top: 30px; padding: 0 30px; } #ares .series .item ul li{ font-size: 1.7rem; font-weight: 400; color: #111; letter-spacing: -0.02em; position: relative; padding-left: 13px; } #ares .series .item ul li.blue{ color: var(--mainColor); } #ares .series .item ul li:not(:last-of-type){ margin-bottom: 15px; } #ares .series .item ul li::before{ content: ""; width: 3px; height: 3px; background: #111; position: absolute; top: calc(1.3em / 2); left: 0; transform: translateY(-50%); } #ares .series .item .span{ display: flex; justify-content: center; } #ares .series .item .span span{ width: 180px; height: 50px; display: flex; justify-content: center; align-items: center; background: var(--mainColor); border-radius: 10px; font-size: 1.7rem; font-weight: 400; color: #fff; letter-spacing: -0.02em; } #ares .series .item .span span:not(:last-of-type){ margin-right: 10px; } #ares .grayBg{ background: #F5F5F5; padding: 120px 0; } #ares .grayBg .flex-box{ display: flex; align-items: center; } #ares .grayBg .img{ width: 48%; padding-right: 100px; } #ares .grayBg .text{ width: 52%; } #ares .grayBg .text .flex{ display: flex; justify-content: space-between; } #ares .grayBg .text .flex div{ width: calc((100% - 17px) / 2); background: var(--mainColor); border-radius: 10px; padding: 30px; text-align: center; } #ares .grayBg .text .flex p{ font-size: 3rem; font-weight: 700; color: #fff; letter-spacing: -0.02em; } #ares .grayBg .text .flex p span{ display: block; opacity: 0.7; margin-top: 13px; } #ares .grayBg .text dl{ margin-top: 70px; } #ares .grayBg .text dl dt{ font-size: 3rem; font-weight: 700; color: var(--mainColor); padding-left: 50px; position: relative; margin-bottom: 20px; } #ares .grayBg .text dl dt::before{ content: ""; width: 40px; height: 40px; background: url("/img/sub/product/ares_check.svg") no-repeat center center / contain; position: absolute; top: calc(1.3em / 2); left: 0; transform: translateY(-50%); } #ares .grayBg .text dl dd{ font-size: 2rem; font-weight: 400; color: #111; letter-spacing: -0.02em; } @media screen and (max-width: 1500px){ #ares .series .item .txt h5{ font-size: 3.5rem; } #ares .series .item .txt p{ font-size: 1.8rem; } #ares .series .item .span span{ width: 160px; height: 45px; font-size: 1.6rem; } #ares .grayBg .text .flex div{ padding: 20px; } #ares .grayBg .text .flex p{ font-size: 2.6rem; } #ares .grayBg .text dl dt{ font-size: 2.6rem; } #ares .grayBg .text dl dd{ font-size: 1.8rem; } } @media screen and (max-width: 1250px){ #ares .series{ padding-bottom: 100px; } #ares .series .item .figure{ padding: 40px; } #ares .series .item figure:first-of-type{ margin: 30px 0; } #ares .series .item .txt h5{ font-size: 3rem; margin-bottom: 10px; } #ares .series .item .txt p{ font-size: 1.7rem; } #ares .series .item .span span{ width: 135px; height: 40px; font-size: 1.5rem; } #ares .grayBg{ padding: 100px 0; } #ares .grayBg .text .flex div{ padding: 15px; } #ares .grayBg .text .flex p{ font-size: 2.2rem; } #ares .grayBg .text .flex p span{ margin-top: 5px; } #ares .grayBg .text dl{ margin-top: 50px; } #ares .grayBg .text dl dt{ font-size: 2.4rem; margin-bottom: 10px; } #ares .grayBg .text dl dd{ font-size: 1.7rem; } } @media screen and (max-width: 900px){ #ares .series .item .figure{ padding: 30px; } #ares .series .item .txt h5{ font-size: 2.6rem; } #ares .grayBg .flex-box{ flex-direction: column; align-items: center; } #ares .grayBg .img{ width: 100%; padding: 0 70px; padding-bottom: 50px; text-align: center; } #ares .grayBg .img img{ max-width: 350px; width: 100%; } #ares .grayBg .text{ width: 100%; } #ares .grayBg .text .flex div{ padding: 10px; } #ares .grayBg .text .flex p{ font-size: 2rem; } #ares .grayBg .text .flex p span{ margin-top: 0; } #ares .grayBg .text dl{ margin-top: 30px; } #ares .grayBg .text dl dt{ font-size: 2.2rem; padding-left: 35px; } #ares .grayBg .text dl dt::before{ width: 30px; height: 30px; } #ares .grayBg .text dl dd{ font-size: 1.6rem; } } @media screen and (max-width: 850px){ #ares .series .item{ width: 100%; margin-right: 0; } #ares .series .item figure:first-of-type{ margin: 20px 0; } #ares .series .item ul{ margin-top: 20px; padding: 0 20px; } } /* 제품소개 - 모빌리티 모터 - 특수용도(위성발사체) */ #vehicle{ overflow: hidden; } #vehicle .table-box{ border-top: 1px solid #111; } #vehicle .table-box tbody *{ font-size: 1.7rem; color: #111; } #vehicle .table-box th, #vehicle .table-box td{ padding: 12px; } #vehicle .table-box th{ font-weight: 600; } #vehicle h6{ font-size: 3.5rem; font-weight: 600; color: #111; letter-spacing: -0.02em; } #vehicle .table-box .blueBg{ background: var(--mainColor); color: #fff; } #vehicle .nano{ padding-bottom: 120px; } #vehicle .nano .img{ background: url("/img/sub/product/vehicle_img01.jpg") no-repeat center center / cover; border-radius: 10px; padding: 9.3% 0; margin-bottom: 60px; } #vehicle .nano .bg{ padding: 0 30px; } #vehicle .nano h5{ font-size: 4rem; font-weight: 700; color: #fff; letter-spacing: -0.02em; text-align: center; } #vehicle .nano .flex-box{ display: flex; } #vehicle .nano .table{ width: 45%; } #vehicle .nano .table th{ width: 200px; } #vehicle .nano .table-box tr:first-of-type td{ border-top: none; } #vehicle .nano .text{ width: 55%; padding-left: 60px; } #vehicle .nano .text h6{ margin-bottom: 40px; } #vehicle .nano .text h6 span{ color: var(--mainColor); } #vehicle .nano .text p{ font-size: 2rem; font-weight: 300; color: #111; letter-spacing: -0.02em; line-height: 1.6; } #vehicle .nano .text p:not(:last-of-type){ margin-bottom: 25px; } #vehicle .moter h6{ text-align: center; margin-bottom: 60px; } #vehicle .moter h6 img{ width: auto; height: auto; vertical-align: middle; margin: 0 15px; } #vehicle .moter .flex-box{ display: flex; } #vehicle .moter .table{ width: calc(100% - 490px); } #vehicle .moter .table colgroup col:nth-of-type(1){ width: 160px; } #vehicle .moter .table .table-box thead::before, #vehicle .moter .table .table-box thead::after{ display: none; } #vehicle .moter .table .table-box thead tr > th:last-of-type{ border-right: none; } #vehicle .moter .table .table-box thead tr:first-of-type th:not(:first-of-type){ border-bottom: 1px solid #111; } #vehicle .moter .table .flex{ display: flex; justify-content: space-between; padding: 0 20px; } #vehicle .moter .table .flex figure{ max-width: calc((100% - 20px) / 2); } #vehicle .moter .img{ width: 490px; padding-left: 50px; text-align: center; } #vehicle .moter .img p{ font-size: 2.4rem; font-weight: 600; color: var(--mainColor); margin: 25px 0 10px; } #vehicle .moter .img span{ font-size: 1.6rem; font-weight: 400; color: #333; } @media screen and (max-width: 1500px){ #vehicle h6{ font-size: 3rem; } #vehicle .nano{ padding-bottom: 100px; } #vehicle .nano h5{ font-size: 3.5rem; } #vehicle .nano .img{ margin-bottom: 50px; } #vehicle .nano .text h6{ margin-bottom: 30px; } #vehicle .nano .text p{ font-size: 1.8rem; } #vehicle .moter h6{ margin-bottom: 40px; } #vehicle .moter h6 img{ height: 3rem; } #vehicle .moter .img p{ font-size: 2.2rem; } } @media screen and (max-width: 1250px){ #vehicle h6{ font-size: 2.6rem; } #vehicle .table-box tbody *{ font-size: 1.6rem; } #vehicle .table-box th, #vehicle .table-box td{ padding: 10px; } #vehicle .nano{ padding-bottom: 80px; } #vehicle .nano h5{ font-size: 3rem; } #vehicle .nano .img{ margin-bottom: 30px; } #vehicle .nano .table th{ width: 150px; } #vehicle .nano .text h6{ margin-bottom: 20px; } #vehicle .nano .text p{ font-size: 1.7rem; } #vehicle .nano .text p:not(:last-of-type){ margin-bottom: 15px; } #vehicle .moter h6{ margin-bottom: 30px; } #vehicle .moter h6 img{ height: 2.6rem; margin: 0 10px; } #vehicle .moter .table{ width: calc(100% - 450px); } #vehicle .moter .table colgroup col:nth-of-type(1){ width: 130px; } #vehicle .moter .img{ width: 450px; } #vehicle .moter .img p{ font-size: 2rem; margin: 15px 0 10px; } #vehicle .moter .img span{ font-size: 1.5rem; } } @media screen and (max-width: 1150px){ #vehicle .nano br{ display: none; } } @media screen and (max-width: 1000px){ #vehicle .moter .flex-box{ flex-direction: column; } #vehicle .moter .table{ width: 100%; } #vehicle .moter .table .table-box{ overflow-x: scroll; overflow-y: clip; } #vehicle .moter .table table{ min-width: 650px; } #vehicle .moter .img{ width: 100%; padding-left: 0; padding-top: 30px; } } @media screen and (max-width: 900px){ #vehicle h6{ font-size: 2.4rem; } #vehicle .nano .img{ padding: 70px 0; } #vehicle .nano h5{ font-size: 2.6rem; } #vehicle .nano .flex-box{ flex-direction: column; } #vehicle .nano .table, #vehicle .nano .text{ width: 100%; } #vehicle .nano .table th{ width: 120px; } #vehicle .nano .text{ padding-left: 0; padding-top: 30px; } #vehicle .moter h6 img{ height: 2.4rem; } }