@charset "utf-8"; #comingsoon{width:100%;padding-top:100px;text-align:center} #sh_content.page{max-width:none;padding:0} /* 서브페이지 공통 */ .pagecommon .inner-s{max-width:var(--subsize);width:100%;margin:0 auto} .pagecommon .sticky-wrapper{z-index:1;position:sticky;top:0;height:100vh} .pagecommon .group-subtit h2{font-family:var(--o-font);font-size:24px;font-weight:700;color:var(--primary)} .pagecommon .group-subtit h3{font-size:50px;font-weight:700;color:#111;margin:35px 0 60px} .pagecommon .group-subtit .tit-l{font-size:56px;margin:40px 0 60px} .pagecommon .group-subtit p.desc{font-size:22px;font-weight:600;line-height:1.45;color:#111;white-space:pre-line} .pagecommon .area-title{height:150vh} .pagecommon .area-title .sticky-wrapper.cm-sticky{height:70vh} .pagecommon .area-title .inner-s{position:relative} .pagecommon .area-title .group-subtit{position:relative;z-index:5;padding:100px 0} .pagecommon .area-title .group-subtit p:not(:last-child){padding-bottom:30px} .pagecommon .area-title .group-subtit .real{position:absolute;top:0;left:50%;transform:translateX(-50%);width:100%} .pagecommon .area-title .group-subtit .real > *{position:relative;overflow:hidden;text-align:center} .pagecommon .area-title .group-subtit .real > * .txt-box{display:inline-block} .pagecommon .area-title .thumb-box{z-index:-1;position:absolute;left:50%;top:0;width:100%;height:100%} .pagecommon .area-title .thumb-box .thumb{position:relative;width:100%;height:100%} .pagecommon .area-title .thumb-box .thumb::before{z-index:1;position:absolute;content:'';inset:0%;width:100%;height:100%;background-color:rgba(17,17,17,0.55);pointer-events:none} .pagecommon .area-title .thumb-box img{width:100%;height:100%;object-fit:cover} /* 탭메뉴 스타일 */ .pagecommon .area-cont ul.tab-list{display:flex;align-items:center;gap:15px;padding-bottom:100px} .pagecommon .area-cont li.tab-menu{display:flex;align-items:center;justify-content:center;padding:12px 25px;border:1px solid #e1e1e1;border-radius:100px;background-color:#fff;font-size:16px;font-weight:700;color:#777;transition:background-color 0.2s, color 0.2s, border-color 0.2s;cursor:pointer} .pagecommon .area-cont li.tab-menu.on{background-color:var(--primary);color:#fff;border-color:var(--primary)} /* ================================================= 회사소개 */ /* 회사소개 - 경영철학 */ .pagecommon .area-title .group-subtit{height:100%} .pagecommon .area-title .group-subtit .inner-s{position:relative;height:100%} /* 260709 추가 css */ #shVision .area-title{height:300vh} #shVision .sticky-wrapper{overflow:hidden} #shVision .sticky-wrapper .item{will-change:clip-path, transform;transition:clip-path 0.2s} #shVision .sticky-wrapper .item.front{position:relative;width:100%;height:100%;background-color:#fff} #shVision .sticky-wrapper .item.back{position:absolute;z-index:-1;top:0;left:0;width:100%;height:100%} #shVision .area-title .group-subtit{position:absolute;width:100%;height:100%;padding-top:0} #shVision .area-title .group-subtit .inner-s{position:relative;display:block} #shVision .area-title .group-subtit .inner-s .text-box{position:absolute} #shVision .area-title .group-subtit .inner-s .text-box span{display:inline-block} #shVision .area-title .group-subtit .inner-s .text-box h3{overflow:hidden;margin:0;margin-bottom:30px !important;transition:font-size 0.2s linear} #shVision .area-title .group-subtit .inner-s .text-box p.desc{overflow:hidden;padding-bottom:0;font-weight:700;color:#111;transition:font-size 0.2s linear} #shVision .simbol-box{position:absolute;top:50%;left:50%;transform:translateX(-50%);max-width:600px;width:100%;aspect-ratio:600 / 457} #shVision .simbol-box .simbol01{position:absolute;bottom:0;left:0;max-width:284px;width:100%;aspect-ratio:284 / 284} #shVision .simbol-box .simbol02{position:absolute;top:25px;left:78px;max-width:214px;width:100%;aspect-ratio:214 / 300} #shVision .simbol-box .simbol03{position:absolute;bottom:0;right:0;max-width:296px;width:100%;aspect-ratio:296 / 457} #shVision .simbol-box .simbol img{width:100%;height:100%;object-fit:cover} #shVision .bg-box{position:absolute;inset:0;width:100%;height:100%;overflow:hidden} #shVision .bg-box::before{z-index:1;position:absolute;content:'';inset:0%;width:100%;height:100%;background-color:rgba(0,0,0,0.45)} #shVision .bg-img{transform:scale(1.2);width:100%;height:100%;background-image:url(../sh_page/img/p44_bg01.jpg);background-size:cover;background-position:50%} #shVision .back__cont{z-index:2;position:absolute;top:0;left:50%;transform:translateX(-50%);display:flex;align-items:center;width:100%;height:100%} #shVision .back__cont .col-2{display:flex;flex-direction:column;gap:60px;width:100%} #shVision .back__cont .tit-box{display:flex;flex-direction:column;align-items:flex-start;gap:50px} #shVision .back__cont .tit-box h2{font-size:70px;font-weight:700;color:#fff;white-space:pre-line} #shVision .back__cont .tit-box a.link{display:flex;align-items:center;gap:15px;font-size:20px;font-weight:700;color:#fff} #shVision .back__cont .tit-box a.link .ic-arrow{display:flex;align-items:center;justify-content:center;width:33px;aspect-ratio:1;border-radius:100px;background-color:#fff;transition:background-color 0.2s} #shVision .back__cont .tit-box a.link .ic-arrow svg{width:18px;height:18px;stroke:#111;transition:transform 0.2s, stroke 0.2s} #shVision .back__cont .tit-box a.link:hover .ic-arrow{background-color:var(--primary)} #shVision .back__cont .tit-box a.link:hover .ic-arrow svg{stroke:#fff;transform:rotate(-45deg)} #shVision .back__cont .cont-box{display:flex;justify-content:flex-end} #shVision .back__cont .cont-box ul{display:grid;grid-template-columns:repeat(2,1fr);gap:70px 140px;max-width:790px;width:100%} #shVision .back__cont .cont-box ul li .cate{display:inline-flex;align-items:center;justify-content:center;padding:0 12px;height:35px;border-radius:5px;background-color:var(--primary);font-family:var(--o-font);font-size:15px;font-weight:700;color:#fff;text-transform:uppercase} #shVision .back__cont .cont-box ul li p{display:flex;flex-direction:column;gap:12px;padding:20px 0 32px;font-size:20px;font-weight:700;color:#fff} #shVision .back__cont .cont-box ul li:last-child p{padding:20px 0 58px} #shVision .back__cont .cont-box ul li p .notice{font-size:14px;font-weight:400} #shVision .back__cont .cont-box ul li strong{display:flex;align-items:center;font-size:36px;font-weight:700;color:#fff} #shVision .back__cont .cont-box ul li strong span{padding-right:5px;font-size:17px} #shVision .acd_wrap{padding:120px 0;font-size:16px;line-height:1.8;color:#666} #shVision .acd{position:relative;border-bottom:1px solid #e1e1e1} #shVision .acd:after{display:block;content:"";position:absolute;right:96px;top:33px;width:23px;height:23px;opacity:.4;cursor:pointer;background:url(/sh_page/img/p33_plus.png) no-repeat;transition:all .3s} @media(hover:hover){ #shVision .acd:hover:after{transform:rotate(90deg);opacity:1}} #shVision .acd.active:after{opacity:1} #shVision .acd .tit{height:90px;padding:0 60px;font-size:20px;line-height:90px;color:#222;cursor:pointer;font-weight:500} #shVision .acd .tit span{margin-right:15px;font-size:28px;font-weight:600;letter-spacing:0;transition:color .3s;font-family:'Poppins'} #shVision .acd .cont_wrap{display:none;position:relative} #shVision .acd .cont_wrap .cont{padding:0 60px 40px 60px} #shVision #acd-01 .cont_wrap{display:block} #shVision #acd-04{border-bottom:none} #shVision .cont01 ul{padding-top:30px;border-top:1px solid #e1e1e1} #shVision .cont01 ul li{display:flex;word-break:keep-all} #shVision .cont01 ul li+li{margin-top:10px} #shVision .cont01 ul li span{flex-shrink:0;width:150px;color:#222;font-weight:700} #shVision .cont02 ul{display:flex} #shVision .cont02 ul li{display:flex;flex-flow:column;width:25%;height:300px;padding:40px;font-size:17px;white-space:pre-line;word-break:keep-all} #shVision .cont02 ul li:nth-child(1){color:rgba(255,255,255,.7);background-color:#08273e} #shVision .cont02 ul li:nth-child(3){color:rgba(255,255,255,.8);background-color:var(--primary)} #shVision .cont02 ul li p{margin-bottom:auto;font-size:16px;font-weight:600;color:#222;letter-spacing:.7px;word-break:keep-all;text-transform:uppercase;font-family:'Poppins'} #shVision .cont02 ul li:nth-child(odd) p{color:#fff} #shVision .cont03 .img{width:100%;height:220px;background:url(/sh_page/img/p33_acd_img01.jpg) center no-repeat;background-size:cover} #shVision .cont03 .img02{background-image:url(/sh_page/img/p33_acd_img02.jpg)} #shVision .cont03 .txt{padding:0 96px;margin-bottom:60px} #shVision .cont03 .txt.right{text-align:right} #shVision .cont03 p{margin-top:-25px;margin-bottom:15px;font-size:34px;color:#222;line-height:1.25;font-weight:300} #shVision .cont03 .txt03 p span{position:relative} #shVision .cont03 .pl{white-space:pre-line} /* 260709 추가 css [e] */ /* 회사소개 - 연혁 */ #shHistory .area-title .tit-l{margin-bottom:0 !important} #shHistory .area-history .col-2{display:flex} #shHistory .area-history .col-2 > *{flex:1;width:100%} #shHistory .area-history .col-2 .fl-r{display:flex;justify-content:space-between} #shHistory .area-history .main-history{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:55px;border-right:1px solid #ddd} #shHistory .area-history .main-history .year-box{display:flex;align-items:center;gap:10px;font-size:46px;font-weight:700;color:#111;text-align:center} #shHistory .area-history .main-history .year-box .year{display:flex;height:56px;overflow:hidden} #shHistory .area-history .main-history .year-box .year .digit-box{display:flex;flex-direction:column;transition:transform 0.5s} #shHistory .area-history .main-history .year-box .year .digit-box span{line-height:56px} #shHistory .area-history .main-history .year-box .hypen{transform:translateY(-3px)} #shHistory .area-history .main-history .thumb-box{display:flex;flex-direction:column;align-items:center;gap:30px;width:85%;aspect-ratio:560 / 460} #shHistory .area-history .main-history .thumb-box .thumb{position:relative;width:100%;height:100%;border-radius:20px;overflow:hidden} #shHistory .area-history .main-history .thumb-box .thumb .thumb-cover{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;clip-path:ellipse(50% 0% at 50% 100%);transition:clip-path 1.5s;will-change:clip-path, transform;background-color:#fff} #shHistory .area-history .main-history .thumb-box .thumb .thumb-cover.active{clip-path:ellipse(300% 300% at 50% 100%);animation:imgChange 1.5s;transform:translateY(0) scale(1)} #shHistory .area-history .main-history .thumb-box .thumb img{width:100%;height:100%;object-fit:cover} #shHistory .area-history .main-history .thumb-box .thumb .port img{object-fit:contain} #shHistory .area-history .main-history .thumb-box .text{display:grid} #shHistory .area-history .main-history .thumb-box .text p{grid-area:1 / 1;opacity:0;visibility:hidden;text-align:center;font-size:24px;font-weight:700;color:#111} #shHistory .area-history .main-history .thumb-box .text p.active{opacity:1;visibility:visible} #shHistory .area-history .all-history{--gap:90px;display:flex;flex-direction:column;padding-left:100px;padding-top:calc(220px - var(--gap));padding-bottom:70vh} #shHistory .area-history .all-history > div{display:flex;flex-direction:column;gap:var(--gap);padding-top:var(--gap)} #shHistory .area-history .all-history dl{display:flex;flex-direction:column;gap:30px} #shHistory .area-history .all-history dt{font-size:28px;font-weight:700;color:#111} #shHistory .area-history .all-history dd{font-size:24px;font-weight:600;color:#777} #shHistory .area-history .all-history dd .thumb{display:none} #shHistory .area-history .history-navigation{position:sticky;top:0;height:100vh;display:flex;align-items:center} #shHistory .area-history .history-navigation .navigation{position:relative} #shHistory .area-history .history-navigation .swiper-container{overflow:visible} #shHistory .area-history .history-navigation ul{display:flex;flex-direction:column;gap:75px} #shHistory .area-history .history-navigation ul li{display:flex;align-items:center;justify-content:space-between;gap:22px;cursor:pointer} #shHistory .area-history .history-navigation ul li .dot{position:relative;width:13px;aspect-ratio:1;border-radius:50px;background-color:#dcdcdc;transition:background-color 0.2s} #shHistory .area-history .history-navigation ul li .dot::before, #shHistory .area-history .history-navigation ul li .dot::after{opacity:0;position:absolute;content:'';top:50%;left:50%;transform:translate(-50%, -50%);transition:opacity 0.2s} #shHistory .area-history .history-navigation ul li .dot::before{width:23px;aspect-ratio:1;border-radius:50px;background-color:rgba(47,129,119,0.4)} #shHistory .area-history .history-navigation ul li .dot::after{width:35px;aspect-ratio:1;border-radius:100px;background-color:rgba(47,129,119,0.2)} #shHistory .area-history .history-navigation ul li .txt{font-size:22px;font-weight:700;color:var(--primary);transition:color 0.2s} #shHistory .area-history .history-navigation ul li.active .dot{background-color:var(--primary)} #shHistory .area-history .history-navigation ul li.active .dot::before, #shHistory .area-history .history-navigation ul li.active .dot::after{opacity:1} #shHistory .area-history .history-navigation .bar{position:absolute;top:50%;right:6px;transform:translateY(-50%);width:1px;height:95%;background-color:#e1e1e1} #shHistory .area-history .history-navigation ul li.active .dot{animation:scale 2s infinite} /* 연도 모션 */ /* 2017-2018 */ #shHistory .area-history .main-history .year-box.up02 .from .digit-1{transform:translateY(-700%)} #shHistory .area-history .main-history .year-box.up02 .to .digit-1{transform:translateY(-500%)} /* 2019-2022 */ #shHistory .area-history .main-history .year-box.up03 .from .digit-1{transform:translateY(-900%)} #shHistory .area-history .main-history .year-box.up03 .to .digit-1{transform:translateY(-900%)} #shHistory .area-history .main-history .year-box.up03 .to .digit-2{transform:translateY(-100%)} /* 2023-2024 */ #shHistory .area-history .main-history .year-box.up04 .from .digit-2{transform:translateY(-100%)} #shHistory .area-history .main-history .year-box.up04 .from .digit-1{transform:translateY(-1300%)} #shHistory .area-history .main-history .year-box.up04 .to .digit-2{transform:translateY(-100%)} #shHistory .area-history .main-history .year-box.up04 .to .digit-1{transform:translateY(-1100%)} /* 2025-2026 */ #shHistory .area-history .main-history .year-box.up05 .from .digit-2{transform:translateY(-100%)} #shHistory .area-history .main-history .year-box.up05 .from .digit-1{transform:translateY(-1500%)} #shHistory .area-history .main-history .year-box.up05 .to .digit-2{transform:translateY(-100%)} #shHistory .area-history .main-history .year-box.up05 .to .digit-1{transform:translateY(-1300%)} @keyframes scale{0%{transform:scale(1)}50%{transform:scale(1.15)}100%{transform:scale(1)}} @keyframes imgChange{0%{transform:translateY(30px) scale(1.5)}100%{transform:translateY(0) scale(1)}} /* 회사소개 - 특허 및 인증 (임시 스케치용)*/ #shPatent .area-cont{padding-top:95px;padding-bottom:170px} #shPatent .area-cont .tab-cont{display:none} #shPatent .area-cont .tab-cont.view{display:block} #shPatent .area-cont .tab-cont ul{display:grid;grid-template-columns:repeat(3,1fr);gap:28px} #shPatent .area-cont .tab-cont ul li{min-width:0} #shPatent .area-cont .tab-cont ul li button{all:unset;display:flex;flex-direction:column;gap:28px;width:100%;cursor:pointer} #shPatent .area-cont .tab-cont ul li button .thumb-box{display:flex;align-items:center;justify-content:center;width:100%;height:300px;border:1px solid #e1e1e1;border-radius:10px} #shPatent .area-cont .tab-cont ul li button .thumb-box img{max-width:300px;width:100%} #shPatent .area-cont .tab-cont ul li button .txt-box{display:flex;flex-direction:column;gap:12px} #shPatent .area-cont .tab-cont ul li button .txt-box .cate{font-size:15px;font-weight:700;color:#777} #shPatent .area-cont .tab-cont ul li button .txt-box .subject{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:22px;font-weight:700;color:#111} #shPatent .overlay{z-index:99;position:fixed;top:0;left:0;display:none;align-items:center;justify-content:center;width:100%;height:100%;background-color:rgba(17,17,17,0.8)} #shPatent .overlay.show{display:flex} #patentModal{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:30px;max-width:594px;width:100%;padding:55px 50px;background-color:#fff;border-radius:20px;overflow:hidden} #patentModal .btn--close.top{all:unset;position:absolute;top:30px;right:40px;cursor:pointer} #patentModal .btn--close.bottom{all:unset;display:inline-flex;align-items:center;justify-content:center;width:58px;height:30px;margin:0 auto;border:1px solid #e1e1e1;border-radius:5px;font-size:13px;font-weight:700;color:#222;background-color:#fff;transition:background-color 0.2s, color 0.2s, border-color 0.2s;cursor:pointer} #patentModal .btn--close.bottom:hover{background-color:var(--primary);color:#fff;border-color:var(--primary)} #patentModal .modal__title{display:flex;flex-direction:column;gap:20px;align-items:flex-start} #patentModal .modal__title .cate{font-size:16px;font-weight:700;color:#999} #patentModal .modal__title .subject{font-size:23px;font-weight:700;color:#111} #patentModal .modal__title .link-more{display:inline-flex;align-items:center;justify-content:center;gap:15px;padding:8px 15px;border-radius:100px;background-color:var(--primary);border:1px solid var(--primary);font-size:14px;font-weight:700;color:#fff;transition:background-color 0.2s, color 0.2s} #patentModal .modal__title .link-more svg{flex-shrink:0;width:18px;height:18px} #patentModal .modal__title .link-more:hover{background-color:#fff;color:var(--primary)} #patentModal .modal__img{display:flex;justify-content:center;width:100%;max-height:420px;overflow-y:auto} /* 전체 스크롤바 커스텀 */ #shPatent .overlay ::-webkit-scrollbar{width:10px} /* 스크롤바 뒷배경(트랙) */ #shPatent .overlay ::-webkit-scrollbar-track{background:#f1f1f1} /* 움직이는 막대(핸들) */ #shPatent .overlay ::-webkit-scrollbar-thumb{background:var(--primary);border-radius:5px} /* 막대에 마우스 올렸을 때 */ #shPatent .overlay ::-webkit-scrollbar-thumb:hover{background:var(--primary)} /* 회사소개 - 찾아오시는 길 */ #shLocation .area-title .sticky-wrapper{height:70vh} #shLocation .area-cont{padding-top:140px;padding-bottom:120px} #shLocation .area-cont .tab-cont{display:none} #shLocation .area-cont .tab-cont.view{display:block} #shLocation .area-cont .tab-cont ul{display:flex;flex-direction:column;gap:100px} #shLocation .area-cont .tab-cont .col-2{display:flex;justify-content:space-between;gap:100px} #shLocation .area-cont .tab-cont .col-2 .fl-l{max-width:732px;width:100%} #shLocation .area-cont .tab-cont .col-2 .fl-l h3{display:flex;align-items:center;gap:15px;padding-bottom:25px;font-size:32px;font-weight:700;color:#111} #shLocation .area-cont .tab-cont .col-2 .fl-l h3::before{content:'';width:6px;height:34px;background-color:var(--primary)} #shLocation .area-cont .tab-cont .col-2 .fl-l dl{display:flex;flex-direction:column;gap:15px;padding:25px 0;border-top:1px solid #e1e1e1} #shLocation .area-cont .tab-cont .col-2 .fl-l dt{font-size:20px;font-weight:600;color:#111} #shLocation .area-cont .tab-cont .col-2 .fl-l dd{font-size:18px;line-height:1.5;color:#777} #shLocation .area-cont .tab-cont .col-2 .fl-r{max-width:700px;width:100%} #shLocation .area-cont .tab-cont .col-2 .fl-r .map_box{max-width:700px;width:100%;height:406px;border-radius:20px;overflow:hidden} #shLocation .area-cont .tab-cont .col-2 .fl-r .map_box iframe{width:100%;height:100%} /* ================================================= 사업분야 */ #shBusiness .area-title .group-subtit .tit-l{white-space:pre-line} #shBusiness .sc__service{position:relative;z-index:5;background-color:#fff} #shBusiness .sc__service .service__work{padding:140px 0 200px} #shBusiness .sc__service .service__work .group-subtit{padding-bottom:94px;text-align:center} #shBusiness .sc__service .service__work .group-subtit h3{margin:30px 0 40px !important;word-break:keep-all} #shBusiness .sc__service .service__work .group-subtit p.desc{font-size:18px;font-weight:400;line-height:1.5;color:#111} #shBusiness .sc__service .service__work .swiper-container{padding-bottom:80px} #shBusiness .sc__service .service__work .swiper-slide{display:flex;justify-content:center;align-items:flex-end;padding:52px 15px;border-radius:15px;overflow:hidden;aspect-ratio:509 / 519} #shBusiness .sc__service .service__work .swiper-slide::before{position:absolute;content:'';inset:0%;width:100%;height:100%;background-color:rgba(0,0,0,0.1);pointer-events:none} #shBusiness .sc__service .service__work .swiper-slide img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover} #shBusiness .sc__service .service__work .swiper-slide h4{position:relative;z-index:1;font-size:24px;font-weight:700;line-height:1.4;color:#fff;text-align:center} #shBusiness .sc__service .service__work .swiper-pagination{position:static;height:4px;background-color:#c4c4c4} #shBusiness .sc__service .service__work .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:#2F8177 !important} #shBusiness .sc__advantage{position:relative;z-index:5;background-color:#fff} #shBusiness .sc__advantage .advantage__main{padding-bottom:90px} #shBusiness .sc__advantage .advantage__main .group-subtit{text-align:center} #shBusiness .sc__advantage .advantage__main .group-subtit h3{white-space:pre-line} #shBusiness .sc__advantage .advantage__main .group-subtit .tit-l{white-space:pre-line;font-size:50px;margin:40px 0 100px} #shBusiness .sc__advantage .advantage__main .group-subcont ul{display:grid;grid-template-columns:repeat(3,1fr);gap:25px} #shBusiness .sc__advantage .advantage__main .group-subcont ul li{display:flex;flex-direction:column;padding:40px 48px;border-radius:15px} #shBusiness .sc__advantage .advantage__main .group-subcont ul li .icon{overflow:hidden;display:flex;align-items:center;justify-content:center;width:70px;aspect-ratio:1;margin-bottom:24px;border-radius:100px} #shBusiness .sc__advantage .advantage__main .group-subcont ul li h4{padding-bottom:10px;font-size:24px;font-weight:700;line-height:1.25} #shBusiness .sc__advantage .advantage__main .group-subcont ul li p.desc{font-size:17px;line-height:1.6;white-space:pre-line} #shBusiness .sc__advantage .advantage__main .group-subcont ul li:nth-child(odd){background-color:#EDF3F2} #shBusiness .sc__advantage .advantage__main .group-subcont ul li:nth-child(even){background-color:#EDF2E9} #shBusiness .sc__advantage .advantage__main .group-subcont ul li:nth-child(odd) .icon{background-color:#2F8177} #shBusiness .sc__advantage .advantage__main .group-subcont ul li:nth-child(even) .icon{background-color:#5C8734} #shBusiness .sc__advantage .advantage__esg{padding:120px 0 150px;background-color:#f7f7f7} #shBusiness .sc__advantage .advantage__esg .group-subtit{padding-bottom:80px;text-align:center} #shBusiness .sc__advantage .advantage__esg .group-subtit h3{margin:0;padding-bottom:30px;font-size:45px;white-space:pre-line} #shBusiness .sc__advantage .advantage__esg .group-subtit p{font-size:18px;font-weight:500} #shBusiness .sc__advantage .advantage__esg .group-subcont ul{display:flex;justify-content:space-between;gap:20px} #shBusiness .sc__advantage .advantage__esg .group-subcont ul li{position:relative;max-width:154px;width:100%;height:520px;border-radius:15px;overflow:hidden;background-color:#2F8177;transition:max-width ease 0.65s} #shBusiness .sc__advantage .advantage__esg .group-subcont ul li .default{display:flex;flex-direction:column;align-items:center;justify-content:space-between;width:100%;height:100%;padding:56px 10px 50px;transition:all ease 0.35s} #shBusiness .sc__advantage .advantage__esg .group-subcont ul li .default h4{writing-mode:sideways-rl;font-size:20px;font-weight:700;color:#fff} #shBusiness .sc__advantage .advantage__esg .group-subcont ul li .num{font-size:20px;font-weight:700;color:#fff} #shBusiness .sc__advantage .advantage__esg .group-subcont ul li .default .num{color:rgba(255,255,255,0.65)} #shBusiness .sc__advantage .advantage__esg .group-subcont ul li .hover .num{position:absolute;z-index:3;top:48px;right:94px} /* on 상태 */ #shBusiness .sc__advantage .advantage__esg .group-subcont ul li .hover{opacity:0;visibility:hidden;z-index:1;position:absolute;top:0;left:0;width:100%;height:100%;transition:all ease 0.35s} #shBusiness .sc__advantage .advantage__esg .group-subcont ul li .hover::before{z-index:2;position:absolute;content:'';inset:0%;width:100%;height:100%;background-color:rgba(0,0,0,0.24)} #shBusiness .sc__advantage .advantage__esg .group-subcont ul li .hover img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover} #shBusiness .sc__advantage .advantage__esg .group-subcont ul li .hover h4{position:absolute;bottom:100px;left:94px;z-index:3;display:flex;flex-direction:column;gap:10px;font-size:36px;font-weight:700;color:#fff} #shBusiness .sc__advantage .advantage__esg .group-subcont ul li .hover h4 span{font-family:var(--o-font);font-size:15px;font-weight:700;color:rgba(255,255,255,0.5)} #shBusiness .sc__advantage .advantage__esg .group-subcont ul li.on{max-width:1056px} #shBusiness .sc__advantage .advantage__esg .group-subcont ul li.on .hover{opacity:1;visibility:visible} #shBusiness .sc__advantage .advantage__esg .group-subcont ul li.on .default{opacity:0;visibility:hidden} #shBusiness .area-title{height:41vh} #shBusiness .area-title .group-subtit{position:fixed;width:100%;padding-top:100px;text-align:center} #shBusiness .area-title .group-subtit h3{white-space:pre-line;margin-bottom:0 !important} #shBusiness .area-cont{position:relative;z-index:10} #shBusiness .area-cont .sticky-container{height:400vh} #shBusiness .area-cont .sticky-wrapper{background-color:#fff} #shBusiness .area-cont .controller{position:absolute;bottom:0;left:0;width:100%;z-index:3} #shBusiness .area-cont .controller .pagination ul{display:grid;grid-template-columns:repeat(4,1fr);align-items:center} #shBusiness .area-cont .controller .pagination ul li{display:flex;align-items:center;justify-content:center;width:auto;height:85px;font-size:18px;font-weight:700;color:#fff;background:transparent;opacity:1;cursor:pointer} #shBusiness .area-cont .sticky-wrapper{display:grid} #shBusiness .area-cont .slide-item{z-index:1;grid-area:1/1;opacity:0;visibility:hidden;transition:opacity 0.5s ease-in-out, visibility 0s linear 0.5s} #shBusiness .area-cont .slide-item.on{z-index:2;opacity:1;visibility:visible;transition:opacity 0.5s ease-in-out, visibility 0s linear 0s} #shBusiness .area-cont .slide-item::before{z-index:1;position:absolute;content:'';inset:0%;width:100%;height:100%;background-color:rgba(0,0,0,0.1)} #shBusiness .area-cont .slide-item .inner-s{overflow:hidden;z-index:1;position:relative;display:flex;align-items:center;justify-content:flex-end;height:100%} #shBusiness .area-cont .slide-item > img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover} #shBusiness .area-cont .slide-item .card{max-width:440px;width:100%;padding:60px 40px;border-radius:20px;overflow:hidden;background-color:#fff;transform:translateX(80%);opacity:0;transition:transform 0.8s, opacity 0.8s} #shBusiness .area-cont .slide-item .card .en{font-family:var(--o-font);font-size:18px;font-weight:700;color:var(--primary)} #shBusiness .area-cont .slide-item .card h4{padding:20px 0 35px;font-size:38px;font-weight:700;color:#111} #shBusiness .area-cont .slide-item .card p.desc{padding-bottom:60px;font-size:17px;font-weight:500;line-height:1.6;white-space:pre-line;color:#222} #shBusiness .area-cont .slide-item .thumb-box{height:170px;border-radius:10px;overflow:hidden} #shBusiness .area-cont .slide-item .thumb-box img{width:100%;height:100%;object-fit:cover} #shBusiness .area-cont .controller .scrollbar{position:relative;height:1px;background:rgba(255, 255, 255, 0.5)} #shBusiness .area-cont .controller .scrollbar .scrollbar-drag{position:absolute;top:-2px;width:25%;height:4px;background:#fff;border-radius:0} #shBusiness .area-cont .slide-item.on .card{opacity:1;transform:translateX(0)} /* ================================================= 상담문의 */ #shContact .group-subtit{text-align:center;padding-bottom:65px} #shContact .group-subtit h3{margin:40px 0 30px !important} #shContact .group-subtit p.comment{font-size:17px;font-weight:500;color:#777} #shContact .group-subcont{max-width:1400px;margin:0 auto} #shContact .group-subcont p.notice{padding-bottom:15px;font-size:14px;font-weight:600;color:#333;text-align:right} #shContact #consultform{border-top:2px solid #111} #shContact #consultform .reserve-box{padding-bottom:140px} #shContact #consultform .reserve-box .form-box{display:flex;justify-content:space-between;gap:60px} #shContact #consultform .reserve-box .form-box:first-child{padding:60px 0 75px;border-bottom:1px solid #e1e1e1} #shContact #consultform .reserve-box .form-box:last-child{padding-top:60px} #shContact #consultform .reserve-box .form-box h3{flex-shrink:0;font-size:32px;font-weight:700;color:#111} #shContact #consultform .reserve-box .form-box .form-list{display:flex;flex-direction:column;gap:25px;max-width:860px;width:100%} #shContact #consultform .reserve-box .form-box .form__item{display:flex;align-items:center;justify-content:space-between;gap:18px} #shContact #consultform .reserve-box .form-box .form__item.comment{align-items:flex-start} #shContact #consultform .reserve-box .form-box .form__item.comment label{padding-top:5px} #shContact #consultform .reserve-box .form-box .form__item label{display:inline-flex;align-items:center;gap:3px;max-width:154px;width:100%;font-size:18px;font-weight:700;color:#111} #shContact #consultform .reserve-box .form-box .form__item label.required{background-image:none !important} #shContact #consultform .reserve-box .form-box .form__item label.required::after{content:'*';color:#e91e63} #shContact #consultform .reserve-box .form-box .form__item input{all:unset;height:63px;max-width:700px;width:100%;border-radius:5px;padding:0 30px;box-sizing:border-box;background-color:#f6f6f6} #shContact #consultform .reserve-box .form-box .form__item textarea{max-width:700px;width:100%;height:180px;border-radius:5px;padding:30px;background-color:#f6f6f6;border:none} #shContact #consultform .reserve-box .form-box .form__item input[type=text]:focus, #shContact #consultform .reserve-box .form-box .form__item textarea:focus{border:none !important;box-shadow:none} #shContact #consultform .reserve-box .form-box .form__item .file-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0} #shContact #consultform .reserve-box .form-box .form__item .file-btn{justify-content:center;height:100%;background-color:#111;color:#fff;border-radius:5px;font-size:15px;font-weight:700;text-align:center;cursor:pointer} #shContact #consultform .reserve-box .form-box .form__item input, #shContact #consultform .reserve-box .form-box .form__item textarea{font-size:15px;font-weight:600;color:#111} #shContact #consultform .reserve-box .form-box .form__item input::placeholder, #shContact #consultform .reserve-box .form-box .form__item textarea::placeholder{font-size:15px;font-weight:600;color:#999} #shContact #consultform .reserve-box .form-box .form__item .flex{display:flex;gap:10px;flex:1} #shContact #consultform .reserve-box .form-box .form__item .file-btn{height:63px} #shContact #consultform .reserve-box .btn-wrap .t_r_check{display:flex;align-items:center;gap:18px} #shContact #consultform .reserve-box .label{display:inline-flex;align-items:center;gap:3px;max-width:154px;width:100%;font-size:18px;font-weight:700;color:#111} #shContact #consultform .reserve-box .btn-wrap .t_r_check .label.required{background-image:none !important} #shContact #consultform .reserve-box .btn-wrap .t_r_check .label.required::after{content:'*';color:#e91e63} #shContact #consultform .reserve-box .btn-wrap .t_r_check .flex input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0} #shContact #consultform .reserve-box .btn-wrap .t_r_check .flex label{display:flex;align-items:center;gap:10px} #shContact #consultform .reserve-box .btn-wrap .t_r_check .flex label .ic-check{display:flex;align-items:center;justify-content:center;width:15px;height:15px;background-color:#f5f5f5;border-radius:2px;padding:2px} #shContact #consultform .reserve-box .btn-wrap .t_r_check .flex label .ic-check svg{stroke-width:3px} #shContact #consultform .reserve-box .btn-wrap .t_r_check .flex input:checked + label .ic-check{background-color:var(--primary)} #shContact #consultform .reserve-box .btn-wrap .t_r_check .flex input:checked + label .ic-check svg{stroke:#fff !important} #shContact #consultform .reserve-box .btn-wrap .t_r_check .flex label .label-txt{font-size:15px;color:#999} #shContact #consultform .reserve-box .btn-wrap .t_r_check .flex label .label-txt a{font-size:15px;color:#999;cursor:pointer;transition:color 0.2s} #shContact #consultform .reserve-box .btn-wrap .t_r_check .flex label .label-txt a:hover{color:#111} #shContact #consultform .submit-box{display:flex;justify-content:center;padding-bottom:85px} #shContact #consultform .submit-box input{all:unset;width:250px;height:63px;background-color:var(--primary);border-radius:5px;text-align:center;font-size:17px;font-weight:700;color:#fff;border:1px solid transparent;cursor:pointer;transition:background-color 0.2s, color 0.2s, border-color 0.2s} #shContact #consultform .submit-box input:hover{background-color:#fff;color:var(--primary);border-color:var(--primary)} #shContact .link-list{display:flex;align-items:center;justify-content:center;width:118px;height:46px;margin-left:auto;background-color:#fff;border-radius:5px;border:1px solid #e1e1e1;font-size:15px;font-weight:700;color:#111} /* ================================================= ESG */ #shEsg .area-title .thumb-box .thumb::before{display:none} #shEsg .area-title .thumb-box .thumb img{object-position:bottom} #shEsg .area-slogan{position:relative;padding:130px 0 120px} #shEsg .area-slogan h2{padding-bottom:70px;font-size:44px;font-weight:700;text-align:center;color:#111} #shEsg .area-slogan .slogan-box{position:relative;display:flex;align-items:center;justify-content:center;gap:60px;margin-bottom:70px} #shEsg .area-slogan .slogan-box::before{position:absolute;content:'';top:50%;left:50%;transform:translate(-50%, -50%);width:40%;height:1px;background-color:#2f8177;z-index:-1} #shEsg .area-slogan .slogan-box .txt-box{max-width:400px;width:100%;height:174px;border:3px solid var(--primary);border-radius:100px;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;color:#111;text-align:center;background-color:#fff} #shEsg .area-slogan .slogan-box .logo{display:flex;align-items:center;justify-content:center;max-width:300px;width:100%;aspect-ratio:1;border-radius:500px;background:linear-gradient(to left, #2e867a, #5d8c35)} #shEsg .area-slogan .slogan-box .logo img{width:142px} #shEsg .area-slogan .desc-box{display:flex;flex-direction:column;align-items:center;gap:30px;max-width:1346px;width:100%;margin:0 auto;padding:50px 20px 55px;border-radius:20px;background-color:#f6f6f6;text-align:center} #shEsg .area-slogan .desc-box .en{font-size:22px;font-weight:700;line-height:1.2;color:#111} #shEsg .area-slogan .desc-box p{font-size:17px;color:#777;line-height:1.6;white-space:pre-line} #shEsg .area-slogan .desc-box p b{font-weight:700} #shEsg .area-cate{position:relative;background-color:#fff} #shEsg .area-cate .sticky-container{position:relative;height:400vh} #shEsg .area-cate .sticky-wrapper{display:grid;grid-template-columns:repeat(1,1fr)} #shEsg .area-cate .slide{position:relative;grid-area:1 / 1;height:100vh;opacity:0;visibility:hidden;transition:opacity 0.3s ease-in-out, visibility 0.3s} #shEsg .area-cate .slide::before{position:absolute;content:"";inset:0%;width:100%;height:100%;background-color:rgba(0,0,0,0.3)} #shEsg .area-cate .slide img{width:100%;height:100%;object-fit:cover} #shEsg .area-cate .slide .txt-box{position:absolute;top:50%;left:max(((100% - var(--subsize)) / 2), 20px);transform:translateY(-50%);z-index:1;display:flex;flex-direction:column;gap:40px} #shEsg .area-cate .slide .txt-box > *{position:relative;overflow:hidden} #shEsg .area-cate .slide .txt-box h2{font-size:70px;font-weight:700;color:#fff} #shEsg .area-cate .slide .txt-box p.desc{font-size:19px;font-weight:500;line-height:1.5;color:rgba(255,255,255,0.85);white-space:pre-line} #shEsg .area-cate .slide .txt-box span{display:inline-block;transform:translateY(100%);transition:transform 0.4s} #shEsg .area-cate .cate-navigation{z-index:1;position:absolute;top:0;right:0;display:flex;align-items:center;justify-content:center;max-width:260px;width:100%;height:100vh} #shEsg .area-cate .cate-navigation ul{display:flex;flex-direction:column;gap:30px;width:100%} #shEsg .area-cate .cate-navigation ul li{display:flex;align-items:center;justify-content:space-between;width:100%;height:83px;padding:0 30px ;background-color:rgba(255, 255, 255, 0.25);font-size:20px;font-weight:700;color:#fff;border-radius:15px 0 0 15px;transition:background-color 0.3s,color 0.3s;cursor:pointer} #shEsg .area-cate .cate-navigation ul li .ic-arrow{display:flex;align-items:center;justify-content:center;width:42px;aspect-ratio:1;border-radius:5px;background-color:var(--primary);color:#fff} #shEsg .area-cate .cate-navigation ul li .ic-arrow svg{stroke:#fff} #shEsg .area-cate .cate-navigation ul li.on{background-color:#fff;color:#111} #shEsg .area-cate .slide.on{opacity:1;visibility:visible;transition:opacity 0.2s ease-in-out 0s, visibility 0s} #shEsg .area-cate .slide.on .txt-box span{transform:translateY(0)} /* 사회공헌 */ #shEsg .area-social{position:relative} #shEsg .area-social .col-2{display:flex;justify-content:space-between} #shEsg .area-social .col-2 > *{flex:1;width:100%} #shEsg .area-social .sticky{position:sticky;top:0;display:flex;flex-direction:column;gap:155px;height:100vh;padding:140px 0 140px 85px} #shEsg .area-social .sticky .group-subtit{height:auto} #shEsg .area-social .sticky .group-subtit .tit-l{padding-bottom:40px;margin:0;color:#111} #shEsg .area-social .sticky .tab-menu{position:relative;display:flex;flex-direction:column;gap:30px} #shEsg .area-social .sticky .tab-menu::before{position:absolute;content:'';top:0;left:2px;width:1px;height:150px;background-color:#e1e1e1;z-index:-1} #shEsg .area-social .sticky .tab-menu li{display:flex;align-items:center;gap:25px;font-size:24px;font-weight:700;color:#999;cursor:pointer;transition:color 0.2s} #shEsg .area-social .sticky .tab-menu li::before{opacity:0;visibility:hidden;content:'';width:5px;height:30px;background-color:var(--primary);transition:opacity 0.2s ease-out, visibilitly 0s} #shEsg .area-social .sticky .tab-menu li.on{color:#111} #shEsg .area-social .sticky .tab-menu li.on::before{opacity:1;visibility:visible} #shEsg .area-social .scroll{padding-top:calc(420px - 105px);padding-bottom:140px;max-width:873px;width:100%} #shEsg .area-social .scroll ul li{display:flex;flex-direction:column;gap:64px;padding-top:105px} #shEsg .area-social .scroll ul li .text-box{position:relative} #shEsg .area-social .scroll ul li .text-box h3{display:flex;align-items:center;gap:18px;padding-bottom:35px;font-size:30px;font-weight:700;color:#111} #shEsg .area-social .scroll ul li .text-box h3 .num{display:flex;align-items:center;justify-content:center;width:35px;aspect-ratio:1;border-radius:5px;background-color:var(--primary);color:#fff;font-size:15px;font-weight:700} #shEsg .area-social .scroll ul li .text-box p.desc{font-size:18px;line-height:1.4;color:#777} #shEsg .area-social .scroll ul li .text-box a.link{position:absolute;bottom:0;right:0;display:flex;align-items:center;justify-content:space-between;width:172px;height:44px;padding:0 18px;border-radius:100px;background-color:#111;color:#fff;font-size:15px;font-weight:700;border:1px solid #111;transition:background-color 0.2s, color 0.2s} #shEsg .area-social .scroll ul li .text-box a.link svg{flex-shrink:0;width:20px;height:20px;transform:translateX(8px)} #shEsg .area-social .scroll ul li .text-box a.link:hover{background-color:#fff;color:#111} #shEsg .area-social .scroll ul li .thumb-box{max-width:873px;width:100%;aspect-ratio:873 / 427;border-radius:15px;overflow:hidden} #shEsg .area-social .scroll ul li .thumb-box img{width:100%;height:100%;object-fit:cover} /* marquee */ #shEsg .area-marquee{--x:-3576.76px;position:relative;overflow:hidden;background-color:#fff} #shEsg .area-marquee .marquee{display:flex;align-items:center;animation:subMarquee 50s infinite linear} #shEsg .area-marquee .marquee ul{display:flex;align-items:center} #shEsg .area-marquee .marquee ul li{display:flex;align-items:center;white-space:nowrap;font-size:64px;font-weight:700;color:#e9e9e9} #shEsg .area-marquee .marquee ul li img{margin:0 25px 0 28px} @keyframes subMarquee{0%{transform:translateX(0)}100%{transform:translateX(var(--x))}} /* partners */ #shEsg .area-partners{position:relative;padding:135px 0 145px !important;overflow:hidden} #shEsg .area-partners .group-subtit{padding-bottom:90px;text-align:center} #shEsg .area-partners .group-subtit .tit-l{margin:0;padding-bottom:55px;color:#111} #shEsg .area-partners .group-subtit .tit-l strong{font-weight:700;color:var(--primary)} #shEsg .area-partners .group-cont .marquee-container{--gap:35px;--x:-2827px;position:relative;display:flex;flex-direction:column;gap:30px} #shEsg .area-partners .group-cont .marquee-container::before, #shEsg .group-cont .marquee-container::after{position:absolute;content:'';width:710px;height:230px;top:50%;transform:translateY(-50%);z-index:1;pointer-events:none} #shEsg .area-partners .group-cont .marquee-container::before{left:0;background:linear-gradient(to right,rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100% )} #shEsg .area-partners .group-cont .marquee-container::after{right:0;background:linear-gradient(to left,rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100% )} #shEsg .area-partners .group-cont .marquee-wrapper{display:flex;gap:var(--gap)} #shEsg .area-partners .group-cont .marquee-wrapper ul{display:flex;gap:var(--gap)} #shEsg .area-partners .group-cont .marquee-wrapper ul li{flex-shrink:0;display:flex;align-items:center;justify-content:center;background-color:#fff;box-shadow:6px 6px 8px rgba(0,0,0,0.05);border-radius:8px;width:283px;height:83px} #shEsg .area-partners .group-cont .marquee-wrapper.to-left{animation:marqueeLogo 70s linear infinite} #shEsg .area-partners .group-cont .marquee-wrapper.to-right{animation:marqueeLogo 70s linear infinite reverse} @keyframes marqueeLogo{0%{transform:translateX(0)}100%{transform:translateX(calc(var(--x) - var(--gap)))}} /* 반응형 [s] */ @media (max-width:1800px){ /* ================================================= 회사소개 */ /* 회사소개 - 경영철학 */ /* 260709 추가 */ #shVision .sticky-wrapper .item.front{padding:0 20px} #shVision .back__cont .tit-box h2{font-size:62px} #shVision .back__cont .cont-box ul li p{padding:20px 0 26px} #shVision .back__cont .cont-box ul li:last-child p{padding:20px 0 48px} #shVision .back__cont .cont-box ul li strong{font-size:32px} /* 회사소개 - 연혁 */ #shHistory .area-history .col-2 .fl-r{padding-right:20px} /* ================================================= ESG */ #shEsg .area-social .col-2{max-width:1580px} #shEsg .area-social .sticky{padding:140px 0} #shEsg .area-social .scroll ul li .thumb-box{max-width:none} } @media (max-width:1600px){ /* 서브페이지 공통 */ .pagecommon .area-title .sticky-wrapper.cm-sticky{height:60vh} .pagecommon .area-title .group-subtit{padding:80px 0} .pagecommon .group-subtit h2{font-size:22px} .pagecommon .group-subtit h3{margin:26px 0 50px;font-size:46px} .pagecommon .group-subtit p.desc{font-size:20px} .pagecommon .group-subtit .tit-l{margin:30px 0 55px;font-size:52px} .pagecommon .area-cont ul.tab-list{gap:10px;padding-bottom:80px} .pagecommon .area-cont li.tab-menu{padding:10px 22px;font-size:15px} /* ================================================= 회사소개 */ /* 회사소개 - 경영철학 */ /* 260709 추가 */ #shVision .bg-box::before{background-color:rgba(0,0,0,0.6)} #shVision .back__cont{padding:0 20px} #shVision .back__cont .tit-box h2{font-size:56px} #shVision .back__cont .cont-box ul li .cate{height:30px;font-size:14px} #shVision .back__cont .cont-box ul li p{gap:6px} #shVision .acd_wrap{padding:100px 0} /* 회사소개 - 연혁 */ #shHistory .area-history .main-history{gap:35px} #shHistory .area-history .main-history .year-box{font-size:40px} #shHistory .area-history .main-history .year-box .year{height:49px} #shHistory .area-history .main-history .year-box .year .digit-box span{line-height:49px} #shHistory .area-history .all-history{--gap:80px;padding-left:70px} #shHistory .area-history .all-history dl{gap:18px} #shHistory .area-history .all-history dt{font-size:24px} #shHistory .area-history .all-history dd{font-size:22px} #shHistory .area-history .history-navigation ul{gap:45px} #shHistory .area-history .history-navigation ul li .txt{font-size:18px} #shHistory .area-history .history-navigation ul li .dot{width:8px} #shHistory .area-history .history-navigation ul li .dot::before{width:16px} #shHistory .area-history .history-navigation ul li .dot::after{width:26px} #shHistory .area-history .history-navigation .bar{right:4px} /* 회사소개 - 찾아오시는 길 */ #shLocation .area-cont{padding:120px 20px} #shLocation .area-cont .tab-cont ul{gap:80px} #shLocation .area-cont .tab-cont .col-2 .fl-l h3{font-size:28px} #shLocation .area-cont .tab-cont .col-2 .fl-l h3::before{height:30px} #shLocation .area-cont .tab-cont .col-2 .fl-l dt{font-size:18px} #shLocation .area-cont .tab-cont .col-2 .fl-l dd{font-size:16px} #shLocation .area-cont .tab-cont .col-2 .fl-l{max-width:600px} /* ================================================= 사업분야 */ #shBusiness .area-title{height:36vh} #shBusiness .area-title .group-subtit{padding-top:80px} #shBusiness .area-cont .slide-item .inner-s{padding:0 20px} #shBusiness .area-cont .slide-item .card{padding:52px 40px} #shBusiness .area-cont .slide-item .card h4{padding:15px 0 30px;font-size:32px} #shBusiness .area-cont .slide-item .card p.desc{padding-bottom:46px;font-size:16px} #shBusiness .sc__service .service__work{padding:120px 20px 140px} #shBusiness .sc__service .service__work .group-subtit{padding-bottom:45px} #shBusiness .sc__service .service__work .group-subtit h3{margin:26px 0 30px !important} #shBusiness .sc__service .service__work .swiper-container{padding-bottom:60px} #shBusiness .sc__service .service__work .swiper-slide{padding:24px 8px} #shBusiness .sc__advantage{padding:0 20px} #shBusiness .sc__advantage .advantage__main .group-subcont ul{gap:18px} #shBusiness .sc__advantage .advantage__main .group-subcont ul li{padding:28px} #shBusiness .sc__advantage .advantage__main .group-subcont ul li .icon{width:62px;margin-bottom:18px} #shBusiness .sc__advantage .advantage__main .group-subcont ul li .icon img{transform:scale(0.8)} #shBusiness .sc__advantage .advantage__main .group-subcont ul li h4{font-size:20px} #shBusiness .sc__advantage .advantage__main .group-subcont ul li p.desc{font-size:16px} /* ================================================= ESG */ #shEsg .area-slogan{padding:120px 20px 110px} #shEsg .area-cate .slide::before{background-color:rgba(0,0,0,0.4)} #shEsg .area-social{padding:0 20px} #shEsg .area-social .sticky{gap:130px;padding:120px 0} #shEsg .area-social .sticky .tab-menu{gap:24px} #shEsg .area-social .sticky .tab-menu li{gap:20px;font-size:22px} #shEsg .area-social .scroll{padding-top:calc(390px - 105px);padding-bottom:120px} #shEsg .area-social .scroll ul li{gap:50px} #shEsg .area-social .scroll ul li .text-box h3{gap:16px;padding-bottom:25px;font-size:26px} #shEsg .area-partners{padding:120px 0 135px !important} #shEsg .area-partners .group-subtit{padding-bottom:60px} #shEsg .area-partners .group-subtit .tit-l{padding-bottom:40px} /* ================================================= Contact Us */ #shContact #consultform .reserve-box{padding-bottom:120px} #shContact #consultform .reserve-box .form-box h3{font-size:26px} } @media (max-width:1400px){ /* 서브페이지 공통 */ .pagecommon .area-title{height:80vh} .pagecommon .area-title .group-subtit{padding:60px 0} .pagecommon .group-subtit h3{margin:26px 0 50px !important;font-size:42px} .pagecommon .group-subtit .tit-l{margin:30px 0 55px;font-size:46px} .pagecommon .group-subtit p.desc{font-size:18px} .pagecommon .area-title .group-subtit p:not(:last-child){padding-bottom:26px} .pagecommon .area-cont ul.tab-list{padding-bottom:60px} /* ================================================= 회사소개 */ /* 회사소개 - 경영철학 */ /* 260709 추가 */ #shVision .back__cont .tit-box{gap:36px} #shVision .back__cont .tit-box h2{font-size:46px} #shVision .back__cont .cont-box ul{gap:60px;max-width:710px} #shVision .back__cont .cont-box ul li p{padding:14px 0 20px;font-size:18px} #shVision .back__cont .cont-box ul li:last-child p{padding:14px 0 38px} #shVision .back__cont .cont-box ul li strong{font-size:28px} #shVision .back__cont .cont-box ul li .cate{height:27px;font-size:13px} #shVision .acd_wrap{padding:70px 0 100px} /* 회사소개 - 연혁 */ #shHistory .area-history .main-history{gap:24px} #shHistory .area-history .main-history .year-box{font-size:35px} #shHistory .area-history .main-history .year-box .year{height:43px} #shHistory .area-history .main-history .year-box .year .digit-box span{line-height:43px} #shHistory .area-history .main-history .thumb-box{gap:22px} #shHistory .area-history .main-history .thumb-box .text p{font-size:18px} #shHistory .area-history .all-history{padding-left:55px;padding-top:calc(270px - var(--gap))} #shHistory .area-history .all-history dt{font-size:22px} #shHistory .area-history .all-history dd{font-size:20px} /* 회사소개 - 찾아오시는 길 */ #shLocation .area-title .sticky-wrapper{height:50vh} #shLocation .area-cont .tab-cont .col-2{align-items:center} #shLocation .area-cont .tab-cont .col-2 .fl-l h3{gap:10px;padding-bottom:20px;font-size:24px} #shLocation .area-cont .tab-cont .col-2 .fl-l h3::before{width:5px;height:25px} #shLocation .area-cont .tab-cont .col-2 .fl-l dl{padding:20px 0} #shLocation .area-cont .tab-cont .col-2 .fl-l dt{font-size:17px} #shLocation .area-cont .tab-cont .col-2 .fl-l dd{font-size:15px} #shLocation .area-cont .tab-cont .col-2 .fl-r .map_box{height:320px;border-radius:15px} /* ================================================= 사업분야 */ #shBusiness .area-title{height:31vh} #shBusiness .area-title .group-subtit{padding-top:60px} #shBusiness .sc__service .service__work{padding:100px 20px 120px} #shBusiness .sc__service .service__work .swiper-slide{padding:32px 15px} #shBusiness .sc__service .service__work .swiper-slide h4{font-size:21px} #shBusiness .sc__service .service__work .swiper-container{padding-bottom:46px} #shBusiness .sc__advantage .advantage__main .group-subcont ul li p.desc{white-space:normal} /* ================================================= ESG */ #shEsg .area-slogan h2{padding-bottom:50px;font-size:38px} #shEsg .area-slogan .slogan-box{margin-bottom:50px} #shEsg .area-slogan .desc-box{gap:25px;padding:50px 20px 45px} #shEsg .area-slogan .slogan-box .txt-box{max-width:360px;height:140px;font-size:22px} #shEsg .area-slogan .slogan-box .logo{max-width:270px} #shEsg .area-slogan .slogan-box .logo img{width:130px} #shEsg .area-cate .slide .txt-box{gap:30px} #shEsg .area-cate .slide .txt-box h2{font-size:64px} #shEsg .area-cate .slide .txt-box p.desc{font-size:18px} #shEsg .area-cate .cate-navigation{max-width:240px} #shEsg .area-cate .cate-navigation ul{gap:16px} #shEsg .area-cate .cate-navigation ul li{height:75px} #shEsg .area-cate .cate-navigation ul li .ic-arrow{width:36px} #shEsg .area-cate .cate-navigation ul li .ic-arrow svg{width:22px;height:22px} #shEsg .area-social .sticky{gap:100px} #shEsg .area-social .sticky .group-subtit .tit-l{padding-bottom:35px} #shEsg .area-social .sticky .tab-menu::before{height:110px} #shEsg .area-social .sticky .tab-menu li{gap:15px;font-size:20px} #shEsg .area-social .sticky .tab-menu li::before{height:24px} #shEsg .area-social .scroll{padding-top:calc(345px - 105px)} #shEsg .area-social .scroll ul li .text-box h3{gap:14px;padding-bottom:20px;font-size:24px} #shEsg .area-social .scroll ul li .text-box p.desc{font-size:17px} #shEsg .area-social .scroll ul li .text-box a.link{width:165px;font-size:14px} #shEsg .area-marquee{--x:-2851.19px} #shEsg .area-marquee .marquee ul li{font-size:50px} #shEsg .area-marquee .marquee ul li img{margin:0 17px 0 20px} #shEsg .area-partners .group-cont .marquee-container{--gap:20px;--x:-2320px;gap:var(--gap)} #shEsg .area-partners .group-cont .marquee-container::before, #shEsg .area-partners .group-cont .marquee-container::after{width:300px;height:170px} #shEsg .area-partners .group-cont .marquee-wrapper ul li{width:240px;height:75px} #shEsg .area-partners .group-cont .marquee-wrapper ul li img{transform:scale(0.8)} #shEsg .area-partners .group-subtit{padding-bottom:45px} #shEsg .area-partners .group-subtit .tit-l{padding-bottom:24px} /* ================================================= CONTACT */ #shContact{padding:0 20px} #shContact .group-subtit{padding-bottom:50px} #shContact .group-subtit h3{margin:30px 0 20px !important} #shContact #consultform .reserve-box .form-box h3{font-size:22px} #shContact #consultform .reserve-box .form-box:first-child{padding:40px 0} #shContact #consultform .reserve-box .form-box:last-child{padding-top:40px} #shContact #consultform .reserve-box .form-box .form-list{gap:18px} #shContact #consultform .reserve-box .form-box .form__item input, #shContact #consultform .reserve-box .form-box .form__item .file-btn{height:60px} #shContact #consultform .reserve-box .form-box .form__item label, #shContact #consultform .reserve-box .label{font-size:16px} } @media (max-width:1200px){ /* 서브페이지 공통 */ .pagecommon .group-subtit h2{font-size:20px} .pagecommon .group-subtit h3{margin:20px 0 40px !important;font-size:38px} .pagecommon .group-subtit .tit-l{margin:25px 0 40px;font-size:42px} .pagecommon .group-subtit p.desc{font-size:17px} .pagecommon .area-title .sticky-wrapper.cm-sticky{height:50vh} /* ================================================= 회사소개 */ /* 회사소개 - 경영철학 */ /* 260709 추가 */ #shVision .area-title .group-subtit .inner-s .text-box h3{margin-bottom:20px !important} #shVision .simbol-box{max-width:520px} #shVision .simbol-box .simbol01{max-width:244px} #shVision .simbol-box .simbol02{max-width:174px} #shVision .simbol-box .simbol03{max-width:256px} #shVision .back__cont .col-2{gap:100px} #shVision .back__cont .tit-box{align-items:center;gap:20px;text-align:center} #shVision .back__cont .tit-box h2{font-size:40px} #shVision .back__cont .tit-box a.link{gap:12px;font-size:18px} #shVision .back__cont .cont-box{justify-content:center} #shVision .back__cont .cont-box ul{gap:70px;max-width:800px} #shVision .back__cont .cont-box ul li{display:flex;flex-direction:column;align-items:center;text-align:center} #shVision .back__cont .cont-box ul li strong{font-size:24px} /* 회사소개 - 연혁 */ #shHistory .area-history .main-history .thumb-box{width:90%} #shHistory .area-history .main-history .thumb-box .thumb{border-radius:15px} #shHistory .area-history .col-2 .fl-l{padding-left:20px} #shHistory .area-history .all-history{padding-left:28px;padding-top:calc(320px - var(--gap))} #shHistory .area-history .all-history dl{gap:8px} #shHistory .area-history .all-history dt{font-size:20px} #shHistory .area-history .all-history dd{font-size:18px} /* 회사소개 - 찾아오시는 길 */ #shLocation .area-cont{padding:100px 20px} #shLocation .area-cont .tab-cont .col-2{gap:50px} #shLocation .area-cont .tab-cont .col-2 .fl-l{max-width:440px} #shLocation .area-cont .tab-cont .col-2 .fl-l h3{padding-bottom:14px;font-size:22px} #shLocation .area-cont .tab-cont .col-2 .fl-l dl{gap:12px} #shLocation .area-cont .tab-cont .col-2 .fl-l dt{font-size:16px} /* ================================================= 사업분야 */ #shBusiness .area-title{height:29vh} #shBusiness .area-cont .slide-item .card{padding:48px 35px 35px} #shBusiness .area-cont .slide-item .card .en{font-size:17px} #shBusiness .area-cont .slide-item .card h4{padding:15px 0 26px;font-size:28px} #shBusiness .area-cont .controller .pagination ul li{height:75px;font-size:17px} #shBusiness .sc__service .service__work .group-subtit{padding-bottom:40px} #shBusiness .sc__service .service__work .group-subtit h3{margin:20px 0 25px !important} #shBusiness .sc__service .service__work .group-subtit p.desc{font-size:17px} #shBusiness .sc__service .service__work .swiper-slide h4{font-size:20px} #shBusiness .sc__advantage .advantage__main .group-subcont ul li .icon{width:54px;margin-bottom:15px} #shBusiness .sc__advantage .advantage__main .group-subcont ul li .icon img{transform:scale(0.7)} /* ================================================= ESG */ #shEsg .area-slogan{padding:100px 20px} #shEsg .area-slogan h2{font-size:34px} #shEsg .area-slogan .slogan-box{gap:40px} #shEsg .area-slogan .slogan-box .txt-box{max-width:320px;height:130px;font-size:18px} #shEsg .area-slogan .slogan-box .logo{max-width:230px} #shEsg .area-slogan .slogan-box .logo img{width:115px} #shEsg .area-slogan .desc-box{gap:20px;padding:40px 20px 35px} #shEsg .area-slogan .desc-box .en{font-size:20px} #shEsg .area-slogan .desc-box p{font-size:16px} #shEsg .area-cate .slide .txt-box{gap:20px;max-width:500px;width:100%} #shEsg .area-cate .slide .txt-box h2{font-size:54px} #shEsg .area-cate .slide .txt-box p.desc{font-size:17px} #shEsg .area-cate .cate-navigation{max-width:210px} #shEsg .area-cate .cate-navigation ul li{height:70px;padding:0 25px;font-size:18px} #shEsg .area-cate .cate-navigation ul li .ic-arrow{width:32px} #shEsg .area-cate .cate-navigation{max-width:180px} #shEsg .area-cate .cate-navigation ul{gap:10px} #shEsg .area-cate .cate-navigation ul li{height:64px;font-size:16px;border-radius:10px 0 0 10px} #shEsg .area-cate .cate-navigation ul li .ic-arrow{width:26px} #shEsg .area-cate .cate-navigation ul li .ic-arrow svg{width:18px;height:18px} #shEsg .area-social .sticky{padding:100px 0} #shEsg .area-social .sticky .tab-menu li{font-size:18px} #shEsg .area-social .sticky .tab-menu li::before{height:22px} #shEsg .area-social .scroll{padding-top:calc(315px - 105px);padding-bottom:100px} #shEsg .area-social .scroll ul li{gap:40px} #shEsg .area-social .scroll ul li .text-box h3{gap:12px;padding-bottom:15px;font-size:20px} #shEsg .area-social .scroll ul li .text-box h3 .num{width:32px;font-size:14px} #shEsg .area-social .scroll ul li .text-box p.desc{font-size:16px} #shEsg .area-social .scroll ul li .text-box a.link{position:static;margin-top:15px} #shEsg .area-partners{padding:100px 0 !important} #shEsg .area-partners .group-subtit{padding-bottom:35px} /* ================================================= CONTACT */ #shContact #consultform .reserve-box{padding-bottom:100px} #shContact .group-subtit h3{margin:25px 0 20px !important} #shContact #consultform .reserve-box .form-box .form__item label, #shContact #consultform .reserve-box .label{flex-shrink:0;max-width:110px} #shContact #consultform .reserve-box .form-box h3{max-width:92px;width:100%;font-size:18px} #shContact #consultform .reserve-box .form-box .form__item textarea{max-width:none} #shContact #consultform .reserve-box .form-box .form__item input{max-width:none} } @media (max-width:1024px){ /* 서브페이지 공통 */ .pagecommon .area-title{height:60vh} .pagecommon .area-title .group-subtit{padding:40px 0} .pagecommon .group-subtit h2{font-size:18px} .pagecommon .group-subtit h3{font-size:34px} .pagecommon .group-subtit p.desc{font-size:16px} .pagecommon .group-subtit .tit-l{margin:22px 0 35px;font-size:38px} .pagecommon .area-cont ul.tab-list{gap:6px} .pagecommon .area-cont li.tab-menu{padding:10px 18px;font-size:14px} .pagecommon .area-cont ul.tab-list{padding-bottom:30px} /* ================================================= 회사소개 */ /* 회사소개 - 경영철학 */ /* 260709 추가 */ #shVision .acd_wrap{padding-top:40px;font-size:15px;line-height:1.6} #shVision .acd:after{right:20px} #shVision .acd .tit{padding:0 20px;font-size:16px} #shVision .acd .tit span{font-size:24px} #shVision .acd .cont_wrap .cont{padding:0 20px 40px 20px} #shVision .cont02 ul li{height:280px;padding:30px;font-size:15px;white-space:normal} #shVision .cont02 ul li p{line-height:1.4} #shVision .cont03 .txt{padding:0 40px} #shVision .cont03 p{font-size:30px} #shVision .area-title .group-subtit .inner-s .text-box h3{margin-bottom:15px !important} #shVision .simbol-box{max-width:440px} #shVision .simbol-box .simbol01{max-width:204px} #shVision .simbol-box .simbol02{max-width:134px} #shVision .simbol-box .simbol03{max-width:216px} /* 회사소개 - 연혁 */ #shHistory .area-history .main-history{gap:18px;padding-right:20px} #shHistory .area-history .main-history .year-box{font-size:28px} #shHistory .area-history .main-history .year-box .year{height:34px} #shHistory .area-history .main-history .year-box .year .digit-box span{line-height:34px} #shHistory .area-history .history-navigation ul{gap:35px} #shHistory .area-history .history-navigation ul li{gap:14px} #shHistory .area-history .history-navigation ul li .txt{font-size:16px} #shHistory .area-history .all-history{--gap:65px;padding-left:clamp(20px, calc(7.8125vw - 40px), 40px)} #shHistory .area-history .all-history dt{font-size:18px} #shHistory .area-history .all-history dd{font-size:16px} #shHistory .area-history .main-history .thumb-box{width:100%} #shHistory .area-history .main-history .thumb-box .text p{font-size:16px} /* 회사소개 - 찾아오시는 길 */ #shLocation .area-cont{padding:60px 20px} #shLocation .area-cont .tab-cont .col-2{flex-direction:column-reverse;gap:30px} #shLocation .area-cont .tab-cont .col-2 .fl-l{max-width:none} #shLocation .area-cont .tab-cont .col-2 .fl-r, #shLocation .area-cont .tab-cont .col-2 .fl-r .map_box{max-width:none} #shLocation .area-cont .tab-cont ul{gap:40px} #shLocation .area-cont .tab-cont .col-2 .fl-l h3{gap:6px;font-size:20px} #shLocation .area-cont .tab-cont .col-2 .fl-l h3::before{width:4px;height:20px} #shLocation .area-cont .tab-cont .col-2 .fl-l dl{gap:10px;padding:18px 0} #shLocation .area-cont .tab-cont .col-2 .fl-r .map_box{height:290px;border-radius:10px} /* ================================================= 사업분야 */ #shBusiness .area-title{height:23vh} #shBusiness .area-title .group-subtit{padding-top:40px} #shBusiness .area-cont .slide-item .card{border-radius:10px} #shBusiness .area-cont .slide-item .thumb-box{height:190px;border-radius:8px} #shBusiness .area-cont .slide-item .card .en{font-size:16px} #shBusiness .area-cont .slide-item .card h4{padding:12px 0 24px;font-size:24px} #shBusiness .area-cont .slide-item .card p.desc{padding-bottom:38px} #shBusiness .area-cont .controller .pagination ul li{height:65px;font-size:16px} #shBusiness .sc__service .service__work{padding:80px 20px 120px} #shBusiness .sc__service .service__work .group-subtit{padding-bottom:34px} #shBusiness .sc__service .service__work .group-subtit h3{margin:20px 0 !important} #shBusiness .sc__service .service__work .group-subtit p.desc{font-size:16px} #shBusiness .sc__service .service__work .swiper-container{padding-bottom:34px} #shBusiness .sc__service .service__work .swiper-slide{border-radius:10px} #shBusiness .sc__service .service__work .swiper-slide h4{font-size:16px} #shBusiness .sc__advantage .advantage__main .group-subcont ul{gap:14px;grid-template-columns:repeat(2,1fr)} #shBusiness .sc__advantage .advantage__main .group-subcont ul li h4{font-size:18px} #shBusiness .sc__advantage .advantage__main .group-subcont ul li p.desc{font-size:15px} /* ================================================= ESG */ #shEsg .area-slogan{padding:80px 20px} #shEsg .area-slogan h2{padding-bottom:40px;font-size:30px} #shEsg .area-slogan .slogan-box{flex-direction:column;gap:30px;margin-bottom:40px} #shEsg .area-slogan .slogan-box::before{width:1px;height:400px} #shEsg .area-slogan .slogan-box .txt-box{max-width:280px;height:80px;font-size:16px} #shEsg .area-slogan .slogan-box .logo{max-width:190px} #shEsg .area-slogan .slogan-box .logo img{width:100px} #shEsg .area-slogan .desc-box{gap:14px;padding:30px 20px 25px} #shEsg .area-slogan .desc-box .en{font-size:18px} #shEsg .area-slogan .desc-box p{font-size:15px} #shEsg .area-cate .slide .txt-box{align-items:center;gap:15px;left:50%;transform:translate(-50%, -50%);max-width:none;padding:0 20px;text-align:center} #shEsg .area-cate .slide .txt-box h2{font-size:50px} #shEsg .area-cate .slide .txt-box p.desc{font-size:16px} #shEsg .area-cate .cate-navigation{top:unset;bottom:0;max-width:none;height:auto} #shEsg .area-cate .cate-navigation ul{flex-direction:row;gap:0} #shEsg .area-cate .cate-navigation ul li{border-radius:0} #shEsg .area-social .col-2{flex-direction:column;align-items:center} #shEsg .area-social .sticky{position:static;height:auto;padding:80px 0 40px;text-align:center} #shEsg .area-social .sticky .group-subtit .tit-l{padding-bottom:25px} #shEsg .area-social .sticky .tab-menu{display:none} #shEsg .area-social .scroll{padding-top:0;padding-bottom:80px} #shEsg .area-social .scroll ul{display:flex;flex-direction:column;gap:40px} #shEsg .area-social .scroll ul li{align-items:center;gap:20px;padding-top:0} #shEsg .area-social .scroll ul li .thumb-box{border-radius:10px} #shEsg .area-social .scroll ul li .text-box{display:flex;flex-direction:column;align-items:center} #shEsg .area-social .scroll ul li .text-box h3{justify-content:center;gap:8px;padding-bottom:8px;text-align:center;font-size:18px} #shEsg .area-social .scroll ul li .text-box h3 .num{width:28px;font-size:13px} #shEsg .area-social .scroll ul li .text-box p.desc{text-align:center;font-size:15px} #shEsg .area-social .scroll ul li .text-box a.link{width:auto;height:38px;padding:0 16px;margin-top:10px;font-size:13px} #shEsg .area-social .scroll ul li .text-box a.link svg{width:18px;height:18px} #shEsg .area-social .scroll ul li .thumb-box{max-width:550px} #shEsg .area-marquee{--x:-2190.66px} #shEsg .area-marquee .marquee ul li{font-size:38px} #shEsg .area-marquee .marquee ul li img{margin:0 12px 0 16px} #shEsg .area-partners{padding:80px 0 !important} #shEsg .area-partners .group-cont .marquee-container{--gap:10px;--x:-1835px} #shEsg .area-partners .group-cont .marquee-container::before, #shEsg .area-partners .group-cont .marquee-container::after{width:150px} #shEsg .area-partners .group-cont .marquee-wrapper ul li{width:195px;height:68px} #shEsg .area-partners .group-cont .marquee-wrapper ul li img{transform:scale(0.6)} #shEsg .area-partners .group-subtit{padding-bottom:30px} #shEsg .area-partners .group-subtit .tit-l{padding-bottom:15px} /* ================================================= CONTACT */ #shContact #consultform .reserve-box{padding-bottom:80px} #shContact .group-subtit p.comment{font-size:16px} #shContact #consultform .reserve-box .form-box{flex-direction:column;gap:24px} #shContact #consultform .reserve-box .form-box:first-child{padding:26px 0} #shContact #consultform .reserve-box .form-box:last-child{padding-top:26px} #shContact #consultform .reserve-box .form-box .form__item{gap:10px} #shContact #consultform .reserve-box .form-box .form__item input, #shContact #consultform .reserve-box .form-box .form__item .file-btn{max-width:none;height:55px} #shContact #consultform .reserve-box .form-box .form__item .file-btn{max-width:130px;width:100%} #shContact #consultform .reserve-box .form-box .form-list{max-width:none;gap:10px} #shContact #consultform .reserve-box .form-box .form__item label, #shContact #consultform .reserve-box .label{font-size:15px} #shContact #consultform .reserve-box .form-box .form__item input::placeholder, #shContact #consultform .reserve-box .form-box .form__item textarea::placeholder{font-size:15px} #shContact #consultform .submit-box input{width:190px;height:60px;font-size:16px} #shContact #consultform .submit-box{padding-bottom:60px} } @media (max-width:768px){ /* 서브페이지 공통 */ .pagecommon .area-title{height:55vh} .pagecommon .area-title .group-subtit{padding:20px 0} .pagecommon .group-subtit h2{font-size:18px} .pagecommon .group-subtit h3{margin:14px 0 30px !important;font-size:32px} .pagecommon .group-subtit .tit-l{margin:18px 0 30px;font-size:34px} .pagecommon .group-subtit p.desc{font-size:16px} .pagecommon .area-title .group-subtit p:not(:last-child){padding-bottom:22px} .pagecommon .area-cont ul.tab-list{gap:4px;padding-bottom:20px} .pagecommon .area-cont li.tab-menu{padding:8px 16px;font-size:13px} /* ================================================= 회사소개 */ /* 회사소개 - 경영철학 */ /* 260709 추가 */ #shVision .acd_wrap{padding:20px 0 100px} #shVision .cont01 ul li{line-height:1.4} #shVision .cont02 ul{flex-wrap:wrap} #shVision .cont02 ul li{width:50%;height:auto} #shVision .cont02 ul li p{margin-bottom:20px} #shVision .cont02 ul li:nth-child(1){order:1} #shVision .cont02 ul li:nth-child(3){order:-2} #shVision .cont03 .txt{padding:0 20px;margin-bottom:40px} #shVision .cont03 .img{height:180px} #shVision .cont03 p{font-size:26px} #shVision .cont03 .pl{white-space:normal;word-break:keep-all} #shVision .area-title .group-subtit{left:0;padding:0 20px} #shVision .area-title .group-subtit .inner-s .text-box{width:100%;text-align:center} #shVision .back__cont .tit-box h2{font-size:32px} #shVision .back__cont .tit-box a.link{font-size:16px} #shVision .back__cont .tit-box a.link .ic-arrow{width:32px} #shVision .back__cont .tit-box a.link .ic-arrow svg{width:16px;height:16px} #shVision .back__cont .cont-box ul{gap:70px 40px;max-width:none} #shVision .back__cont .cont-box ul li p{gap:4px;padding:12px 0 14px;font-size:15px} #shVision .back__cont .cont-box ul li p .notice{font-size:13px} #shVision .back__cont .cont-box ul li .cate{height:25px;font-size:12px;padding:0 10px} #shVision .back__cont .cont-box ul li strong{font-size:22px} #shVision .back__cont .col-2{gap:80px} /* 회사소개 - 연혁 */ #shHistory .area-history .col-2{position:relative;flex-direction:column} #shHistory .area-history .col-2 .fl-l{display:none} #shHistory .area-history .main-history .year-box{font-size:26px} #shHistory .area-history .main-history .year-box .year{height:31.2px} #shHistory .area-history .main-history .year-box .year .digit-box span{line-height:31.2px} #shHistory .area-history .col-2 .fl-r{flex-direction:column-reverse;padding-right:0} #shHistory .area-history .all-history{--gap:24px;padding:0 20px 70px} #shHistory .area-history .all-history > div{padding-top:60px} #shHistory .area-history .all-history dd{display:flex;flex-direction:column;gap:12px} #shHistory .area-history .all-history dd .thumb{display:block;overflow:hidden;width:100%;aspect-ratio:560 / 350;border-radius:10px} #shHistory .area-history .all-history dd .thumb img{width:100%;height:100%;object-fit:cover} #shHistory .area-history .all-history dd .thumb.port img{object-fit:contain} #shHistory .area-history .history-navigation{left:0;height:auto;background-color:var(--primary)} #shHistory .area-history .history-navigation ul{display:grid;grid-template-columns:repeat(5,1fr);gap:0} #shHistory .area-history .history-navigation ul li{position:relative;justify-content:center;line-height:60px} #shHistory .area-history .history-navigation ul li .dot{position:absolute;bottom:0;left:0;width:100%;height:2px;border-radius:0;aspect-ratio:unset;background-color:transparent} #shHistory .area-history .history-navigation ul li.active .txt{color:#fff} #shHistory .area-history .history-navigation ul li.active .dot{animation:none;background-color:#fff} #shHistory .area-history .history-navigation .navigation{width:100%} #shHistory .area-history .history-navigation .bar{display:none} #shHistory .area-history .history-navigation .swiper-container{overflow:hidden} #shHistory .area-history .history-navigation ul li .dot::before, #shHistory .area-history .history-navigation ul li .dot::after{display:none} #shHistory .area-history .history-navigation ul li .txt{min-width:100px;text-align:center;font-size:clamp(14px,2.08vw,16px);color:rgba(255,255,255,0.5)} #shHistory .area-history .all-history dl{gap:5px} /* 회사소개 - 찾아오시는 길 */ #shLocation .area-cont{padding:45px 20px} #shLocation .area-cont .tab-cont ul{gap:30px} #shLocation .area-cont .tab-cont .col-2 .fl-l h3{font-size:18px} #shLocation .area-cont .tab-cont .col-2 .fl-l h3::before{height:18px} #shLocation .area-cont .tab-cont .col-2 .fl-l dl{gap:8px;padding:14px 0} #shLocation .area-cont .tab-cont .col-2 .fl-l dt{font-size:15px} #shLocation .area-cont .tab-cont .col-2 .fl-l dd{font-size:14px} /* ================================================= 사업분야 */ #shBusiness .area-title{min-height:200px;height:auto} #shBusiness .area-title .group-subtit{padding-top:20px} #shBusiness .area-cont .slide-item .inner-s{justify-content:center} #shBusiness .area-cont .slide-item::before{background-color:rgba(0,0,0,0.45)} #shBusiness .area-cont .slide-item .card{max-width:530px;padding:40px 30px 30px} #shBusiness .area-cont .slide-item .card p.desc{font-size:15px} #shBusiness .area-cont .slide-item .card h4{padding:10px 0 18px;font-size:22px} #shBusiness .area-cont .slide-item .thumb-box{height:240px} #shBusiness .area-cont .controller .pagination ul li{font-size:15px} #shBusiness .sc__service .service__work{padding:60px 20px 80px} #shBusiness .sc__service .service__work .group-subtit h3{margin:14px 0 !important} #shBusiness .sc__service .service__work .group-subtit p.desc{font-size:15px} #shBusiness .sc__advantage .advantage__main .group-subcont ul{gap:12px} #shBusiness .sc__advantage .advantage__main .group-subcont ul li{padding:24px;border-radius:10px} #shBusiness .sc__advantage .advantage__main .group-subcont ul li .icon{width:50px} #shBusiness .sc__advantage .advantage__main .group-subcont ul li .icon img{transform:scale(0.6)} #shBusiness .sc__advantage .advantage__main .group-subcont ul li h4{font-size:16px} /* ================================================= ESG */ #shEsg .area-slogan{padding:60px 20px} #shEsg .area-slogan h2{padding-bottom:30px;font-size:26px} #shEsg .area-slogan .slogan-box{gap:25px;margin-bottom:30px} #shEsg .area-slogan .slogan-box .txt-box{height:70px;font-size:15px} #shEsg .area-slogan .slogan-box::before{height:320px} #shEsg .area-slogan .slogan-box .logo{max-width:165px} #shEsg .area-slogan .slogan-box .logo img{width:92px} #shEsg .area-slogan .desc-box .en{font-size:16px} #shEsg .area-slogan .desc-box p{font-size:14px} #shEsg .area-cate .slide .txt-box{gap:12px} #shEsg .area-cate .slide .txt-box h2{font-size:44px} #shEsg .area-cate .slide .txt-box p.desc{font-size:15px} #shEsg .area-cate .cate-navigation ul li{height:60px;font-size:15px} #shEsg .area-cate .cate-navigation ul li .ic-arrow{width:24px} #shEsg .area-social .sticky{padding:60px 0 30px} #shEsg .area-social .sticky .group-subtit .tit-l{padding-bottom:15px} #shEsg .area-social .scroll{padding-bottom:60px} #shEsg .area-social .scroll ul li .text-box h3{font-size:16px} #shEsg .area-social .scroll ul li .text-box h3 .num{width:25px;font-size:12px} #shEsg .area-marquee{--x:-1857.4px} #shEsg .area-marquee .marquee ul li{font-size:32px} #shEsg .area-marquee .marquee ul li img{width:32px;margin:0 10px 0 14px} #shEsg .area-partners{padding:60px 0 45px!important} #shEsg .area-partners .group-cont .marquee-container{--x:-1610px} #shEsg .area-partners .group-cont .marquee-wrapper.to-left{animation:marqueeLogo 50s linear infinite} #shEsg .area-partners .group-cont .marquee-wrapper.to-right{animation:marqueeLogo 50s linear infinite reverse} #shEsg .area-partners .group-cont .marquee-wrapper ul li{width:170px;height:60px} #shEsg .area-partners .group-subtit .tit-l{padding-bottom:10px} #shEsg .area-partners .group-subtit{padding-bottom:20px} /* ================================================= CONTACT */ #shContact .group-subtit{padding-bottom:30px} #shContact .group-subtit h3{margin:20px 0 15px !important} #shContact .group-subtit p.comment{font-size:15px} #shContact .group-subcont p.notice{font-size:13px} #shContact #consultform .reserve-box .form-box h3{font-size:16px} #shContact #consultform .reserve-box .form-box{gap:16px} #shContact #consultform .reserve-box .form-box .form__item input{padding:0 20px} #shContact #consultform .reserve-box .form-box .form__item textarea{padding:20px;height:120px} #shContact #consultform .reserve-box .form-box .form__item label, #shContact #consultform .reserve-box .label{max-width:80px;font-size:14px} #shContact #consultform .reserve-box .form-box .form__item input, #shContact #consultform .reserve-box .form-box .form__item textarea{font-size:14px} #shContact #consultform .reserve-box .form-box .form__item input::placeholder, #shContact #consultform .reserve-box .form-box .form__item textarea::placeholder{font-size:14px} #shContact #consultform .reserve-box .btn-wrap .t_r_check .flex label .label-txt{font-size:14px} #shContact #consultform .reserve-box .btn-wrap .t_r_check .flex label .label-txt a{font-size:14px} #shContact #consultform .reserve-box .form-box .form__item .file-btn{font-size:14px} #shContact #consultform .reserve-box{padding-bottom:60px} #shContact #consultform .submit-box{padding-bottom:25px} #shContact #consultform .submit-box input{max-width:175px;width:100%;height:55px;font-size:15px} #shContact .link-list{width:88px;height:36px;font-size:13px} } @media (max-width:540px){ #shBusiness .sc__advantage .advantage__main .group-subcont ul{grid-template-columns:repeat(1,1fr)} } @media (max-width:480px){ /* 서브페이지 공통 */ .pagecommon .area-title .group-subtit .real{position:static;transform:none} .pagecommon .area-title .thumb-box{left:0;height:100%} .pagecommon .group-subtit h2{font-size:16px} .pagecommon .group-subtit h3{margin:12px 0 14px !important;font-size:24px} .pagecommon .group-subtit .real h2{color:#fff} .pagecommon .group-subtit .tit-l{margin:15px 0 25px;font-size:26px;color:#fff} .pagecommon .group-subtit p.desc{color:#fff;font-size:15px} .pagecommon .area-cont li.tab-menu{padding:8px 15px;font-size:12px} .pagecommon .area-cont ul.tab-list{padding-bottom:15px} .pagecommon .area-title .sticky-wrapper.cm-sticky{position:static;height:100%} .pagecommon .area-title.hero{position:relative;height:auto} #shEsg .area-title .group-subtit{padding:100px 20px} /* ================================================= 회사소개 */ /* 회사소개 - 경영철학 */ /* 260709 추가 */ #shVision .acd_wrap{font-size:14px} #shVision .acd .tit{height:auto;padding:15px 20px;line-height:1.4} #shVision .acd .tit span{display:block;font-size:20px} #shVision .cont01 ul li span{width:110px} #shVision .cont02 ul li{padding:20px;font-size:14px} #shVision .cont03 .img{height:150px} #shVision .cont03 p{font-size:22px} #shVision .area-title{height:auto} #shVision .area-title .sticky-wrapper{position:static;height:auto} #shVision .area-title .group-subtit{position:static;padding:0} #shVision .area-title .group-subtit .inner-s .text-box{position:static} #shVision .sticky-wrapper .item.front{display:flex;flex-direction:column;align-items:center;gap:30px;height:auto;padding:60px 20px} #shVision .sticky-wrapper .item.back{position:relative;top:unset;left:unset;z-index:0} #shVision .group-subtit .tit-l, #shEsg .group-subtit p.desc{color:#111} #shVision .simbol-box{max-width:220px;position:relative;top:unset;left:unset;transform:none} #shVision .simbol-box .simbol01{max-width:108px} #shVision .simbol-box .simbol02{top:22px;left:40px;max-width:64px} #shVision .simbol-box .simbol03{max-width:106px} #shVision .back__cont{position:relative;z-index:1;top:unset;left:unset;transform:none;padding:60px 20px} #shVision .back__cont .col-2{gap:40px} #shVision .back__cont .tit-box h2{font-size:26px} #shVision .back__cont .tit-box{gap:15px} #shVision .back__cont .tit-box a.link{gap:8px;font-size:14px} #shVision .back__cont .tit-box a.link .ic-arrow{width:26px} #shVision .back__cont .tit-box a.link .ic-arrow svg{width:14px;height:14px} #shVision .back__cont .cont-box ul{grid-template-columns:repeat(1,1fr);gap:36px} #shVision .back__cont .cont-box ul li .cate{height:23px;padding:0 8px;font-size:11px} #shVision .back__cont .cont-box ul li p{padding:10px 0 12px;font-size:14px} #shVision .back__cont .cont-box ul li:last-child p{padding:10px 0 12px} #shVision .back__cont .cont-box ul li p .notice{font-size:12px} #shVision .back__cont .cont-box ul li strong{font-size:18px} /* 회사소개 - 연혁 */ #shHistory .area-history .all-history{padding:0 20px 50px} #shHistory .area-title .group-subtit{padding:100px 20px} #shHistory .area-history .all-history{--gap:20px} #shHistory .area-history .all-history dt{font-size:18px} #shHistory .area-history .all-history dd{font-size:14px} #shHistory .area-history .all-history dd .thumb{height:230px} /* 회사소개 - 찾아오시는 길 */ #shLocation .area-title .sticky-wrapper{position:static;height:100%} #shLocation .area-title .group-subtit{padding:100px 20px} #shLocation .area-cont{padding:35px 20px} #shLocation .area-cont .tab-cont .col-2{gap:20px} #shLocation .area-cont .tab-cont .col-2 .fl-r .map_box{height:250px} /* ================================================= 사업분야 */ #shBusiness .area-title .group-subtit{position:static;padding:40px 20px 50px} #shBusiness .group-subtit h2{color:var(--primary)} #shBusiness .group-subtit h3{color:#111} #shBusiness .area-title{min-height:0} #shBusiness .area-cont .slide-item .thumb-box{height:180px} #shBusiness .area-cont .controller .pagination ul li{font-size:14px} #shBusiness .sc__service .service__work{padding:40px 20px 60px} #shBusiness .sc__service .service__work .group-subtit h3{margin:12px 0 !important} #shBusiness .sc__service .service__work .group-subtit p.desc{font-size:14px} #shBusiness .sc__service .service__work .swiper-slide{aspect-ratio:509 / 360;padding:26px 15px} #shBusiness .sc__service .service__work .group-subtit{padding-bottom:22px} #shBusiness .sc__service .service__work .swiper-container{padding-bottom:25px} #shBusiness .sc__service .service__work .swiper-slide h4{font-size:15px} #shBusiness .sc__advantage .advantage__main{padding-bottom:20px} #shBusiness .sc__advantage .advantage__main .group-subcont{padding-top:15px} #shBusiness .sc__advantage .advantage__main .group-subcont ul li{padding:20px} #shBusiness .sc__advantage .advantage__main .group-subcont ul li .icon{width:47px;margin-bottom:12px} #shBusiness .sc__advantage .advantage__main .group-subcont ul li h4{padding-bottom:8px;font-size:15px} #shBusiness .sc__advantage .advantage__main .group-subcont ul li p.desc{font-size:14px} /* ================================================= ESG */ #shEsg .area-slogan h2{padding-bottom:20px;font-size:22px} #shEsg .area-slogan .slogan-box::before{height:260px} #shEsg .area-slogan .slogan-box .txt-box{max-width:245px;height:auto;font-size:14px;padding:16px} #shEsg .area-slogan .slogan-box .logo{max-width:140px} #shEsg .area-slogan .slogan-box .logo img{width:80px} #shEsg .area-slogan .desc-box{gap:12px;padding:24px 20px 20px} #shEsg .area-slogan .desc-box .en{font-size:15px} #shEsg .area-cate .slide .txt-box h2{font-size:34px} #shEsg .area-cate .slide .txt-box p.desc{font-size:14px} #shEsg .area-cate .cate-navigation ul li{justify-content:center;height:55px;text-align:center} #shEsg .area-cate .cate-navigation ul li .ic-arrow{display:none} #shEsg .area-social .sticky .group-subtit .tit-l{padding-bottom:12px} #shEsg .area-social .scroll ul{gap:30px} #shEsg .area-social .scroll ul li{gap:15px} #shEsg .area-social .scroll ul li .text-box h3{flex-direction:column;gap:10px;align-items:center;font-size:15px} #shEsg .area-social .scroll ul li .text-box h3 .num{width:30px;font-size:13px} #shEsg .area-social .scroll ul li .text-box p.desc{font-size:14px} #shEsg .area-social .scroll ul li .thumb-box{max-width:none} #shEsg .area-marquee{--x:-1548.15px} #shEsg .area-marquee .marquee ul li{font-size:26px} #shEsg .area-marquee .marquee ul li img{width:28px} #shEsg .area-partners .group-cont .marquee-container{--x:-1340px} #shEsg .area-partners .group-cont .marquee-container::before, #shEsg .area-partners .group-cont .marquee-container::after{width:60px} #shEsg .area-partners .group-cont .marquee-wrapper ul li{width:140px;height:55px} #shEsg .area-partners .group-cont .marquee-wrapper ul li img{transform:scale(0.45)} /* ================================================= CONTACT */ #shContact .group-subtit h3{margin:15px 0 !important} #shContact .group-subtit p.comment{font-size:14px} #shContact #consultform .reserve-box .form-box{gap:12px} #shContact #consultform .reserve-box .form-box h3{font-size:15px} #shContact #consultform .reserve-box .form-box:first-child{padding:15px 0} #shContact #consultform .reserve-box .form-box:last-child{padding-top:15px} #shContact #consultform .reserve-box .form-box .form__item{flex-direction:column;align-items:flex-start} #shContact #consultform .reserve-box .btn-wrap .t_r_check{flex-direction:column;align-items:flex-start;gap:10px} #shContact #consultform .reserve-box .btn-wrap .t_r_check .flex label .label-txt{font-size:13px} #shContact #consultform .reserve-box .form-box .form__item input{padding:0 15px} #shContact #consultform .reserve-box .form-box .form__item input, #shContact #consultform .reserve-box .form-box .form__item .file-btn{height:50px} #shContact #consultform .reserve-box .form-box .form__item .flex{width:100%} #shContact #consultform .submit-box{padding-bottom:0} } @media (max-width:390px){ /* ================================================= 회사소개 */ /* 260709 추가 */ #shVision .cont02 ul li{width:100%} #shVision .cont02 ul li:nth-child(1){order:unset} #shVision .cont02 ul li:nth-child(3){order:unset} /* ================================================= 사업분야 */ #shBusiness .area-cont .controller{display:none} /* ================================================= ESG */ #shEsg .area-cate .slide .txt-box h2{font-size:28px} #shEsg .area-cate .cate-navigation ul li{font-size:14px} } /* 반응형 [e] */