@charset "utf-8";


/**************** CSS 리셋**********************/

html, body {
max-width: 100%;
overflow-x: hidden;
}

body 		{margin:0; padding:0; text-align:center; background-color:#ffffff; font-family: "Pretendard Variable", "Noto Sans", "Noto Sans KR", sans-serif, "Malgun Gothic"; color:#181818; letter-spacing:0;}
footer, nav, header, section		{display:block; padding:0; margin:0; width:100%; height:auto;}

input, div, p, dl, dt, dd, ul, li, ol, span			{margin:0; padding:0;}
ul li					{list-style:none;}
img						{border:none; margin:0; padding:0;  width:100%;}
a							{text-decoration:none; margin:0; padding:0;}

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');



.f-title       {font-family:"Pretendard Variable"; font-weight: 500; font-size: 5rem;}
.f-subtitle    {font-family:"Pretendard Variable"; font-weight: 600; font-size: 2.8rem;}
.f-body        {font-family:"Pretendard Variable"; font-weight: 400; font-size: 0.9rem;}

@media (max-width: 480px) {
  .mobile-br  {display: block;}
  .desktop-br {display: none;}
  .mobile-bold {font-weight: 600;}
  .desktop-bold {display: none;}
}

@media (min-width: 481px) {
  .mobile-br  {display: none;}
  .desktop-br {display: block;}
  .mobile-bold {display: none;}
  .desktop-bold {font-weight: 600;}
}

/**************** main  **********************/

section.page-top               {position:relative;}
section.page-top .main-top-bg  {z-index:1; line-height:0;background: rgba(0, 0, 0, 0.3);}

@media (max-width: 1080px) {
  section .main-top-bg {position: relative;width: 100%;min-height: 400px;height: 70vh;overflow: hidden;}
  section .main-top-bg img {width: 100%;height: 100%;object-fit: cover;object-position: center;display: block;}
}

@media (max-width: 480px) {
  section .main-top-bg {height: 60vh; filter: brightness(50%);}
}

/*.main-top-bg {z-index:1; line-height:0;background: rgba(0, 0, 0, 0.3);position: relative;width: 100%;min-height: 500px;height: 100vh; !* 원하는 비율에 따라 조절 가능 *!background-image: url('/img/main_bg.jpg');background-size: cover;     !* 이미지 꽉 채우기 *!background-position: center;background-repeat: no-repeat;}*/
/*section.page-top .main-top-bg::after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); z-index: 2;}*/
.header-wrap                   {zoom:1; margin:0 auto; text-align:center; position:absolute; top:0px; left:0; width:100%; z-index: 9999}
.header-wrap:after             {clear:both; height:0; content:"."; display:block; visibility:hidden;}
.header-wrap .header-logo      {float:left; width:270px; margin:30px 0 0 80px;}
.header-wrap .header-nav       {float:right; margin:65px 40px 0 0; position:relative;}
.header-wrap .header-nav a     {font-weight: 600; font-size: 1.3rem; font-family:"Noto Sans KR", "sans-serif"; color:#ffffff; margin:0 30px;}
.header-wrap .header-right     {float:right; margin:55px 80px 0 0; font-size: 1.25rem; font-family:"Noto Sans KR"; position:relative;}
.header-right p                {display: inline-block; text-align:center; color:#ffffff; padding-right:50px;}
.header-right #market-data-display {text-align:center; color:#ffffff; padding-right:50px;list-style: none;
  margin: 0;width: 35px;height: 50px;display: inline-block;overflow: hidden;position: relative;}
.header-right #market-data-display li {display: none; transition: all 0.5s ease-in-out;position: absolute;
  width: 100%;height: 100%;text-align: center;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;line-height: 1.4;}
.header-right a                {display: inline-block; width:42px;}
.header-right a.m-menu         {display:none;}
.lang-layer                    {position:absolute; top:75px; right:-42px; background-color:#ffffff; width:130px; height:135px; border-radius:8px; padding-top:5px;}
.lang-layer.nav                {top:50px; left: calc(-2vw - 3px); width:190px; height:160px;}
.lang-layer em                 {background: url("../img/layer_bg.png") no-repeat 0 0;
                                width: 19px; height: 14px; position: absolute; left: 50%; top: -13px; margin-left: -9px;}
.lang-layer a                  {display:block; padding-top:12px; text-align:left; width:100%; color:#181818 !important; font-size:1.25rem !important; font-family:"Pretendard Variable";}
.lang-layer a img              {width:27px; height:19px; padding-left:13px;}
.lang-layer.nav a              {text-align:center; margin:0; font-weight:400 !important;}
.lang-layer.nav a:hover        {text-decoration:underline; font-weight:600 !important;}
.header-nav-list               {display:none; float:right; margin:50px 25px 0 0;}
.header-nav-list img           {width:27px; height:19px;}
.list-layer                    {z-index:999; position:fixed; right:0; top:0; background-color:#3f3f3f; width:65%; height:100%;}
.list-layer-top                {zoom:1; padding:30px; display:flex; justify-content: center; align-items: center; margin-left: 20px;}
.list-layer-top:after          {clear:both; height:0; content:"."; display:block; visibility:hidden;}
.list-layer-top a              {float:left; padding-right:15px;}
.list-layer-top a:last-child   {float:right; padding-right:0;}
.list-layer-nav                {width:70%; text-align:center; margin:0 auto;}
.list-layer-nav a              {display:block; font-weight: 700; font-size: 1.25rem; font-family:"Noto Sans KR"; color:#ffffff; padding:15px 0;
                                border-bottom:1px solid #5a5a5a;}
.list-layer-nav a:nth-child(2)  {border:none}
.list-layer-nav a.depth        {font-weight: 400; font-size: 0.9rem; border:none;}
.list-layer-nav a.depth:last-child  {border-bottom:1px solid #5a5a5a;}
.list-layer-nav a img           {width:12px; height:8px; vertical-align:3px; padding-left:5px;}

#mobileNav {display: none;transition: all 0.3s ease;}
#mobileNav.open {display: block;}
.hamburger-img {width: 40px !important; height: 40px !important;}


@media (max-width: 1560px) {
  .header-wrap .header-logo      {margin:40px 0 0 60px; width:220px;}
  .header-wrap .header-nav > a   {margin:0 15px; font-size: 1.2rem;}
  .header-right p                { padding-right:20px;}
  .lang-layer.nav                {left: calc(-3vw - 6px);}
}


@media (max-width: 1080px) {
  .header-wrap .header-logo      {margin:40px 0 0 60px; width:180px;}
  .header-wrap .header-nav       {display:none;}
  .header-wrap .header-right a   {display:none;}
  .header-right a.m-menu         {display:inline-block; padding-right:15px;}
  .header-nav-list               {display:block;}
  .header-wrap .header-right     {margin:50px 15px 0 0; font-size:1rem;}
}


@media (max-width: 480px) {
  .header-wrap .header-logo      {margin:30px 0 0 20px; width:180px;}
  .header-wrap .header-right     {margin:40px 15px 0 0; font-size:1rem;}
}


.main-content                  {position:absolute; top:370px; left:170px; color:#ffffff; text-align:left; z-index: 10;}
.main-content p                {padding-bottom:70px;}
.main-content .f-subtitle      {font-size: 4rem; font-family:"Noto Sans KR"; font-weight: 700;}
.main-content .f-body          {font-size: 1.8rem; line-height:45px;}
.main-content .btn-more        {display:inline-block; font-weight: 600; font-size:1.6rem; font-family:"Noto Sans KR"; color:#ffffff; border:1px solid #ffffff; border-radius:30px; height:44px; line-height:40px; padding:0 20px; align-content: center}

@media (max-width: 1560px) {
  .main-content                  {left:150px;}
  .main-content .f-subtitle      {font-size: 3.5rem;}
  .main-content .f-body          {font-size: 1.6rem;}
}

@media (max-width: 1220px) {
  .main-content                  {top:350px; left:130px}
  .main-content p                {padding-bottom:40px;}
  .main-content .f-subtitle      {font-size: 3.5rem;}
  .main-content .f-body          {font-size: 1.4rem; line-height:38px;}
}

@media (max-width: 1100px) {
  .main-content                  {top:300px; left:100px}
  .main-content p                {padding-bottom:30px;}
  .main-content .f-subtitle      {font-size: 3rem;}
  .main-content .f-body          {font-size: 1.1rem; line-height:32px;}
  .main-content .btn-more        {font-size:1.1rem; height:34px; line-height:30px; padding:0 15px; align-content: center}
}

@media (max-width: 840px) {
  .main-content                  {top:270px; left:80px}
  .main-content p                {padding-bottom:20px;}
  .main-content .f-subtitle      {font-size: 2.5rem;}
  .main-content .f-body          {font-size:0.9rem; line-height:30px;}
  .main-content .btn-more        {font-size:0.9rem; height:24px; line-height:30px; padding:0 15px; align-content: center}
}

@media (max-width: 600px) {
  .main-content                  {top:150px; left:70px}
  .main-content p                {padding-bottom:20px;}
  .main-content .f-subtitle      {font-size: 2rem;}
  .main-content .f-body          {font-size:1rem; line-height:28px;}
  .main-content .btn-more        {font-size:1rem; height:24px; line-height:28px; padding:0 15px; align-content: center}
}

@media (max-width: 480px) {
  .main-content                  {top:180px; left:30px}
  .main-content p                {padding-bottom:20px;}
  .main-content .f-subtitle      {font-size: 1.5rem; line-height:36px;}
  .main-content .f-body          {font-size:1rem; line-height:24px;}
  .main-content .btn-more        {font-size:1rem; height:24px;; line-height:24px; padding:0 10px; align-content: center}
}


.main-about-wrap                {position:relative; z-index:1; line-height:0;}
.main-about-bg.filter1          {filter: brightness(50%);}
.main-about-bg.filter2          {filter: brightness(60%);}
.main-about-bg.filter3          {filter: brightness(105%);}

@media (max-width: 480px) {
  .main-about-bg {width: 100%;height: 50vh;position: relative;overflow: hidden;}
  .main-about-bg img {width: 100%;height: 100%;object-fit: cover;display: block;}
}

.main-about-content             {position:absolute; width:100%; top:50%; left:0; transform: translateY(-50%); color:#ffffff; text-align:center; line-height:25px;}
.main-about-content p.f-subtitle       {font-size: 3rem; font-weight: 700; padding-bottom:70px; font-family:"Noto Sans KR";}
.main-about-content p.f-body           {font-size: 2.2rem; font-weight: 300; line-height: 1.5;}
.main-about-content-img                {float:left; width:350px;}
.main-about-content.with-img           {width: 1330px;top: 25%;left: 15%;position: absolute;}
.main-about-content.with-img p.f-subtitle   {float:left; width:auto; text-align:left; padding-left:50px; padding-top:160px;}
.main-about-content.with-img p.f-body   {float:left; width:auto; text-align:left; padding-left:50px; line-height:1.5;}

@media (max-width: 1560px) {
  .main-about-content.with-img                {top:50%; left: 0;}
  .main-about-content-img                     {float:none; padding:0; position:absolute;top:50%; left:50%; transform: translate(-50%, -50%); text-align:center; filter: brightness(30%); }
  .main-about-content-img-wrap                  {z-index:10; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); width:100%; text-align: center;}
  .main-about-content.with-img                  {width:100%;}
  .main-about-content.with-img p.f-subtitle     {float:none; padding:0; padding-bottom:70px; text-align: center;}
  .main-about-content.with-img p.f-body         {float:none; padding:0; text-align: center;}
}


@media (max-width: 1100px) {
  .main-about-content-img                {width:250px;}
  .main-about-content p.f-subtitle       {font-size: 2.7rem; padding-bottom:50px;}
  .main-about-content p.f-body           {font-size: 1.75rem;}
  .main-about-content.with-img p.f-subtitle {padding-bottom:50px;}
}

@media (max-width: 840px) {
  .main-about-content-img                {width:150px;}
  .main-about-content p.f-subtitle       {font-size: 2rem; padding-bottom:20px;}
  .main-about-content p.f-body           {font-size: 1rem;}
  .main-about-content.with-img p.f-subtitle {padding-bottom:20px;}
}

@media (max-width: 600px) {
  .main-about-content-img                {width:120px;}
  .main-about-content p.f-subtitle       {font-size: 1.5rem; padding-bottom:15px;}
  .main-about-content p.f-body           {font-size: 1rem;}
  .main-about-content.with-img p.f-subtitle {padding-bottom:15px;}
}

@media (max-width: 480px) {
  .main-about-content-img                {width:200px;}
  .main-about-content p.f-subtitle       {font-size: 1.4rem; padding-bottom:15px;}
  .main-about-content p.f-body           {font-size: 0.9rem; padding:12px;}
  .main-about-content.with-img p.f-subtitle {padding-bottom:15px;}
}


section.main-product            {background-color:#e7e6e6; padding-bottom:150px;}
.main-product-title             {padding:200px 0 120px 0; text-align:center; font-size:3rem; font-weight:700; font-family:"Noto Sans KR";}
.main-product-wrap              {width:1100px; text-align: center; margin:0 auto;}
.main-product-wrap a            {position:relative; display:inline-block; width:340px; height:260px; overflow:hidden; border-radius:30px; margin-bottom:30px;}
.main-product-wrap a:nth-child(2) {margin:0 30px 30px 30px;}
.main-product-wrap a:nth-child(5) {margin:0 30px 30px 30px;}
.main-product-wrap a img        {filter: brightness(50%);}
.main-product-wrap a span       {position:absolute; width:360px; top:50%; left:50%; transform: translate(-50%, -50%); font-size:2.2rem; font-weight:700; font-family:"Noto Sans KR"; color:#ffffff;}

@media (max-width: 1100px) {
  .main-product-title       {padding:100px 0;}
  .main-product-wrap        {width:100%;}
  .main-product-wrap a      {width:40%; margin:20px 2%;}
  .main-product-wrap a:nth-child(2) {margin:20px 2%;}
  .main-product-wrap a:nth-child(5) {margin:20px 2%;}
  .main-product-wrap a span         {width:100%; font-size:2rem;}
}

@media (max-width: 840px) {
  section.main-product            {padding-bottom:70px;}
  .main-product-title             {padding:70px 0; font-size:2.2rem;}
  .main-product-wrap a span       {font-size:1.4rem;}
}

@media (max-width: 500px) {
  .main-product-wrap a            {height:180px;}
  .main-product-wrap a span       {font-size:1.1rem;}
  html[lang="zh"] .main-product-wrap a span {font-size:0.9rem;}
}


section.main-esg                  {background-image: linear-gradient(rgba(0, 0, 0, 0.827), rgba(0, 0, 0, 0.8)), url("../img/main_esg_bg.jpg");}
.main-esg-title                   {padding:100px 0; text-align:center; font-size:4.4rem; font-weight:700; font-family:"Noto Sans KR"; color:#ffffff; letter-spacing:10px;}
.main-esg-box-wrap                {zoom:1; width:1100px; text-align:center; margin:0 auto; padding-bottom:200px;}
.main-esg-box-wrap:after          {clear:both; height:0; content:"."; display:block; visibility:hidden;}
.main-esg-box                     {display:inline-block; width:340px; overflow:hidden; border-radius:25px; margin:0 10px;}
.main-esg-box-img                 {line-height:0; position:relative; height:330px;}
.main-esg-box-img img             {height:330px; width:auto;}
.main-esg-box-img.img-esg1 img    {position:absolute; left:-60px;}
.main-esg-box-text                {background-color:#ffffff; padding:25px 20px 0 20px; height:200px;}
html[lang="en"] .main-esg-box-text {height:245px;}
.main-esg-box-text p              {text-align:left; padding:0;}
.main-esg-box-text p:first-child  {font-weight: 700; font-size:2.5rem; font-family:"Noto Sans KR"; padding: 10px 0;}
 html[lang="en"] .main-esg-box-text p:first-child {padding: 10px 0;}
.main-esg-box-text p:last-child   {font-size:1rem; line-height:26px; font-family:"Pretendard Variable";}

@media (max-width: 1100px) {
  .main-esg-box-wrap        {width:100%; padding-bottom:100px;}
  .main-esg-box             {width:30%; margin:1%;}
  .main-esg-box-text p:first-child  {font-size:1.5rem;}
  .main-esg-box-text p:last-child   {font-size:0.75rem; line-height:20px;}
  .main-esg-box-text                {height:150px; padding:10px 0 0 10px;}
  .main-esg-box-img.img-esg1 img    {left:-100px;}
}

@media (max-width: 840px) {
  .main-esg-title             {padding:70px 0; font-size:3.12rem;}
  .main-esg-box               {width:90%;}
  .main-esg-box-img           {float:left; width:35%; height:200px; overflow:hidden;}
  .main-esg-box-img.img-esg1 img    {left:-100px;}
  .main-esg-box-img.img-esg2 img    {position:absolute; left:-100px;}
  .main-esg-box-text          {float:left; width:65%; height:200px; padding:0;}
  .main-esg-box-text p        {padding:10px 0 10px 15px;}
  .main-esg-box-text p:first-child  {font-size:1.9rem; padding:20px 0 0 15px;}
  .main-esg-box-text p:last-child   {font-size:0.93rem; line-height:30px;}
}

@media (max-width: 540px) {
  .main-esg-box-img           {height:200px;}
  .main-esg-box-text          {height:200px;}
  .main-esg-box-text p        {padding:10px 0 10px 15px;}
  .main-esg-box-text p:first-child  {font-size:1.6rem;}
  .main-esg-box-text p:last-child   {font-size:0.9em; line-height:24px;}
  .main-esg-box-img.img-esg1 img    {left:-160px;}
  html[lang="en"] .main-esg-box-text {height:310px;}
  html[lang="en"] .main-esg-box-img  {height:310px;}
  html[lang="en"] .main-esg-box-text p:first-child {padding: 20px 15px 0 15px;}
}


section.main-activities           {background-image: linear-gradient(rgba(0, 0, 0, 0.427), rgba(0, 0, 0, 0.4)), url("../img/main_activities.jpg");
                                  background-size:cover; background-position:center; padding-bottom:100px;}
.main-activities-title            {padding:100px 0; text-align:center; font-size:4.4rem; font-weight:700; font-family:"Noto Sans KR"; color:#ffffff;}
.main-activities-text             {color:#ffffff; font-family:"Pretendard Variable"; font-size:1.5rem; line-height:90px; font-weight: 400; padding-bottom:60px;}

@media (max-width: 840px) {
  .main-activities-title      {padding:70px 0; font-size:3.12rem;}
  .main-activities-text       {font-size:1.12rem; line-height:60px; padding-bottom:50px;}
}


footer                          {background-color:#ffffff; padding: 20px 0;}
.footer-nav                     {margin:0 50px; padding:20px 0; border-bottom:1px solid #cdcdcd; text-align:left;}
.footer-nav a                   {display:inline-block; font-size:1.25rem; font-weight:700; color:#181818; font-family:"Noto Sans KR";}
.footer-nav span                {display:inline-block; padding:0 100px; font-weight:200; }
.fooer-info                     {zoom:1; padding:50px; font-size:1.43rem; line-height:35px; text-align:left;}
.fooer-info:after               {clear:both; height:0; content:"."; display:block; visibility:hidden;}
.footer-addr1                   {float:left; padding-right:100px;}
.footer-addr2                   {float:left;}
.footer-addr1 p:first-child, .footer-addr2 p:first-child     {font-weight:700; font-family:"Noto Sans KR";}
.footer-addr1 p:last-child, .footer-addr2 p:last-child      {font-weight:400; font-family:"Pretendard Variable";}
.footer-logo                     {float:right; width:280px; padding-top:20px;}


@media (max-width: 1560px) {
  .footer-logo                    {width:220px;}
  .footer-nav span                {padding:0 70px;}
  .fooer-info                     {padding:50px; font-size:1.31rem; line-height:30px;}
  .footer-addr1                   {padding-right:50px;}

}


@media (max-width: 1350px) {
  .footer-logo                    {width:180px;}
  .footer-nav a                   {font-size:1.37rem;}
  .footer-nav span                {padding:0 50px;}
  .fooer-info                     {padding:30px 50px; font-size:1rem; line-height:26px;}

}

@media (max-width: 1100px) {
  .footer-nav                     {margin:0 3%;}
  .footer-logo                    {display:none;}
  .footer-nav span                {padding:0 30px;}
  .fooer-info                     {padding:30px 3%; font-size:1rem; line-height:26px;}
  .footer-addr1                   {width:49%; padding-right:2%;}
  .footer-addr2                   {width:49%;}
}

@media (max-width: 840px) {
  .footer-nav                     {margin:0 2% ;}
  .footer-nav a                   {font-size:0.93rem; color:#ffffff;}
  .footer-nav span                {padding:0 20px; color:#ffffff;}
  .fooer-info                     {padding:30px 2%; font-size:0.68rem; line-height:20px; color:#ffffff;}
  footer                          {background-color:#3f3f3f;}
}

@media (max-width: 550px) {
  footer                          {padding:10px 0;}
  .footer-nav a                   {font-size:0.75rem;}
  .footer-nav span                {padding:0 5px;}
  .fooer-info                     {display:flex; flex-direction: column; gap: 10px; padding:30px 2%; font-size:0.56rem; line-height:16px; letter-spacing:-0.5px;}
  .footer-addr1                   {width:100%; line-height:24px;}
  .footer-addr2                   {width:100%; line-height:24px;}
  .footer-addr1 p:first-child, .footer-addr2 p:first-child     {font-weight:700; font-size: 1.1rem;padding-bottom: 10px;}
  .footer-addr1 p:last-child, .footer-addr2 p:last-child      {font-weight:400; font-size: 1rem; padding-bottom: 10px;}
}


/**************** about  **********************/

section.page-top .top-bg              {z-index:1; line-height:0; height:495px;}
section.page-top .top-bg.about        {background-image: linear-gradient(rgba(0, 0, 0, 0.327), rgba(0, 0, 0, 0.3)), url("../img/about_top.jpg");
                                      background-size:cover; background-position:0 30%; }
.top-bg p                             {color:#ffffff; font-weight:600; font-size:6rem; font-family:"Pretendard Variable"; text-align:left; line-height:25px;
                                      position:absolute; left:150px; bottom:80px;}

@media (max-width: 1560px) {
  .top-bg p        {font-size:5.3rem; left:30px;}
}

@media (max-width: 1100px) {
  section.page-top .top-bg              {z-index:1; line-height:0; height:300px;}
}

@media (max-width: 819px) {
  .header-wrap        {height:100px; background-color:#3f3f3f;}
  .header-wrap.main   {position:absolute; background-color:transparent;}
  .top-bg p           {font-size:3.8rem; left:20px; bottom:50px;}

}

@media (max-width: 550px) {
  section.page-top .top-bg          {height:250px;}
  .top-bg p                         {font-size:2.5rem; left:15px; bottom:30px;}
}


.about-image-wrap                     {display: flex; justify-content: center; align-items: center;position:relative; z-index:1; line-height:0; height:1000px;}
html[lang="en"] .about-image-wrap     {display: flex; justify-content: center; align-items: center;position:relative; z-index:1; line-height:0; height:1250px;}
.about-image-wrap.bg1                 {background-image: linear-gradient(rgba(0, 0, 0, 0.527), rgba(0, 0, 0, 0.5)), url("../img/about_img1.jpg");
                                      background-size:cover; background-position:0 30%;}
.about-image-wrap.bg2                 {background-image: linear-gradient(rgba(0, 0, 0, 0.527), rgba(0, 0, 0, 0.5)), url("../img/about_img2.jpg");
                                      background-size:cover; background-position:0 30%;}
.about-image-wrap.bg3                 {background-image: linear-gradient(rgba(0, 0, 0, 0.527), rgba(0, 0, 0, 0.5)), url("../img/about_img3.jpg");
                                      background-size:120%; background-position:10% 80%;}
.left-content, .right-content         {width: 100%;height: 100%;padding: 60px;display: flex;align-items: center;justify-content: center;}
.btn-show-right, .btn-show-left       {position: absolute;top: 50%;transform: translateY(-50%);z-index: 10;}
.btn-show-right                       {right: 30px;}
.btn-show-left                        {left: 30px;}
.btn-show-right img, .btn-show-left img {width:14px;height:29px;cursor: pointer;}
.about-image-content                  {width:100%; top:50%; left:0;color:#ffffff; text-align:center; line-height:25px;}
.about-image-content .f-subtitle      {font-size: 3.75rem; padding-bottom:90px; line-height:25px; font-family:"Noto Sans KR"; font-weight: 700;}
.about-image-content .f-body          {font-size: 1.75rem; line-height:70px; font-family:"Pretendard Variable"; font-weight: 400; width: 80%; margin: 0 auto;}
html[lang="en"] .about-image-content .f-body {font-size: 1.75rem; line-height:70px; font-family:"Pretendard Variable"; font-weight: 400; width: 90%; margin: 0 auto;}
.about-image-content .f-body.short-line-height {font-size: 1.75rem; line-height:55px; font-family:"Pretendard Variable"; font-weight: 400;}
html[lang="en"] .about-image-content .f-body.short-line-height {font-size: 1.75rem; line-height:55px; font-family:"Pretendard Variable"; font-weight: 400; width: 90%; margin: 0 auto;}

section.sales                         {background-color:#ffffff; padding-bottom:100px;}
.about-content-title                  {font-size: 3.12rem; line-height:35px; font-family:"Noto Sans KR"; font-weight: 700; padding:100px 0;}
.about-content-img                    {width:1100px; margin:0 auto; text-align:center;}
.about-sales-text                     {width:1100px; margin:0 auto; text-align:center; padding:15px;  border:1px solid #000000; margin-top:50px;}
.about-sales-text p                   {text-align:left; font-size:1.06rem; line-height:35px; font-family:"Pretendard Variable"; font-weight:400; letter-spacing:0;}

section.department                    {background-color:#f6f6f6; padding-bottom:100px;}

section.history                       {background-color:#ffffff; padding-bottom:100px;}
.history-wrap                         {width:1100px; margin:0 auto; text-align:center;}
.history-line                         {zoom:1; border-top:5px solid #e5e5e5; margin:0 30px 60px 30px;}
.history-line:after                   {clear:both; height:0; content:"."; display:block; visibility:hidden;}
.timeline                             {position:relative; text-align:left; float:left; width:33%;}
.timeline:last-child                  {width:32%;}
.history-line .timeline:last-child    {float:right;}
.timeline .green-dot                  {position:absolute; top:-10px; background-color:#00d46e; width:15px; height:15px; border-radius:10px;}
.timeline .year                       {font-size:2.18rem; line-height:35px; font-family:"Noto Sans KR"; font-weight: 700; padding-top:40px;}
.timeline .event                      {font-size:1rem; line-height:25px; font-family:"Pretendard Variable"; font-weight:400; padding-top:20px;}
.timeline .event span                 {font-size:0.81rem; letter-spacing:-0.9px;}
.timeline.start .green-dot            {top:-15px; width:22px; height:22px; border-radius:15px;}
.timeline.start .year                 {font-size:2.5rem;}
.timeline.start .event                {font-size:1.25rem; font-weight:600;}

section.certification                 {background-color:#ffffff; padding-bottom:100px;}

@media (max-width: 1100px) {
  .about-image-wrap                     {height:600px;}
  html[lang="en"] .about-image-wrap                     {height:600px;}
  .about-content-img                    {width:90%;}
  .about-sales-text                     {width:90%;}
  .history-wrap                         {width:96%;}
  .about-image-content .f-subtitle      {font-size: 2.5rem; }
  .about-image-content .f-body          {font-size: 1.25rem; line-height:50px;}
  html[lang="en"] .about-image-content .f-body          {font-size: 1.25rem; line-height:50px;}
  .about-image-content .f-body.short-line-height          {font-size: 1.25rem; line-height:50px;}
  html[lang="en"] .about-image-content .f-body.short-line-height          {font-size: 1.25rem; line-height:50px;}
  .left-content, .right-content         {padding: 50px;}
}

@media (max-width: 840px) {
  .about-image-content .f-subtitle      {font-size: 1.25rem; padding-bottom:40px;}
  .about-image-content .f-body          {font-size: 1rem; line-height:30px;}
  .about-image-content .f-body.short-line-height          {font-size: 1rem; line-height:30px;}
  .about-image-wrap.bg3                 {background-size:180%;}
  .timeline .year                       {font-size:1.75rem; line-height:30px; padding-top:20px;}
  .timeline .event                      {font-size:0.68rem; line-height:24px; padding-top:10px; letter-spacing:-0.3px;}
  .timeline .event span                 {font-size:0.62rem;}
  .timeline.start .year                 {font-size:2.18rem;}
  .timeline.start .event                {font-size:1rem; }
  .left-content, .right-content         {padding: 40px;}
}

@media (max-width: 550px) {
  .about-content-title                  {font-size:2.5rem;padding:70px 0;}
  .about-image-wrap                     {height:520px;}
  html[lang="en"] .about-image-wrap     {height:520px;}
  html[lang="en"] .about-image-wrap.right-open {height: 1000px;}
  .about-image-content .f-subtitle      {font-size: 1.8rem; padding-bottom:20px;line-height:1.5;}
  .about-image-content .f-body          {font-size: 1rem; line-height:28px; padding: 0 15px; width: 90%; margin: 0 auto;}
  html[lang="en"] .about-image-content .f-body          {font-size: 1rem; line-height:28px; padding: 0 15px; width: 90%; margin: 0 auto;}
  .about-image-content .f-body.short-line-height {font-size: 1rem; line-height:24px; padding: 0 15px;}
  html[lang="en"] .about-image-content .f-body.short-line-height {font-size: 1rem; line-height:24px; padding: 0 15px;}
  .about-sales-text p                   {font-size:0.75rem; line-height:24px;}
  .timeline .year                       {font-size:1rem; line-height:25px; padding-top:20px;}
  .timeline .event                      {font-size:0.8rem; line-height:21px; padding-top:10px; letter-spacing:-0.2px;}
  .timeline .event span                 {font-size:0.8rem;}
  .history-line                         {margin:0 5px 30px 5px;}
  .history-line .timeline:first-child   {padding-right:5px;}
  .timeline.start .green-dot            {top:-15px; width:22px; height:22px; border-radius:15px;}
  .timeline.start .year                 {font-size:1.25rem;}
  .timeline.start .event                {font-size:0.62rem;}
  .left-content, .right-content         {padding: 10px;}
  .btn-show-right {right: 10px;}
  .btn-show-left {left: 10px;}
}


/**************** CEO’s Message  **********************/

section.message1                      {background-image: linear-gradient(rgba(255, 255, 255, 0.527), rgba(255, 255, 255, 0.5)), url("../img/ceo_bg.jpg"); background-size:cover; background-position:50% 20%;}
.message1-wrap                        {width:1100px; margin:0 auto; text-align:center; background-color:rgb(255,255,255,0.5); }
.message1-wrap div                    {text-align:left; font-size:1.3rem; font-family:"Noto Sans KR"; line-height:50px; font-weight: 400; padding:200px 100px 150px 100px;}
.message1-wrap div p                  {padding:10px 0;}
.message1-wrap div p img              {width:210px; height:auto;}
.message1-wrap div span               {display:inline-block; float:right; padding-right:50px;}
.message1-wrap div span img           {width:350px; height:auto;}

section.management                      {width:1100px; margin:0 auto; text-align:center; padding:100px 0;}
section.management div                  {padding:60px 0; margin-bottom:20px;}
.management .title                      {font-size: 3.12rem; font-family:"Noto Sans KR"; font-weight: 400; line-height:28px; color:#ffffff; padding-bottom:50px;}
.management .text                       {font-size: 1.43rem; font-family:"Pretendard Variable"; font-weight: 400; line-height:40px; color:#ffffff;}
.management-motto                       {background-image: linear-gradient(rgba(0, 0, 0, 0.527), rgba(0, 0, 0, 0.5)), url("../img/ceo_img1.jpg"); background-size:cover; background-position:0 50%;}
.management-vision                      {background-image: linear-gradient(rgba(0, 0, 0, 0.527), rgba(0, 0, 0, 0.5)), url("../img/ceo_img2.jpg"); background-size:cover; background-position:0 50%;}
.management-value                       {background-image: linear-gradient(rgba(0, 0, 0, 0.527), rgba(0, 0, 0, 0.5)), url("../img/ceo_img3.jpg"); background-size:cover; background-position:0 40%;}

@media (max-width: 1100px) {
  .message1-wrap                        {width:100%;}
  section.management                    {width:96%;}
  .message1-wrap div                    {text-align:left; font-size:0.87rem; line-height:28px; padding:100px 70px;}
  .message1-wrap div span img           {width:200px;}
  .message1-wrap div p img              {width:120px;}
  .management .title                    {font-size: 2.62rem;}
  .management .text                     {font-size: 1.25rem; line-height:35px;}
}

@media (max-width: 550px) {
  .message1-wrap div                    {text-align:left; font-size:0.9rem; line-height:28px; padding:70px 30px;}
  .message1-wrap div span               {padding-right:10px;}
  .message1-wrap div span img           {width:120px;}
  .message1-wrap div p img              {width:80px;}
  .management .title                    {font-size: 2rem;  padding-bottom:20px;}
  .management .text                     {font-size: 0.9rem; line-height:28px;}
  section.management div                {padding:30px 0; margin-bottom:5px;}
}



/**************** Vision  **********************/

section.vision-text1                    {background-image: linear-gradient(rgba(0, 0, 0, 0.527), rgba(0, 0, 0, 0.5)), url("../img/vision_bg.jpg"); background-size:cover; background-position:0 50%;}
section.vision-text1 div                {font-size: 1.87rem; font-family:"Noto Sans KR"; font-weight: 400; line-height:75px; color:#ffffff; padding:200px 0; width: 80%; margin: 0 auto;}

section.vision-text2                    {background-color:#ebebeb; padding:100px 0;}
section.vision-text2 div                {font-size: 2rem; font-family:"Noto Sans KR"; font-weight: 500; line-height:65px; width: 80%; margin: 0 auto; text-align:center;}

section.vision-point                    {display: flex; justify-content: center; position: relative; zoom:1; margin:0 auto; text-align:center; background-color:#ebebeb; padding-bottom:100px;}
section.vision-point:after              {clear:both; height:0; content:"."; display:block; visibility:hidden;}
.vision-point-wrapper                   {display: flex; justify-content: center; position: relative; width: 85%; gap: 20px;}
.vision-point-box                       {display:inline-block; width:340px; height:780px; border-radius:57px; color:#ffffff; margin:0 10px; position:relative; overflow: hidden;}
.vision-point-box div                   {position:absolute; width:100%; top:50%; left:0; transform: translateY(-50%);}
.vision-point-box p.title               {font-size: 2.5rem; font-family:"Noto Sans KR"; font-weight: 700; line-height:40px; padding-bottom:50px;}
.vision-point-box p.text                {font-size: 1.12rem; font-family:"Noto Sans KR"; font-weight: 300; line-height:43px;}
.vision-point-box.img1                  {background-image: linear-gradient(rgba(0, 0, 0, 0.527), rgba(0, 0, 0, 0.5)), url("../img/ceo_img1.jpg"); background-size:560% 100%; background-position:61% 50%;}
.vision-point-box.img2                  {background-image: linear-gradient(rgba(0, 0, 0, 0.527), rgba(0, 0, 0, 0.5)), url("../img/vision_img2.jpg"); background-size:cover; background-position:25% 50%;}
.vision-point-box.img3                  {background-image: linear-gradient(rgba(0, 0, 0, 0.527), rgba(0, 0, 0, 0.5)), url("../img/product_top.jpg"); background-size:cover; background-position:50% 50%;}
.vision-point-view                      {position: absolute;display: none;top: 0;width:1100px; height:780px;  border-radius:57px; color:#ffffff; overflow: hidden; margin:0 auto; text-align:center;}
.vision-point-view div                  {position:absolute; width:100%; top:50%; left:100px; transform: translateY(-50%); text-align:left;}
.vision-point-view p.title              {font-size: 3.12rem; font-family:"Noto Sans KR"; font-weight: 700; line-height:40px; padding-bottom:50px;}
.vision-point-view p.text               {font-size: 1.31rem; font-family:"Noto Sans KR"; font-weight: 300; line-height:45px;}
.vision-point-view.img1                 {background-image: linear-gradient(rgba(0, 0, 0, 0.527), rgba(0, 0, 0, 0.5)), url("../img/ceo_img1.jpg"); background-size:cover;}
.vision-point-view.img2                 {background-image: linear-gradient(rgba(0, 0, 0, 0.527), rgba(0, 0, 0, 0.5)), url("../img/vision_img2.jpg"); background-size:cover;}
.vision-point-view.img3                 {background-image: linear-gradient(rgba(0, 0, 0, 0.527), rgba(0, 0, 0, 0.5)), url("../img/product_top.jpg"); background-size:cover;}
.vision-point-view a.close              {position:absolute; top:50%; right:50px; transform: translateY(-50%); width:40px; height:40px;}

@media (max-width: 1100px) {
  section.vision-text1 div        {font-size:1.75rem; line-height:60px; padding:100px 0;}
  section.vision-text2 div        {font-size:1.5rem; line-height:48px;}
  .vision-point-box               {width:31%; height:650px; margin:0 0.5%; }
  .vision-point-box p.title       {font-size: 2.18rem; padding-bottom:50px;}
  .vision-point-box p.text        {font-size: 1rem; line-height:35px;}
  .vision-point-view              {width:96%; height:650px;}
  .vision-point-view div          {left:5%;}
  .vision-point-view p.title      {font-size: 2.18rem; padding-bottom:50px;}
  .vision-point-view p.text       {font-size: 1.12rem; line-height:35px;}
}

@media (max-width: 840px) {
  section.vision-text1 div        {font-size:1.12rem; line-height:34px;}
  section.vision-text2 div        {font-size:1rem; line-height:32px;}
  .vision-point-box               {border-radius:30px;}
  .vision-point-box p.title       {font-size: 1.62rem; padding-bottom:50px;}
  .vision-point-box p.text        {font-size: 1rem; line-height:24px;}
  .vision-point-view              {height:500px; border-radius:30px;}
  .vision-point-view div          {left:5%;}
  .vision-point-view p.title      {font-size: 1.75rem; padding-bottom:30px;}
  .vision-point-view p.text       {font-size: 0.75rem; line-height:28px;}
}

@media (max-width: 550px) {
  section.vision-text1 div        {font-size:1.1rem; line-height:30px; padding: 80px 20px; width: 90%;}
  section.vision-text2 div        {font-size:1rem; line-height:28px; padding: 10px 15px; width: 90%;}
  .vision-point-box               {width:96%; height:350px; }
  .vision-point-box p.title       {font-size: 1.37rem; padding-bottom:10px;}
  .vision-point-box p.text        {font-size: 1rem; line-height:28px;}
  .vision-point-view              {height:350px;}
  .vision-point-view div          {left:3%;}
  .vision-point-view p.title      {font-size: 1.37rem; padding-bottom:20px;}
  .vision-point-view p.text       {font-size: 1rem; line-height:28px; padding-right:3%;}
  .vision-point-wrapper           {display: flex; justify-content: center; flex-direction: column; align-items: center; position: relative; width: 90%; gap: 20px;}
  .vision-point-box .show-detail-button             {display: none !important;}
}


/**************** product  **********************/

section.page-top .top-bg.product      {background-image: linear-gradient(rgba(0, 0, 0, 0.227), rgba(0, 0, 0, 0.2)), url("../img/product_top.jpg");
                                       background-size:150%; background-position:50% 20%;}

section.stainless                     {background-color:#ffffff; padding-bottom:80px;}
.product-content-title                {font-size: 4.37rem; font-family:"Noto Sans KR"; font-weight: 700; padding:150px 0 100px 0;}
.product-list-wrap                    {width:1100px; margin:0 auto; text-align:center;}
.product-list-wrap a                  {position:relative; display:inline-block; width:323px; height:315px; overflow:hidden; border-radius:37px; margin:0 15px 30px 15px;}
.product-list-wrap a div              {position:absolute; width:240px; top:50%; left:50%; transform: translate(-50%, -50%); text-align:center;}
.product-list-wrap a div p            {display:none; font-size:2.18rem; font-weight:600; font-family:"Pretendard Variable"; color:#ffffff; line-height:55px;}
.product-list-wrap a div p img        {width:94px; height:27px; padding-top:10px;}
.product-list-wrap a:hover > div p    {display:block;}
.product-list-wrap a:hover > img      {filter: brightness(45%);}

section.products                      {background-color:#ffffff; padding-bottom:80px;}
section.products div                  {width:1100px; margin:0 auto; text-align:center;}
html[lang="en"] section.products div  {width:90%; margin:0 auto; text-align:center;}
.product-products-text                {font-size:1.5rem; line-height:50px; font-family:"Pretendard Variable"; font-weight:400; padding-bottom:30px;}

section.process                       {background-color:#ffffff; padding-bottom:80px;}
.product-content-img                  {width:1100px; margin:0 auto; text-align:center;}
.product-process-text1                {zoom:1; width:1100px; margin:0 auto; text-align:left; padding:30px 0 200px 0; display: flex; gap: 35px;}
.product-process-text1:after          {clear:both; height:0; content:"."; display:block; visibility:hidden;}
.product-process-text1 p              {float:left; width:25%; font-size:1.25rem; line-height:40px; font-family:"Pretendard Variable"; font-weight:400; }
.product-process-text2-wrap           {zoom:1; width:1100px; margin:0 auto; text-align:center; padding-bottom:100px;}
.product-process-text2-wrap:after     {clear:both; height:0; content:"."; display:block; visibility:hidden;}
.product-process-text2                {float:left; width:500px; padding:0 49px 30px 0; text-align:left;}
.product-process-text2.b-right        {border-right:1px solid #959595;}
.product-process-text2.t-right        {padding:0 0 30px 49px;}
.text2-title                          {font-size:2.62rem; line-height:70px; font-family:"Noto Sans KR"; font-weight: 700; padding-bottom:50px;}
.text2-body                           {font-size:1.43rem; line-height:50px; font-family:"Pretendard Variable"; font-weight:400;}
.product-process-text2.last           {width:1100px; padding-top:50px;}
.text2-title.m-version                {display:none;}

section.product-view                  {background-color:#f8f8f8; padding-bottom:80px;}
.product-view-title                   {font-size:2.81rem; font-family:"Noto Sans KR"; font-weight: 700; padding:150px 0 100px 0;}
.product-view-content                 {zoom:1; width:1100px; margin:0 auto; text-align:center; letter-spacing:-0.5px;}
.product-view-content:after           {clear:both; height:0; content:"."; display:block; visibility:hidden;}
.product-view-img                     {float:left; width:400px; height:1000px; border-radius:30px; overflow: hidden; position:relative;
                                      box-shadow: 0 5px 5px rgba(0,0,0,0.15), 0 5px 5px rgba(0,0,0,0.12);}

.product-view-img.h600                {height:600px;}
.product-view-img.h800                {height:800px;}
.product-view-img img {width: 100%;height: 100%;object-fit: cover;object-position: center;display: block;transition-duration: 0.3s;}
.product-view-img img:hover           {transform: scale(1.2, 1.2); transition-duration: 0.5s;}
.product-view-text                    {float:left; width:600px; padding-left:30px; text-align:left; font-size:1.12rem; line-height:40px; font-family:"Pretendard Variable"; font-weight:400;}
.move-page                            {clear:both; padding-top:30px; text-align:right; margin-right: 70px;}
.move-page a                          {display:inline-block; font-weight: 600; font-size:0.87rem; line-height:23px; font-family:"Noto Sans KR"; color:#434343; border:1px solid #434343; border-radius:15px; height:25px; padding:0 13px;}
.move-page a img                      {width:auto; height:10px; vertical-align:0; margin-right:3px;}


@media (max-width: 1100px) {
  .product-content-title                {font-size:3.12rem; padding:100px 0;}
  .product-products-text                {font-size:1.12rem; line-height:35px;}
  .product-list-wrap                    {width:100%;}
  .product-list-wrap a                  {width:42%; margin:0 3% 5% 3%;}
  section.products div                  {width:90%;}
  .product-content-img                  {width:90%;}
  .product-process-text1 p              {font-size:1rem; line-height:32px;}
  .product-process-text1                {width:90%; padding:30px 0 100px 0;}
  .product-process-text2-wrap           {width:90%; padding-bottom:100px;}
  .product-process-text2                {width:44%; padding:0 4% 20px 1%;}
  .product-process-text2.last           {width:100%; padding-top:50px;}
  .product-process-text2.t-right        {padding:0 1% 30px 4%;}

  .product-view-content                 {width:90%;}
  .product-view-img                     {width:35%; }
  .product-view-text                    {width:60%; padding-left:3%; font-size:1rem; line-height:32px;}
}


@media (max-width: 845px) {
  .product-list-wrap a                  {height:300px;}
  .product-list-wrap a div p            {font-size:1.75rem; line-height:40px;}
  .text2-title                          {font-size:1.87rem; line-height:50px;}
  .text2-body                           {font-size:1.12rem; line-height:35px;}
  .product-process-text2.tRight         {text-align:left;}
  .product-process-text1 p              {font-size:0.75rem; line-height:28px;}
  .product-products-text                {font-size:0.75rem; line-height:28px;}
  .product-content-title                {font-size:1.87rem; padding:50px 0 50px 0;}
}

@media (max-width: 550px) {
  section.stainless                     {padding-bottom:30px;}
  section.products                      {padding-bottom:30px;}
  section.process                       {padding-bottom:30px;}
  .product-process-text2-wrap           {padding-bottom:50px;}
  .product-list-wrap a                  {height:200px;}
  .product-list-wrap a div p            {font-size:0.75rem; line-height:30px;}
  .product-list-wrap a div p img        {width:60px; height:auto;}

  .product-process-text2                {zoom:1; float:none; width:100%; padding:0; text-align:left;}
  .product-process-text2:after          {clear:both; height:0; content:"."; display:block; visibility:hidden;}
  .product-process-text2.b-right        {display: flex; flex-direction: column; border:none;}
  .text2-title                          {float:left; width:100%; font-size:1.24rem; line-height:30px; padding-bottom:10px;}
  .text2-body                           {float:left; width:100%; font-size:1rem; line-height:24px;}
  .product-process-text2.t-right        {padding:50px 0 0 0;}
  .product-process-text2.t-right .text2-title      {float:left !important; text-align:left;}
  .product-process-text2.t-right .text2-body       {float:left !important;}
  .product-process-text1                {display: flex; flex-direction: column; gap: 20px; padding-bottom: 30px;}
  .product-process-text1 p              {font-size:1rem; line-height:24px; text-align:left; width: 100%;}
  .text2-title.w-version                {display:none;}
  .text2-title.m-version                {display:block;}

  .product-products-text                {font-size:0.9rem; line-height:28px;}
  .product-content-title                {font-size:1.5rem; padding:30px 0;}
  .product-view-img img:hover           {transform: scale(1); transition-duration: inherit;}
  .product-view-content                 {width:90%;}
  .product-view-title                   {padding:50px 0; font-size:2.18rem;}
  .product-view-img                     {float:none; width:100%; height:200px; border-radius:10px; overflow: hidden;}
  .product-view-img.h600                {height:200px;}
  .product-view-img.h800                {height:200px;}
  .product-view-text                    {width:100%; padding-left:0; padding-top:50px; font-size:1rem; line-height:28px;}
  .move-page                            {margin-right: 10px;}
}


/**************** knowledge  **********************/

section.page-top .top-bg.knowledge      {background-image: linear-gradient(rgba(0, 0, 0, 0.227), rgba(0, 0, 0, 0.2)), url("../img/knowledge_top.jpg");
                                        background-size:100% 140%; background-position:0 20%;}

.knowledge-wrap {display: block;}
.stainless-steel-wrap {display: flex;max-width: 1100px;margin: 0 auto;padding: 70px 0;gap: 40px;overflow: visible;align-items: flex-start;}
.stainless-steel-wrap:after             {clear:both; height:0; content:"."; display:block; visibility:hidden;}
.stainless-steel-list {flex: 0 0 250px;position: sticky;top: 120px;height: fit-content;align-self: flex-start;border-right: 1px solid #181818;padding-right: 20px;}
.stainless-steel-list p                 {text-align:right; font-size:3.12rem; line-height:70px; font-family:"Noto Sans KR"; font-weight: 700; padding-bottom:150px;}
.stainless-steel-list li                {text-align:right; font-size:2.5rem; line-height:80px; font-family:"Pretendard Variable"; font-weight: 500;}
.stainless-steel-list li.on             {font-size:2.5rem; font-weight: 700; text-decoration: underline; color:#00d46e;}
.stainless-steel-content-scroll {flex: 1;padding-left: 20px;scroll-behavior: smooth;}
.stainless-steel-content {padding-bottom: 80px;border-bottom: 1px solid #ccc;margin-bottom: 80px;text-align: left;}
.stainless-steel-img                    {position:relative; width:700px; height:auto; max-height: 600px; overflow:hidden; border-radius:34px; margin-top:10px; object-fit: cover;}
.stainless-steel-img.img2, .stainless-steel-img.img3        {border:1px solid #989898;}
.stainless-steel-content p:last-child   {font-weight:400; font-size:1.4rem; line-height:35px; font-family:"Pretendard Variable"; padding-top:30px;}

@media (max-width: 1100px) {
  .stainless-steel-wrap                   {width:100%;}
  .stainless-steel-list                   {width:25%; padding-right:4%;}
  .stainless-steel-content                {width:65%; padding-left:4%;}
  .stainless-steel-img                    {width:100%; height:250px;}
  .stainless-steel-list p                 {font-size:2.18rem; line-height:50px;padding-bottom:80px;}
  .stainless-steel-list li                {font-size:1.56rem; line-height:60px;}
  .stainless-steel-list li.on             {font-size:1.56rem;}
  .stainless-steel-content p:last-child   {font-size:1.12rem; line-height:26px; padding-top:30px;}
}

@media (max-width: 845px) {
  .stainless-steel-img                    {height:200px;}
  .stainless-steel-list p                 {font-size:1.75rem; line-height:40px; padding-bottom:100px;}
  .stainless-steel-list li                {font-size:1.12rem; line-height:60px;}
  .stainless-steel-list li.on             {font-size:1.12rem;}
  .stainless-steel-content p:last-child   {font-size:0.87rem; line-height:22px; padding-top:30px;}
}

@media (max-width: 550px) {
  .stainless-steel-img                    {height:160px;}
  .stainless-steel-wrap                   {gap: 10px;}
  .stainless-steel-content-scroll         {padding: 0 10px 0 0;}
  .stainless-steel-list                   {flex: 0 0 90px;}
  .stainless-steel-list p                 {font-size:1.12rem; line-height:30px; padding-bottom:250px;}
  .stainless-steel-list li                {font-size:1rem; line-height:40px;}
  html[lang="en"] .stainless-steel-list li {font-size:0.9rem; line-height:40px;}
  .stainless-steel-list li.on             {font-size:1rem;}
  .stainless-steel-content                {width:100%; margin-bottom: 0;}
  .stainless-steel-content p:last-child   {font-size:1rem; line-height:24px; padding-top:30px; padding-bottom:0; border-bottom: 0;}
}

/**************** esg  **********************/

section.page-top .top-bg.esg            {background-image: linear-gradient(rgba(0, 0, 0, 0.427), rgba(0, 0, 0, 0.4)), url("../img/esg_top.jpg");
                                        background-size:cover; background-position:0 35%;}

section.esg-text                        {font-size:1.87rem; line-height:70px; font-family:"Pretendard Variable"; font-weight: 400; padding:100px 0; width:80%; margin:0 auto; text-align:center;}

section.esg-management > p              {font-size:3.43rem; line-height:45px; font-family:"Pretendard Variable"; font-weight: 600; padding-bottom:100px;}
.esg-management-point                   {zoom:1; background-image: linear-gradient(rgba(0, 0, 0, 0.427), rgba(0, 0, 0, 0.4)), url("../img/esg_management_bg.jpg");
                                        background-size:cover; width:100%; height:800px; }
.esg-management-point:after             {clear:both; height:0; content:"."; display:block; visibility:hidden;}
.point-content                          {float:left; width:33%; color:#ffffff; height:800px;}
.point-content:nth-child(2)             {border-left:1px solid #ffffff; border-right:1px solid #ffffff;}
.point-bg                               {background-repeat : no-repeat; background-position-x:center; background-position-y:220px; padding-top:280px;}
.point-bg.img1                          {background-image: url("../img/icon_esg_management1.png");background-size:93px auto; }
.point-bg.img2                          {background-image: url("../img/icon_esg_management2.png");background-size:71px auto; }
.point-bg.img3                          {background-image: url("../img/icon_esg_management3.png");background-size:68px auto; }
.point-content .point-title             {font-size:2.37rem; font-family:"Pretendard Variable"; font-weight: 600; padding-top:30px;}
.point-content .point-title-en          {font-size:1.37rem; font-family:"Pretendard Variable"; font-weight: 200;}
.point-content .point-text              {font-size:1.25rem; line-height:35px; font-family:"Noto Sans KR"; font-weight: 300; padding:30px;}

.esg-management-img                     {z-index:1; position:relative; line-height:0; height: 100%; padding: 150px 0; min-height: 500px;}
.esg-management-img.bg1                 {background-image: linear-gradient(rgba(0, 0, 0, 0.827), rgba(0, 0, 0, 0.8)), url("../img/about_img2.jpg");background-size:cover;}
.esg-management-img.bg1-bright          {background-image: url("../img/about_img2.jpg");background-size:cover;}
.esg-management-img.bg2                 {background-image: linear-gradient(rgba(0, 0, 0, 0.827), rgba(0, 0, 0, 0.8)), url("../img/esg_management_img1.png");background-size:cover;}
.esg-management-img.bg2-bright          {background-image: url("../img/esg_management_img1.png");background-size:cover;}
.esg-management-content                 {position:absolute; width:90%; top:50%; left:50%; transform: translate(-50%, -50%); font-family:"Pretendard Variable";
                                        text-align:center; line-height:1.5; color:#ffffff;}
.esg-management-content,
.esg-management-content p {
  user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
}
.esg-management-content p.title         {font-size: 2.18rem; line-height:1.5; font-weight: 600; text-align:center; padding-bottom:50px;}
.esg-management-content p.text          {font-size: 1.7rem; line-height:1.5; letter-spacing:-0.5px; font-weight: 300;}
.esg-nav                                {z-index:10; position:absolute; top:20px; left:50%; transform: translateX(-50%);}
.esg-nav p                              {display:inline-block; width:40px; height:4px; background-color:#ffffff; margin:0 2px;}
.esg-nav p.on                           {background-color:#00d46e;}

section.esg-slider {padding-bottom: 120px;position: relative;width: 100%;height: 100%;overflow: hidden;}
.esg-slider .swiper-pagination {top: 25px !important;}
.esg-slider .swiper-pagination-bullet {background: white !important; opacity: 1 !important;}
.esg-slider .swiper-pagination-bullet-active {background: #00d46e !important;}

section.esg-meaning                     {width:1100px; margin:0 auto; text-align:center; padding-bottom:150px;}
section.esg-meaning p                   {font-size:3.43rem; line-height:45px; font-family:"Pretendard Variable"; font-weight: 600; padding-bottom:100px;}

section.esg-environmental               {width:1100px; margin:0 auto; text-align:center; padding-bottom:150px;}
section.esg-social                      {width:1100px; margin:0 auto; text-align:center; padding-bottom:150px;}
section.esg-governance                  {width:1100px; margin:0 auto; text-align:center; padding-bottom:150px;}
section.esg-environmental .esg-environmental-wrapper   {display: flex;}
section.esg-social .esg-social-wrapper                 {display: flex;}
section.esg-governance .esg-governance-wrapper         {display: flex;}
.esg-left-img                           {float:left; width:350px; overflow: hidden; background-size:cover;}
section.esg-environmental .esg-left-img   {height:550px; background-image: url("../img/esg_environmental_img1.jpg"); background-position:65% 0;}
section.esg-social .esg-left-img          {height:1150px; background-image: url("../img/esg_social_img1.jpg"); background-position:50% 0;}
section.esg-governance .esg-left-img      {height:700px; background-image: url("../img/esg_governance_img1.jpg"); background-position:50% 0;}
.esg-right-text                         {float:left; text-align:left; padding-left:50px;}
.esg-right-text p                       {font-size:3.12rem; line-height:60px; font-family:"Pretendard Variable"; font-weight: 600; padding-bottom:30px;}
.esg-right-text ul li                   {font-size:1.12rem; line-height:40px; font-family:"Pretendard Variable";  font-weight:400;}
.esg-right-text ul li.li-pl             {padding-left:7px;}
.esg-bottom-graph                       {clear:both; padding-top:50px;}
.esg-bottom-graph p                     {font-size:1.87rem; line-height:30px; font-family:"Pretendard Variable"; font-weight: 600; padding-bottom:10px;}

@media (max-width: 1100px) {
  section.esg-management > p        {font-size:3.12rem;}
  .esg-management-point             {height:600px;}
  .point-content                    {height:600px;}
  .point-bg                         {background-position-y:120px; padding-top:180px;}
  .point-content .point-title       {font-size:1.87rem;}
  .point-content .point-title-en    {font-size:1rem;}
  .point-content .point-text        {font-size:1rem; line-height:30px;}
  .esg-management-img               {height:600px;}
  .esg-management-content p.title   {font-size:1.75rem; line-height:40px; padding-bottom:30px;}
  .esg-management-content p.text    {font-size:0.93rem; line-height:28px;}
  .esg-left-img                           {width:35%;}
  .esg-right-text                         {width:55%;}
  section.esg-meaning                     {width:100%;}
  section.esg-meaning img                 {width:90%;}
  section.esg-environmental               {width:90%;}
  section.esg-social                      {width:90%;}
  section.esg-governance                  {width:90%;}
  section.esg-meaning p                   {font-size:3.12rem;}
  .esg-bottom-graph                       {width:90%; text-align:center; margin:0 auto;}
}


@media (max-width: 845px) {
  section.esg-text                  {font-size:1.37rem; line-height:50px; padding:80px 0;}
  section.esg-management > p        {font-size:2.18rem;}
  .esg-management-point             {height:500px;}
  .point-content                    {height:500px;}
  .point-bg                         {background-position-y:120px; padding-top:180px;}
  .point-content .point-title       {font-size:1.12rem;}
  .point-content .point-title-en    {font-size:0.56rem;}
  .point-content .point-text        {font-size:0.68rem; line-height:20px;}
  .esg-management-img               {height:600px;}
  .esg-management-content p.title   {font-size:1.75rem; line-height:40px; padding-bottom:30px;}
  .esg-management-content p.text    {font-size:0.93rem; line-height:22px;}
  section.esg-environmental .esg-environmental-wrapper   {display: flex; flex-direction: column;}
  section.esg-social .esg-social-wrapper                 {display: flex; flex-direction: column;}
  section.esg-governance .esg-governance-wrapper         {display: flex; flex-direction: column;}
  section.esg-meaning p                     {font-size:2.18rem;}
  .esg-left-img                             {float:none; width:100%; text-align:center; margin:0 auto; height:200px;}
  section.esg-environmental .esg-left-img   {height:200px;}
  section.esg-social .esg-left-img          {height:200px; background-position:50% 50%;}
  section.esg-governance .esg-left-img      {height:200px; background-position:50% 30%;}
  .esg-right-text                           {width:100%; padding:20px 0;}
  .esg-right-text p                         {font-size:2.5rem;}
  .esg-right-text ul li                     {font-size:0.93rem; line-height:30px;}
  section.esg-meaning                     {padding-bottom:100px;}
  section.esg-environmental               {padding-bottom:100px;}
  section.esg-social                      {padding-bottom:100px;}
  section.esg-governance                  {padding-bottom:100px;}

}

@media (max-width: 550px) {
  section.esg-text                  {font-size:1rem; line-height:32px; padding:50px 0;}
  section.esg-management > p        {font-size:1.56rem; padding-bottom:50px;}
  .esg-management-img               {height:550px;}
  .esg-management-point             {height:auto;}
  .point-content                    {float:none; width:100%; height:300px;}
  .point-bg                         {background-position-y:30px; padding-top:50px;}
  .point-bg.img1                    {background-size:40px auto; }
  .point-bg.img2                    {background-size:40px auto; }
  .point-bg.img3                    {background-size:30px auto; }
  .point-content:nth-child(2)       {border:none; border-top:1px solid #ffffff; border-bottom:1px solid #ffffff;}
  .point-content .point-title       {font-size:1.3rem;}
  .point-content .point-title-en    {font-size:0.75rem;}
  .point-content .point-text        {font-size:1rem; line-height:22px; padding-top:15px;}
  .esg-management-content p.title   {font-size:1.2rem; line-height:28px; padding-bottom:20px;}
  .esg-management-content p.text    {font-size:1rem; line-height:26px;}
  .esg-right-text p                 {font-size:1.87rem; padding-bottom:10px;}
  .esg-right-text ul li             {font-size:0.9rem; line-height:24px;}
  section.esg-meaning p                   {padding-bottom:70px;}
  section.esg-meaning                     {padding-bottom:50px;}
  section.esg-environmental               {padding-bottom:50px;}
  section.esg-social                      {padding-bottom:50px;}
  section.esg-governance                  {padding-bottom:50px;}
  .esg-bottom-graph                       {padding-top:20px;}
}


/**************** contact  **********************/

section.page-top .top-bg.contact            {background-image: linear-gradient(rgba(0, 0, 0, 0.627), rgba(0, 0, 0, 0.6)), url("../img/contact_top.jpg");
                                            background-size:cover; background-position:50% 35%;}
.contact-info-tab                           {padding:100px 0;}
.contact-info-tab a                         {display:inline-block; width:190px; height:50px; background-color:#e5e5e5; font-size:1.56rem; font-family:"Pretendard Variable"; font-weight: 300;
                                            line-height:45px; border-radius:30px; margin:0 5px; color:#000000; box-shadow: 0 5px 5px rgba(0,0,0,0.15), 0 5px 5px rgba(0,0,0,0.12); align-content: end;}
.contact-info-tab a.on                      {background-color:#00d46e; color:#ffffff; font-size:1.87rem; font-family:"Noto Sans KR"; font-weight: 700;}
.contact-info                               {zoom:1; background-color:#f8f8f8; padding:100px 0;}
.contact-info-wrap                          {zoom:1;width:1100px; margin:0 auto; text-align:center; position:relative; display: flex; justify-content: center;}
.contact-info-wrap:after                    {clear:both; height:0; content:"."; display:block; visibility:hidden;}
.contact-info-img                           {position:relative; float:left; width:350px; height:360px; overflow:hidden; border-radius:20px;}
.contact-info-img img                       {transform:scale(1.7); position:absolute; top:15%; left:0;}
.contact-info-img-m                         {display:none;}
.contact-info-text                          {float:left; width:485px; text-align:left; padding-left:30px;}
.contact-info-text dl                       {zoom:1; padding-bottom:15px;}
.contact-info-text dl:after                 {clear:both; height:0; content:"."; display:block; visibility:hidden;}
.contact-info-text dt                       {float:left; width:150px; font-size:1.3rem; line-height:50px; font-family:"Pretendard Variable"; font-weight: 600;}
.contact-info-text dd                       {float:left; width:330px; font-size:1.15rem; line-height:50px; font-family:"Pretendard Variable"; font-weight: 400;}
.contact-info-text dd:last-child            {line-height:30px; padding-top:15px;}
.contact-info-text dt.ls2                   {letter-spacing:1.1em;}
.contact-info-text dt.ls3                   {letter-spacing:1.47em;}
.contact-info-text dt.ls4                   {letter-spacing:0.7em;}
html[lang="en"] .contact-info-text dt       {letter-spacing:0 !important;}
.contact-info-text p                        {font-size:1.12rem; line-height:37px; font-family:"Noto Sans KR"; font-weight: 300;}
.contact-info-text p span                   {font-weight: 700;}
.contact-info-text p img                    {width:22px; height:26px; vertical-align:-15px; padding:5px 5px 10px 5px;}
.contact-info-text p:last-child img         {width:28px; height:26px; vertical-align:-10px; padding:5px 5px 5px 0;}
a.location                                  {position:absolute; bottom:-50px; right:100px; color:#ffffff; background-color:#00d46e; border-radius:40px;
                                            width:80px; height:80px; font-size:1.12rem; line-height:40px; font-family:"Noto Sans KR"; font-weight: 700;
                                            line-height:80px; box-shadow: 0 5px 5px rgba(0,0,0,0.15), 0 5px 5px rgba(0,0,0,0.12);}
.location-layer                             {position:absolute; width:1000px; top:50%; left:50%; transform: translate(-50%, -50%); border:10px solid #ffffff;
                                            border-radius:50px; background-color:#ffffff; overflow:hidden;}

@media (max-width: 1100px) {
  .contact-info-wrap      {display: block; width:100%;}
  .contact-info-tab       {padding:70px 0;}
  .contact-info-img       {float:none; display:inline-block; text-align:center; margin:0 auto;}
  .contact-info-text      {float:none; width:470px; text-align:center; margin:0 auto; padding:0; padding-top:30px;}
  .contact-info-text dl   {text-align:left;}
  .contact-info-text p    {text-align:left; float:left; padding-right:20px;}
  .contact-info-img-m     {position:relative; display:inline-block; width:350px; height:360px; overflow:hidden; border-radius:20px;}
  .contact-info-img-m img {transform:scale(1.7); position:absolute; top:15%; left:-10%;}
  a.location              {bottom:-80px;}
}

@media (max-width: 750px) {
  .contact-info-img       {width:48%; height:250px;}
  .contact-info-img-m     {width:48%; height:250px;}
  a.location              {right:50px;}
  .contact-info-text dt   {font-size:1.12rem; line-height:50px;}
  .contact-info-text dd   {font-size:0.93rem; line-height:50px;}
}

@media (max-width: 480px) {
  .contact-info           {padding:50px 0 100px 0;}
  .contact-info-tab       {padding:50px 0;}
  .contact-info-tab a     {width:140px; height:40px; font-size:1.12rem; line-height:35px;}
  .contact-info-tab a.on  {font-size:1.37rem;}
  .contact-info-text      {width:90%; padding:20px 5% 0 5%;}
  .contact-info-text dt   {width:30%; font-size:0.9rem; line-height:30px;}
  .contact-info-text dd   {width:70%; font-size:0.9rem; line-height:30px;}
  .contact-info-text dd:last-child            {line-height:24px; padding-top:7px;}
  .contact-info-text p                        {font-size:1rem; padding-right:10px;}
  .contact-info-text p img                    {width:18px; height:auto; vertical-align:-15px;}
  .contact-info-text p:last-child img         {width:20px; height:auto; vertical-align:-10px;}
  .contact-info-img       {height:180px;}
  .contact-info-img-m     {height:180px;}
  a.location              {right:10px; width:60px; height:60px; font-size:0.8rem; line-height:60px;}
}