@charset "UTF-8";
/*************************************************
            css파일에서 수정금지!!!!!!!
            scss파일에서 수정해야함!!!!!!
*************************************************/
b.blue { color: #0c4da2; }

b.orange { color: #ffc000; }

#nt_body { padding: 0; }

#nt_body > .nt-container { padding: 0; max-width: 100%; }

.page-content, .page-content p { word-break: keep-all; }

.page-content li { list-style: none; }

.page-content ul, .page-content ol { padding: 0; }

.page-content article { padding: 150px 0; }

@media (max-width: 991px) { .page-content article { padding: 130px 0; } }

@media (max-width: 768px) { .page-content article { padding: 100px 0; } }

@media (max-width: 576px) { .page-content article { padding: 80px 0; } }

.page-content .header { padding: 0 0 100px; }

.page-content .header h3 { font-size: 55px; font-weight: 700; color: #333; text-align: center; }

.page-content .header p { padding: 20px 0 0; color: #333; line-height: 1.5; text-align: center; word-break: keep-all; }

@media (max-width: 991px) { .page-content .header { padding: 0 0 80px; }
  .page-content .header h3 { font-size: 50px; } }

@media (max-width: 768px) { .page-content .header { padding: 0 0 70px; }
  .page-content .header h3 { font-size: 46px; } }

@media (max-width: 576px) { .page-content .header { padding: 0 0 50px; }
  .page-content .header h3 { font-size: 38px; line-height: 1.2; }
  .page-content .header p br { display: none; } }

/*about us > point*/
#point { background: #f9f9f9; }

#point .header h3 { font-weight: 400; }

#point .content ul { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 6%; }

#point .content ul li { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }

#point .content ul li .num { overflow: hidden; height: 40px; font-size: 80px; line-height: .65; color: #ddd; font-weight: 700; border-bottom: 1px solid #ddd; -webkit-box-sizing: content-box; box-sizing: content-box; }

#point .content ul li .h4_wrap { padding: 0 0 0 24.545%; margin: 58px 0 50px; line-height: 1; background: no-repeat left center; }

#point .content ul li .h4_wrap p { padding: 0 0 10px; font-size: 20px; font-weight: 500; color: #333; }

#point .content ul li .h4_wrap h4 { font-size: 45px; font-weight: 700; color: #347de6; }

#point .content ul li:nth-of-type(1) .h4_wrap { background-image: url(/img/water/ico_water.png); }

#point .content ul li:nth-of-type(2) .h4_wrap { background-image: url(/img/water/ico_design.png); }

#point .content ul li:nth-of-type(3) .h4_wrap { background-image: url(/img/water/ico_skin.png); }

@media (max-width: 1199px) { #point .content ul { gap: 4%; } }

@media (max-width: 991px) { #point .header p { font-size: 16px; }
  #point .content ul { gap: 3%; }
  #point .content ul li .h4_wrap { margin: 50px 0 45px; background-size: auto 80%; }
  #point .content ul li .h4_wrap p { font-size: 16px; }
  #point .content ul li .h4_wrap h4 { font-size: 38px; }
  #point .content ul li .txt { font-size: 16px; } }

@media (max-width: 768px) { #point .header p { font-size: 16px; }
  #point .content ul { -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 50px 30px; }
  #point .content ul li { -webkit-box-flex: 1; -ms-flex: auto; flex: auto; width: 46%; }
  #point .content ul li .num { color: #f0f1f2; }
  #point .content ul li .h4_wrap { padding: 0 0 0 60px; margin: 40px 0 30px; background-size: auto 64%; }
  #point .content ul li:last-of-type { padding-bottom: 0; } }

@media (max-width: 576px) { #point .header p { font-size: 15px; }
  #point .content ul { -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 60px 0; }
  #point .content ul li { width: 100%; }
  #point .content ul li .num { text-align: right; }
  #point .content ul li .h4_wrap { padding: 0 60px 0 0; margin: 35px 0 25px; background-position: right center; }
  #point .content ul li .h4_wrap p { font-size: 15px; }
  #point .content ul li .h4_wrap h4 { font-size: 30px; }
  #point .content ul li .txt { font-size: 15px; } }

/*about us > brand*/
#brand .content .cnt_tit { padding: 0 0 40px; }

#brand .content .cnt_tit h4 { display: inline-block; font-size: 35px; font-weight: 700; color: #333; }

#brand .content .cnt_tit span { display: inline-block; padding: 2px 0 0 30px; margin: 0 0 0 50px; line-height: 1; border-left: 1px solid #999; }

#brand .content .flex { gap: 30px; }

#brand .content .flex .logo { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; background: url(/img/water/bg_patten1.png); padding: 10px; border: 1px solid #e1e1e1; }

#brand .content .flex .tail { width: 276px; border: 1px solid #e1e1e1; }

#brand .content .flex .tail .img { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; }

#brand .content .flex .tail .img:after { content: ''; display: block; position: absolute; left: -1px; top: -1px; width: calc(100% + 2px); height: calc(100% + 1px); }

#brand .content .flex .tail .txt { padding: 40px 10px; text-align: center; font-size: 16px; color: #333; }

#brand .content.ci { padding-bottom: 100px; margin-bottom: 100px; border-bottom: 1px solid #e1e1e1; }

#brand .content.ci .tail .img { background: #0c4da2; }

#brand .content.ci .tail .img:after { border: 1px solid #0c4da2; }

#brand .content.bi .tail .img { background: #fff090; }

#brand .content.bi .tail .img:after { border: 1px solid #fff090; }

@media (max-width: 1199px) { #brand .content .flex { gap: 20px; }
  #brand .content .flex .logo { -webkit-box-flex: inherit; -ms-flex: inherit; flex: inherit; width: 45%; }
  #brand .content .flex .tail { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } }

@media (max-width: 991px) { #brand .content.ci { padding-bottom: 80px; margin-bottom: 80px; }
  #brand .content .flex { -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 30px 20px; }
  #brand .content .flex .logo { padding: 70px 10px; width: 100%; }
  #brand .content .flex .tail .img img { height: 100px; }
  #brand .content .flex .tail .txt { padding: 30px 10px; } }

@media (max-width: 768px) { #brand .content.ci { padding-bottom: 70px; margin-bottom: 70px; }
  #brand .content .cnt_tit { padding: 0 0 30px; }
  #brand .content .cnt_tit h4 { font-size: 30px; }
  #brand .content .cnt_tit span { display: none; } }

@media (max-width: 576px) { #brand .content.ci { padding-bottom: 60px; margin-bottom: 60px; }
  #brand .content .cnt_tit { padding: 0 0 30px; }
  #brand .content .cnt_tit h4 { font-size: 30px; }
  #brand .content .cnt_tit span { display: none; }
  #brand .content .flex { gap: 25px 15px; }
  #brand .content .flex .logo { padding: 50px 10px; }
  #brand .content .flex .tail .img img { height: 80px; }
  #brand .content .flex .tail .txt { padding: 25px 5px; font-size: 15px; }
  #brand .content .flex .tail .txt br { display: none; } }

@media (max-width: 440px) { #brand .content.ci { padding-bottom: 50px; margin-bottom: 50px; }
  #brand .content .cnt_tit h4 { font-size: 28px; }
  #brand .content .flex { gap: 25px 15px; }
  #brand .content .flex .tail { -webkit-box-flex: 1; -ms-flex: auto; flex: auto; width: 100%; }
  #brand .content .flex .tail .img img { height: 70px; }
  #brand .content .flex .tail .txt { padding: 20px 5px; } }

#history { background: #f9f9f9; }

#history .content { position: relative; }

#history .content .flex { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

#history .content .flex dl { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; gap: 30px; position: relative; }

#history .content .flex dl dt { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 130px; height: 130px; font-size: 25px; font-weight: 700; color: #333; border-radius: 50%; border: 1px solid #e1e1e1; }

#history .content .flex dl dd { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; line-height: 1.8; }

#history .content .flex dl dd span { display: block; }

#history .content .flex dl:after { content: ''; display: block; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 2; width: 14px; height: 14px; border-radius: 50%; border: 3px solid #0c4da2; }

#history .content .flex .img { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }

#history .content .flex:nth-of-type(odd) dl { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; padding: 0 150px 0 0; text-align: right; }

#history .content .flex:nth-of-type(odd) dl:after { right: -7px; }

#history .content .flex:nth-of-type(odd) .img { padding: 0 0 0 150px; }

#history .content .flex:nth-of-type(even) { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; }

#history .content .flex:nth-of-type(even) dl { padding: 0 0 0 150px; }

#history .content .flex:nth-of-type(even) dl:after { left: -7px; }

#history .content .flex:nth-of-type(even) .img { padding: 0 150px 0 0; }

#history .content .flex:not(:last-of-type) { padding-bottom: 100px; }

#history .content:after { content: ''; display: block; position: absolute; left: 50%; top: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 1px; height: 100%; border: 1px solid #e1e1e1; }

@media (max-width: 1199px) { #history .content .flex:nth-of-type(odd) dl { padding: 0 80px 0 0; }
  #history .content .flex:nth-of-type(odd) .img { padding: 0 0 0 80px; }
  #history .content .flex:nth-of-type(even) dl { padding: 0 0 0 80px; }
  #history .content .flex:nth-of-type(even) .img { padding: 0 80px 0 0; } }

@media (max-width: 991px) { #history .content .flex dl { gap: 20px; }
  #history .content .flex dl dt { width: 90px; height: 90px; font-size: 22px; }
  #history .content .flex:nth-of-type(odd) dl { padding: 0 30px 0 0; }
  #history .content .flex:nth-of-type(odd) .img { padding: 0 0 0 30px; }
  #history .content .flex:nth-of-type(even) dl { padding: 0 0 0 30px; }
  #history .content .flex:nth-of-type(even) .img { padding: 0 30px 0 0; }
  #history .content .flex:not(:last-of-type) { padding-bottom: 80px; } }

@media (max-width: 768px) { #history .content .flex { -webkit-box-align: start !important; -ms-flex-align: start !important; align-items: flex-start !important; }
  #history .content .flex dl { -webkit-box-orient: vertical !important; -webkit-box-direction: normal !important; -ms-flex-direction: column !important; flex-direction: column !important; gap: 15px; }
  #history .content .flex dl dt { display: block; width: 100%; height: auto; line-height: 1; font-size: 24px; border: 0; }
  #history .content .flex dl dd { width: 100%; }
  #history .content .flex dl:after { top: 5px; -webkit-transform: none; transform: none; }
  #history .content .flex:not(:last-of-type) { padding-bottom: 70px; } }

@media (max-width: 576px) { #history .content .flex:nth-of-type(odd) dl { padding: 0 15px 0 0; }
  #history .content .flex:nth-of-type(odd) .img { padding: 0 0 0 15px; }
  #history .content .flex:nth-of-type(even) dl { padding: 0 0 0 15px; }
  #history .content .flex:nth-of-type(even) .img { padding: 0 15px 0 0; }
  #history .content .flex:not(:last-of-type) { padding-bottom: 60px; } }

@media (max-width: 480px) { #history .content .flex { -webkit-box-orient: vertical !important; -webkit-box-direction: normal !important; -ms-flex-direction: column !important; flex-direction: column !important; gap: 20px; }
  #history .content .flex dl { width: 100%; }
  #history .content .flex dl:after { right: inherit  !important; left: 0 !important; }
  #history .content .flex:nth-of-type(odd) dl { padding: 0 0px 0 20px; text-align: left; }
  #history .content .flex:nth-of-type(odd) .img { padding: 0 0 0 20px; }
  #history .content .flex:nth-of-type(even) dl { padding: 0 0 0 20px; }
  #history .content .flex:nth-of-type(even) .img { padding: 0 0px 0 20px; }
  #history .content .flex:not(:last-of-type) { padding-bottom: 40px; }
  #history .content:after { display: none; } }

#rnd .header p { padding-top: 70px; font-size: 30px; line-height: 1.5; color: #555; }

#rnd .header p span { display: block; }

#rnd .content ul { gap: 2%; }

#rnd .content ul li { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 50px 30px 380px; text-align: center; border-radius: 20px; background: #f9fafb  no-repeat center bottom; }

#rnd .content ul li h3 { font-size: 34px; font-weight: 700; color: #333; }

#rnd .content ul li span { display: block; padding: 10px 0 20px; line-height: 1; font-size: 20px; color: #999; }

#rnd .content ul li p { font-size: 19px; color: #555; }

#rnd .content ul li:nth-of-type(1) { background-image: url(/img/water/rnd_img1.jpg); }

#rnd .content ul li:nth-of-type(2) { background-image: url(/img/water/rnd_img2.jpg); }

#rnd .content ul li:nth-of-type(3) { background-image: url(/img/water/rnd_img3.jpg); }

@media (max-width: 991px) { #rnd .header p { font-size: 26px; }
  #rnd .content ul li { padding: 50px 10px 380px; }
  #rnd .content ul li h3 { font-size: 30px; }
  #rnd .content ul li span { padding: 20px 0 35px; font-size: 17px; }
  #rnd .content ul li p { font-size: 16px; } }

@media (max-width: 768px) { #rnd .header p { padding-top: 50px; font-size: 22px; }
  #rnd .content ul li h3 { font-size: 28px; }
  #rnd .content ul li span { padding: 20px 0 30px; } }

@media (max-width: 600px) { #rnd .header p { padding-top: 40px; font-size: 20px; }
  #rnd .content ul { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 20px; }
  #rnd .content ul li { padding: 50px 10px 60%; background-size: 100% auto; background-position: center bottom -50%; }
  #rnd .content ul li h3 { font-size: 28px; }
  #rnd .content ul li span { padding: 20px 0 30px; } }

@media (max-width: 500px) { #rnd .header p { padding-top: 30px; font-size: 17px; }
  #rnd .content ul { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 20px; }
  #rnd .content ul li { padding: 40px 10px 300px; background-size: auto 66%; }
  #rnd .content ul li h3 { font-size: 26px; }
  #rnd .content ul li span { padding: 20px 0 25px; font-size: 16px; }
  #rnd .content ul li p { font-size: 15px; } }

#oem1 .header p { padding-top: 70px; font-size: 30px; line-height: 1.5; color: #555; }

#oem1 .header p span { display: block; }

#oem1 ol li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 30px; background: #f9fafb; }

#oem1 ol li .bg { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; background: no-repeat center / cover; }

#oem1 ol li .inner { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 5.3%; padding: 80px 10px 80px 6.6%; width: 58%; }

#oem1 ol li .inner .num { font-size: 70px; color: #c6c6c6; text-align: center; line-height: 1; font-weight: 500; }

#oem1 ol li .inner .num:before { content: 'STEP'; display: block; text-align: center; font-size: 30px; }

#oem1 ol li .inner .txt .tit { padding: 0 0 15px; font-size: 34px; font-weight: 500; color: #333; line-height: 1.1; }

#oem1 ol li .inner .txt .tail { color: #777; line-height: 1.5; }

#oem1 ol li:nth-of-type(1) .bg { background-image: url(/img/water/oem_img1.jpg); }

#oem1 ol li:nth-of-type(2) .bg { background-image: url(/img/water/oem_img2.jpg); }

#oem1 ol li:nth-of-type(3) .bg { background-image: url(/img/water/oem_img3.jpg); }

#oem1 ol li:nth-of-type(4) .bg { background-image: url(/img/water/oem_img4.jpg); }

#oem1 ol li:nth-of-type(5) .bg { background-image: url(/img/water/oem_img5.jpg); }

#oem1 ol li:nth-of-type(6) .bg { background-image: url(/img/water/oem_img6.jpg); }

#oem1 ol li:last-of-type { margin-bottom: 0; }

@media (max-width: 1200px) { #oem1 ol li .inner .txt .tail br { display: none; } }

@media (max-width: 991px) { #oem1 .header p { font-size: 26px; }
  #oem1 ol li .inner { padding: 70px 10px 70px 4%; width: 62%; }
  #oem1 ol li .inner .num { font-size: 64px; }
  #oem1 ol li .inner .num:before { font-size: 26px; }
  #oem1 ol li .inner .txt .tit { font-size: 30px; } }

@media (max-width: 768px) { #oem1 .header p { padding-top: 50px; font-size: 22px; }
  #oem1 ol li { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  #oem1 ol li .bg { -webkit-box-flex: 1; -ms-flex: auto; flex: auto; width: 100%; height: 250px; }
  #oem1 ol li .inner { padding: 50px 20px; gap: 40px; width: 100%; }
  #oem1 ol li .inner .txt .tit { font-size: 28px; } }

@media (max-width: 600px) { #oem1 .header p { padding-top: 40px; font-size: 20px; } }

@media (max-width: 576px) { #oem1 .header p { padding-top: 50px; font-size: 22px; }
  #oem1 ol li .bg { height: 200px; }
  #oem1 ol li .inner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 25px; padding: 40px 20px; }
  #oem1 ol li .inner .num { width: 100%; font-size: 30px; }
  #oem1 ol li .inner .num:before { display: inline-block; position: relative; top: -50%; padding-right: 10px; font-size: 22px; }
  #oem1 ol li .inner .txt .tit { font-size: 26px; } }

@media (max-width: 500px) { #oem1 .header p { padding-top: 30px; font-size: 17px; } }

@media (max-width: 440px) { #oem1 ol li .bg { height: 150px; }
  #oem1 ol li .inner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 20px; padding: 30px 10px; }
  #oem1 ol li .inner .num { font-size: 22px; }
  #oem1 ol li .inner .num:before { display: inline-block; position: relative; top: -50%; padding-right: 10px; font-size: 16px; }
  #oem1 ol li .inner .txt .tit { padding: 0 0 10px; font-size: 22px; } }

#oem2 { padding-top: 0; }

#oem2 .header h3 { font-size: 45px; font-weight: 500; }

#oem2 .header p { font-size: 20px; }

#oem2 .box { padding: 100px 48px 110px; margin-bottom: 50px; color: #fff; border-radius: 20px; border: 1px solid #e1e1e1; background: no-repeat center / cover; }

#oem2 .box h4 { padding: 25px 0 30px; font-size: 35px; font-weight: 700; line-height: 1; }

#oem2 .box p { font-weight: 700; }

#oem2 .box:nth-of-type(1) { background-image: url(/img/water/oem_bg1.jpg); }

#oem2 .box:nth-of-type(2) { background-image: url(/img/water/oem_bg2.jpg); }

#oem2 .step { overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 30px 60px; }

#oem2 .step li { position: relative; padding: 35px 10px; width: calc((100% - 180px) / 4); text-align: center; color: #333; line-height: 1.5; border: 1px solid #e1e1e1; border-radius: 10px; }

#oem2 .step li .num { padding: 0 0 10px; font-weight: 700; color: #0c4da2; }

#oem2 .step li:after { content: ''; display: block; position: absolute; top: 50%; right: -30px; -webkit-transform: translate(50%, -50%); transform: translate(50%, -50%); width: 12px; height: 21px; background: url(/img/water/ico_arrow_right.png) no-repeat center center/contain; }

#oem2 .step li:last-of-type:after { display: none; }

@media (max-width: 1220px) { #oem2 .step li br { display: none; }
  #oem2 .step li { width: calc((100% - 120px) / 3); } }

@media (max-width: 991px) { #oem2 .box { padding: 80px 40px; margin-bottom: 40px; }
  #oem2 .step { gap: 30px 40px; }
  #oem2 .step li { width: calc((100% - 80px) / 3); }
  #oem2 .step li:after { right: -20px; } }

@media (max-width: 768px) { #oem2 .box { padding: 80px 30px; margin-bottom: 30px; }
  #oem2 .step { gap: 30px; }
  #oem2 .step li { width: calc((100% - 60px) / 3); }
  #oem2 .step li:after { right: -15px; width: 10px; } }

@media (max-width: 576px) { #oem2 .header h3 { font-size: 30px; }
  #oem2 .header p { font-size: 16px; }
  #oem2 .box { padding: 50px 20px; }
  #oem2 .box h4 { padding: 15px 0 20px; font-size: 28px; }
  #oem2 .step { gap: 20px 30px; }
  #oem2 .step li { padding: 30px 5px; width: calc((100% - 30px) / 2); }
  #oem2 .step li .num { padding: 0 0 5px; } }

/*************************************************
            css파일에서 수정금지!!!!!!!
            scss파일에서 수정해야함!!!!!!
*************************************************/