@charset "utf-8"; /*─────────────────────────────────────────────────────────── " board｜errors｜goods｜service｜layout/board｜layout/display｜layout/goods " " layout/popup.html " 위 폴더 및 페이지 커스텀 및 layout, navigation, button, company 관련 편집 css 파일 입니다. ** header, footer, main 관련은 /css/skin.css 에 있습니다. ───────────────────────────────────────────────────────────*/ /*─────────────────────────────────────────────────────────── common.css 커스텀 css 아래에 작성 ───────────────────────────────────────────────────────────*/ /*─────────────────────────────────────────────────────────── font common ───────────────────────────────────────────────────────────*/ b, dt, strong, em, th, h1, h2, h3, h4, h5, h6 {font-weight:700;}/* Noto Sans KR은 500 사용 */ /*** common ***/ /*** TABLE | 서브페이지 전체 사용 ( board / member / layout ) ***/ /*** BOARD ***/ /*** GOODS ***/ /*** MEMBER ***/ /*** SERVICE ***/ /*─────────────────────────────────────────────────────────── ** navigation, button 관련 css 영역 ───────────────────────────────────────────────────────────*/ /*─────────────────────────────────────────────────────────── navigation common ───────────────────────────────────────────────────────────*/ /*─────────────────────────────────────────────────────────── button common ───────────────────────────────────────────────────────────*/ /* custom button type */ /* button 공통 요소 */ .btn_lg, .btn_sm, .btn_md {font-weight:700;border-style:solid !important;border-width:1px !important;padding:0 15px;margin:0;text-indent:0;vertical-align:top !important;text-align:center;display:inline-block;box-sizing:border-box;cursor:pointer;box-shadow:none;outline:0 !important;} /* button 크기별 */ .btn_wd {width:100%;height:50px;line-height:48px;font-size:17px;} .btn {display: inline-flex;box-sizing:border-box;align-items: center;justify-content: center;text-align: center;width:200px;height:70px;border-radius:35px;font-size:var(--title-20);color:var(--point-white);font-weight:500;} .btn span{font-size:104%;color:inherit;font-weight:inherit;} .btn_lg {min-width:92px;width:auto;height:72px;line-height:70px;font-size:14px;} .btn_md {min-width:60px;width:auto;line-height:28px;height:30px;font-size:13px;} .btn_sm {min-width:30px;width:auto;line-height:28px;width:auto !important;padding:0 8px;font-size:inherit;border-color:#aaa !important;background-color:#aaa !important;color:#fff !important;} /* button 색상별 */ .btn_point, .btn_point:hover {border-color:var(--point-color01);background-color:var(--point-color01);color:#fff;} .btn_basic, .btn_basic:hover {border-color:#777 !important;background-color:#777 !important;color:#fff !important;} .btn_default, .btn_default:hover {border-color:#aaa !important;background-color:#aaa !important;color:#fff !important;} .btn_info, .btn_info:hover {border-color:#d3d3d3 !important;background-color:#fff !important;color:#555 !important;} .btn_reset, .btn_reset:hover {border-color:#d3d3d3;background:#fff url(../images/common/icon_btn_reset.gif) no-repeat 9px 50%;padding:0 10px 0 30px;color:#555;} /* button wrapper */ .btn_wrap {margin:0 auto;padding:0;padding-top:60px;font-size:0;vertical-align:top;display:inline-block;} .btn_wrap.ta_center {width:100%;} .btn_wrap a + a, .btn_wrap button + button, .btn_wrap a + button, .btn_wrap button + a {margin-left:12px;vertical-align:top;} .btn_wrap button > a, .btn_wrap a > a{margin-left:0;} .view_btn .btn_wrap.ta_right {position:absolute;right:0px;top:0px;} @media only screen and (max-width:1200px) { } @media only screen and (max-width:1023px) { /* button wrapper */ .view_btn .btn_wrap.ta_left {position:absolute;left:0px;top:0px;} } @media only screen and (max-width:860px) { .btn_wrap{padding-top:45px;} .btn{width:150px;height:60px;} } @media only screen and (max-width:767px) { /* button wrapper */ } @media only screen and (max-width:640px) { /* button wrapper */ .btn_wrap a + a, .btn_wrap button + button, .btn_wrap a + button, .btn_wrap button + a {margin-left:8px;} } @media only screen and (max-width:479px) { /* button 크기별 */ .btn_wd {font-size:16px;} .btn_lg {min-width:72px;font-size:13px;} .btn_md {min-width:60px;font-size:12px;} .btn_sm {padding:0 4px;font-size:12px;} /* button wrapper */ .btn_wrap a + a, .btn_wrap button + button, .btn_wrap a + button, .btn_wrap button + a {margin-left:6px;} .view_btn .paging {width:100%;min-height:87px;} .view_btn .paging + .btn_wrap.ta_right{top:70px;} .btn_wrap{padding-top:30px;} .btn{width:120px;height:50px;} } @media only screen and (max-width:320px) { /* button 크기별 */ .btn {min-width:68px;} .btn_md {min-width:44px;font-size:12px;} } /*─────────────────────────────────────────────────────────── SUB COMMON ───────────────────────────────────────────────────────────*/ /* 상단 타이틀 && 서브 비주얼 */ #side_box {padding-top: 74px; padding-bottom: 128px;} #side_box .sub_menu {font-size: var(--title-20); text-align: left;} #side_box .sub_menu h2 {font-size: 400%; font-weight: bold; color: var(--black-color01);} #side_box .sub_menu .sub_depth {box-sizing: border-box; margin-top: 22px; padding-bottom: 10px; /* overflow-x: auto; */} #side_box .sub_menu ul {display: flex; flex-wrap: wrap; gap: 9px 30px; /* width: max-content; */} #side_box .sub_menu ul li {position: relative;} #side_box .sub_menu ul li, #side_box .sub_menu ul li a {color: var(--black-color09); font-weight: 600; letter-spacing: -0.03em; text-transform: uppercase; transition: all 0.3s;} #side_box .sub_menu ul li.on, #side_box .sub_menu ul li.on a {color: var(--point-color01); transition: all 0.3s;} #side_box .sub_menu ul li.on:after {content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px; background: var(--point-color01);} #side_box .sub_visual {width: 100%; height: 400px; margin-top: 50px; background-size: cover; background-position: center;} /* over */ @media screen and (min-width:1023px){ #side_box .sub_menu ul li:hover, #side_box .sub_menu ul li:hover a {color: var(--point-color01); transition: all 0.3s;} } @media only screen and (max-width:1240px) { #side_box .sub_menu h2 {font-size: 370%;} } @media only screen and (max-width:1023px) { #side_box {padding-bottom: 110px;} #side_box .sub_menu h2 {font-size: 350%;} #side_box .sub_visual {height: 360px; margin-top: 40px;} } @media only screen and (max-width:860px) { #side_box {padding-top: 64px; padding-bottom: 90px;} #side_box .sub_menu h2 {font-size: 330%;} #side_box .sub_menu .sub_depth {margin-top: 14px;} #side_box .sub_visual {height: 320px;} } @media only screen and (max-width:640px) { #side_box {padding-bottom: 70px;} #side_box .sub_menu h2 {font-size: 310%;} #side_box .sub_menu ul li.on:after {bottom: 0;} #side_box .sub_visual {height: 280px; margin-top: 30px;} } @media only screen and (max-width:479px) { #side_box {padding-top: 54px; padding-bottom: 65px;} #side_box .sub_menu h2 {font-size: 280%;} #side_box .sub_visual {height: 240px;} } @media only screen and (max-width:431px) { #side_box .sub_menu h2 {font-size: 250%;} } @media only screen and (max-width:360px) { #side_box .sub_menu h2 {font-size: 220%;} } /* sub_title */ .sub_title {position:relative; font-size: var(--title-20);} .sub_title h3, .sub_title h4, .sub_title h5 {color: var(--black-color01); font-weight: 600; letter-spacing: -0.03em;} .sub_title h3 {font-size: var(--title-40);} .sub_title h4 {font-size: 170%; color: var(--black-color03); line-height: 1.5;} .sub_title h5 {font-size: 130%; line-height: 1.6;} .sub_title p {font-size: 90%; color: var(--black-color06); letter-spacing: -0.03em; line-height: 1.6;} /* + */ .sub_title h3 + p {margin-top: 20px;} .sub_title h5 + p {margin-top: 12px;} .sub_title p + p {margin-top: 13px;} /* hd */ .sub_title.hd {margin-bottom: 50px;} .sub_title.hd p {font-size: 100%;} /* dot */ .sub_title.dot {} .sub_title.dot h5 {position: relative; box-sizing: border-box; padding-left: 22px; color: var(--black-color03); font-weight: 500;} .sub_title.dot h5:before {content: ""; position: absolute; left: 0; top: 16px; width: 10px; height: 10px; border-radius: 100%; background: var(--point-color01);} /* more */ .sub_title.more > *:not(.more_box) {max-width: 80%;} .sub_title.more .more_box {position: absolute; right: 0; bottom: 0;} @media only screen and (max-width:1023px) { /* hd */ .sub_title.hd {margin-bottom: 40px;} /* dot */ .sub_title.dot h5 {padding-left: 20px;} .sub_title.dot h5:before {top: 15px; width: 9px; height: 9px;} } @media only screen and (max-width:860px) { /* + */ .sub_title h3 + p {margin-top: 16px;} .sub_title h5 + p {margin-top: 10px;} .sub_title p + p {margin-top: 10px;} /* dot */ .sub_title.dot h5 {padding-left: 18px;} .sub_title.dot h5:before {width: 8px; height: 8px;} /* more */ .sub_title.more > *:not(.more_box) {max-width: 100%;} .sub_title.more .more_box {position: relative; right: inherit; bottom: inherit; margin-top: 25px;} } @media only screen and (max-width:640px) { /* + */ .sub_title h3 + p {margin-top: 10px;} .sub_title h5 + p {margin-top: 7px;} .sub_title p + p {margin-top: 7px;} /* hd */ .sub_title.hd {margin-bottom: 30px;} /* dot */ .sub_title.dot h5 {padding-left: 16px;} .sub_title.dot h5:before {top: 14px; width: 7px; height: 7px;} } /* gap */ .sub_content .gap20 {gap:20px;} .sub_content .gap22 {gap:22px;} .sub_content .gap40 {gap:40px;} .sub_content .gap51 {gap:51px;} @media only screen and (max-width:1280px) { .sub_content .gap40 {gap:35px;} .sub_content .gap51 {gap:50px 40px;} } @media only screen and (max-width:1023px) { .sub_content .gap40 {gap:30px;} .sub_content .gap51 {gap:40px 30px;} } @media only screen and (max-width:860px) { .sub_content .gap40 {gap:25px;} } @media only screen and (max-width:767px) { .sub_content .gap51 {gap:35px 25px;} } @media only screen and (max-width:640px) { .sub_content .gap20 {gap: 15px;} .sub_content .gap22 {gap: 15px;} .sub_content .gap40 {gap:20px;} .sub_content .gap51 {gap:30px 15px;} } /* thumb_wrap && thumb_box */ .thumb_wrap {display: flex; flex-wrap: wrap;} .thumb_box {display: flex;} .thumb_box .caption_box {background: var(--point-white); border-radius: 10px; font-size: var(--title-20); text-align: center;} .thumb_box .thumb {border-radius: 20px; font-size: 0; overflow: hidden;} .thumb_box .thumb img {width: 100%; height: 100%; object-fit: cover;} .thumb_box p {display: block; padding: 22px 10px; font-weight: 500; color: var(--black-color03); letter-spacing: -0.03em;} .thumb_box .thumb + p {font-size: 90%;} .thumb_wrap .thumb_box .thumb + p {padding: 17px 10px;} @media only screen and (max-width:640px) { .thumb_box .caption_box {border-radius: 5px;} .thumb_box .thumb {border-radius: 10px;} .thumb_box p {padding: 18px 10px;} } @media only screen and (max-width:479px) { .thumb_box {flex-direction: column; width: 100%;} } /* dot_list */ .dot_list {font-size: var(--title-20);} .dot_list li {position: relative; box-sizing: border-box; padding-left: 12px; font-size: 90%; color: var(--black-color06); letter-spacing: -0.03em; line-height: 1.5;} .dot_list li:before {content: ""; position: absolute; left: 0; top: 12px; width: 4px; height: 4px; border-radius: 100%; background: var(--black-color06);} .dot_list li + li {margin-top: 12px;} .dot_list li strong {color: var(--black-color03); font-weight: 500;} @media only screen and (max-width:1023px) { .dot_list li + li {margin-top: 10px;} } @media only screen and (max-width:860px) { .dot_list li:before {top: 11px;} } @media only screen and (max-width:640px) { .dot_list li {padding-left: 9px;} .dot_list li:before {top: 10px; width: 3px; height: 3px;} .dot_list li + li {margin-top: 8px;} } /* box_list */ .box_list {display: grid; grid-template-columns: repeat(4, 1fr); font-size: var(--title-20);} .box_list li {display: inline-flex; justify-content: center; align-items: center; background: var(--point-white); box-sizing: border-box; padding: 26px 14px; border: 1px solid var(--border-color02); border-radius: 10px;} .box_list li span {font-size: 90%; font-weight: 500; color: var(--black-color03); letter-spacing: -0.03em; text-align: center;} @media only screen and (max-width:1023px) { .box_list.gap20 {gap: 15px;} } @media only screen and (max-width:860px) { .box_list {grid-template-columns: repeat(3, 1fr);} } @media only screen and (max-width:640px) { .box_list.gap20 {gap: 10px;} } @media only screen and (max-width:479px) { .box_list {grid-template-columns: repeat(2, 1fr);} } /* horizon_contents */ .horizon_wrap {} .horizon_wrap .horizon_sec {display: flex; padding-bottom: 100px;} .horizon_wrap .horizon_sec + .horizon_sec {border-top: 1px solid var(--border-color02); padding-top: 100px;} .horizon_wrap .horizon_sec:last-child {padding-bottom: 0;} .horizon_wrap .horizon_sec .left_con {width: 380px; box-sizing: border-box; padding-right: 62px;} .horizon_wrap .horizon_sec .right_con {width: calc(100% - 380px);} @media only screen and (max-width:1460px) { .horizon_wrap .horizon_sec .left_con {width: 26vw; padding-right: 4.25vw;} .horizon_wrap .horizon_sec .right_con {width: calc(100% - 26vw);} } @media only screen and (max-width:1023px) { .horizon_wrap .horizon_sec {flex-direction: column;} .horizon_wrap .horizon_sec + .horizon_sec {padding-top: 80px;} .horizon_wrap .horizon_sec .left_con, .horizon_wrap .horizon_sec .right_con {width: 100%;} .horizon_wrap .horizon_sec .left_con {padding-right: 0;} .horizon_wrap .horizon_sec .sub_title {margin-bottom: 15px;} .horizon_wrap .horizon_sec .sub_title h4 br {display: none;} } @media only screen and (max-width:640px) { .horizon_wrap .horizon_sec {padding-bottom: 85px;} .horizon_wrap .horizon_sec + .horizon_sec {padding-top: 65px;} } @media only screen and (max-width:479px) { .horizon_wrap .horizon_sec {padding-bottom: 70px;} .horizon_wrap .horizon_sec + .horizon_sec {padding-top: 50px;} } /*─────────────────────────────────────────────────────────── COMPANY | about ───────────────────────────────────────────────────────────*/ #wrap .about_intro{margin-top:7px;} .about_intro .about_title{text-align: center;} .about_intro .about_title h3{font-size:var(--title-40);color:var(--black-color01);font-weight:600;line-height:1.25;letter-spacing:-0.01em;} .about_intro .about_title h3 > small{font-size:94%;color:inherit;font-weight:inherit;} .about_intro .about_title h3 strong{font-size:var(--title-50);color:var(--point-color01);font-weight:600;} .about_intro .about_title h3 strong small{font-size:86%;color:inherit;font-weight:inherit;} .about_intro .about_title p{font-size:var(--title-20);color:var(--black-color06);font-weight:400;margin-top:31px;letter-spacing:-0.03em;line-height:1.6;} .about_intro .list{display: flex;flex-wrap:wrap;justify-content: center;gap:30px;margin-top:60px;} .about_intro .list li{box-sizing:border-box;display: flex;flex-direction: column;justify-content: space-between;width:calc(25% - 23px);border-radius:10px;border:1px solid #ddd;padding:29px 30px;min-height:275px;} .about_intro .list .txt{font-size:var(--title-20);color:var(--black-color00);font-weight:500;} .about_intro .list .txt dt{font-size:89%;color:var(--black-color10);font-weight:inherit;} .about_intro .list .txt dd{font-size:inherit;color:inherit;font-weight:inherit;margin-top:12px;letter-spacing:-0.03em;word-break:break-all;} .about_intro .list .icon{margin-top:30px;} .about_greeting{background: #f5f5f5;margin-top:130px;box-sizing:border-box;padding:128px 0 211px;} .about_greeting .title{font-size:var(--title-20);color:var(--black-color00);font-weight:600;} .about_greeting .title span{font-size:89%;color:var(--point-color01);font-weight:inherit;} .about_greeting .title h3{font-size:var(--title-40);color:inherit;font-weight:inherit;margin-top:22px;letter-spacing:-0.03em;} .about_greeting .cont{box-sizing:border-box;border-top:1px solid #ddd;display: flex;flex-wrap:wrap;margin-top:69px;padding-top:70px;} .about_greeting .cont .txt{width:59.4%;box-sizing:border-box;padding-right:50px;} .about_greeting .cont .txt p{font-size:var(--title-20);color:var(--black-color06);font-weight:400;line-height:1.6;letter-spacing:-0.03em;} .about_greeting .cont .txt p + p{margin-top:24px;} .about_greeting .cont .img{width:40.6%;height:0;padding-bottom:45.6%;box-sizing:border-box;overflow:hidden;border-radius:20px;position: relative;} .about_greeting .cont .img img{width:100%;position: absolute;top:50%;left:50%;transform:translate(-50%, -50%);max-height:initial;} @media only screen and (max-width:1500px) { .about_intro .list .txt dd br{display: none;} .about_greeting .cont .txt p br{display: none;} } @media only screen and (max-width:1024px) { .about_intro .about_title p{margin-top:15px;} .about_intro .list{margin-top:30px;gap:20px;} .about_intro .list li{width:calc(100% / 3 - 17px);padding:30px 20px;} .about_greeting{margin-top:100px;padding:100px 0 150px;} .about_greeting .title h3 br{display: none;} .about_greeting .cont{margin-top:50px;padding-top:50px;} } @media only screen and (max-width:860px) { .about_greeting .cont{flex-direction: column-reverse;} .about_greeting .cont .txt{width:100%;padding:40px 0 0 0;} .about_greeting .cont .img{width:70%;padding-bottom:75%;} } @media only screen and (max-width:640px) { .about_intro .list li{width:calc(50% - 10px);min-height:200px;} .about_intro .list .icon{margin-top:40px;} .about_intro .list .icon img{max-height:40px;} .about_greeting{margin-top:80px;padding:80px 0 120px;} } @media only screen and (max-width:479px) { .about_intro .list{gap:15px;} .about_intro .list li{width:100%;border-radius:5px;padding:20px 15px;min-height:170px;} .about_intro .list .txt dd{margin-top:5px;} .about_intro .list .icon{margin-top:30px;} .about_intro .list .icon img{max-height:34px;} .about_greeting{margin-top:60px;padding:60px 0 80px;} .about_greeting .title h3{margin-top:10px;} .about_greeting .cont{margin-top:30px;padding-top:30px;} .about_greeting .cont .txt{padding-top:20px;} .about_greeting .cont .txt p + p{margin-top:10px;} .about_greeting .cont .img{width:100%;padding-bottom:110%;border-radius:10px;} } /*─────────────────────────────────────────────────────────── COMPANY | history ───────────────────────────────────────────────────────────*/ .sub_history .history_tab{display: flex;flex-wrap:wrap;gap:20px;margin-top:3px;} .sub_history .history_tab a{display: inline-flex;box-sizing:border-box;align-items: center;justify-content: center;width:190px;height:60px;border-radius:30px;text-align: center;font-size:var(--title-20);color:var(--black-color03);font-weight:500;border:1px solid #ddd;transition:all 0.3s;} .sub_history .history_tab a span{font-size:89%;color:inherit;font-weight:inherit;} .sub_history .histroy_cont{margin-top:58px;} .sub_history .histroy_box{position: relative;display: flex;flex-wrap:wrap;align-items: flex-start;} .sub_history .histroy_box + .histroy_box{padding-top:130px;} .sub_history .histroy_box > a{position: absolute;top:-235px;} .sub_history .histroy_box .txt{position: sticky;top:135px;width:37.7%;} .sub_history .histroy_box .txt .title{font-size:var(--title-20);color:var(--black-color06);font-weight:400;} .sub_history .histroy_box .txt .title span{font-size:inherit;color:var(--point-color01);font-weight:500;} .sub_history .histroy_box .txt .title h3{font-size:var(--title-60);color:var(--black-color01);font-weight:600;letter-spacing:-0.02em;margin-top:1px;} .sub_history .histroy_box .txt .title p{font-size:89%;color:inherit;font-weight:inherit;margin-top:16px;letter-spacing:-0.03em;} .sub_history .histroy_box .txt .img{width:100%;height:0;padding-bottom:106%;box-sizing:border-box;overflow:hidden;border-radius:20px;position: relative;margin-top:37px;} .sub_history .histroy_box .txt .img img{width:100%;position: absolute;top:50%;left:50%;transform:translate(-50%, -50%);max-height:initial;} .sub_history .histroy_box .cont{width:62.3%;box-sizing:border-box;padding-left:130px;margin-top:153px;} .sub_history .histroy_box .cont dl{display: flex;flex-wrap:wrap;box-sizing:border-box;padding:40px 0;border-bottom:1px solid #ddd;} .sub_history .histroy_box .cont dl dt{font-size:var(--title-30);color:var(--black-color03);font-weight:600;width:76px;letter-spacing:-0.03em;} .sub_history .histroy_box .cont dl dd{box-sizing:border-box;width:calc(100% - 76px);padding-left:60px;} .sub_history .histroy_box .cont dl dd ul{font-size:var(--title-20);color:var(--black-color06);font-weight:400;margin-top:9px;} .sub_history .histroy_box .cont dl dd ul li{font-size:89%;color:inherit;font-weight:inherit;letter-spacing:-0.03em;} .sub_history .histroy_box .cont dl dd ul li + li{margin-top:6px;} .sub_history .histroy_box .cont dl dd ul li strong{font-size:inherit;color:var(--black-color03);font-weight:500;} @media only screen and (min-width:1024px) { .sub_history .history_tab a:hover{color:var(--point-white);background:var(--point-color01);border-color:var(--point-color01);} } @media only screen and (max-width:1024px) { .sub_history .histroy_box .cont{padding-left:40px;} .sub_history .histroy_box .cont dl dt{width:70px;} .sub_history .histroy_box .cont dl dd{width:calc(100% - 70px);padding-left:30px;} .sub_history .histroy_box .cont dl dd ul{margin-top:7px;} } @media only screen and (max-width:860px) { .sub_history .history_tab a{width:140px;height:50px;} .sub_history .histroy_cont{margin-top:40px;} .sub_history .histroy_box + .histroy_box{margin-top:100px;} .sub_history .histroy_box .cont{margin-top:172px;} .sub_history .histroy_box .cont dl{padding:28px 0;} .sub_history .histroy_box .cont dl dd ul{margin-top:5px;} } @media only screen and (max-width:640px) { .sub_history .history_tab{gap:10px;} .sub_history .history_tab a{width:120px;;} .sub_history .histroy_box .txt{width:100%;position: static;} .sub_history .histroy_box .txt .title p{margin-top:8px;} .sub_history .histroy_box .txt .img{margin-top:25px;} .sub_history .histroy_box .cont{width:100%;padding:0;margin-top:15px;} } @media only screen and (max-width:479px) { .sub_history .history_tab{gap:12px;} .sub_history .history_tab a{width:calc(100% / 3 - 8px);height:52px;padding:0 20px;} .sub_history .histroy_box + .histroy_box{margin-top:60px;} .sub_history .histroy_box > a{top:-200px;} .sub_history .histroy_box .txt .img{border-radius:10px;} .sub_history .histroy_box .cont dl{padding:20px 0;} .sub_history .histroy_box .cont dl dt{width:60px;} .sub_history .histroy_box .cont dl dd{width:calc(100% - 60px);padding-left:15px;} } /*─────────────────────────────────────────────────────────── COMPANY | business ───────────────────────────────────────────────────────────*/ .sub_business .sub_title p{line-height:1.7;} .sub_business .business_box{padding-top:10px;} .sub_business .business_box .business_cont{display: flex;flex-wrap:wrap;align-items: center;} .sub_business .business_box .business_cont + .business_cont{margin-top:122px;flex-direction: row-reverse;} .sub_business .business_box .business_cont .img{width:52.9%;height:0;padding-bottom:35.7%;box-sizing:border-box;overflow:hidden;border-radius:30px;position: relative;} .sub_business .business_box .business_cont .img img{width:100%;position: absolute;top:50%;left:50%;transform:translate(-50%, -50%);max-height:initial;} .sub_business .business_box .business_cont .txt{box-sizing:border-box;width:47.1%;padding-left:100px;font-size:var(--title-20);color:var(--point-color01);font-weight:600;} .sub_business .business_box .business_cont + .business_cont .txt{padding:0 100px 0 0;} .sub_business .business_box .business_cont .txt span{font-size:104%;color:inherit;font-weight:inherit;} .sub_business .business_box .business_cont .txt h4{font-size:var(--title-40);color:var(--black-color00);font-weight:700;margin:19px 0 22px} .sub_business .business_box .business_cont .txt h4 small{font-size:87%;color:inherit;font-weight:inherit;} .sub_business .business_box .business_cont .txt ul{font-size:var(--title-20);color:var(--black-color06);font-weight:400;} .sub_business .business_box .business_cont .txt ul li{font-size:89%;color:inherit;font-weight:inherit;position: relative;box-sizing:border-box;padding-left:12px;} .sub_business .business_box .business_cont .txt ul li + li{margin-top:12px;} .sub_business .business_box .business_cont .txt ul li:before{width:4px;height:4px;content:"";box-sizing:border-box;border-radius:100%;background:var(--black-color06);position: absolute;left:0;top:9px;} @media only screen and (max-width:1024px) { .sub_business .business_box .business_cont + .business_cont{margin-top:100px;} .sub_business .business_box .business_cont .txt{padding-left:30px;} .sub_business .business_box .business_cont + .business_cont .txt{padding:0 30px 0 0;} } @media only screen and (max-width:860px) { .sub_business .business_box .business_cont{flex-direction: column !important;align-items: flex-start;} .sub_business .business_box .business_cont .img{width:70%;padding-bottom:47%;} .sub_business .business_box .business_cont .txt{width:100%;padding:30px 0 0 0 !important;} } @media only screen and (max-width:640px) { .sub_business .business_box .business_cont + .business_cont{margin-top:80px;} .sub_business .business_box .business_cont .img{width:100%;padding-bottom:67%;} .sub_business .business_box .business_cont .txt h4{margin:0 0 15px;} .sub_business .business_box .business_cont .txt ul li + li{margin-top:7px;} } @media only screen and (max-width:479px) { .sub_business .business_box .business_cont + .business_cont{margin-top:60px;} .sub_business .business_box .business_cont .img{border-radius:15px;} .sub_business .business_box .business_cont .txt{padding:20px 0 0 0 !important;} .sub_business .business_box .business_cont .txt ul li{padding-left:8px;} .sub_business .business_box .business_cont .txt ul li:before{width:3px;height:3px;top:10px;} } /*─────────────────────────────────────────────────────────── COMPANY | global ───────────────────────────────────────────────────────────*/ .sub_content .sub_global{padding:0;} /*─────────────────────────────────────────────────────────── COMPANY | partner ───────────────────────────────────────────────────────────*/ .sub_partner{} .sub_partner .partner_box{} .sub_partner .partner_box + .partner_box{margin-top:94px;} .sub_partner .partner_box h3{font-size:var(--title-40);color:var(--black-color01);font-weight:600;letter-spacing:-0.03em;} .sub_partner .partner_box ul{display: flex;flex-wrap:wrap;gap:20px;margin-top:25px;} .sub_partner .partner_box ul li{box-sizing:border-box;display: flex;align-items: center;justify-content: center;border-radius:10px;border:1px solid #ddd;width:calc(20% - 16px);overflow:hidden;} .sub_partner .partner_box ul li img{} @media only screen and (max-width:1024px) { .sub_partner .partner_box + .partner_box{margin-top:75px;} .sub_partner .partner_box ul{margin-top:15px;} .sub_partner .partner_box ul li{width:calc(25% - 15px);} } @media only screen and (max-width:640px) { .sub_partner .partner_box ul{gap:15px 12px;} .sub_partner .partner_box ul li{width:calc(100% / 3 - 8px);} } @media only screen and (max-width:479px) { .sub_partner .partner_box + .partner_box{margin-top:60px;} .sub_partner .partner_box ul li{width:calc(50% - 6px);border-radius:5px;} } /*─────────────────────────────────────────────────────────── COMPANY | find us ───────────────────────────────────────────────────────────*/ .sub_location .sub_title{margin-bottom:55px;} .sub_location .location_box{box-sizing:border-box;display: flex;flex-wrap:wrap;padding-top:38px;align-items: flex-start;} .sub_location .location_box > dt{font-size:var(--title-20);color:var(--black-color10);font-weight:500;letter-spacing:-0.03em;width:70px;margin-top:10px;} .sub_location .location_box > dd{box-sizing:border-box;width:calc(100% - 70px);padding-left:130px;} .sub_location .location_box > dd h4{font-size:var(--title-30);color:var(--black-color03);font-weight:500;position: relative;padding-left:22px;box-sizing:border-box;margin-bottom:9px;} .sub_location .location_box > dd h4:before{width:10px;height:10px;content:"";box-sizing:border-box;border-radius:100%;background:var(--point-color01);position: absolute;left:0;top:50%;transform:translateY(-50%);} .sub_location .location_box > dd h4 small{font-size:86%;color:inherit;font-weight:inherit;} .sub_location .location_box > dd .txt{font-size:var(--title-20);color:var(--black-color06);font-weight:400;letter-spacing:-0.03em;line-height:1.7;} .sub_location .location_box > dd .txt > p{font-size:79%;color:inherit;font-weight:inherit;} .sub_location .location_box > dd .txt > p + p{margin-top:16px;} .sub_location .location_box > dd .txt > p strong{font-size:inherit;color:var(--black-color03);font-weight:600;} .sub_location .location_box .map_box{position: relative;box-sizing:border-box;border-radius:10px;overflow:hidden;height:0;padding-bottom:25%;} .sub_location .location_box .map_box iframe{width:100%;position: absolute;top:50%;left:50%;transform:translate(-50%, -50%);} .sub_location .location_box .info_box{box-sizing:border-box;width:100%;border-radius:10px;background: #f7f7f7;margin-top:20px;padding:30px 30px 27px;} .sub_location .location_box .info_box dl{display: flex;flex-wrap:wrap;font-size:var(--title-20);color:var(--black-color03);font-weight:500;letter-spacing:-0.03em;} .sub_location .location_box .info_box dl + dl{margin-top:10px;} .sub_location .location_box .info_box dl dt{font-size:89%;color:inherit;font-weight:inherit;width:67px;} .sub_location .location_box .info_box dl dd{font-size:89%;color:var(--black-color06);font-weight:400;width:calc(100% - 67px);padding-left:30px;box-sizing:border-box;} /*kr*/ .sub_location .location_box.kr_loc{border-top:1px solid var(--black-color03);} .sub_location .location_box.kr_loc .img_box{display: flex;flex-wrap:wrap;gap:20px;margin-top:29px;} .sub_location .location_box.kr_loc .img_box .img{width:44.2%;height:0;padding-bottom:25%;box-sizing:border-box;overflow:hidden;border-radius:10px;position: relative;} .sub_location .location_box.kr_loc .img_box .img img{width:100%;position: absolute;top:50%;left:50%;transform:translate(-50%, -50%);max-height:initial;} .sub_location .location_box.kr_loc .map_box{width:calc(55.8% - 20px);} /*factory*/ .sub_location .location_box.fac_loc{border-top:1px solid var(--border-color01);margin-top:60px;} .sub_location .location_box.fac_loc .map_box{width:100%;} @media only screen and (max-width:1024px) { .sub_location .location_box > dd{padding-left:40px;} .sub_location .location_box > dd .txt > p strong br{display: none;} } @media only screen and (max-width:640px) { .sub_location .sub_title{margin-bottom:30px;} .sub_location .location_box{padding-top:25px;} .sub_location .location_box > dt{width:100%;margin:0;} .sub_location .location_box > dd{width:100%;padding:10px 0 0 0;} .sub_location .location_box > dd h4{padding-left:15px;margin-bottom:4px;} .sub_location .location_box > dd h4:before{width:7px;height:7px;} .sub_location .location_box > dd .txt > p + p{margin-top:10px;} .sub_location .location_box .map_box{padding-bottom:55%;} /*kr*/ .sub_location .location_box.kr_loc .img_box .img{width:100%;padding-bottom:55%;} .sub_location .location_box.kr_loc .map_box{width:100%;} /*fac*/ .sub_location .location_box.fac_loc{margin-top:35px;} } @media only screen and (max-width:479px) { .sub_location .sub_title{margin-bottom:20px;} .sub_location .location_box > dd{padding-top:0;} .sub_location .location_box .map_box{padding-bottom:80%;border-radius:5px;} .sub_location .location_box .info_box{border-radius:5px;padding:20px 15px 20px;} .sub_location .location_box .info_box dl dt{width:60px;} .sub_location .location_box .info_box dl dd{width:calc(100% - 60px);padding-left:15px;} /*kr*/ .sub_location .location_box.kr_loc .img_box .img{border-radius:5px;} } /*─────────────────────────────────────────────────────────── PRODUCT ───────────────────────────────────────────────────────────*/ /*** layout ***/ #wrap.sub_goods #header {background: var(--point-white);} #container.goods {display: flex; align-items: flex-start;} #container.goods #side_box {position: sticky; top: 187px; align-self: flex-start; width: 410px; background: var(--gray-bg01); box-sizing: border-box; padding: 0 60px 80px;} #container.goods #side_box:before {content: ""; position: fixed; left: 0; top: 0; width: 410px; height: 100%; background: var(--gray-bg01); z-index: -1;} #side_box .goods_menu {font-size: var(--title-20); text-align: left;overflow-y:auto;} #side_box .goods_menu::-webkit-scrollbar{width:3px;background: #ddd;} #side_box .goods_menu::-webkit-scrollbar-thumb{width:3px;background:#888;} #side_box .goods_menu h2 {font-size: 210%; font-weight: 600; color: var(--black-color01); letter-spacing: -0.03em;} #side_box .goods_menu > ul {margin-top: 23px;} #side_box .goods_menu > ul + ul{margin-top:24px;} #side_box .goods_menu > ul li, #side_box .goods_menu ul li a {letter-spacing: -0.03em;} #side_box .goods_menu > ul > li + li {margin-top: 25px;} #side_box .goods_menu ul > li > a {font-size: 130%; font-weight: 600; color: var(--point-color01);} #side_box .goods_menu ul > li.on > a {} #side_box .goods_menu ul.dep2{box-sizing:border-box;margin-top:9px;padding-left:20px;} #side_box .goods_menu ul.dep2 > li + li{margin-top:20px;} #side_box .goods_menu ul.dep2 > li > a{font-size:20px;color:var(--point-color02);font-weight:500;} #side_box .goods_menu ul.dep2 > li .dep3{margin-top:5px;} #side_box .goods_menu ul.dep2 > li .dep3 li + li{margin-top:4px;} #side_box .goods_menu ul.dep2 > li .dep3 li a{font-size:18px;color:var(--black-color06);font-weight:400;display: inline-block;} #side_box .filter > li > span{font-size:20px; font-weight: 700; color: var(--point-color01);} #side_box .filter .dep2 li label{font-size:18px;color:var(--black-color06);font-weight:400;display: inline-block;cursor:pointer;position: relative;padding-right:40px;} #side_box .filter .dep2 li label:before{display: none;} #side_box .filter .dep2 li label:after{width:25px;height:25px;content:"";background:url('../images/sub/chk_off.svg')no-repeat center;background-size:auto 100%;display: inline-block;position: absolute;top:0;right:0;} #side_box .filter .dep2 li input[type="checkbox"]:checked + label:after{background:url('../images/sub/chk_on.svg')no-repeat center;background-size:auto 100%;} #side_box .catalog_down{margin-top:30px;} #side_box .catalog_down a{display: inline-flex;box-sizing:border-box;align-items: center;justify-content: center;width:245px;height:60px;background:var(--point-white);border-radius: 30px;border: 2px solid #DA1E28;font-size:16px;color:var(--point-color01);font-weight:500;transition:all 0.5s;} #side_box .catalog_down a span{display: inline-flex;font-size:inherit;color:inherit;font-weight:inherit;align-items: center;} #side_box .catalog_down a span:after{width:20px;height:20px;content:"";background:url('../images/sub/goods_catalog.svg')no-repeat center;display: inline-block;margin-left: 10px;} #container.goods #contents_wrap {width: calc(100% - 410px); max-width: 1363px; box-sizing: border-box; padding: 65px 30px 180px 65px; margin-left: inherit;} .goods_top_bnr{margin-bottom:20px;} .goods_top_bnr .title{display: flex;flex-wrap:wrap;align-items: center;} .goods_top_bnr .title + .title{flex-direction: row-reverse;margin-top:20px;} .goods_top_bnr .title .img{width:46.2%;} .goods_top_bnr .title .txt_box{font-size:var(--title-20);color:var(--black-color01);font-weight:400;width:53.8%;box-sizing:border-box;padding-left:60px;} .goods_top_bnr .title + .title .txt_box{padding:0 60px 0 0;} .goods_top_bnr .title .txt_box h4{font-size:var(--title-40);color:var(--black-color01);font-weight:600;margin-bottom:30px;} .goods_top_bnr .title .txt_box h4 small{font-size:104%;color:inherit;font-weight:inherit;} .goods_top_bnr .title .txt_box p{font-size:104%;color:inherit;font-weight:inherit;} .goods_top_bnr .des{font-size:var(--title-20);color:var(--black-color06);font-weight:400;width:100%;box-sizing:border-box;position: relative;z-index: 3;margin-bottom:150px;margin-top:60px;padding-top:60px;border-top:1px solid #ddd;} .goods_top_bnr .des p{font-size:104%;color:inherit;font-weight:inherit;} .goods_top_bnr .des p + p{margin-top:20px;} @media only screen and (min-width:1024px) { #side_box .goods_menu ul.dep2 > li .dep3 li:hover a{text-decoration: underline;} #side_box .catalog_down a:hover{border-color: var(--point-color01);background: var(--point-color01);box-shadow: 0 0 30px rgba(218, 30, 40, 0.2);color:var(--point-white);} #side_box .catalog_down a:hover span{filter:var(--filter-white);} } @media only screen and (max-width:1770px) { #container.goods #side_box, #container.goods #side_box:before {width: 23.16vw;} #container.goods #side_box {padding: 0 3.4vw 80px;} #container.goods #contents_wrap {width: calc(100% - 23.16vw); padding: 65px 2.5vw 180px 3.67vw;} } @media only screen and (max-width:1500px) { #container.goods #side_box {padding: 0 2.4vw 80px;} #container.goods #contents_wrap {width: calc(100% - 23.16vw); padding: 65px 3vw 180px;} } @media only screen and (max-width:1400px) { #container.goods #side_box, #container.goods #side_box:before {width: 25vw;} #container.goods #contents_wrap {width: calc(100% - 25vw);} } @media only screen and (max-width:1240px) { #container.goods {display: block;} #container.goods #side_box {position: relative; width: 100%; top: inherit; padding: 30px 15px 40px;} #container.goods #side_box:before {display: none;} #side_box .goods_menu ul {margin-top: 14px;} #side_box .goods_menu ul > li > a {font-size: 115%;} #side_box .goods_menu ul.dep2 > li .dep3{display: flex;flex-wrap:wrap;gap:9px 30px;} #side_box .goods_menu ul.dep2 > li .dep3 li + li{margin-top:0;} #container.goods #contents_wrap {width: calc(100% - 30px); padding: 65px 0 150px; margin-left: auto;} } @media only screen and (max-width:860px) { .goods_top_bnr .title{flex-direction: column;} .goods_top_bnr .title .img{width:100%;} .goods_top_bnr .title .txt_box{width:100%;padding:40px 0 0 0 !important;} .goods_top_bnr .title .txt_box h3{margin-bottom:10px;} .goods_top_bnr .des{margin-top:30px;margin-bottom:80px;padding-top:30px;} } @media only screen and (max-width:640px) { #side_box .goods_menu ul.dep2 > li > a{font-size:16px;} #side_box .goods_menu ul.dep2 > li .dep3 li a{font-size:14px;} #side_box .filter > li > span{font-size:18px;} #side_box .filter .dep2 li label{font-size:14px;padding-right:28px;} #side_box .filter .dep2 li label:after{width:20px;height:20px;} #side_box .catalog_down{margin-top:20px;} #side_box .catalog_down a{width:200px;height:50px;font-size:14px;} #container.goods #contents_wrap {padding-bottom: 120px;} } @media only screen and (max-width:479px) { #side_box .goods_menu ul.dep2 > li .dep3{gap: 9px 24px;} #container.goods #contents_wrap {padding-bottom: 100px;} .goods_top_bnr .title .txt_box{padding-top:20px !important;} .goods_top_bnr .des p + p{margin-top:15px;} } @media only screen and (max-width:320px) { #side_box .goods_menu ul.dep2 > li .dep3 {padding: 24px 10px;} #container.goods #contents_wrap {width: calc(100% - 20px);} } /*** 리스트 ***/ .sub_list .list .sub_title {margin-bottom: 24px; font-size: var(--title-30);} .sub_list .list .sub_title h3 {font-size: 113.5%; font-weight: 500;} .sub_list .list .goods_cate {font-size: var(--title-20); box-sizing: border-box; margin: 0 0 40px; padding-bottom: 10px; overflow-x: auto;} .sub_list .list .goods_cate ul {display: flex; flex-wrap: wrap; gap: 9px 30px; width: max-content;} .sub_list .list .goods_cate ul li {position: relative;} .sub_list .list .goods_cate ul li, .sub_list .list .goods_cate ul li a {color: var(--black-color09); font-weight: 500; letter-spacing: -0.03em; transition: all 0.3s;} .sub_list .list .goods_cate ul li a {font-size: 90%;} .sub_list .list .goods_cate ul li.on, .sub_list .list .goods_cate ul li.on a {color: var(--point-color01); transition: all 0.3s;} .sub_list .list .goods_cate ul li.on:after {content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px; background: var(--point-color01);} .sub_list .list .list_cont ul {display: flex; flex-wrap: wrap;} .sub_list .list .list_cont ul > li {position: relative; width: calc(100% / 4 - 15px); box-sizing: border-box; border: 1px solid var(--border-color01); border-radius: 20px;} .sub_list .list .list_cont ul > li > a {position: absolute; left: -1px; top: -1px; width: calc(100% + 2px); height: calc(100% + 2px); box-sizing: border-box; border: 2px solid var(--trans-color); border-radius: 20px; overflow: hidden; transition: all 0.3s; z-index: 1;} .sub_list .list .list_cont ul > li strong {display: block; width: 100%; box-sizing: border-box; padding: 14px 30px 26px; font-size: var(--title-20); font-weight: 400; color: var(--black-color01); letter-spacing: -0.05em;} .sub_list .list .list_cont ul > li .thumb_box .thumb {position: relative; width: 100%; padding-bottom: 100%;} .sub_list .list .list_cont ul > li .thumb_box .thumb img {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);} .sub_list .list .list_cont ul > li .more_box {position: absolute; right: 25px; top: 25px; font-size: 0; z-index: 2;} .sub_list .list .list_cont ul > li .plus_btn {position: relative; display: block; width: 32px; height: 32px; border-radius: 50%; box-sizing: border-box; border: 1px solid var(--border-color01); transition: all 0.3s;} .sub_list .list .list_cont ul > li .plus_btn span:before, .sub_list .list .list_cont ul > li .plus_btn span:after {content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background: var(--black-color09);} .sub_list .list .list_cont ul > li .plus_btn span:before {width: 14px; height: 2px;} .sub_list .list .list_cont ul > li .plus_btn span:after {width: 2px; height: 14px;} /* over */ @media screen and (min-width:1023px){ .sub_list .list .goods_cate ul li:hover, .sub_list .list .goods_cate ul li:hover a {color: var(--point-color01); transition: all 0.3s;} .sub_list .list .list_cont ul > li:hover > a {border: 2px solid var(--point-color01); transition: all 0.3s;} .sub_list .list .list_cont ul > li:hover .plus_btn {background: var(--point-color01); border-color: var(--point-color01); transform: rotate(90deg); transition: all 0.3s;} .sub_list .list .list_cont ul > li:hover .plus_btn span:before, .sub_list .list .list_cont ul > li:hover .plus_btn span:after {background: var(--point-white);} } @media only screen and (max-width:1770px) { .sub_list .list .list_cont ul > li strong {padding: 14px 26px 26px;} } @media only screen and (max-width:1500px) { .sub_list .list .list_cont ul > li strong {padding: 12px 24px 24px;} .sub_list .list .list_cont ul > li .more_box {right: 20px; top: 20px;} } @media only screen and (max-width:1420px) { .sub_list .list .list_cont ul > li {width: calc(100% / 3 - 14px);} } @media only screen and (max-width:860px) { .sub_list .list .list_cont ul > li {width: calc(100% / 2 - 10px);} } @media only screen and (max-width:640px) { .sub_list .list .sub_title {margin-bottom: 20px;} .sub_list .list .goods_cate {margin: 0 0 20px;} .sub_list .list .goods_cate ul li.on:after {bottom: 0;} .sub_list .list .list_cont ul > li, .sub_list .list .list_cont ul > li > a {border-radius: 10px;} } @media only screen and (max-width:479px) { .sub_list .list .sub_title {margin-bottom: 16px;} .sub_list .list .list_cont ul > li {width: 100%;} .sub_list .list .list_cont ul > li strong {padding: 12px 20px 24px;} } /*240904*/ .goods_bnr_list{display: flex;flex-wrap:wrap;gap:20px 20px;margin-bottom:60px;} .goods_bnr_list li{width:calc(25% - 15px);position: relative;} .goods_bnr_list li a{display: block;width:100%;height:100%;position: absolute;top:0;left:0;z-index:3;} .goods_bnr_list li .thumb{width:100%;height:0;padding-bottom:140%;position: relative;overflow:hidden;box-sizing:border-box;border-radius:20px;} .goods_bnr_list li img{width:100%;position: absolute;top:50%;left:50%;transform:translate(-50%, -50%);max-height:initial;} @media only screen and (max-width:1024px) { .goods_bnr_list{gap:20px 10px;} .goods_bnr_list li{width:calc(25% - 8px);} } @media only screen and (max-width:640px) { .goods_bnr_list{gap:15px 15px;margin-bottom:40px;} .goods_bnr_list li{width:calc(50% - 7.5px);} .goods_bnr_list li .thumb{border-radius:10px;} } /*** 상세 ***/ .sub_view {} .sub_view .goods_top {display: flex;} .sub_view .goods_thumb {position: sticky; top: 187px; align-self: flex-start; width: 500px;} .sub_view .goods_thumb .thumb_box .thumb {position: relative; width: 100%; padding-bottom: 100%; border-radius: 30px;} .sub_view .goods_thumb .thumb_box .thumb:after {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-sizing: border-box; border: 1px solid var(--border-color01); border-radius: 30px;} .sub_view .goods_thumb .thumb_box .thumb img {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);} .sub_view .goods_thumb .thumb_list {position: relative; width: 100%; margin-top: 20px;} .sub_view .goods_thumb .thumb_list .thumbSwiper {width: calc(100% - 92px); margin: 0 auto; overflow: hidden;} .sub_view .goods_thumb .thumb_list .thumbSwiper li {position: relative; box-sizing: border-box; border: 1px solid var(--border-color01); border-radius: 10px; overflow: hidden; cursor: pointer;} .sub_view .goods_thumb .thumb_list .thumbSwiper li.on {border-width: 2px; border-color: var(--black-color01);} .sub_view .goods_thumb .thumb_list .thumbSwiper li img {width: 100%; height: 100%; object-fit: cover;} #wrap .sub_view .goods_thumb .thumb_list .swiper_arw {position: absolute; top: 50%; transform: translateY(-50%); width: 20px; border: 0; border-radius: inherit;} #wrap .sub_view .goods_thumb .thumb_list .swiper_arw:before {left: 50%; border-top-color: var(--black-color03); border-left-color: var(--black-color03);} #wrap .sub_view .goods_thumb .swiper_arw.swiper-button-prev {left: 0;} #wrap .sub_view .goods_thumb .swiper_arw.swiper-button-next {right: 0; transform: translateY(-50%) scale(-1,-1);} /* over */ @media screen and (min-width:1024px){ #wrap .sub_view .goods_thumb .thumb_list .swiper_arw:hover{background: none; border-color: none;} #wrap .sub_view .goods_thumb .thumb_list .swiper_arw:hover:before {filter: none; border-top-color: var(--point-color01); border-left-color: var(--point-color01);} } .sub_view .goods_info {width: calc(100% - 500px); box-sizing: border-box; padding-left: 60px;} .sub_view .goods_info .sub_title span {display: block; margin-bottom: 4px; font-size: 120%; font-weight: 600; letter-spacing: -0.03em; color: var(--point-color01);} .sub_view .goods_info .sub_title h3 {font-size: var(--title-44);} .sub_view .goods_info .sub_title h3 + p {margin-top: 6px; font-size: 100%;} .sub_view .goods_info .info_wrap {margin-top: 55px;} .sub_view .goods_info .info_wrap .info_li {font-size: var(--title-20);} .sub_view .goods_info .info_wrap .info_li + .info_li {margin-top: 60px;} .sub_view .goods_info .info_wrap .info_li .info_tit {position: relative; width: 100%; padding-bottom: 14px; border-bottom: 2px solid var(--black-color03); font-size: 110%; font-weight: 600; color: var(--black-color01); letter-spacing: -0.03em;} .sub_view .goods_info .info_wrap .info_li .info_cont {width: 100%; box-sizing: border-box; padding: 30px 20px; border-bottom: 1px solid var(--border-color01);} .sub_view .goods_info .info_wrap .info_li .info_cont > strong {display: block; margin-bottom: 12px; font-size: 90%;} .sub_view .goods_info .info_wrap .info_li .info_cont ul {font-size: var(--title-20);} .sub_view .goods_info .info_wrap .info_li .info_cont ul li {position: relative; box-sizing: border-box; padding-left: 12px; font-size: 80%; color: var(--black-color06); letter-spacing: -0.03em; line-height: 1.2;} .sub_view .goods_info .info_wrap .info_li .info_cont ul li:before {content: ""; position: absolute; left: 0; top: 8px; width: 4px; height: 4px; border-radius: 100%; background: var(--black-color06);} .sub_view .goods_info .info_wrap .info_li .info_cont ul li + li {margin-top: 12px;} .sub_view .goods_info .info_wrap .info_li .info_cont ul li strong {color: var(--black-color03); font-weight: 500;} /* feature */ .sub_view .goods_info .info_wrap .info_li .info_cont .feature {display: flex; flex-wrap: wrap; gap: 12px 0;} .sub_view .goods_info .info_wrap .info_li .info_cont .feature li {width: 50%; padding-right: 14px;} .sub_view .goods_info .info_wrap .info_li .info_cont .feature li + li {margin-top: 0;} /* dimension */ .sub_view .goods_info .info_wrap .dimension .info_tit {padding-bottom: 0; border-bottom: 0; z-index: 1;} .sub_view .goods_info .info_wrap .dimension .info_cont {padding: 0; border-bottom: 0; margin-top: -23px;} .sub_view .goods_info .more_box {margin-top: 60px;} .sub_view .goods_info .more_box .icon_btn.view {border-color: var(--point-color01); color: var(--point-color01);} .sub_view .goods_info .more_box .icon_btn.view span:after {background-image: url('../images/sub/view_icon_red.svg');} .sub_view .goods_info .more_box .icon_btn.view:hover {box-shadow: none;} .sub_view .goods_detail {margin-top: 120px;} .sub_view .goods_detail .info_li {font-size: var(--title-40);} .sub_view .goods_detail .info_li + .info_li {margin-top: 120px;} .sub_view .goods_detail .info_li .info_tit {position: relative; width: 100%; padding-bottom: 24px; border-bottom: 2px solid var(--black-color03); font-size: 100%; font-weight: 600; color: var(--black-color01); letter-spacing: -0.03em;} .sub_view .goods_detail .info_li .info_cont {width: 100%; box-sizing: border-box; padding: 50px 0 0;} @media only screen and (max-width:1500px) { .sub_view .goods_thumb {width: 450px;} .sub_view .goods_info {width: calc(100% - 450px); padding-left: 50px;} .sub_view .goods_info .info_wrap {margin-top: 50px;} .sub_view .goods_info .info_wrap .info_li + .info_li {margin-top: 55px;} /* dimension */ .sub_view .goods_info .info_wrap .dimension .info_cont {margin-top: -20px;} .sub_view .goods_info .more_box {margin-top: 55px;} .sub_view .goods_detail, .sub_view .goods_detail .info_li + .info_li {margin-top: 110px;} .sub_view .goods_detail .info_li .info_tit {} .sub_view .goods_detail .info_li .info_cont {} } @media only screen and (max-width:1400px) { .sub_view .goods_thumb {width: 400px;} .sub_view .goods_thumb .thumb_list .thumbSwiper {width: calc(100% - 62px);} .sub_view .goods_info {width: calc(100% - 400px); padding-left: 40px;} .sub_view .goods_info .info_wrap {margin-top: 45px;} .sub_view .goods_info .info_wrap .info_li .info_cont {padding: 24px 20px;} .sub_view .goods_info .info_wrap .info_li + .info_li {margin-top: 50px;} /* feature */ .sub_view .goods_info .info_wrap .info_li .info_cont .feature li {width: 100%; padding-right: 0;} /* dimension */ .sub_view .goods_info .info_wrap .dimension .info_cont {padding: 0; margin-top: -18px;} .sub_view .goods_info .more_box {margin-top: 50px;} .sub_view .goods_detail, .sub_view .goods_detail .info_li + .info_li {margin-top: 100px;} .sub_view .goods_detail .info_li .info_tit {} .sub_view .goods_detail .info_li .info_cont {padding: 44px 0 0;} } @media only screen and (max-width:1240px) { .sub_view .goods_thumb {top: 140px;} .sub_view .goods_info {padding-left: 50px;} .sub_view .goods_info .info_wrap .info_li .info_cont ul li + li {margin-top: 10px;} /* feature */ .sub_view .goods_info .info_wrap .info_li .info_cont .feature li {width: 50%; padding-right: 14px;} } @media only screen and (max-width:1023px) { .sub_view .goods_thumb {top: 140px; width: 360px;} .sub_view .goods_info {width: calc(100% - 360px); padding-left: 40px;} .sub_view .goods_info .info_wrap .info_li .info_cont ul li + li {margin-top: 10px;} .sub_view .goods_detail .info_li .info_tit {padding-bottom: 20px;} } @media only screen and (max-width:860px) { .sub_view .goods_top {flex-direction: column;} .sub_view .goods_thumb {position: relative; top: inherit; width: 100%;} .sub_view .goods_thumb .thumb_list .thumbSwiper {width: calc(100% - 62px);} .sub_view .goods_info {width: 100%; padding-top: 80px; padding-left: 0;} .sub_view .goods_info .info_wrap {margin-top: 45px;} .sub_view .goods_info .info_wrap .info_li + .info_li {margin-top: 40px;} .sub_view .goods_info .info_wrap .info_li .info_cont ul li + li {margin-top: 10px;} /* feature */ .sub_view .goods_info .info_wrap .info_li .info_cont .feature {gap: 10px 0;} .sub_view .goods_info .more_box {margin-top: 50px;} .sub_view .goods_detail, .sub_view .goods_detail .info_li + .info_li {margin-top: 90px;} .sub_view .goods_detail .info_li .info_tit {padding-bottom: 16px;} .sub_view .goods_detail .info_li .info_cont {padding: 44px 0 0;} } @media only screen and (max-width:640px) { .sub_view .goods_thumb .thumb_box .thumb {border-radius: 15px;} .sub_view .goods_thumb .thumb_list .thumbSwiper li {border-radius: 5px;} .sub_view .goods_info {padding-top: 60px;} .sub_view .goods_info .info_wrap {margin-top: 40px;} .sub_view .goods_info .info_wrap .info_li + .info_li {margin-top: 35px;} .sub_view .goods_info .info_wrap .info_li .info_tit {padding-bottom: 10px;} .sub_view .goods_info .info_wrap .info_li .info_cont {padding: 20px 16px;} .sub_view .goods_info .info_wrap .info_li .info_cont > strong {margin-bottom: 8px;} .sub_view .goods_info .info_wrap .info_li .info_cont ul li {padding-left: 9px;} .sub_view .goods_info .info_wrap .info_li .info_cont ul li:before {top: 7px; width: 3px; height: 3px;} .sub_view .goods_info .info_wrap .info_li .info_cont ul li + li {margin-top: 8px;} /* feature */ .sub_view .goods_info .info_wrap .info_li .info_cont .feature {gap: 8px 0;} .sub_view .goods_info .info_wrap .info_li .info_cont .feature li {width: 100%; padding-right: 0;} /* dimension */ .sub_view .goods_info .info_wrap .dimension .info_tit {padding-bottom: 0;} .sub_view .goods_info .info_wrap .dimension .info_cont {padding: 0;} .sub_view .goods_info .more_box {margin-top: 45px;} .sub_view .goods_detail, .sub_view .goods_detail .info_li + .info_li {margin-top: 80px;} .sub_view .goods_detail .info_li .info_tit {padding-bottom: 14px;} .sub_view .goods_detail .info_li .info_cont {padding: 40px 0 0;} } @media only screen and (max-width:479px) { .sub_view .goods_thumb .thumb_list {margin-top: 14px;} .sub_view .goods_info {padding-top: 40px;} .sub_view .goods_info .info_wrap {margin-top: 30px;} .sub_view .goods_info .info_wrap .info_li + .info_li {margin-top: 30px;} .sub_view .goods_info .info_wrap .info_li .info_cont {padding: 16px 12px;} .sub_view .goods_info .info_wrap .info_li .info_cont ul li {padding-left: 9px;} .sub_view .goods_info .info_wrap .info_li .info_cont ul li:before {top: 7px; width: 3px; height: 3px;} .sub_view .goods_info .info_wrap .info_li .info_cont ul li + li {margin-top: 8px;} /* dimension */ .sub_view .goods_info .info_wrap .dimension .info_cont {padding: 0; margin-top: -10px;} .sub_view .goods_info .more_box {margin-top: 40px;} .sub_view .goods_detail, .sub_view .goods_detail .info_li + .info_li {margin-top: 60px;} .sub_view .goods_detail .info_li .info_tit {} .sub_view .goods_detail .info_li .info_cont {padding: 36px 0 0;} } /*─────────────────────────────────────────────────────────── TECHNIQUE ───────────────────────────────────────────────────────────*/ /*** common ***/ .sub_technique {} .sub_technique .desc_box {margin-top: 65px;} .sub_technique .desc_box.no_mg {margin-top: 0;} .sub_technique .desc_box .sub_title {margin-bottom: 26px;} .sub_technique .desc_box .sub_title + .dot_list {margin-top: -16px;} .sub_technique .dot_list {margin-bottom: 30px;} .sub_technique sup {font-size: 50%;} @media only screen and (max-width:1023px) { .sub_technique .desc_box {margin-top: 55px;} } @media only screen and (max-width:860px) { .sub_technique .desc_box {margin-top: 45px;} } @media only screen and (max-width:640px) { .sub_technique .desc_box {margin-top: 40px;} .sub_technique .desc_box .sub_title {margin-bottom: 22px;} .sub_technique .desc_box .sub_title + .dot_list {margin-top: -12px;} .sub_technique .dot_list {margin-bottom: 26px;} } @media only screen and (max-width:479px) { .sub_technique .desc_box .sub_title {margin-bottom: 18px;} .sub_technique .desc_box .sub_title + .dot_list {margin-top: -8px;} .sub_technique .dot_list {margin-bottom: 22px;} } .sub_technique .table_box {} .sub_technique .table_box .ex_table {font-size: var(--title-20);} .sub_technique .table_box .ex_table .ex_thead {border-radius: 10px 10px 0 0; overflow: hidden;} .sub_technique .table_box .ex_table .ex_tbody {box-sizing: border-box; border: 1px solid var(--border-color01); border-top: 0; border-radius: 0 0 10px 10px; overflow: hidden;} .sub_technique .table_box .ex_table .ex_tbody dl:not(:last-child) dt, .sub_technique .table_box .ex_table .ex_tbody dl:not(:last-child) dd {border-bottom: 1px solid var(--border-color01);} .sub_technique .table_box .ex_table dl {display: grid; grid-template-columns: repeat(3, 1fr);} .sub_technique .table_box .ex_table dt, .sub_technique .table_box .ex_table dd {display: inline-flex; align-items: center; justify-content: center; padding: 14px 10px 13px; font-size: 90%; letter-spacing: -0.03em; text-align: center; word-break: break-all;} .sub_technique .table_box .ex_table dt {font-weight: 500;} .sub_technique .table_box .ex_table .ex_thead dt {background: var(--black-color03); border-left: 1px solid rgba(255,255,255,0.3); color: var(--point-white); font-weight: 400;} .sub_technique .table_box .ex_table .ex_tbody dt {background: var(--point-white); color: var(--black-color03);} .sub_technique .table_box .ex_table dd {background: var(--point-white); border-left: 1px solid var(--border-color01); color: var(--black-color06);} .sub_technique .table_box .ex_table dl.pd5 dd {padding: 5px;} @media only screen and (max-width:479px) { .sub_technique .table_box .ex_table dt, .sub_technique .table_box .ex_table dd {padding: 12px 6px 11px; font-size: 85%;} } /*** technique/competitiveness (Core Competitiveness) ***/ .technique_competitiveness #contents_wrap {padding: 0 0 210px;} .sub_competi {} .sub_competi .competi_cont {position:relative;text-align:center;} .sub_competi .competi_cont > h3 {font-size:var(--title-20);width:590px;height:590px;border-radius:100%;border: 1px dashed var(--border-color01);margin:0 auto;display:flex;align-items:center;justify-content:center;position:relative;padding:32px;box-sizing:border-box;} .sub_competi .competi_cont > h3 strong, .sub_competi .competi_cont > h3 span {width:100%;height:100%;border-radius:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;} .sub_competi .competi_cont > h3 strong {padding: 62px; background:rgba(218,30,40,0.04);} .sub_competi .competi_cont > h3 span {flex-direction: column;gap:24px;background:#fff;border: 20px solid transparent;background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #DA1E28 0%, #750E13 100%); background-origin: border-box; background-clip: content-box, border-box;font-weight:700;color:var(--black-color00);} .sub_competi .competi_cont > h3 span br {display: none;} .sub_competi .competi_cont > h3:before, .sub_competi .competi_cont > h3:after, .sub_competi .competi_cont > h3 strong:before, .sub_competi .competi_cont > h3 strong:after {content:'';display:block;position:absolute;width:16px;height:16px;border-radius:100%;border:3px solid;background:#fff;box-sizing:border-box;} .sub_competi .competi_cont > h3:before {border-color:#C81B24;top: 25%;left:calc(25% - 8px);} .sub_competi .competi_cont > h3:after {border-color:#861016;top:25%;right:calc(25% - 8px);} .sub_competi .competi_cont > h3 strong:before {border-color:#C91B24;bottom: calc(25% - 3px);left:calc(25% - 8px);} .sub_competi .competi_cont > h3 strong:after {border-color:#841016;bottom: calc(25% - 3px);right: calc(25% - 8px);} .sub_competi .competi_cont > ul {position:absolute;width:100%;max-width:1320px;height: 100%;top:0;left:50%;transform: translateX(-50%);display:flex;flex-wrap: wrap;align-content: space-between;justify-content: center;font-size: 0;} .sub_competi .competi_cont > ul > li {width:50%;box-sizing:border-box;display: inline-block;vertical-align: top;text-align:left;} .sub_competi .competi_cont > ul > li:nth-of-type(1), .sub_competi .competi_cont > ul > li:nth-of-type(2) {padding-top:20px;} .sub_competi .competi_cont > ul > li:nth-of-type(3) {padding-top: 170px;} .sub_competi .competi_cont > ul > li:nth-of-type(4) {padding-top: 205px;} .sub_competi .competi_cont > ul > li:nth-of-type(odd) {padding-right:316px;} .sub_competi .competi_cont > ul > li:nth-of-type(even) {padding-left:316px;} .sub_competi .competi_cont > ul > li .txt_wrap {font-size:var(--title-20);} .sub_competi .competi_cont > ul > li .txt_wrap dt {font-size:130%;font-weight:600;color:var(--black-color03);display:block;position:relative;} .sub_competi .competi_cont > ul > li .txt_wrap dt:before {content:'';display:block;position:absolute;width:430px;height:1px;} .sub_competi .competi_cont > ul > li .txt_wrap dt:after {content:'';display:block;position:absolute;width:110px;height:1px;} .sub_competi .competi_cont > ul > li:nth-of-type(1) .txt_wrap dt:before {background:#C81B24;top: 54px;left: 0;} .sub_competi .competi_cont > ul > li:nth-of-type(1) .txt_wrap dt:after {background:#C81B24;transform: rotate(45deg);top: 93px;right: -180px;} .sub_competi .competi_cont > ul > li:nth-of-type(2) .txt_wrap dt:before {background:#861016;top: 54px;right: 0;} .sub_competi .competi_cont > ul > li:nth-of-type(2) .txt_wrap dt:after {background:#861016;transform: rotate(-45deg);top: 93px;left: -180px;} .sub_competi .competi_cont > ul > li:nth-of-type(3) .txt_wrap dt:before {background:#C91B24;top: 90px;left: 0;} .sub_competi .competi_cont > ul > li:nth-of-type(3) .txt_wrap dt:after {background:#C91B24;transform: rotate(135deg);top: 51px;right: -180px;} .sub_competi .competi_cont > ul > li:nth-of-type(4) .txt_wrap dt:before {background:#841016;top: 54px;right: 0;} .sub_competi .competi_cont > ul > li:nth-of-type(4) .txt_wrap dt:after {background:#841016;transform: rotate(-135deg);top: 15px;left: -180px;} .sub_competi .competi_cont > ul > li .txt_wrap dd {padding-top: 40px;} .sub_competi .competi_cont > ul > li .txt_wrap dd .dot_list li {line-height: 1.2;} .sub_competi .competi_cont > ul > li .txt_wrap dd .dot_list li:before {top: 8px;} @media only screen and (max-width:1380px) { .sub_competi .competi_cont > h3 {width: 550px; height: 550px;} .sub_competi .competi_cont > h3 strong {padding: 57px;} .sub_competi .competi_cont > h3:before, .sub_competi .competi_cont > h3 strong:before {left:calc(25% - 4px);} .sub_competi .competi_cont > h3:after, .sub_competi .competi_cont > h3 strong:after {right:calc(25% - 4px);} .sub_competi .competi_cont > ul {max-width: 1220px;} .sub_competi .competi_cont > ul > li:nth-of-type(3) {padding-top: 130px;} .sub_competi .competi_cont > ul > li:nth-of-type(4) {padding-top: 166px;} .sub_competi .competi_cont > ul > li:nth-of-type(odd) {padding-right: 280px;} .sub_competi .competi_cont > ul > li:nth-of-type(even) {padding-left: 280px;} .sub_competi .competi_cont > ul > li .txt_wrap dt:before {width: 405px;} .sub_competi .competi_cont > ul > li .txt_wrap dt:after {width: 94px;} .sub_competi .competi_cont > ul > li:nth-of-type(1) .txt_wrap dt:after {top: 88px; right: -155px;} .sub_competi .competi_cont > ul > li:nth-of-type(2) .txt_wrap dt:after {top: 88px; left: -155px;} .sub_competi .competi_cont > ul > li:nth-of-type(3) .txt_wrap dt:after {top: 57px; right: -155px;} .sub_competi .competi_cont > ul > li:nth-of-type(4) .txt_wrap dt:after {top: 20px; left: -155px;} } @media only screen and (max-width:1280px) { .sub_competi .competi_cont > h3 {width: 495px; height: 495px; padding: 28px;} .sub_competi .competi_cont > h3 strong {padding: 48px;} .sub_competi .competi_cont > h3 span {border-width: 16px; gap: 18px;} .sub_competi .competi_cont > h3 span img {width: 168px;} .sub_competi .competi_cont > h3:before, .sub_competi .competi_cont > h3:after {top: 23%;} .sub_competi .competi_cont > h3:before, .sub_competi .competi_cont > h3 strong:before {left: 25%;} .sub_competi .competi_cont > h3 strong:before, .sub_competi .competi_cont > h3 strong:after {bottom: calc(25% - 8px);} .sub_competi .competi_cont > h3:after, .sub_competi .competi_cont > h3 strong:after {right: 25%;} .sub_competi .competi_cont > ul {max-width: 1140px;} .sub_competi .competi_cont > ul > li:nth-of-type(1), .sub_competi .competi_cont > ul > li:nth-of-type(2) {padding-top: 0; margin-top: -10px;} .sub_competi .competi_cont > ul > li:nth-of-type(3) {padding-top: 130px;} .sub_competi .competi_cont > ul > li:nth-of-type(4) {padding-top: 166px;} .sub_competi .competi_cont > ul > li:nth-of-type(odd) {padding-right: 250px;} .sub_competi .competi_cont > ul > li:nth-of-type(even) {padding-left: 250px;} .sub_competi .competi_cont > ul > li .txt_wrap dt:before {width: 377px;} .sub_competi .competi_cont > ul > li .txt_wrap dt:after {width: 102px;} .sub_competi .competi_cont > ul > li:nth-of-type(1) .txt_wrap dt:after {top: 90px; right: -144px;} .sub_competi .competi_cont > ul > li:nth-of-type(2) .txt_wrap dt:after {top: 90px; left: -144px;} .sub_competi .competi_cont > ul > li:nth-of-type(3) .txt_wrap dt:after {top: 54px; right: -144px;} .sub_competi .competi_cont > ul > li:nth-of-type(4) .txt_wrap dt:after {top: 18px; left: -144px;} } @media only screen and (max-width:1200px) { .sub_competi .competi_cont > h3 {width: 450px; height: 450px; padding: 24px;} .sub_competi .competi_cont > h3 strong {padding: 40px;} .sub_competi .competi_cont > h3:before, .sub_competi .competi_cont > h3 strong:before {left: 23%;} .sub_competi .competi_cont > h3:after, .sub_competi .competi_cont > h3 strong:after {right: 23%;} .sub_competi .competi_cont > h3 span {gap: 14px;} .sub_competi .competi_cont > h3 span img {width: 148px;} .sub_competi .competi_cont > ul {max-width: 1080px;} .sub_competi .competi_cont > ul > li:nth-of-type(3) {padding-top: 88px;} .sub_competi .competi_cont > ul > li:nth-of-type(4) {padding-top: 123px;} .sub_competi .competi_cont > ul > li:nth-of-type(odd) {padding-right: 235px;} .sub_competi .competi_cont > ul > li:nth-of-type(even) {padding-left: 235px;} .sub_competi .competi_cont > ul > li .txt_wrap dt:before {width: 358px;} .sub_competi .competi_cont > ul > li .txt_wrap dt:after {width: 90px;} .sub_competi .competi_cont > ul > li:nth-of-type(1) .txt_wrap dt:after {top: 86px; right: -130px;} .sub_competi .competi_cont > ul > li:nth-of-type(2) .txt_wrap dt:after {top: 86px; left: -130px;} .sub_competi .competi_cont > ul > li:nth-of-type(3) .txt_wrap dt:after {top: 58px; right: -130px;} .sub_competi .competi_cont > ul > li:nth-of-type(4) .txt_wrap dt:after {top: 22px; left: -130px;} } @media only screen and (max-width:1140px) { /* 레이아웃 커스텀 */ .technique_competitiveness #contents_wrap {padding: 0 0 150px;} .sub_competi .competi_cont > h3:before, .sub_competi .competi_cont > h3:after, .sub_competi .competi_cont > h3 strong:before, .sub_competi .competi_cont > h3 strong:after {display: none;} .sub_competi .competi_cont > ul {position: relative; left: inherit; top: inherit; transform: none; width: 100%; height: auto; max-width: 100%; margin-top: 50px; gap: 30px;} .sub_competi .competi_cont > ul > li {width: calc(50% - 15px); margin-top: 0 !important; box-sizing: border-box; border: 1px solid var(--border-color01); border-radius: 20px; padding: 32px 30px !important;} .sub_competi .competi_cont > ul > li .txt_wrap dt:before, .sub_competi .competi_cont > ul > li .txt_wrap dt:after {display: none;} .sub_competi .competi_cont > ul > li .txt_wrap dd {padding-top: 18px;} .sub_competi .competi_cont > ul > li .txt_wrap dd .dot_list li br {display: none;} } @media only screen and (max-width:860px) { .sub_competi .competi_cont > ul {gap: 25px;} .sub_competi .competi_cont > ul > li {padding: 30px 28px 28px !important;} } @media only screen and (max-width:640px) { .technique_competitiveness #contents_wrap {padding: 0 0 120px;} .sub_competi .competi_cont > h3 {width: 400px; height: 400px;} .sub_competi .competi_cont > h3 strong {padding: 36px;} .sub_competi .competi_cont > h3 span {border-width: 12px;} .sub_competi .competi_cont > h3 span img {width: 128px;} .sub_competi .competi_cont > ul {gap: 20px 0;} .sub_competi .competi_cont > ul > li {width: 100%; border-radius: 10px;} .sub_competi .competi_cont > ul > li .txt_wrap dd .dot_list li:before {top: 7px;} } @media only screen and (max-width:479px) { .technique_competitiveness #contents_wrap {padding: 0 0 100px;} .sub_competi .competi_cont > h3 {width: 360px; height: 360px; padding: 20px;} .sub_competi .competi_cont > h3 strong {padding: 32px;} .sub_competi .competi_cont > h3 span {gap: 10px;} .sub_competi .competi_cont > h3 span img {width: 118px;} .sub_competi .competi_cont > h3 span br {display: block;} .sub_competi .competi_cont > ul {margin-top: 40px;} .sub_competi .competi_cont > ul > li {padding: 26px 22px 22px !important;} } @media only screen and (max-width:431px) { .sub_competi .competi_cont > h3 {width: 320px; height: 320px; padding: 18px;} .sub_competi .competi_cont > h3 strong {padding: 28px;} .sub_competi .competi_cont > h3 span {gap: 8px; border-width: 10px;} .sub_competi .competi_cont > h3 span img {width: 108px;} } @media only screen and (max-width:360px){ .sub_competi .competi_cont > h3 {width: 300px; height: 300px; padding: 16px;} .sub_competi .competi_cont > h3 strong {padding: 26px;} } /*** technique/technology (Core Technology) ***/ .technique_technology #contents_wrap {width: 100%; max-width: 100%; padding: 0;} .sub_tech .tech_about {} .sub_tech .tech_about .technique_list {display: grid; grid-template-columns: repeat(1, 1fr);} .sub_tech .tech_about .technique_list li {display: flex; align-items: center; justify-content: space-between; flex-direction: row-reverse; border-top: 1px solid var(--border-color01); padding: 45px 40px;} .sub_tech .tech_about .technique_list li .sub_title {width: 70%; box-sizing: border-box; padding-left: 60px;} .sub_tech .tech_about .technique_list li .sub_title h5 {font-size: 160%;} .sub_tech .tech_about .technique_list li .sub_title h5 + p {font-size: 100%;} .sub_tech .tech_about .technique_list li .thumb_box {width: 30%;} .sub_tech .tech_about .technique_list li .thumb_box .thumb {min-height: 180px;} /* 수정 전 */ /* .sub_tech .tech_about .technique_list li {display: flex; flex-direction: column; justify-content: space-between; width: 100%; box-sizing: border-box; border: 1px solid var(--border-color01); border-radius: 20px;} .sub_tech .tech_about .technique_list .sub_title {width: 100%; box-sizing: border-box; padding: 38px 40px 40px;} .sub_tech .tech_about .technique_list .thumb_box {width: calc(100% + 2px); transform: translate(-1px,1px);} */ .sub_tech .tech_detail {width: 100%; background: var(--gray-bg01); margin-top: 130px; padding: 130px 0;} .sub_tech .tech_detail .pumping_info {display: flex; align-items: flex-end; justify-content: space-between; margin-top: 17px;} .sub_tech .tech_detail .pumping_info .txt_box {width: calc(100% - 440px - 50px); font-size: var(--title-20); letter-spacing: -0.03em;} .sub_tech .tech_detail .pumping_info .txt_box dt {margin-bottom: 15px; font-size: 90%; color: var(--black-color03); font-weight: 600; line-height: 1.6;} .sub_tech .tech_detail .pumping_info .txt_box dd {position: relative; background: var(--point-white); box-sizing: border-box; padding: 12px 30px 12px 122px; border-radius: 23px; font-size: 80%; color: var(--black-color06);} .sub_tech .tech_detail .pumping_info .txt_box dd + dd {margin-top: 10px;} .sub_tech .tech_detail .pumping_info .txt_box dd strong {position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; width: 102px; height: 100%; background: var(--point-color01); box-sizing: border-box; padding: 12px 14px; border-radius: 23px; color: var(--point-white); font-weight: 400; text-align: center;} .sub_tech .tech_detail .pumping_info .thumb_box {width: 440px;} .sub_tech .tech_detail .pumping_info .thumb_box img {mix-blend-mode: darken;} .sub_tech .tech_detail .table_box {margin: 40px 0;} .sub_tech .tech_detail .table_box .ex_table dl {grid-template-columns: repeat(8, 1fr);} .sub_tech .tech_detail .table_box .ex_table .ex_tbody dt {background: var(--red-bg01); color: var(--black-color03);} @media only screen and (max-width:1520px) { .sub_tech .tech_about .technique_list li {padding: 3vw 2.6vw;} .sub_tech .tech_about .technique_list li .sub_title {padding-left: 4vw;} } @media only screen and (max-width:1460px) { .sub_tech .tech_detail .pumping_info .txt_box {width: calc(100% - 30vw - 3.6vw);} .sub_tech .tech_detail .pumping_info .thumb_box {width: 30vw;} } @media only screen and (max-width:1280px) { .sub_tech .tech_about .sub_title.hd p br {display: none;} .sub_tech .tech_about .technique_list li {padding: 38px 2.6vw;} /* .sub_tech .tech_about .technique_list .sub_title {padding: 34px 36px 36px;} .sub_tech .tech_about .technique_list li .sub_title h5 + p br {display: none;} */ .sub_tech .tech_detail .pumping_info .txt_box {width: calc(100% - 26.5vw - 2.6vw);} .sub_tech .tech_detail .pumping_info .thumb_box {width: 26.5vw;} .sub_tech .tech_detail .table_box {margin: 35px 0;} .sub_tech .tech_detail .table_box .ex_table dt, .sub_tech .tech_detail .table_box .ex_table dd {padding: 12px 6px 11px; font-size: 85%;} } @media only screen and (max-width:1180px) { .sub_tech .tech_detail .pumping_info {flex-direction: column; align-items: flex-start;} .sub_tech .tech_detail .pumping_info .txt_box {width: 100%;} .sub_tech .tech_detail .pumping_info .thumb_box {width: 400px; margin-top: 15px;} .sub_tech .tech_detail .table_box .ex_table dt, .sub_tech .tech_detail .table_box .ex_table dd {font-size: 78%;} } @media only screen and (max-width:1023px) { /* .sub_tech .tech_about .technique_list .sub_title {padding: 32px;} */ .sub_tech .tech_about .technique_list .sub_title h5 + p {margin-top: 10px;} .sub_tech .tech_about .technique_list li {padding: 35px 25px;} .sub_tech .tech_about .technique_list li .sub_title {padding-left: 30px;} .sub_tech .tech_detail {padding: 105px 0 130px;} .sub_tech .tech_detail .pumping_info {flex-direction: row; align-items: flex-end;} .sub_tech .tech_detail .pumping_info .txt_box {width: calc(100% - 38vw - 2.6vw);} .sub_tech .tech_detail .pumping_info .thumb_box {width: 38vw; margin-top: 0;} .sub_tech .tech_detail .table_box {margin: 30px 0;} .sub_tech .tech_detail .table_box .table_wrap {width: calc(100% + 30px); margin-left: -15px; overflow-x: auto;} .sub_tech .tech_detail .table_box .ex_table {box-sizing: border-box; width: 1023px; padding: 0 15px;} } @media only screen and (max-width:860px) { /* .sub_tech .tech_about .technique_list .sub_title {padding: 30px 28px 28px;} */ .sub_tech .tech_about .technique_list .sub_title h5 + p {margin-top: 8px;} .sub_tech .tech_about .technique_list li {flex-direction: column-reverse; padding: 45px 30px 100px;} .sub_tech .tech_about .technique_list li:last-child {padding-bottom: 0;} .sub_tech .tech_about .technique_list li .sub_title {width: 100%; padding-top: 24px; padding-left: 0;} .sub_tech .tech_about .technique_list li .thumb_box {width: 100%;} .sub_tech .tech_about .technique_list li .thumb_box .thumb {width: 100%; max-height: 320px;} .sub_tech .tech_detail {margin-top: 100px; padding: 95px 0 100px;} .sub_tech .tech_detail .pumping_info {flex-direction: column; align-items: flex-start;} .sub_tech .tech_detail .pumping_info .txt_box {width: 100%;} .sub_tech .tech_detail .pumping_info .thumb_box {width: 100%; max-width: 340px; margin-top: 15px;} .sub_tech .tech_detail .table_box {margin: 25px 0;} } @media only screen and (max-width:640px) { /* .sub_tech .tech_about .technique_list {grid-template-columns: repeat(1, 1fr);} .sub_tech .tech_about .technique_list li {border-radius: 10px;} */ .sub_tech .tech_about .technique_list li {padding: 45px 20px 80px;} .sub_tech .tech_detail .pumping_info .txt_box dd {padding: 10px 20px 10px 110px;} .sub_tech .tech_detail .pumping_info .txt_box dd strong {width: 94px; padding: 10px 12px;} .sub_tech .tech_detail .table_box {margin: 20px 0;} } @media only screen and (max-width:479px) { /* .sub_tech .tech_about .technique_list .sub_title {padding: 26px 22px 22px;} */ .sub_tech .tech_about .technique_list li {padding: 30px 15px 60px;} .sub_tech .tech_detail {margin-top: 70px; padding: 65px 0 70px;} .sub_tech .tech_detail .pumping_info .thumb_box {flex-direction: row;} } @media only screen and (max-width:320px) { .sub_tech .tech_detail .table_box .table_wrap {width: calc(100% + 20px); margin-left: -10px;} .sub_tech .tech_detail .table_box .ex_table {padding: 0 10px;} } /*** technique/infra (Infra) ***/ .technique_infra #contents_wrap {width: 100%; max-width: 100%; padding: 0;} .sub_infra .infra_about {} .sub_infra .infra_about .sub_title.hd {margin-bottom: 58px;} .sub_infra .infra_about .infra_list {display: grid; grid-template-columns: repeat(3, 1fr);} .sub_infra .infra_about .infra_list dl {font-size: var(--title-20);} .sub_infra .infra_about .infra_list dt {position: relative; display: flex; justify-content: center; align-items: center; width: 200px; height: 60px; background: var(--point-color01); margin: 0 auto; box-sizing: border-box; padding-top: 2px; border-radius: 30px; font-size: 130%; color: var(--point-white); font-weight: 600; letter-spacing: -0.03em; z-index: 1;} .sub_infra .infra_about .infra_list dd {position: relative; width: 100%; height: calc(100% - 30px); margin-top: -30px; box-sizing: border-box; padding: 52px 30px 112px; border-radius: 20px; border: 1px solid var(--border-color01);} .sub_infra .infra_about .infra_list .thumb_box {justify-content: center;} .sub_infra .infra_about .infra_list .thumb_box .caption_box, .sub_infra .infra_about .infra_list .thumb_box .thumb {border-radius: inherit;} .sub_infra .infra_about .infra_list .thumb_box .thumb {box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);} .sub_infra .infra_about .infra_list .thumb_box p {padding-top: 0;} .sub_infra .infra_about .infra_list .dot_list {margin-top: 30px; margin-bottom: 0;} .sub_infra .infra_about .infra_list dd strong {position: absolute; left: -1px; bottom: -1px; width: calc(100% + 2px); background: var(--black-color01); box-sizing: border-box; padding: 26px 15px; border-radius: 0 0 20px 20px; font-size: 110%; font-weight: 400; color: var(--point-white); text-align: center;} .sub_infra .infra_detail {width: 100%; background: var(--gray-bg01); margin-top: 130px; padding: 130px 0;} .sub_infra .infra_detail .thumb_box .thumb {border-radius: 10px;} @media only screen and (max-width:1280px) { .sub_infra .infra_about .sub_title.hd {margin-bottom: 48px;} } @media only screen and (max-width:1180px) { .sub_infra .infra_about .infra_list.gap40 {gap: 30px;} .sub_infra .infra_about .infra_list dd {padding: 50px 26px 120px;} .sub_infra .infra_about .infra_list .dot_list {margin-top: 24px;} .sub_infra .infra_about .infra_list dd strong {padding: 22px 15px;} } @media only screen and (max-width:1023px) { .sub_infra .infra_about .sub_title.hd {margin-bottom: 38px;} .sub_infra .infra_about .infra_list.gap40 {gap: 35px; grid-template-columns: repeat(1, 1fr);} .sub_infra .infra_about .infra_list dd {display: flex; align-items: center; padding: 60px 26px 120px;} .sub_infra .infra_about .infra_list .thumb_box {width: 38%;} .sub_infra .infra_about .infra_list .thumb_box p {padding-bottom: 16px;} .sub_infra .infra_about .infra_list .dot_list {width: calc(100% - 38%); margin-top: 0; box-sizing: border-box; padding-left: 26px;} .sub_infra .infra_detail {padding: 105px 0 130px;} } @media only screen and (max-width:860px) { .sub_infra .infra_about .infra_list dt {width: 180px; height: 56px;} .sub_infra .infra_about .infra_list dd {margin-top: -28px; padding: 45px 24px 105px;} .sub_infra .infra_detail {margin-top: 100px; padding: 95px 0 100px;} } @media only screen and (max-width:640px) { .sub_infra .infra_about .sub_title.hd {margin-bottom: 33px;} .sub_infra .infra_about .infra_list.gap40 {gap: 30px;} .sub_infra .infra_about .infra_list dt {height: 52px;} .sub_infra .infra_about .infra_list dd {display: block; margin-top: -26px; border-radius: 10px;} .sub_infra .infra_about .infra_list .thumb_box {width: 100%;} .sub_infra .infra_about .infra_list .dot_list {width: 100%; padding-left: 0; margin-top: 24px;} .sub_infra .infra_about .infra_list dd strong {padding: 18px 15px;} .sub_infra .infra_detail .thumb_box .thumb {border-radius: 5px;} } @media only screen and (max-width:479px) { .sub_infra .infra_about .sub_title.hd {margin-bottom: 28px;} .sub_infra .infra_about .infra_list.gap40 {gap: 25px;} .sub_infra .infra_about .infra_list dt {width: 160px; height: 48px;} .sub_infra .infra_about .infra_list dd {margin-top: -24px; padding: 45px 20px 110px;} .sub_infra .infra_about .infra_list .dot_list {margin-top: 20px;} .sub_infra .infra_about .infra_list dd strong {padding: 16px 15px;} .sub_infra .infra_detail {margin-top: 70px; padding: 65px 0 70px;} } /*** technique/certification (Patent · Certification) ***/ .sub_certifi {} .sub_certifi .certifi_sec {} .sub_certifi .certifi_sec + .certifi_sec {margin-top: 124px;} .sub_certifi .certifi_sec .sub_title.hd {margin-bottom: 30px;} .sub_certifi .certifi_con {} .sub_certifi .certifi_con + .certifi_con {margin-top: 70px;} .sub_certifi .certifi_con .sub_title.dot {margin-bottom: 24px;} .sub_certifi .certifi_list {display: grid; grid-template-columns: repeat(4, 1fr);} .sub_certifi .certifi_list li {} .sub_certifi .certifi_list li .thumb_box .thumb {width: 100%; box-sizing: border-box; border: 1px solid var(--border-color01); border-radius: 10px;} .sub_certifi .certifi_list li .txt_box {display: flex; flex-direction: column-reverse; align-items: center; box-sizing: border-box; padding-top: 32px; font-size: var(--title-20); text-align: center;} .sub_certifi .certifi_list li .txt_box dt {margin-top: 15px; font-size: 90%; font-weight: 500; color: var(--black-color03); letter-spacing: -0.03em; line-height: 1.2;} .sub_certifi .certifi_list li .txt_box dd {font-size: 80%; color: var(--black-color06); letter-spacing: -0.03em;} /* patent */ .sub_certifi .patent .sub_title.hd {margin-bottom: 24px;} .sub_certifi .patent .certifi_list li .txt_box {flex-direction: column;} .sub_certifi .patent .certifi_list li .txt_box dt {margin-top: 0; margin-bottom: 13px;} @media only screen and (max-width:1280px) { .sub_certifi .certifi_list li .txt_box {padding-top: 28px;} } @media only screen and (max-width:1023px) { .sub_certifi .certifi_list li .txt_box {padding-top: 24px;} } @media only screen and (max-width:860px) { .sub_certifi .certifi_sec + .certifi_sec {margin-top: 94px;} .sub_certifi .certifi_con + .certifi_con {margin-top: 60px;} .sub_certifi .certifi_list {grid-template-columns: repeat(3, 1fr);} } @media only screen and (max-width:767px) { .sub_certifi .certifi_list li .txt_box {padding-top: 20px;} .sub_certifi .certifi_list li .txt_box dt {margin-top: 12px;} /* patent */ .sub_certifi .patent .certifi_list li .txt_box dt {margin-top: 0; margin-bottom: 10px;} } @media only screen and (max-width:640px) { .sub_certifi .certifi_sec .sub_title.hd {margin-bottom: 24px;} .sub_certifi .certifi_con .sub_title.dot {margin-bottom: 20px} .sub_certifi .certifi_list {grid-template-columns: repeat(2, 1fr);} .sub_certifi .certifi_list li .txt_box {padding-top: 18px;} /* patent */ .sub_certifi .patent .sub_title.hd {margin-bottom: 20px;} } @media only screen and (max-width:479px) { .sub_certifi .certifi_sec + .certifi_sec {margin-top: 64px;} .sub_certifi .certifi_con + .certifi_con {margin-top: 50px;} } /*─────────────────────────────────────────────────────────── TALENT ───────────────────────────────────────────────────────────*/ .sub_talent .talent_ideal{text-align: center;} .sub_talent .talent_ideal .traits{width:350px;height:0;padding-bottom:350px;box-sizing:border-box;border-radius:100%;background:#FCE9EA;position: relative;margin:0 auto;} .sub_talent .talent_ideal .traits div{width:calc(100% - 54px);height:calc(100% - 54px);box-sizing:border-box;border-radius:100%;position: absolute;top:50%;left:50%;transform:translate(-50%, -50%);display: flex;align-items: center;justify-content: center;text-align: center;font-size:var(--title-30);color: var(--point-white);font-weight:600;background: linear-gradient(296deg, #750E13 16.58%, #DA1E28 83.42%);;} .sub_talent .talent_ideal .traits p{font-size:104%;color:inherit;font-weight:inherit;} .sub_talent .talent_ideal .arw{margin-top:-189px;} .sub_talent .talent_ideal .title{font-size:var(--title-40);color:var(--black-color03);font-weight:500;margin-top:2px;letter-spacing:-0.03em;line-height:1.5;} .sub_talent .talent_ideal .title strong{font-size:inherit;color:inherit;font-weight:700;} .sub_talent .talent_ideal .list{margin-top:59px;} .sub_talent .talent_ideal .list li{display: flex;align-items: center;box-sizing:border-box;box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.10);background:var(--point-white);border-radius:130px;padding:30px 30px;} .sub_talent .talent_ideal .list li + li{margin-top:30px;} .sub_talent .talent_ideal .list .icon_box{width:180px;height:0;padding-bottom:180px;box-sizing:border-box;border-radius:100%;background: #f5f5f5;position: relative;} .sub_talent .talent_ideal .list .icon_box > div{width:100%;height:100%;display: flex;flex-direction: column;align-items: center;justify-content: center;position: absolute;top:0;left:0;} .sub_talent .talent_ideal .list .icon_box .icon{height:60px;} .sub_talent .talent_ideal .list .icon_box .icon img{max-height:100%;} .sub_talent .talent_ideal .list .icon_box p{font-size:var(--title-20);color:var(--black-color00);font-weight:600;margin-top:9px;} .sub_talent .talent_ideal .list .txt{width:calc(100% - 180px);box-sizing:border-box;padding-left:60px;font-size:var(--title-20);color:var(--black-color00);font-weight:600;text-align:left;} .sub_talent .talent_ideal .list .txt p{font-size:130%;color:inherit;font-weight:inherit;letter-spacing:-0.03em;} .sub_talent .sub_welfare{box-sizing:border-box;background: #f5f5f5;margin-top:130px;padding:130px 0;} .sub_talent .sub_welfare h4{font-size:var(--title-30);color:var(--black-color03);font-weight:600;} .sub_talent .sub_welfare h4 big{font-size:112%;color:inherit;font-weight:inherit;letter-spacing:-0.03em;} .sub_talent .sub_welfare ul{display: flex;flex-wrap:wrap;gap:31px;margin-top:33px;} .sub_talent .sub_welfare ul li{box-sizing:border-box;box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.10);border-radius:10px;text-align: center;background:var(--point-white);width:calc(100% / 3 - 21px);padding:50px 10px;} .sub_talent .sub_welfare ul li .icon{height:70px;} .sub_talent .sub_welfare ul li .icon img{max-height:100%;} .sub_talent .sub_welfare ul li dl{font-size:var(--title-20);color:var(--black-color06);font-weight:400;margin-top:30px;} .sub_talent .sub_welfare ul li dl dt{font-size:inherit;color:var(--black-color00);font-weight:500;line-height:1.5;letter-spacing:-0.03em;} .sub_talent .sub_welfare ul li dl dd{font-size:79%;color:inherit;font-weight:inherit;margin-top:11px;line-height:1.5;} @media only screen and (max-width:1300px) { .sub_talent .sub_welfare ul li dl dt br, .sub_talent .sub_welfare ul li dl dd br{display: none;} } @media only screen and (max-width:1024px) { .sub_talent .talent_ideal .traits{width:300px;padding-bottom:300px;} .sub_talent .talent_ideal .arw{margin-top:-140px;} .sub_talent .talent_ideal .list .txt{padding-left:30px;} .sub_talent .sub_welfare{margin-top:100px;padding:100px 0;} .sub_talent .sub_welfare ul{margin-top:20px;gap:21px;} .sub_talent .sub_welfare ul li{width:calc(100% / 3 - 14px);padding:40px 10px;} } @media only screen and (max-width:860px) { .sub_talent .talent_ideal .arw{margin-top:-90px;} .sub_talent .talent_ideal .title{margin-top:15px;} .sub_talent .talent_ideal .list .icon_box{width:160px;padding-bottom:160px;} .sub_talent .talent_ideal .list .txt{width:calc(100% - 160px);} } @media only screen and (max-width:640px) { .sub_talent .talent_ideal .traits{width:260px;padding-bottom:260px;} .sub_talent .talent_ideal .traits div{width:calc(100% - 30px);height:calc(100% - 30px);} .sub_talent .talent_ideal .list{margin-top:40px;} .sub_talent .talent_ideal .list li{padding:20px 20px;} .sub_talent .talent_ideal .list .icon_box .icon{height:50px;} .sub_talent .talent_ideal .list .txt{padding-left:20px;} .sub_talent .sub_welfare{margin-top:80px;padding:80px 0;} .sub_talent .sub_welfare ul li{width:calc(50% - 10.5px);} .sub_talent .sub_welfare ul li .icon{height:60px;} } @media only screen and (max-width:479px) { .sub_talent .talent_ideal .traits{width:230px;padding-bottom:230px;z-index:3;} .sub_talent .talent_ideal .arw{margin:0;width:120%;position: absolute;top:13%;left:50%;transform:translate(-50%);} .sub_talent .talent_ideal .list li{flex-direction: column;border-radius:20px;} .sub_talent .talent_ideal .list .txt{width:100%;padding:10px 0 0 0;text-align: center;} .sub_talent .sub_welfare{margin-top:70px;padding:70px 0;} .sub_talent .sub_welfare ul{gap:15px;} .sub_talent .sub_welfare ul li{border-radius:5px;width:calc(50% - 7.5px);} .sub_talent .sub_welfare ul li .icon{height:50px;} .sub_talent .sub_welfare ul li dl{margin-top:15px;} .sub_talent .sub_welfare ul li dl dd{margin-top:5px;} } /*─────────────────────────────────────────────────────────── RECRUIT ───────────────────────────────────────────────────────────*/ .recruit_process .process_box{box-sizing:border-box;padding:30px 30px;border-radius:140px;border:1px dashed var(--border-color01);} .recruit_process .process_box ol{display: flex;flex-wrap:wrap;justify-content: space-between;} .recruit_process .process_box ol li{box-sizing:border-box;border-radius:100%;width:220px;height:0;padding-bottom:220px;position: relative;background:rgba(218, 30, 40, 0.04);} .recruit_process .process_box ol li + li{margin-left:-124px;} .recruit_process .process_box ol li .txt{width:100%;height:100%;position: absolute;top:0;left:0;box-sizing:border-box;text-align: center;font-size:var(--title-20);color: var(--black-color03);font-weight:400;padding-top:47px;} .recruit_process .process_box ol li .txt span{font-size:120%;color:var(--point-color01);font-weight:600;} .recruit_process .process_box ol li .txt p{font-size:89%;color:inherit;font-weight:inherit;margin-top:8px;line-height:1.55;} .recruit_process .process_box ol li .circle_box{position: absolute;top:47.5%;left:-92px;transform:translateY(-50%);} .recruit_process .process_box ol li .circle_box .circle{position: relative; width: 9px; height: 9px; background: var(--point-color01); border-radius: 100%; margin:0 14px 0 29px;display: block;} .recruit_process .process_box ol li .circle_box .circle:before, .recruit_process .process_box ol li .circle_box .circle:after{position: absolute; content:''; width: 9px; height: 9px; background: var(--point-color01); border-radius: 100%; top:50%; left:7px; margin-top:-4.5px;} .recruit_process .process_box ol li .circle_box .circle:after{left:14px;} .recruit_process .process_box ol li .circle_box .circle, .recruit_process .process_box ol li .circle_box .circle:before, .recruit_process .process_box ol li .circle_box .circle:after{animation-name: iconAni; animation-duration:2s; animation-iteration-count:infinite; animation-direction:alternate; animation-fill-mode: forwards; transition-timing-function:linear;} .recruit_process .process_box ol li .circle_box .circle:before{animation-delay: 0.4s;} .recruit_process .process_box ol li .circle_box .circle:after{animation-delay: 0.8s;} @keyframes iconAni {0% {background:rgba(218, 30, 40, 1);}100% {background:rgba(218, 30, 40, 0);}} .recruit_process .process_box ol li:last-child{background:var(--point-color01);margin:0;} .recruit_process .process_box ol li:last-child .txt span, .recruit_process .process_box ol li:last-child .txt p{color:var(--point-white);} .recruit_process .process_des{margin-top:20px;} .recruit_process .process_des dl{display: flex;flex-wrap:wrap;box-sizing:border-box;font-size:var(--title-20);color: var(--black-color03);font-weight:500;border-bottom:1px solid #ddd;align-items: center;padding:42px 0;} .recruit_process .process_des dl dt{font-size:89%;color:inherit;font-weight:inherit;width:193px;letter-spacing:-0.03em;} .recruit_process .process_des dl dd{box-sizing:border-box;width:calc(100% - 193px);padding-left:60px;} .recruit_process .process_des dl dd ul{font-size:var(--title-20);color: var(--black-color06);font-weight:400;} .recruit_process .process_des dl dd ul li{font-size:89%;color:inherit;font-weight:inherit;box-sizing:border-box;position: relative;padding-left:12px;letter-spacing:-0.03em;} .recruit_process .process_des dl dd ul li:before{width:4px;height:4px;content:"";box-sizing:border-box;border-radius:100%;background:var(--black-color06);position: absolute;left:0;top:9px;} .recruit_process .process_des dl dd ul li + li{margin-top:12px;} @media only screen and (max-width:1500px) { .recruit_process .process_box ol li{width:17%;padding-bottom:17%;} .recruit_process .process_box ol li .txt{padding-top:20px;} .recruit_process .process_box ol li .circle_box{left:-88px;} } @media only screen and (max-width:1200px) { .recruit_process .process_box{padding:30px 20px;} .recruit_process .process_box ol li{width:calc(100% / 6 + 15px);padding-bottom:calc(100% / 6 + 15px);} .recruit_process .process_box ol li + li, .recruit_process .process_box ol li:last-child{margin-left:-20px;} .recruit_process .process_box ol li .circle_box{display: none;} } @media only screen and (max-width:1024px) { .recruit_process .process_box ol li .txt p{margin-top:0;} .recruit_process .process_des dl dt{width:180px;} .recruit_process .process_des dl dd{width:calc(100% - 180px);padding-left:30px;} } @media only screen and (max-width:860px) { .recruit_process .process_box ol{justify-content: center;} .recruit_process .process_box ol li{width:calc(100% / 3 + 15px);padding-bottom:calc(100% / 3 + 15px);} .recruit_process .process_box ol li + li, .recruit_process .process_box ol li:last-child{margin-left:-24px;} .recruit_process .process_box ol li:nth-child(4){margin-left:0;} .recruit_process .process_box ol li:nth-child(n+4){margin-top:-24px;} .recruit_process .process_box ol li .txt{padding:0;display: flex;flex-direction: column;align-items: center;justify-content: center;} } @media only screen and (max-width:640px) { .recruit_process .process_box{border-radius:20px;} .recruit_process .process_des dl{padding:34px 0;} .recruit_process .process_des dl dt{width:160px;} .recruit_process .process_des dl dd{width:calc(100% - 160px);padding-left:20px;} } @media only screen and (max-width:479px) { .recruit_process .process_box{padding:20px 20px;} .recruit_process .process_box ol li{width:calc(100% / 2 + 12px);padding-bottom:calc(100% / 2 + 12px);} .recruit_process .process_box ol li:nth-child(4){margin-left:-24px;} .recruit_process .process_box ol li:nth-child(n+3){margin-top:-24px;} .recruit_process .process_box ol li:nth-of-type(2n+1){margin-left:0;} .recruit_process .process_des dl{padding:25px 0;} .recruit_process .process_des dl dt{width:100%;} .recruit_process .process_des dl dd{width:100%;padding:10px 0 0 0;} .recruit_process .process_des dl dd ul li:before{width:3px;height:3px;top:8px;} .recruit_process .process_des dl dd ul li{padding-left:8px;} .recruit_process .process_des dl dd ul li + li{margin-top:8px;} } @media only screen and (max-width:350px) { .recruit_process .process_box{padding:20px 15px;} .recruit_process .process_box ol li{width:calc(100% / 2 + 7.5px);padding-bottom:calc(100% / 2 + 7.5px);} .recruit_process .process_box ol li + li, .recruit_process .process_box ol li:last-child{margin-left:-15px;} .recruit_process .process_box ol li:nth-child(4){margin-left:-15px;} .recruit_process .process_box ol li:nth-child(n+3){margin-top:-15px;} } /*board*/ .sub_recruit .sub_board{background: #f5f5f5;box-sizing:border-box;margin-top:134px;padding:130px 0 200px;} .board_list_top{display: flex;flex-wrap:wrap;align-items: center;justify-content: space-between;font-size:var(--title-20);color: var(--black-color03);font-weight:500;} .sub_notice .board_list_top{align-items:flex-end;} .board_list_top .bbs_num{font-size:89%;color:inherit;font-weight:inherit;} .board_list_top .bbs_num strong{font-size:89%;color:var(--point-color01);font-weight:inherit;} .board_list_top .board_search fieldset{display: flex;align-items: center;gap:10px;flex-wrap:wrap;} .board_list_top .board_search .board_search_sel{width:160px;} .board_list_top .board_search .board_search_sel select{width:100%;} .board_list_top .board_search .search_input{width:340px;height:60px;display: flex;align-items: center;flex-wrap:wrap;background:var(--point-white);box-sizing:border-box;border-radius:5px;position: relative;border:1px solid var(--border-color01);overflow:hidden;} .board_list_top .board_search .search_input .input_text{width:calc(100% - 60px);height:100%;border:none;} .board_list_top .board_search .search_input .btn_search{width:60px;height:60px;background:url('../images/sub/icon_search.svg')no-repeat center;border:none;outline:none;font-size:0;} .recruit_list{margin-top:40px;} .recruit_list > li{display: flex;flex-wrap:wrap;box-sizing:border-box;position: relative;align-items: center;border-radius:10px;border:1px solid var(--border-color01);background:var(--point-white);padding:20px 30px;font-size:var(--title-20);color: var(--black-color06);font-weight:400;transition:all 0.3s;} .recruit_list > li:before{width:calc(100% - 2px);height:calc(100% - 2px);content:"";border:2px solid var(--point-color01);position: absolute;top:-1px;left:-1px;z-index:1;opacity:0;transition:all 0.3s;border-radius:10px;} .recruit_list > li + li{margin-top:20px;} .recruit_list > li > a{display: block;width:100%;height:100%;position: absolute;top:0;left:0;z-index:3;} .recruit_list > li .tit{font-size:var(--title-20);color: var(--black-color00);font-weight:600;width:calc(65% - 120px);} .recruit_list > li .tit strong{font-size:89%;color:inherit;font-weight:inherit;display: block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box;padding-right:10px;} .recruit_list > li .exp, .recruit_list > li .date{font-size:89%;color:inherit;font-weight:inherit;text-align: center;box-sizing:border-box;padding:0 10px;} .recruit_list > li .exp{width:13%;word-break:break-all;} .recruit_list > li .date{width:22%;} .recruit_list > li .hire{display: inline-flex;align-items: center;justify-content: center;width:120px;height:50px;box-sizing:border-box;border-radius:5px;background:var(--point-color01);font-size:var(--title-20);color: var(--point-white);font-weight:600;} .recruit_list > li .hire span{font-size:79%;color:inherit;font-weight:inherit;} .recruit_list > li .hire.end{background:var(--black-color03);} @media only screen and (min-width:1024px) { .recruit_list > li:hover{border-color:transparent;} .recruit_list > li:hover:before{opacity:1;} } @media only screen and (max-width:1024px) { .sub_recruit .sub_board{margin-top:100px;padding:100px 0 150px;} .recruit_list > li .tit{width:calc(65% - 100px);} .recruit_list > li .hire{width:100px;} } @media only screen and (max-width:860px) { .sub_recruit .sub_board{margin-top:80px;padding:80px 0 120px;} } @media only screen and (max-width:640px) { .board_list_top{flex-direction: column-reverse;align-items: flex-start;} .sub_notice .board_list_top{align-items: flex-start;} .board_search{width:100%;margin-bottom:15px;} .board_list_top .board_search .board_search_sel{width:120px;} .board_list_top .board_search .search_input{width:calc(100% - 130px);height:50px;} .board_list_top .board_search .search_input .input_text{width:calc(100% - 50px);} .board_list_top .board_search .search_input .btn_search{width:50px;height:50px;} .recruit_list{margin-top:30px;} .recruit_list > li{padding:20px 20px;flex-direction: column;align-items: flex-start;} .recruit_list > li .tit, .recruit_list > li .exp, .recruit_list > li .date{width:100%;text-align:left;} .recruit_list > li .tit{margin-bottom:10px;} .recruit_list > li .exp, .recruit_list > li .date{padding:0;} .recruit_list > li .exp{padding:4px 0;} .recruit_list > li .hire{width:100%;height:42px;margin-top:20px;} } @media only screen and (max-width:479px) { .sub_recruit .sub_board{margin-top:60px;padding:60px 0 80px;} .board_search{margin-bottom:10px;} .board_list_top .board_search .search_input{height:42px;} .board_list_top .board_search .search_input .input_text{width:calc(100% - 42px);} .board_list_top .board_search .search_input .btn_search{width:42px;height:42px;background-size:auto 16px;} .recruit_list{margin-top:20px;} .recruit_list > li{border-radius:15px;} } /*─────────────────────────────────────────────────────────── BOARD list ───────────────────────────────────────────────────────────*/ .bbs_list{box-sizing:border-box;border-top:1px solid var(--black-color03);margin-top:40px;} .bbs_list li{box-sizing:border-box;display: flex;flex-wrap:wrap;position: relative;border-bottom:1px solid #ddd;padding:40px 0;align-items: flex-start;} .bbs_list li > a{position: absolute;top:0;left:0;display: block;width:100%;height:100%;} .bbs_list li .date{font-size:var(--title-20);color:var(--black-color09);font-weight:400;width:94px;display: block;margin-top:8px;} .bbs_list li .date small{font-size:89%;color:inherit;font-weight:inherit;} .bbs_list li .cont{font-size:var(--title-20);color:var(--black-color06);font-weight:400;width:calc(100% - 94px);box-sizing:border-box;padding-left:120px;} .bbs_list li .cont .noti{font-size:89%;color:var(--point-white);font-weight:inherit;display: inline-flex;box-sizing:border-box;align-items: center;justify-content: center;padding:0 20px;height:30px;border-radius:15px;background:var(--point-color01);margin-bottom:10px;} .bbs_list li .cont .tit{font-size:var(--title-30);color:var(--black-color03);font-weight:500;display: block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .bbs_list li .cont .des{font-size:inherit;color:inherit;font-weight:inherit;line-height:1.5;margin-top:15px;white-space:normal;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;word-wrap:break-word;text-overflow: ellipsis;overflow: hidden;} @media only screen and (max-width:1024px) { .bbs_list li .date{margin-top:6px;} .bbs_list li .cont{padding-left:40px;} } @media only screen and (max-width:640px) { .bbs_list{margin-top:30px;} .bbs_list li{padding:30px 0;} .bbs_list li .date{width:100%;margin-top:0;} .bbs_list li .cont{width:100%;padding:20px 0 0 0;} .bbs_list li .cont .des{margin-top:10px;} } @media only screen and (max-width:479px) { .bbs_list li .cont{padding-top:10px;} .bbs_list li .cont .noti{height:25px;padding:0 15px;} } /*─────────────────────────────────────────────────────────── BOARD view ───────────────────────────────────────────────────────────*/ .sub_recruit .board_view_wrap{background:none;padding:0;margin:3px 0 0 0;} .bbs_view .view_tit{box-sizing:border-box;border-top:1px solid #2E2E2F;border-bottom:1px solid #ddd;display: flex;flex-direction: column;align-items: center;font-size:var(--title-30);color:#2E2E2F;font-weight:500;padding:42px 0 39px;text-align: center;} .bbs_view .view_tit h3{font-size:102%;color:inherit;font-weight:inherit;} .bbs_view .view_tit p{display: flex;align-items: center;font-size:var(--title-20);color:rgba(46, 46, 47, 0.5);font-weight:400;margin-top:31px;} .bbs_view .view_tit p span{font-size:87%;color:inherit;font-weight:inherit;display: inline-block;} .bbs_view .view_tit p span + span:before{width:1px;height:12px;content:"";background: #ddd;display: inline-block;margin:0 16px;} .bbs_view .view_tit p span em{display: inline-block;margin-right:10px;font-size:inherit;color:rgba(46, 46, 47, 0.7);font-weight:500;} .bbs_view .view_cont{box-sizing:border-box;min-height:300px;padding:30px 30px;border-bottom:1px solid #ddd;} .no_line .bbs_view .view_cont{border-bottom:none;} .bbs_view .extra_editor_wrap{box-sizing:border-box;border-radius:10px;background: #f5f5f5;display: flex;align-items: center;flex-wrap:wrap;padding:26px 50px;font-size:var(--title-20);color:#2E2E2F;font-weight:500;} .bbs_view .extra_editor_wrap h4{font-size:87%;color:inherit;font-weight:inherit;width:28px;} .bbs_view .extra_editor_wrap .extra_cont{position: relative;box-sizing:border-box;padding-left:60px;width:calc(100% - 28px);} .bbs_view .extra_editor_wrap .extra_cont:before{width:1px;height:12px;content:"";background: #ddd;position: absolute;top:50%;left:30px;transform:translateY(-50%);} .bbs_view .extra_editor_wrap .extra_cont a{font-size:87%;color:rgba(46, 46, 47, 0.5) !important;font-weight:400;} @media only screen and (max-width:860px) { .bbs_view .view_cont{padding:20px 20px;min-height:200px;} .bbs_view .extra_editor_wrap{padding:20px 30px;} } @media only screen and (max-width:479px) { .bbs_view .view_tit{padding:25px 0;} .bbs_view .view_tit p{margin-top:15px;} .bbs_view .view_tit p span em{margin-right:5px;} .bbs_view .view_tit p span + span:before{height:10px;margin:0 10px;} .bbs_view .extra_editor_wrap{border-radius:5px;padding:20px 20px;} .bbs_view .extra_editor_wrap .extra_cont{padding-left:30px;} .bbs_view .extra_editor_wrap .extra_cont:before{left:15px;height:10px;} } /*─────────────────────────────────────────────────────────── BOARD write ───────────────────────────────────────────────────────────*/ .sub_board .company_info{box-sizing:border-box;display: flex;flex-wrap:wrap;border-radius:20px;border:1px solid #ddd;padding:50px 60px;margin-top:3px;margin-bottom:100px;} .sub_board .company_info > div{box-sizing:border-box;width:50%;padding-right:10px;} .sub_board .company_info > div + div{border-left:1px solid #ddd;padding-left:60px;} .sub_board .company_info .tit{display: flex;align-items: center;font-size:var(--title-20);color:var(--black-color00);font-weight:500;} .sub_board .company_info .tit h4{font-size:108%;color:inherit;font-weight:inherit;margin-left:16px;} .sub_board .company_info .info{margin-top:28px;} .sub_board .company_info .info dl{display: flex;flex-wrap:wrap;font-size:var(--title-20);color:var(--black-color03);font-weight:500;line-height:1.55;letter-spacing:-0.03em;} .sub_board .company_info .info dl + dl{margin-top:20px;} .sub_board .company_info .info dl dt{font-size:89%;color:inherit;font-weight:inherit;width:113px;} .sub_board .company_info .info dl dd{font-size:89%;color:var(--black-color06);font-weight:400;width:calc(100% - 113px);box-sizing:border-box;padding-left:30px;word-break:break-all;} #wrap .bbs_write{display: block; width: 100%; box-sizing: border-box;} #wrap .bbs_write.bbs_title{border-top: 1px solid var(--black-color01); padding-top: 20px;} #wrap .bbs_write.bbs_bottom{border-bottom: 1px solid var(--border-color01); padding-bottom: 20px;} #wrap .bbs_write :where(thead, tbody, tr, th, td){display: block;} #wrap .bbs_write tbody{display: flex; flex-wrap: wrap; gap:0 20px;} #wrap .bbs_write tbody tr{display: flex; flex-wrap:wrap; gap:10px 0; width: calc(100% / 2 - 10px); padding:10px 0;font-size: var(--title-20);} #wrap .bbs_write tbody tr.subj_tr{width:100%;} #wrap .bbs_write tbody tr:has(.edit-box, #captcha){width: 100%;} #wrap .bbs_write tbody :where(th, td){font-size: 100%; font-weight: 500; color: var(--black-color03); border:0; box-sizing: border-box;} #wrap .bbs_write tbody th{width: 170px; background: none; padding:0 20px;text-align:left;} #wrap .bbs_write tbody tr:has(input) th{line-height: 60px;} #wrap .bbs_write tbody td{width: calc(100% - 170px); padding:0 20px 0 0; } #wrap .bbs_write :where(input[type="text"], input[type="password"], input[type="number"], select){width: 100%; min-width: auto;} #wrap .bbs_write tbody tr:has(#is_secret-y) .edit-box{margin-top: 10px;} #wrap .bbs_write tbody td:has(.captcha_wrap){display: flex; flex-wrap: wrap; gap: 10px;} #wrap .bbs_write tbody td textarea{width:100%;height:250px;box-sizing:border-box;border-radius:5px;border:1px solid #ddd;color:var(--black-color03);font-size:18px;padding:20px 20px;resize:none;} #wrap .bbs_write tbody td textarea:focus{border-color:var(--black-color03);} #wrap .bbs_write .captcha_wrap{border:1px solid var(--border-color01); padding:9px; box-sizing: border-box; display: flex; gap: 9px;border-radius:5px;} #wrap .bbs_write #captcha_box{margin:0;} #wrap .bbs_write #refreshCode{display: inline-flex; background: url('../images/sub/icon_reset.svg') no-repeat center; font-size: 0; cursor: pointer; min-width: 40px; width: 40px; height: 40px; border:1px solid var(--border-color01); box-sizing: border-box;border-radius:5px;} #wrap .bbs_write input#captcha{max-width:230px; margin:0;} #wrap .policy_wrap{box-sizing: border-box; margin-top: 40px;font-size:var(--title-20);color:var(--black-color03);font-weight:500;} #wrap .policy_wrap label{font-size:89%;color:inherit;font-weight:inherit;} #wrap .policy_wrap .area_box{margin-top: 20px;} #wrap .area_box{width: 100%; padding:10px; border:1px solid #ddd; box-sizing: border-box;border-radius:10px;} #wrap .area_box textarea{width: 100%; padding:15px 20px; border:0; background: none; box-sizing: border-box; font-size:70%; font-weight: 400; color: var(--black-color07); line-height: 1.6; font-family: var(--font-type01);} #wrap .area_box textarea::-webkit-scrollbar { width: 4px;} #wrap .area_box textarea::-webkit-scrollbar-thumb {background: var(--black-color10); border-radius: 10px;} #wrap .area_box textarea::-webkit-scrollbar-track {border-radius: 10px;background:#ddd;} @media screen and (min-width:641px){ #wrap .bbs_write input#captcha{height: auto;} } @media screen and (max-width:1024px){ .sub_board .company_info{padding:40px 30px;} .sub_board .company_info > div + div{padding-left:30px;} .sub_board .company_info .info dl dt{width:104px;} .sub_board .company_info .info dl dd{width:calc(100% - 104px);padding-left:20px;} #wrap .bbs_write tbody{gap: 0 15px;} #wrap .bbs_write tbody tr{width: calc(100% / 2 - 7.5px);} #wrap .bbs_write tbody tr:has(input) th{line-height: 55px;} #wrap .bbs_write tbody th{width: 150px;} #wrap .bbs_write tbody td{width: calc(100% - 150px);} #wrap .bbs_write .captcha_wrap{padding:6px; gap: 6px;} } @media screen and (max-width:860px){ .sub_board .company_info{padding:30px 20px;} .sub_board .company_info > div{width:100%;padding-right:0;} .sub_board .company_info > div + div{border:none;border-top:1px solid #ddd;padding:30px 0 0 0;margin-top:30px;} #wrap .bbs_write tbody{gap: 0;} #wrap .bbs_write tbody th{width: 130px;} #wrap .bbs_write tbody td{width: calc(100% - 130px);} #wrap .policy_wrap{margin-top: 35px;} #wrap .policy_wrap .area_box{margin-top: 15px;} } @media screen and (max-width:767px){ #wrap .bbs_write input#captcha{width: calc(100% - 250px);} } @media screen and (max-width:640px){ #wrap .bbs_write.bbs_title{padding-top: 15px;} #wrap .bbs_write.bbs_bottom{padding-bottom: 15px;} #wrap .bbs_write tbody tr{width: 100%;} #wrap .bbs_write tbody th{width: 120px; padding:0 15px;} #wrap .bbs_write tbody tr:has(input) th{line-height: 50px;} #wrap .bbs_write tbody td{width: calc(100% - 120px); padding-right: 15px;} #wrap .bbs_write input#captcha{width:100%; max-width: 100%;} #wrap .policy_wrap{margin-top: 30px;} #wrap .policy_wrap .area_box{margin-top: 10px;} } @media screen and (max-width:479px){ .sub_board .company_info{border-radius:10px;margin-bottom:50px;} .sub_board .company_info .info{margin-top:20px;} .sub_board .company_info .info dl dt{width:100%;} .sub_board .company_info .info dl dd{width:100%;padding:5px 0 0 0;} #wrap .bbs_write tbody tr{padding:7.5px 0;} #wrap .bbs_write tbody tr:has(input) th{line-height: 45px;} #wrap .bbs_write tbody th{width: 115px;} #wrap .bbs_write tbody td{width: calc(100% - 115px);} #wrap .policy_wrap .area_box{border-radius:5px;} #wrap .area_box textarea{padding:10px 10px;} } @media screen and (max-width:360px){ #wrap .bbs_write tbody th{width: 100%; padding:0;} #wrap .bbs_write tbody tr:has(input) th{line-height: 1.4;} #wrap .bbs_write tbody td{width: 100%; padding:0;} }