@charset "utf-8";

/*공통*/
.c-white {color:#fff !important;}
.c-main {color:var(--c-main) !important;}
.c-dark {color:var(--c-dark) !important;}
.c-2 {color:var(--c-2) !important;}

.bg-gray {padding:var(--size100-40) 0; position:relative;}
.bg-gray:before {content:''; position:absolute; width:100vw; height:100%; left:50%; top:0; background:#f8f8f8; z-index:-1; transform:translateX(-50%);}

.font-mont {font-family:var(--font-mont);}
.mb100 {margin-bottom:var(--size100-40);}
.pb100 {padding-bottom:var(--size100-60);}

.page-cate {margin-bottom:var(--size60-20); position:sticky; top:var(--size100-60); background:#fff; z-index:20;}
.page-cate ul {display:flex; margin:-5px;}
.page-cate ul li {width:33.333%; padding:5px;}
.page-cate ul li a {display:flex; align-items:center; justify-content:center; height:var(--size60-40); font-size:var(--font24-14); font-weight:500; line-height:1.2; letter-spacing:-0.02em; color:#454545; text-align:center; border:2px solid #505050;}
.page-cate ul li:hover a,
.page-cate ul li.active a {background:#991a26; border-color:#991a26; color:#fff;}

.table-wrap table {width:100%; border-collapse:collapse; border-spacing:0px;}

/* company */
.company .group {display:flex; align-items:center;}
.company .group .txt-wrap {flex:1 1 auto; min-width:0; width:1%; padding-right:var(--size20-10);}
.company .group .txt-wrap .txt {margin-bottom:1.2em; font-size:var(--font20-14); line-height:1.5; letter-spacing:-0.02em; color:#454545;}
.company .group .txt-wrap .txt:last-child {margin-bottom:0;}

.company .dc1 .top-tit {position:relative; padding:var(--size70-20) 0; width:100%; max-width:1040px; background:#991a26;}
.company .dc1 .top-tit:before {content:''; position:absolute; width:100vw; height:100%; left:50%; transform:translateX(-50%); top:0; background: linear-gradient(to right, #991a26 50%, #fff 50%); z-index:-1;}
.company .dc1 .top-tit .tit {width:100%; max-width:670px; text-align:center; font-size:var(--font42-24); line-height:1.2em; letter-spacing:0; font-weight:600; color:#fff;}
.company .dc1 .top-tit .tit span {display:block; margin-top:var(--size15-5); font-size:1.71em; font-weight:700;}
.company .dc2 .tit-wrap {padding-bottom:var(--size25-10); margin-bottom:var(--size60-20); position:relative; text-align:center; font-size:var(--font35-20); font-weight:600; line-height:1.29; letter-spacing:-0.02em; color:#242424;}
.company .dc2 .tit-wrap:before {content:''; position:absolute; width:var(--size170-30); height:2px; background:#991a26; left:50%; bottom:0; margin-left:calc(0px - var(--size170-30)/2);}

.company .dc2 .group .img {margin-left:calc(0px - var(--size65-0));}
.company .dc2 .group .txt-wrap {padding-left:var(--size110-20);}

/* worldwide */
.worldwide .top-txt-wrap {margin-bottom:var(--size70-20); text-align:center;}
.worldwide .top-txt-wrap .tit {margin-bottom:0.43em; font-size:var(--font46-24); font-weight:700; line-height:1.2; letter-spacing:-0.02em; color:#242424;}
.worldwide .top-txt-wrap .txt {font-size:var(--font24-15); font-weight:400; line-height:1.33em; letter-spacing:-0.02em; color:#454545;}
.worldwide .map {margin-bottom:var(--size80-40); padding:var(--size40-20) 0; position:relative; text-align:center;}
.worldwide .map:before {content:''; position:absolute; width:100vw; height:100%; left:50%; top:0; transform:translateX(-50%); z-index:-1; background:#ecf1f3;}
.worldwide .local-tab {margin-bottom:var(--size50-20);}
.worldwide .local-tab>ul {display:flex; background:#f8f8f8;}
.worldwide .local-tab>ul>li {flex:1; position:relative;}
.worldwide .local-tab>ul>li:before {content:''; position:absolute; width:1px; height:var(--size20-10); right:0; top:50%; margin-top:calc(0px - var(--size20-10)/2); background:#ddd;}
.worldwide .local-tab>ul>li:last-child:before {display:none;}
.worldwide .local-tab>ul>li:first-child:after {content:''; position:absolute; width:1px; height:var(--size20-10); right:0; top:50%; margin-top:calc(0px - var(--size20-10)/2); background:#ddd;}
.worldwide .local-tab>ul>li>a {display:flex; align-items:center; justify-content:center; height:var(--size60-40); font-size:var(--font18-14); font-weight:500; line-height:1.2; letter-spacing:-0.02em; color:#242424;}
.worldwide .local-tab>ul>li.active>a {color:#991a26;}
.worldwide .flex-box {display:flex; flex-wrap:wrap; margin:0 calc(0px - var(--size20-10));}
.worldwide .flex-box .group {width:50%; padding:0 var(--size20-10);}
.worldwide .group .in {display:none; padding-bottom:var(--size30-10);}
.worldwide .group .local-btn {position:relative; border-top:2px solid #991a26; padding-top:var(--size30-10); cursor:pointer;} 
.worldwide .group .local-btn:before {content:''; position:absolute; width:var(--font16-14); height:var(--font16-14); right:10px; top:50%; margin-top:calc(0px - var(--font16-14)/2); background:url('/images/sub/icon-plus.png') no-repeat 50% 50%/contain; transition:0.2s all ease;}
.worldwide .group .local-btn.active:before {transform:rotate(90deg); background-image:url('/images/sub/icon-plus2.png');}
.worldwide .tab-content .tit {padding-left:10px; padding-bottom:var(--size30-10); font-size:var(--font25-18); font-weight:700; line-height:1.2; letter-spacing:-0.02em; color:#333;}
.worldwide .tab-content .tit span {position:relative; display:inline-block; padding-left:var(--size15-5); margin-left:var(--size15-5); font-size:var(--font19-14); font-weight:400; line-height:1.2; letter-spacing:-0.02em; color:#808080;}
.worldwide .tab-content .tit span:before {content:''; position:absolute; width:1px; height:var(--size15-10); background:#ddd; left:0; top:50%; margin-top:calc(0px - var(--size15-10)/2);}
.worldwide .tab-content .txt {padding-left:10px; margin-bottom:0.88em; font-size:var(--font17-14); font-weight:400; line-height:1.7; letter-spacing:-0.02em; color:#454545;}
.worldwide .tab-content .txt:last-child {margin-bottom:0;}
.worldwide .tab-content .txt strong {display:block; margin-bottom:0.35em; font-size:var(--font20-16); font-weight:600; line-height:1.2; letter-spacing:-0.02em; color:#333;}

/* application */
.app-visual {position:relative; background:#505050; width:100%; padding:var(--size100-30) 0 var(--size170-30); overflow:hidden; background-repeat:no-repeat; background-position:50% 50%; background-size:cover;}
.app-visual .content {position:relative; z-index:1; width:100%; max-width:1260px; padding:0 var(--size30-15); margin:0 auto; color:#fff;}
.app-visual .content .in {padding:var(--size60-20) var(--size40-20); background:rgba(153,26,38,0.8);  width:100%; max-width:870px;}
.app-visual .content h2 {font-size:var(--font36-20); font-weight:600; line-height:1.2em; letter-spacing:-0.025em; color:#fff; opacity:0; transform:translateY(20px); transition:0.8s all 0.3s ease;}
.app-visual .content h2 strong {display:block; margin-bottom:0.4em; font-weight:900; font-size:1.67em;}
.app-visual .content p {margin-top:0.4em; font-size:var(--font25-18); font-weight:500; line-height:1.4em; letter-spacing:-0.03em; opacity:0; transform:translateY(20px); transition:0.8s all 0.4s ease;}
.app-visual.load .content h2 {opacity:1; transform:translateY(0);}
.app-visual.load .content p {opacity:1; transform:translateY(0);}
.app-visual .background {position:absolute; top:0; left:0; width:100%; height:100%; background-position:50% 50%; background-repeat:no-repeat; background-size:cover; transform:scale(1.09); -ms-transform:scale(1.09); /* IE 9 */ -moz-transform:scale(1.09); /* Firefox */ -webkit-transform:scale(1.09); /* Safari and Chrome */ -o-transform:scale(1.09); /* Opera */ transition: all 2s ease-out 0s; transition-delay: 0.1s; z-index:0;}
.app-visual.load .background {transform:scale(1); -ms-transform:scale(1); /* IE 9 */ -moz-transform:scale(1); /* Firefox */ -webkit-transform:scale(1); /* Safari and Chrome */ -o-transform:scale(1); /* Opera */}

.app-visual.ver2 {margin-bottom:var(--size100-40); padding:0; display:flex; align-items:center; --size490-150:clamp(9.375rem, -1.25rem + 26.5625vw, 30.625rem); height:var(--size490-150);}
.app-visual.ver2 .content .in {display:inline-block; width:auto; padding: var(--size40-20);}
.app-visual.ver2 .content h2 strong {margin-bottom:0;}

.application .top-cont {display:flex; align-items:center;}
.application .top-cont .left {flex:1 1 auto; min-width:0; width:1%; padding-right:var(--size10-0);}
.application .top-cont .txt {margin-bottom:0.9em; font-size:var(--font20-14); font-weight:400; line-height:1.5; letter-spacing:-0.02em; color:#454545;}
.application .top-cont .txt:last-child {margin-bottom:0;}

.application .group-tit {margin-bottom:var(--size50-20); font-size:var(--font26-20); font-weight:600; line-height:1.2; letter-spacing:-0.02em; color:#242424;}

.application .benefits ul {display:flex; justify-content:space-between; margin:-5px;}
.application .benefits ul li {text-align:center; padding:5px;}
.application .benefits ul li .tit {margin-top:0.83em; font-size:var(--font24-14); font-weight:500; line-height:1.2; letter-spacing:-0.02em; color:#454545;}

.application .solutions ul {display:flex; margin:0 -15px;}
.application .solutions ul li {padding:0 15px; flex:1 0 auto; width:25%; /* 하나 추가되면 25%로 바뀌야함 */ position:relative; overflow:hidden; text-align:center; }
.application .solutions ul li a {height:250px; overflow:hidden; color:#fff; position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; transition: .3s ease-in-out;}
.application .solutions ul li a:after {position:absolute; content:''; top:0; left:0; right:0; bottom:0; border:4px solid #c9252c; opacity:0; transition: .3s ease-in-out;}
.application .solutions ul li .bg {transition: .6s; background-size:cover; background-repeat:no-repeat; background-position:center; position:absolute; top:0; right:0; left:0; bottom:0; z-index:-1; filter:grayscale(90%);}
.application .solutions ul li .tit {margin-bottom:0.53em; font-size:var(--font38-18); font-weight:700; line-height:1.2em; letter-spacing:-0.03em;}
.application .solutions ul li .more span {display:inline-block; padding:0.68em 1.5em; font-size:var(--font22-14); font-weight:500; line-height:1; letter-spacing:-0.03em; border:1px solid rgba(255,255,255,0.5); border-radius:100vh; transition:0.2s all ease;}
.application .solutions ul li:hover a {transition: .3s ease-in-out;}
.application .solutions ul li:hover a:after {opacity:1; transition: .3s ease-in-out;}
.application .solutions ul li:hover .bg {filter:none;}
.application .solutions ul li:hover a .bg {transform:scale(1.1); transition: .6s;}
.application .solutions ul li:hover .more span {background:#991a26; border-color:#991a26;}

/* automotive 공통 */
.cont-visual {position:relative; background:#505050; width:100%; --size490-150:clamp(9.375rem, -1.25rem + 26.5625vw, 30.625rem); height:var(--size490-150); display:flex; justify-content:center; align-items:center; text-align:center; overflow:hidden; background-repeat:no-repeat; background-position:50% 50%; background-size:cover;}
.cont-visual .background {position:absolute; top:0; left:0;	width:100%; height:100%; background-position:50% 50%; background-repeat:no-repeat; background-size:cover; transform:scale(1.09); -ms-transform:scale(1.09); /* IE 9 */ -moz-transform:scale(1.09); /* Firefox */ -webkit-transform:scale(1.09); /* Safari and Chrome */ -o-transform:scale(1.09); /* Opera */ transition: all 2s ease-out 0s; transition-delay: 0.1s; z-index:0;}
.cont-visual.load .background {transform:scale(1); -ms-transform:scale(1); /* IE 9 */ -moz-transform:scale(1); /* Firefox */ -webkit-transform:scale(1); /* Safari and Chrome */ -o-transform:scale(1); /* Opera */}

.left-menu {position:absolute; left:var(--size100-15);}
.left-menu.is-sticky {margin-top:calc(var(--size100-60) + 20px);}
.left-menu> ul> li {margin-bottom:var(--size25-10);}
.left-menu> ul> li:last-child {margin-bottom:0;}
.left-menu> ul> li> a {display:block; width:137px; font-size:var(--font20-14); font-weight:500; line-height:1.2; letter-spacing:-0.04em; color:#808080;}
.left-menu> ul> li.active> a {font-weight:600; color:#991a26;}
.left-menu> ul> li .depth {display:none;}
.left-menu> ul> li:hover .depth {display:block; padding-top:13px;}
.left-menu> ul> li .depth>ul>li {padding:5px 0;}
.left-menu> ul> li .depth>ul>li>a {display:block; font-size:var(--font19-14); font-weight:500; line-height:1.2; letter-spacing:-0.04em; color:#808080;}
.left-menu> ul> li .depth>ul>li>a:hover {color:#991a26; text-decoration:underline;}
/* application body-shop 공통부분 business */
.business .business-tab {margin-bottom:var(--size60-20);}	
.business .business-tab>ul{display:flex;}
.business .business-tab>ul>li>a {display:block; position:relative; padding:0 0.91em; font-size:var(--font22-14); font-weight:500; line-height:1.2; letter-spacing:-0.02em; color:#808080;}
.business .business-tab>ul>li>a:before {content:''; position:absolute; width:1px; height:12px; background:#ddd; right:0; top:50%; margin-top:-6px;}
.business .business-tab>ul>li.active>a {color:#454545; text-decoration:underline;}
.business .business-tab>ul>li:first-child>a {padding-left:0;}
.business .business-tab>ul>li:last-child>a:before {display:none;}
.business .top-info .tit {margin-bottom:0.65em; font-size:var(--font40-28); font-weight:700; line-height:1.2; letter-spacing:-0.02em; color:#242424;}
.business .top-info .tit span {padding-left:0.38em; font-size:0.7em; font-weight:500; color:#808080;}
.business .top-info .txt {margin-bottom:0.5em; font-size:var(--font20-14); font-weight:400; line-height:1.5; letter-spacing:-0.02em; color:#454545;}
.business .top-info .txt:last-child {margin-bottom:0;}

.business-content .bg { margin-bottom:var(--size60-20);}
.business-content .info {display:flex; margin-bottom:var(--size80-40);}
.business-content .info .tit {width:180px; margin-right:var(--size60-20); font-size:var(--font35-20); font-weight:600; line-height:1.23; letter-spacing:-0.03em; color:#242424;}
.business-content .info .txt {flex:1 1 auto; min-width:0; width:1%; font-size:var(--font18-14); line-height:1.5; letter-spacing:-0.02em; color:#454545;}
.business-content .info .txt span {display:block; margin-top:1.3em;}

.business-content .group { margin-bottom:var(--size70-40);}
.business-content .group:last-child {margin-bottom:0;}
.business-content .col {display:flex;}
.business-content .col-tit {width:170px; padding-top:0.77em; margin-right:var(--size60-20); font-size:var(--font26-20); font-weight:600; line-height:1.3; letter-spacing:-0.03em; color:#242424; border-top:2px solid #991a26;}
.business-content .in {flex:1 1 auto; min-width:0; width:1%;}
.business-content .list-dots>li {position:relative; padding-left:0.78em; font-size:var(--font18-14); font-weight:400; line-height:1.6; letter-spacing:-0.02; color:#454545;}
.business-content .list-dots>li:before {content:''; position:absolute; left:0; top:0.65em; width:0.17em; height:0.17em; background:#505050;}

.business-content .table-wrap table {text-align:center; border-top:1px solid #868686;}
.business-content .table-wrap table th {height:70px; padding:12px 5px; border:1px solid #ddd; border-top-color:#868686; background:#f8f8f8; line-height:1.5; font-weight:500; letter-spacing:-0.04em; color:#242424;}
.business-content .table-wrap table td {height:70px; padding:12px 5px; border:1px solid #ddd; color:#454545; line-height:1.5; letter-spacing:-0.04em;}
.business-content .table-wrap tr th:first-child,
.business-content .table-wrap tr td:first-child {border-left:0;}
.business-content .table-wrap tr th:last-child,
.business-content .table-wrap tr td:last-child {border-right:0;}

/* esg */
.esg-bg {position:relative; margin-bottom:var(--size100-40); --siae515-170:clamp(10.625rem, -0.1563rem + 26.9531vw, 32.1875rem); height:var(--siae515-170);}
.esg-bg:before {content:''; position:absolute; width:100vw; height:100%; left:50%; top:0; background:url('/images/sub/esg-bg.jpg') no-repeat 50% 50%/cover; z-index:-1; transform:translateX(-50%);}

.esg .top-txt-wrap {margin-bottom:var(--size70-20); text-align:center;}
.esg .top-txt-wrap .tit {margin-bottom:0.43em; font-size:var(--font46-24); font-weight:700; line-height:1.2; letter-spacing:-0.02em; color:#242424;}
.esg .top-txt-wrap .txt {font-size:var(--font24-15); font-weight:400; line-height:1.33em; letter-spacing:-0.02em; color:#454545;}

.esg .tit-wrap {margin-bottom:var(--size70-20);}
.esg .tit-wrap .tit {position:relative; padding-left:2.83em; display:inline-flex; align-items:center; height:var(--size230-60); font-size:var(--font46-24); font-weight:800; line-height:1.2; letter-spacing:-0.02em; color:#242424;}
.esg .tit-wrap .tit:before {content:''; position:absolute; width:var(--size230-60); height:var(--size230-60); background:#ddd; z-index:-1; border-radius:100vh; left:0; animation:move_scale 2s linear infinite;}
.esg .tit-wrap .txt {margin-bottom:0.5em; font-size:var(--font20-14); font-weight:400; line-height:1.5; letter-spacing:-0.02em; color:#454545;}
.esg .tit-wrap .txt:last-child {margin-bottom:0;}

@keyframes move_scale {
  0%,100%{transform:scale(1);}
  50% {transform:scale(0.9);}
}

.esg .wrap>ul {display:flex; margin:0 calc(0px - var(--size15-5));}
.esg .wrap>ul>li {width:33.333%; padding:0 var(--size15-5);}
.esg .wrap>ul>li>ul>li {position:relative; padding-left:0.41em; font-size:var(--font17-14); font-weight:400; line-height:1.5; letter-spacing:-0.02em; color:#454545;}
.esg .wrap>ul>li>ul>li:before {content:''; position:absolute; width:0.12em; height:0.12em; background:#454545; left:0; top:0.65em;}
.esg .wrap .tit {position:relative; padding-left:1.5em; margin-top:1em; margin-bottom:10px; font-size:var(--font26-15); font-weight:600; line-height:1.3; letter-spacing:-0.02em; color:#242424;}
.esg .wrap .num {position:absolute; left:0; top:0.23em; display:inline-block; width:1.15em; height:1.15em; text-align:center; line-height:1.15em; color:#fff;}

.esg .gr1 .tit-wrap .in {width:100%; max-width:670px; margin:-40px 0 0 auto;}
.esg .gr1 .tit-wrap .tit {margin-left:-2.83em; color:#385723;}
.esg .gr1 .tit-wrap .tit:before {background:#c5e0b4;}
.esg .gr1 .wrap .num {background:#385723;}

.esg .gr2 .tit-wrap {text-align:center;}
.esg .gr2 .tit-wrap .in {width:100%; max-width:640px; margin:var(--size50-20) auto 0; text-align:left;}
.esg .gr2 .tit-wrap .tit {color:#c55a11;}
.esg .gr2 .tit-wrap .tit:before {background:#ffe699;}
.esg .gr2 .wrap .num {background:#c55a11;}

.esg .gr3 .tit-wrap {text-align:right;}
.esg .gr3 .tit-wrap .in {width:100%; max-width:720px; margin-top:-40px;  text-align:left;}
.esg .gr3 .tit-wrap .tit {padding-left:0; padding-right:2.83em; margin-right:-2.83em; color:#203864;}
.esg .gr3 .tit-wrap .tit:before {background:#bdd7ee; left:auto; right:0;}
.esg .gr3 .wrap .num {background:#203864;}

/* innovation */
.studies .top-txt-wrap {display:flex; align-items:center;}
.studies .top-txt-wrap .left {flex:1 1 auto; min-width:0; width:1%;}
.studies .top-txt-wrap .tit {margin-bottom:0.54em; font-size:var(--font35-20); font-weight:700; line-height:1.2em; letter-spacing:-0.02em; color:#242424;}
.studies .top-txt-wrap .txt {font-size:var(--font20-14); font-weight:400; line-height:1.5; letter-spacing:-0.04em; color:#454545;}
.studies .wrap .group-tit {margin-bottom:1.14em; font-size:var(--font35-20); font-weight:600; line-height:1.2; letter-spacing:-0.02em; color:#242424;}
.studies .wrap ul {display:flex; margin:0 calc(0px - var(--size15-5));}
.studies .wrap ul li {width:33.333%;  padding:0 var(--size15-5);}
.studies .wrap ul li .tit {margin:0.77em 0 0.38em; font-size:var(--font26-15); font-weight:500; line-height:1.2; letter-spacing:-0.04em; color:#242424;}
.studies .wrap ul li .txt {font-size:var(--font17-14); line-height:1.5; letter-spacing:-0.04em; color:#454545;}

/* contact us */
.contact .group-tit {margin-bottom:1.35em; font-size:var(--font40-24); font-weight:700; line-height:1.2; letter-spacing:-0.02em; color:#242424;}
.contact .col {display:flex; margin-bottom:var(--size60-20);}
.contact .col:last-child {margin-bottom:0;}
.contact .col-tit {width:270px; margin-right:var(--size80-20); padding-top:var(--size20-10); font-size:var(--font35-20); font-weight:600; line-height:1.2; letter-spacing:-0.02em; color:#242424; border-top:2px solid #991a26;}
.contact .col-tit span {display:block; margin-top:8px; font-size:0.54em; font-weight:500; line-height:1.2; letter-spacing:-0.02em; color:#808080;}
.contact .col .in {padding-top:var(--size20-10); flex:1 1 auto; min-width:0; width:1%;}
.contact .col .in .tt {margin-bottom:0.58em; font-size:var(--font19-15); font-weight:500; line-height:1.4; letter-spacing:-0.02em; color:#454545;}
.contact .col .in .txt {margin-bottom:0.71em; font-size:var(--font17-14); font-weight:400; line-height:1.76; letter-spacing:-0.02em; color:#454545;}
.contact .col .in .txt:last-child {margin-bottom:0;}

/* suppliers */
.suppliers {}
.suppliers .wrap {margin-bottom:var(--size100-30);}
.suppliers .wrap .col {display:flex; align-items:center; margin-bottom:var(--size100-30);}
.suppliers .wrap .col:nth-child(even) {flex-direction:row-reverse;}
.suppliers .wrap .col:last-child {margin-bottom:0;}
.suppliers .wrap .txt-wrap {flex:1 1 auto; min-width:0; width:1%; padding-right:30px;}
.suppliers .wrap .col:nth-child(even) .txt-wrap {padding-left:var(--size100-15); padding-right:0;}
.suppliers .wrap .col:first-child .img {position:relative;}
.suppliers .wrap .col:first-child .img:before {content:''; position:absolute; z-index:-1; right:calc(0px - var(--size50-20)); top:calc(0px - var(--size50-20)); width:100%; height:100%; background:#991a26;}
.suppliers .wrap .col .tit {margin-bottom:1em; font-size:var(--font30-16); line-height:1.5; font-weight:600; letter-spacing:-0.02em; color:#242424;}
.suppliers .wrap .col .txt {font-size:var(--font20-14); line-height:1.5; letter-spacing:-0.02em; color:#454545;}
.suppliers .info-txt {margin-bottom:var(--size100-30);display:flex; justify-content:center; font-size:var(--font20-14); line-height:1.5; letter-spacing:-0.02em; color:#454545;}