@charset "utf-8";

.mobClose i { color: #000; }
html.hiddenMode, body.hiddenMode { overflow: hidden; }
.inner { max-width: 1600px; margin: 0 auto; padding: 0 5%; }
header .inner { padding: 0; }
.mainBg { background: #ef802c; }
.mainColor { color: #ef802c; }
.basicBtn { color: #fff; background: #ef802c; font-size: 20px; width: auto; line-height: 1; display: inline-flex; align-items: center; justify-content: center; border-radius: 40px; padding: 20px 50px; }
.ellipsis { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.5em; max-height: 3em; overflow: hidden; }
header { position: fixed; left: 0; top: 0; width: 100%; padding: 20px 0; z-index: 999999; }
header > .inner { display: flex; align-items: center; gap: 80px; }
header .gnbBox { display: flex; align-items: center; justify-content: space-between; flex: 1 1; }
header .logo_b { display: none; }
nav { display: flex; align-items: center; gap: 80px; }
nav .gnb { display: flex; align-items: center; gap: 30px; }
nav .gnb li { position: relative; }
nav .gnb > li > a { display: block; font-size: 18px; font-weight: 500; color: #fff; }
nav .gnb > li.on > a { color: #ef802c !important; }
nav .gnb { position: relative; }
nav .gnb > li { position: relative; }
nav .gnb .subMenu { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); padding-top: 40px; display: none; z-index: 9999; }
nav .gnb > li:hover .subMenu { display: block; }
nav .gnb > li:focus-within .subMenu { display: block; }
nav .gnb .subMenu ul { width: 170px; background: #ef802c; color: #fff; border-radius: 10px; padding: 20px 0; }
nav .gnb .subMenu ul li a { display: block; text-align: center; color: #fff; font-size: 18px; font-weight: 400; }
nav .gnb .subMenu ul li a:hover, nav .gnb .subMenu ul li.on a { text-decoration: underline; text-underline-position: under; }
nav .gnb .subMenu ul li ~ li { padding-top: 22px; }
header .rightMenu { display: flex; align-items: center; gap: 35px; color: #fff; height: 50px; padding: 0 35px; border-radius: 25px; }
header .lang { position: relative; }
header .lang button { border: 0; background: transparent; color: #fff; cursor: pointer; }
header .lang div { position: absolute; top: 100%; left: 50%; transform: translate(-50%); width: 80px; padding-top: 20px; display: none; }
header .lang div ul { text-align: center; background: #ef802c; padding: 15px 0; width: 100%; border-radius: 10px; }
header .lang div ul li ~ li { padding-top: 15px; }
header .lang div ul a:hover { text-decoration: underline; text-underline-position: under; }
header .etcMenu { display: flex; gap: 30px; align-items: center; }
header.scroll, header.dark { background: #fff; }
header.scroll nav .gnb > li > a, header.dark nav .gnb > li > a { color: #000; }
header.scroll nav .gnb > li > a img, header.dark nav .gnb > li > a img { filter: brightness(0); }
h1.logo_wrapper { transform: translateY(-9px); }
/* 
.scroll header{background: #fff;}

.scroll nav .gnb > li > a { color: #000; }
.scroll nav .gnb > li > a { color: #000; }
.scroll .logo_w {display: none;}
.scroll .logo_b {display: block;} */




.main .con01 { display: flex; align-items: center; justify-content: center; }
.main .con01 > div { width: 50%; position: relative; }
.main .con01 > div img { width: 100%; }
.main .con01 > div ul { position: absolute; top: 50%; width: 100%; text-align: center; transform: translateY(-50%); }
.main .con01 > div ul .basicBtn { margin: 0 auto; }
.main .con01 > div ul li:first-child b { font-weight: 700; font-size: 24px; }
.main .con01 > div ul li:nth-child(2) { font-size: 60px; color: #fff; padding: 35px 0 45px; }
.main .con01 .conRight ul li:nth-child(2) { font-size: 54px; padding-bottom: 60px; }
.main .con01 .conRight ul li:nth-child(2) b { font-weight: 800; font-size: 54px; }
.main .con01 > div { position: relative; overflow: hidden; }
.main .con01 > div img { position: relative; z-index: 0; }
.main .con01 > div ul { position: absolute; z-index: 3; }
.main .con01 .conLeft .bg, .main .con01 .conRight .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: cover; background-position: center; z-index: 1; opacity: 0; will-change: transform, opacity; animation-fill-mode: both; backface-visibility: hidden; }
.main .con01 .conLeft .bg.bg1 { background-image: url("../images/main/con0101.png"); }
.main .con01 .conLeft .bg.bg2 { background-image: url("../images/main/con0102.png"); }
.main .con01 .conRight .bg.bg1 { background-image: url("../images/main/con0102.png"); }
.main .con01 .conRight .bg.bg2 { background-image: url("../images/main/con0101.png"); }
.main .con01 .conLeft .bg.bg1 { animation: slideUp 12s infinite; }
.main .con01 .conLeft .bg.bg2 { animation: slideUp 12s infinite; animation-delay: 4s; }
.main .con01 .conLeft .bg.bg3 { animation: slideUp 12s infinite; animation-delay: 8s; }
.main .con01 .conRight .bg.bg1 { animation: slideDown 12s infinite; }
.main .con01 .conRight .bg.bg2 { animation: slideDown 12s infinite; animation-delay: 4s; }
.main .con01 .conRight .bg.bg3 { animation: slideDown 12s infinite; animation-delay: 8s; }
@keyframes slideUp {
	0% { transform: translateY(100%); opacity: 0; }
	8% { transform: translateY(0); opacity: 1; }
	33% { transform: translateY(0); opacity: 1; }
	41% { transform: translateY(-100%); opacity: 0; }
	100% { transform: translateY(-100%); opacity: 0; }
}
@keyframes slideDown {
	0% { transform: translateY(-100%); opacity: 0; }
	8% { transform: translateY(0); opacity: 1; }
	33% { transform: translateY(0); opacity: 1; }
	41% { transform: translateY(100%); opacity: 0; }
	100% { transform: translateY(100%); opacity: 0; }
}
.main .con02 ul { max-width: 1430px; width: 100%; padding: 340px 0 320px; margin: 0 auto; font-size: 80px; }
.main .con02 ul li { display: flex; align-items: center; gap: 40px; }
.main .con02 ul li, .main .con02 ul li span { line-height: 1.3; font-weight: 700; }
.main .con02 ul li:first-child { padding-left: 90px; }
.main .con02 ul li:first-child img { margin-left: 20px; }
.main .con02 ul li:nth-child(2) { padding-left: 200px; padding-top: 15px; }
.main .con02 ul li:nth-child(2) img { margin: 0 20px; }
.main .con02 ul li:last-child { padding-left: 305px; padding-top: 45px; }
.main .con02 ul li:last-child img { margin-right: 28px; }
.main .con03 { width: 100%; }
.main .con03 ul { display: flex; align-items: center; }
.main .con03 ul li { flex: 1 1; width: 25%; position: relative; height: 1092px; text-align: center; background: linear-gradient(#444 ,#000) ; overflow: hidden; }
.main .con03 ul li::after { content: ""; width: 1px; height: 106px; display: block; background: rgba(255, 255, 255, 0.3); position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.main .con03 ul li:last-child::after { display: none; }
.main .con03 ul li * { color: #fff; }
.main .con03 .box { position: absolute; bottom: 340px; width: 100%; }
.main .con03 .box .txt { padding-top: 65px; }
.main .con03 .box .txt span { display: block; font-size: 30px; font-weight: 1.26; font-weight: 700; }
.main .con03 .box .basicBtn { margin: 0 auto; }
.main .con03 .box .hoverOn { margin-top: 135px; display: none; }
.main .con03 ul li .hoverImg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.main .con03 ul li:hover .hoverOn { display: block; }
.main .con03 ul li:hover .hoverImg { opacity: 1; }
.main .con03 ul li:hover .box img { display: none; }
.main .con03 ul li:hover .box .txt { padding-top: 0; font-size: 36px; }
.main .con04 { padding: 150px 0; }
.main .con04 .titleBox { display: flex; align-items: flex-end; justify-content: space-between; }
.main .titleBox .title h2 { font-size: 24px; font-weight: 700; line-height: 3; letter-spacing: -0.01em; }
.main .titleBox .title h3 { font-size: 46px; font-weight: 700; line-height: 1.45; color: #000; }
.main .newsBox { display: flex; justify-content: space-between; gap: 25px; padding-top: 60px; }
.main .newsBox > li { width: 25%; }
.main .newsBox > li img { width: 100%; height: 341px; object-fit: cover; }
.main .newsBox .desc { font-size: 24px; font-weight: 700; margin: 30px 0 45px; }
.main .newsBox .date { font-size: 18px; color: #999; }
.privacyArea { margin-top: 15px; border: none!important; display: grid; grid-template-columns: 1fr; }
.privacyOpen { background: none; border: none; padding: 0; font-size: 18px; color: #666; cursor: pointer; text-align: left; }
.agree input { width: auto!important; }
.agree { display: flex; gap: 10px; align-items: center}
.privacyPopup { display: none; position: fixed; inset: 0; z-index: 9999; }
.privacyDim { position: absolute; inset: 0; background: rgba(0,0,0,0.6); }
.privacyBox { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 600px; background: #fff; padding: 30px; border-radius: 10px; }
.privacyBox h4 { margin-bottom: 15px; font-size: 18px; font-weight: 700; }
.privacyContent { max-height: 300px; overflow-y: auto; font-size: 14px; line-height: 1.6; color: #333; }
.privacyClose { position: absolute; top: 15px; right: 15px; background: none; border: none; font-size: 22px; cursor: pointer; }
.con05 { background: url("../images/main/con04_bg.png") no-repeat center; background-size: cover; padding: 150px 5%; }
.con05 form { max-width: 1570px; width: 100%; margin: 0 auto; display: flex; }
.con05 form > div { flex: 1 1; }
.main .con05 .titleBox .title h3 { color: #fff; }
.main .con05 .title div { padding-top: 40px; padding-bottom: 50px; }
.main .con05 .title div span { display: block; font-size: 18px; line-height: 1.6; color: #fff; }
.main .con05 .titleBox button { border: 0; box-shadow: none; cursor: pointer; }
.main .formBox { margin-top: 45px; }
.main .formBox * { color: #fff; }
.main .formBox .privacyOpen { color: #ee7b0a; }
.main .formBox > div ~ div { padding: 16px 0; }
.main .formBox > div { border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
.main .formBox label { font-size: 18px; font-weight: 600; }
.main .formBox .inputBox { padding: 15px 0; }
.main .formBox input { height: 45px; }
.main .formBox input, .main .formBox textarea { border: 0; background: transparent; font-size: 18px; width: 100%; resize: none; }
.main .formBox textarea { height: 80px; }
.main .formBox input:focus, .main .formBox textarea:focus { outline: 0; }
.main .formBox > div.info { border-bottom: 0; }
.main .formBox .infoBox { padding: 0 3px; }
.main .formBox .infoInner { background: rgba(255, 255, 255, 0.15); padding: 30px 35px 10px; overflow: hidden; height: 135px; }
.main .formBox .infoInner .box { overflow-y: auto; padding-right: 5px; height: 95px; }
/* WebKit */
.main .formBox .infoInner .box::-webkit-scrollbar { width: 30px; }
.main .formBox .infoInner .box::-webkit-scrollbar-track { background: transparent; }
.main .formBox .infoInner .box::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 1); border-radius: 4px; }
/* Firefox */
.main .formBox .infoInner .box { scrollbar-width: auto; scrollbar-color: rgba(255, 255, 255, 1) transparent; }
.main .formBox > div.info label { margin-top: 30px; display: flex; align-items: center; position: relative; }
.main .formBox > div.info label input { opacity: 0; position: absolute; width: 26px; height: 25px; left: 0; /* cursor: pointer; */
}
.main .formBox > div.info label span { width: 26px; height: 25px; background: url("../images/common/check_off.png") no-repeat; background-size: 100% 100%; margin-right: 16px; }
.main .formBox > div.info label input:checked + span { background: url("../images/common/check_on.png") no-repeat; background-size: 100% 100%; }
footer { background: #000; padding: 60px 0%; }
footer h2 { padding: 0 0 30px; }
footer .inner * { color: rgba(255, 255, 255, 0.5); }
footer .inner > div ul { padding-bottom: 55px; }
footer .inner > div ul span { color: #ffaf44; margin-right: 10px; }
footer .inner > div ul li { display: flex; gap: 27px; }
footer .inner > div ul li ~ li { margin-top: 16px; }
/* subPage */
.subPage .inner2 { max-width: 1570px; width: 100%; margin: 0 auto; }
.subPage .subLnb { background-size: cover !important; height: 680px; position: relative; }
.subPage .subLnb > .inner2 { position: absolute; bottom: 160px; left: 50%; transform: translate(-50%); color: #fff; }
.subPage .subLnb h2 { font-size: 48px; font-weight: 700; display: flex; align-items: baseline; gap: 10px; }
/* .subPage .subLnb ul { margin-top: 65px; display: flex; gap: 65px; align-items: center; } 
.subPage .subLnb ul li a { font-weight: 500; font-size: 18px; padding-bottom: 8px; border-bottom: 2px solid transparent; } 
.subPage .subLnb ul li.on a { border-bottom: 2px solid #ef802c; }  */


.subPage .sub_nav { display: none; }
.subPage .subLnb .sub_nav>a { display: none; }
.subPage .subMenu { position: static!important; display: block!important; transform: translateX(0%)!important; padding-top: 40px!important; }
.subPage .gnb .subMenu ul { display: flex; gap: 20px; align-items: flex-end; width: 100%; background: transparent; color: #fff; border-radius: 0; padding: 0; height: 40px; }
.subPage .gnb .subMenu ul li a { text-align: left; text-underline-offset: 5px; font-weight: 600; font-size: 18px; }
.subPage .gnb .subMenu ul li.on a { color: #ef802c!important; }
.sub_01 .subLnb .sub_nav_01 { display: block; }
.sub_02 .subLnb .sub_nav_02 { display: block; }
.sub_03 .subLnb .sub_nav_03 { display: block; }
.sub_04 .subLnb .sub_nav_04 { display: block; }
.sub_05 .subLnb .sub_nav_05 { display: block; }
.subPage .subWrap { padding: 130px 0 200px; }
.subPage .subWrap .title h3 { font-weight: 700; font-size: 24px; }
.subPage .subWrap .title .desc { font-weight: 700; font-size: 48px; color: #000; padding-top: 35px; }
.subPage .subTxt > div ~ div { padding-top: 65px; }
.subPage .subTxt .txt01 { font-weight: 700; font-size: 48px; color: #000; line-height: 1.25; }
.subPage .subTxt .txt02 { font-weight: 700; font-size: 28px; color: #000; line-height: 1.42; }
.subPage .subTxt .txt03 { font-size: 20px; color: #000; line-height: 1.8; }
.greeting .subLnb { background: url("../images/sub/sub_01_01/sub_01_01_bg.png") no-repeat; }
.greeting .subWrap .title { text-align: center; }
.greeting .subWrap .subTop { padding: 110px 0; }
.greeting .subBgTxt { max-width: 100%; margin: 0 auto; }
.greeting .subTop > div.inner2 { display: flex; justify-content: space-between; padding-top: 145px; }
.greeting .subTop .txt03 { padding-top: 50px; }
.greeting .subTop .subRight div { font-size: 20px; color: #000; margin-top: 35px; }
.greeting .subTop .subRight div span { font-weight: 700; margin-left: 15px; }
.greeting .subBot { max-width: 1920px; width: 100%; margin: 0 auto; display: flex; gap: 175px; }
.greeting .subBot .subRight { padding-top: 35px; }
/* history */
.line-guide { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 8px; height: 100%; z-index: -1; }
.history_bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #eee; }
.history_path { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #ee7b0a; transform-origin: top; transform: scaleY(0); }
.his_dot_wrap { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100px; height: 100px; background: #ee7b0a; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; will-change: transform; }
.history .subWrap { position: relative; padding: 200px 0 280px; }
.history .subLnb { background: url("../images/sub/sub_01_02/sub_01_02_bg.png") no-repeat; }
.history .inner3 { max-width: 1710px; padding: 0 5%; width: 100%; margin: 0 auto; }
.historyBox > div { display: flex; justify-content: space-between; }
.historyBox > div > div { width: 840px; }
.historyBox .subRight { padding-left: 150px; }
.historyBox .sub01 .subTop { display: flex; justify-content: flex-end; padding-right: 150px; }
.historyBox .sub01 .sTitle { font-weight: 700; font-size: 20px; }
.historyBox .sub01 .sDesc { margin: 30px 0 80px; }
.historyBox .sub01 .sDesc div { font-weight: 800; font-size: 48px; line-height: 1.27; }
.historyBox .sub01 { padding-bottom: 170px; }
.historyBox .sub01 .sDesc div:first-child { color: #fff; display: flex; align-items: baseline; gap: 10px; }
.historyBox .sub01 .sDesc div:first-child span { display: inline-flex; background: url("../images/sub/sub_01_02/bar.png") no-repeat; background-size: 100% 100%; }
.historyBox .sub01 .sImg div { font-weight: 300; font-size: 20px; color: #777; margin-top: 20px; }
.historyBox .sub01 .subBot { margin-top: 95px; }
.historyBox .sub01 .subRight { padding-top: 220px; }
.historyBox .trans { /* transform: translateX(-115px); */
	transform: translateX(-160px); }
.historyBox .historyTxt dl ~ dl { padding-top: 100px; }
.historyBox .historyTxt dt { font-size: 36px; font-weight: 700; line-height: 1.94; color: #000; }
.historyBox .historyTxt dd { font-weight: 400; font-size: 20px; color: #777; line-height: 1.8; }
.historyBox .sub02 .subLeft, .historyBox .sub04 .subLeft { padding-right: 150px; }
.historyBox .sub02 .historyTxt, .historyBox .sub04 .historyTxt { text-align: right; }
.historyBox .sub02 { padding-bottom: 120px; }
.historyBox .sub02 .historyTxt dl:nth-child(2) { padding-top: 130px; }
.historyBox .sub03 { padding-bottom: 220px; }
.historyBox .sub04 .historyTxt dl ~ dl { padding-top: 130px; }
/* certification */
.certification .subLnb { background: url("../images/sub/sub_01_01/sub_01_01_bg.png") no-repeat; }
.subPage.certification .subWrap { padding-left: 5%; padding-right: 5%; }
.certification .subTop { margin-bottom: 200px; }
.certification .subTop ul { display: grid; grid-template-columns: repeat(5, 1fr); gap: 55px 18px; margin-top: 90px; }
.certification .subTop ul img { width: 100%; object-fit: cover; }
.certification .subTop ul li .lineBox { border: 2px solid #eee; padding: 30px; aspect-ratio: 3 / 4; }
.certification .subTop ul li > div:not(.lineBox) { margin-top: 18px; font-size: 20px; line-height: 1.3; color: #777; }
.certification .subBot table { margin-top: 65px; width: 100%; text-align: left; font-size: 20px; line-height: 1.3; }
.certification .subBot table th { padding: 0 20px; width: 256px; font-weight: 600; color: #ee7b0a; height: 88px; }
.certification .subBot table td { padding-left: 48px; color: #777; }
.certification .subBot table th, .certification .subBot table td { border-top: 1px solid #eee; }
/* direction */
.direction .subLnb { background: url("../images/sub/sub_01_01/sub_01_01_bg.png") no-repeat; }
.direction .title { text-align: center; }
.direction.subPage .subWrap { padding-bottom: 395px; }
.direction .mapWrap { position: relative; margin-top: 65px; }
.direction .mapWrap .mapBox { position: relative; width: 100%; padding-bottom: 53.124%; }
.direction .mapWrap .mapBox > iframe { position: absolute; width: 100%; height: 100%; }
.direction .mapInfo { position: absolute; left: 50%; transform: translateX(-50%) translateY(-230px); background: #ee7b0a; padding: 60px 108px; color: #fff; }
.direction .mapInfo h4 { font-weight: 300; font-size: 48px; display: flex; align-items: baseline; gap: 18px; padding-bottom: 45px; border-bottom: 1px solid rgba(255, 255, 255, 0.3); margin-bottom: 55px; }
.direction .mapInfo ul li:last-child { margin-top: 35px; display: flex; width: 100%; }
.direction .mapInfo ul li div { display: flex; align-items: center; flex: 1 1; gap: 18px; position: relative; }
.direction .mapInfo ul li div .bgBox { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); }
.direction .mapInfo ul li:last-child div::after { content: ""; display: block; width: 1px; height: 30px; background: rgba(255, 255, 255, 0.5); /* margin-left: 82px; */
	margin-left: 20%; }
.direction .mapInfo ul li:last-child div:last-child:after { display: none; }
/* autoro */
.autoro { background: #111 url("../images/sub/sub_02_01/sub_02_01_bg.png") no-repeat right 0; background-size: contain; }
.autoro.subPage .subWrap { padding: 425px 5% 205px; }
.autoro .subTop { display: flex; gap: 185px; margin-bottom: 275px; }
.autoro .subTop h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
.autoro .subTop h3 { font-size: 65px; font-weight: 700; letter-spacing: -0.02em; color: #fff; margin-bottom: 30px; }
.autoro .subTop .desc { font-weight: 500; font-size: 18px; letter-spacing: -0.02em; color: #c9c9c9; line-height: 1.8; margin-bottom: 55px; }
.autoro .subTop ul { display: flex; gap: 14px; align-items: center; }
.basicBtn2 { border: 2px solid #ef802c; background: transparent; color: #fff; }
.autoro .subMid { margin-bottom: 95px; }
.autoro .subMid table { border-top: 1px solid #e3e3e3; width: 100%; border-collapse: collapse; }
.autoro .subMid table th, .autoro .subMid table td { border-bottom: 1px solid rgba(238, 238, 238, 0.3); text-align: left; }
.autoro .subMid table th { padding: 14px 50px 14px 16px; color: #ee7b0a; font-size: 18px; font-weight: 600; }
.autoro .subMid table thead th { font-weight: 500; font-size: 20px; color: #fff; background: #272727; border-bottom: 0; }
.autoro .subMid table td { padding: 14px 38px 14px 0; color: #c2c2c2; font-size: 18px; }
.autoro .subMid table .state th { vertical-align: top; }
.autoro .subMid table .state td { vertical-align: top; }
.autoro .subMid table .state td div { display: flex; align-items: center; }
.autoro .subMid table .state td div ~ div { margin-top: 15px; }
.autoro .subMid table .state td div span:first-child { display: inline-block; width: 120px; }
.autoro .subBot ul { display: flex; gap: 30px; }
.autoro .subBot ul li { flex: 1 1; background: #272727; border-radius: 20px; padding: 45px 0; text-align: center; display: flex; flex-direction: column; justify-content: flex-end; }
.autoro .subBot ul li img { margin: 0 auto; }
.autoro .subBot ul li p { margin-top: 27px; font-weight: 700; font-size: 23px; color: #fff; }
/* products */
.products .subLnb { background: url("../images/sub/sub_03_01/sub_03_01_bg.png") no-repeat; }
.products.subPage .subWrap { padding: 100px 0 0 0; max-width: 1570px; width: 100%; margin: 0 auto; }
.products.subPage .subWrap .title { text-align: center; }
.products form { max-width: 689px; width: 100%; background: #fafafa; border-radius: 40px; margin: 60px auto 90px; display: flex; align-items: center; }
.products .searchBox { padding-right: 35px; padding-left: 40px; width: 100%; display: flex; justify-content: space-between; align-items: center; }
.products .searchBox input { font-size: 24px; letter-spacing: -0.01em; line-height: 3; border: 0; height: 77px; background: transparent; width: calc(100% - 40px); }
.products .searchBox input:focus { outline: 0; }
.products .searchBox input::placeholder { color: #999; }
.products .searchBox button { border: 0; background: transparent; cursor: pointer; }
.products .category .categoryGrid { display: grid; gap: 15px; grid-template-columns: 2.1fr 1.2fr 1fr 1fr; grid-auto-rows: clamp(150px, 16vw, 220px); grid-template-areas: "iron  glue  tip   tip" "iron  solder tip   tip" "tools heater acc   acc" "tools telecom measure other"; }
.products .category .cate01 { grid-area: iron; }
.products .category .cate02 { grid-area: glue; }
.products .category .cate05 { grid-area: solder; }
.products .category .cate04 { grid-area: tip; }
.products .category .cate06 { grid-area: tools; }
.products .category .cate09 { grid-area: heater; }
.products .category .cate03 { grid-area: acc; }
.products .category .cate07 { grid-area: telecom; }
.products .category .cate10 { grid-area: measure; }
.products .category .cate11 { grid-area: other; }
.products .category .productBox { position: relative; width: 100%; height: 100%; overflow: hidden; }
.products .category .productBox img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width:1800px) {
	.products.subPage .subWrap { padding: 100px 5%; }
}
.products .category ul li { background: #f1f1f1; position: relative; overflow: hidden; }
.products .category ul li:hover { background: url("../images/sub/sub_03_01/sub_03_01_hover.png") no-repeat center; background-size: cover; }
.products .category .hoverBox { position: absolute; display: none; transform: translate(24px, 0px); }
.products .category .cate01 .hoverBox {
    right: 50px;
    bottom: 50px;
    transform: translate(0, 0);
    z-index: 2;
}
.products .category ul li:hover .hoverBox { display: block; }
.products .category img { position: absolute; }
.products .category .productBox { width: 100%; height: 100%; }
.products .category .cate01 .productBox { display: flex; flex-direction: column; justify-content: flex-end; }
.products .category .nameBox { padding: 30px; position: relative; z-index: 1; }
.products .category .nameBox .tag { font-size: 18px; font-weight: 700; color: #ef802c; letter-spacing: -0.01em; padding-bottom: 15px; }
.products .category .nameBox .name { font-size: 30px; font-weight: 700; color: #000; }
.products .category ul li:hover .tag { color: #fff; }
.products .category ul li:hover .name { color: #fff; }
.sub_03_02 #bo_v_con { margin: 10px 0 30px; width: 100%; line-height: 1.7em; min-height: 10px; word-break: break-all; overflow: hidden; font-size: 18px; color: #222; font-weight: 300; }
.subPage.products { padding: 0 0 150px 0; }
.sub_03_02 .subPage.products { padding: 0 ; }
/* .products .category .cate01 .nameBox { padding-bottom: 60px; }
.products .category .cate01 img { top: 90px; right: 0; }
.products .category .cate02 img { top: 0; right: 0; }
.products .category .cate03 img { top: 0; right: 0; }
.products .category .cate04 img { bottom: 0; left: 0 !important; }
.products .category .cate05 img { bottom: 40px; right: 30px !important; }
.products .category .cate06 img { top: 0; right: 0; }
.products .category .cate07 img { bottom: 0; left: 45px; }
.products .category .cate08 img { top: 40px; right: 0; }
.products .category .cate09 img { bottom: 0; right: 75px; }
.products .category .cate10 img { top: 45px; right: 0; }
.products .category .cate11 img { bottom: 0; right: 0; } */







/* prcenter */
.prcenter .subLnb { background: url("../images/sub/sub_03_01/sub_03_01_bg.png") no-repeat; }
.prcenter.subPage .subLnb ul { gap: 35px; }
.prcenter.subPage .subWrap { padding: 180px 0 40px 0; max-width: 1570px; width: 100%; margin: 0 auto; }
.prcenter .prcenter .prcenter .prcenter .prcenter .prcenter .prcenter .prcenter .prcenter /* productsList */
.products.list.subPage .subWrap { padding: 150px 15px 180px; max-width: 1500px; }
.prcenter .pt_list_all_wrap { padding: 0!important; }
.prcenter .inner { padding: 0 ; }
.products.list .listTop { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 55px; border-bottom: 1px solid #e6e9ed; }
.products.list.subPage .subWrap .title { text-align: left; }
.products.list form { margin: 0; max-width: 300px; height: 60px; border-radius: 10px; }
.products.list .searchBox { padding-right: 18px; padding-left: 30px; }
.products.list .searchBox button img { width: 20px; }
.products.list .searchBox input { font-size: 16px; }
.products.list .listWrap { padding: 45px 0 80px 0; display: flex; gap: 45px; }
.products.list .listCategory { width: 300px; }
.products.list .listCategory ul { background: #fafafa; border-radius: 10px; padding: 0 35px; }
.products.list .listCategory ul li a { display: block; padding: 25px 0; font-size: 20px; font-weight: 700; color: rgba(34, 34, 34, 0.5); border-bottom: 1px solid #e8e8e8; }
.products.list .listCategory ul li:last-child a { border-bottom: 0; }
.products.list .listCategory ul li.on a { color: #000; }
.products.list .downBtn { margin-top: 10px; }
.products.list .downBtn a { background: #ef802c; color: #fff; border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 60px; font-size: 18px; letter-spacing: -0.01em; }
.products.list .listRight { width: calc(100% - 345px); }
.products.list .listRight h4 { font-weight: 600; font-size: 28px; letter-spacing: -0.05em; color: #222; }
.products.list .listRight .desc { font-weight: 300; font-size: 18px; letter-spacing: -0.05em; color: #222; line-height: 1.6; margin-top: 20px; }
.products.list .listBox {
    margin: 50px 0;
}
.products.list .listBox ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 70px 22px; }
.products.list .listBox li a > div:first-child, .productView .product04 li a > div:first-child { border: 1px solid #dbdbdb; }
.products.list .listBox img, .productView .product04 img { width: 100%; height: 250px; object-fit: cover; }
.products.list .nameBox, .productView .nameBox { margin-top: 24px; }
.products.list .nameBox .tag, .productView .nameBox .tag { font-weight: 600; font-size: 18px; color: #ef802c; margin-bottom: 15px; }
.products.list .nameBox .name, .productView .nameBox .name { font-weight: 600; font-size: 24px; letter-spacing: -0.05em; color: #222; }
/* productView */


.productView .product01 { display: flex; gap: 130px; margin-bottom: 100px; }
.productView .product01 .subLeft { width: 700px; border-radius: 25px; overflow: hidden; }
.productView .product01 .subLeft img { width: 100%; height: 560px; object-fit: cover; }
.productView .product01 .subRight { width: calc(100% - 830px); padding-top: 65px; }
.productView .product01 .subRight h2 { font-weight: 700; font-size: 24px; letter-spacing: -0.01em; }
.productView .product01 .subRight .title { font-weight: 700; font-size: 48px; padding: 20px 0 60px; letter-spacing: -0.02em; }
.productView .product01 .subRight .info li { display: flex; gap: 10px; font-weight: 500; font-size: 18px; color: #777; }
.productView .product01 .subRight .info li ~ li { padding-top: 15px; }
.productView .product01 .subRight .info li::before { content: ""; display: block; width: 8px; height: 8px; border-radius: 2px; background: #ee7b0a; margin-top: 6px; }
.productView .product01 .btnBox { margin-top: 55px; }
.productView .product01 .btnBox ul { display: flex; align-items: center; gap: 15px; }
.productView .product01 .btnBox .basicBtn2 { color: #ee7b0a; }
.productView h3 { font-weight: 600; font-size: 24px; color: #040404; border-top: 1px solid #e3e3e3; background: #fafafa; padding-left: 35px; height: 64px; display: flex; align-items: center; margin-bottom: 50px; }
.productView .product02 { margin-bottom: 120px; }
.productView .product02 h3 { margin-bottom: 0; }
.productView .product02 table { width: 100%; text-align: left; font-size: 20px; }
.productView .product02 table th:first-of-type { width: 25%; padding-left: 35px; }
.productView .product02 table td:first-of-type { width: 25%; }
.productView .product02 table th:last-of-type { width: 25%; }
.productView .product03 { margin-bottom: 160px; }
.productView .product02 table th { font-weight: 600; }
.productView .product02 table td { color: #777; }
.productView .product02 table th, .productView .product02 table td { padding-top: 25px; padding-bottom: 25px; border-top: 1px solid #eee; }
.productView .product02 table tr:first-child th, .productView .product02 table tr:first-child td { border-top: 0; }
.productView .product03 img { display: block; margin: 0 auto; }
.productView .product04 ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.spec_list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.spec_item { border: 1px solid #e5e5e5; border-radius: 10px; padding: 12px; background: #fafafa}
.spec_item .row { display: grid; grid-template-columns: 140px 1fr; gap: 10px; align-items: center}
.spec_item .row+.row { margin-top: 8px}
.spec_item label { font-size: 13px; color: #666}
.spec_item input { width: 100%; box-sizing: border-box}
.spec_item .ctrls { display: flex; gap: 8px; margin-top: 10px}
.detail_grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
@media (max-width:980px) {
	.spec_item .row { grid-template-columns: 1fr}
}
.ciClean { width: 100%; }
.ciTop { padding: 64px 0 40px; border-bottom: 1px solid var(--line); }
.ciTopEn { margin: 0 0 16px; font-size: 50px; letter-spacing: -0.02em; line-height: 1.12; }
.ciTopDesc { margin: 0; font-size: 20px; line-height: 1.85; color: var(--muted); }
.ciSec { padding: 44px 0; border-bottom: 1px solid var(--line); }
.ciSecLast { border-bottom: 0; padding-bottom: 80px; }
.ciHead { margin-bottom: 18px; }
.ciTit { margin: 0 0 10px; font-size: 30px; letter-spacing: -0.02em; }
.ciSub { margin: 0; font-size: 14px; letter-spacing: .10em; text-transform: uppercase; color: var(--muted); }
.ciPara { margin: 0 0 18px; font-size: 18px; line-height: 1.9; color: var(--muted); }
.ciWarn { padding: 14px 16px; border: 1px solid #e2d2d2; background: #fbf6f6; }
.ciMedia { border: 1px solid var(--line); background: #f1f1f1; padding: 40px 40px 80px 40px; display: flex; align-content: center; justify-content: center; align-items: center; }
.ciMedia img { display: block; width: 100%; height: auto; }
.cimedia01 img { width: 260px; }
.cimedia02 img { width: 550px; }
.cimedia03 img { width: 550px; }
.ciMedia:nth-child(3) { padding: 40px; }
.cimedia04 .ciColorGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cimedia04 .ciColorCol { border: 1px solid var(--line); background: #f7f7f7; padding: 16px; }
.cimedia04 .ciColorLabel { font-size: 14px; letter-spacing: .10em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.cimedia04 .ciSwatch { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); padding: 12px; margin-bottom: 12px; }
.cimedia04 .ciSwatch:last-child { margin-bottom: 0; }
.cimedia04 .ciChip { width: 38px; height: 38px; background: var(--c); border: 1px solid rgba(0,0,0,.10); flex: 0 0 auto; }
.cimedia04 .ciSwatchName { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
@media (max-width:980px) {
	.cimedia04 .ciColorGrid { grid-template-columns: 1fr; }
	.cimedia04 .ciSwatchName { font-size: 16px; }
}
@media (max-width:980px) {
	.ciTop { padding: 48px 0 30px; }
	.ciTopEn { font-size: 38px; }
	.ciTopDesc { font-size: 18px; }
	.ciSec { padding: 36px 0; }
	.ciTit { font-size: 26px; }
	.ciPara { font-size: 16px; }
	.ciMediaSm img { max-width: 100%; }
}
.sub_03_13 nav .gnb > li > a { display: block; font-size: 18px; font-weight: 500; color: #000; }
.sub_03_13 header .logo_b { display: block!important; z-index: 999; }
.sub_03_13 .logo_w { display: none; }