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

#main img { max-width: 100%; }

#prod1, #product { padding: 100px 0; }

@media (max-width: 991px) { #prod1, #product { padding: 90px 0; } }

@media (max-width: 768px) { #prod1, #product { padding: 80px 0; } }

@media (max-width: 576px) { #prod1, #product { padding: 60px 0; } }

#prod1 { background: #f9f9f9; }

#prod1 .flex { gap: 6.6666%; }

#prod1 .prod { display: block; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }

#prod1 .prod .img-box { position: relative; padding: 0 45px 0 0; }

#prod1 .prod .img-box .img { position: relative; border: 1px solid #e1e1e1; }

#prod1 .prod .img-box .img img { width: 100%; }

#prod1 .prod .img-box .img:after { content: ''; display: block; position: absolute; right: 0; bottom: 0; width: 50px; height: 50px; background: #000 url("/img/water/ico_more.png") no-repeat center; }

#prod1 .prod .img-box .img:hover:after { background-color: #ff9000; }

#prod1 .prod .img-box:after { display: block; position: absolute; right: 0; bottom: 0; -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-writing-mode: vertical-lr; -ms-writing-mode: tb-lr; writing-mode: vertical-lr; font-size: 24px; color: #d1d0d0; line-height: 1; }

#prod1 .prod h3 { padding: 25px 0 0; font-size: 40px; font-weight: 700; line-height: 1; color: #111; }

#prod1 .prod.lab .img-box:after { content: 'Water Lab Shower Heads'; }

#prod1 .prod.aromica .img-box:after { content: 'Aromica Shower Heads'; }

@media (max-width: 1199px) { #prod1 .flex { gap: 4%; } }

@media (max-width: 991px) { #prod1 .prod .img-box { padding: 0; }
  #prod1 .prod .img-box:after { position: static; -webkit-transform: rotate(0); transform: rotate(0); padding: 20px 0 0; -webkit-writing-mode: inherit; -ms-writing-mode: inherit; writing-mode: inherit; font-size: 16px; font-weight: 300; }
  #prod1 .prod h3 { padding: 10px 0 0; font-size: 32px; } }

@media (max-width: 768px) { #prod1 .prod .img-box .img:after { width: 40px; height: 40px; background-size: 50%; }
  #prod1 .prod .img-box:after { font-size: 15px; }
  #prod1 .prod h3 { font-size: 28px; } }

@media (max-width: 576px) { #prod1 h3 { font-size: 26px; } }

@media (max-width: 480px) { #prod1 .flex { gap: 10px; }
  #prod1 .prod h3 { padding: 7px 0 0; font-size: 24px; } }

@media (max-width: 400px) { #prod1 .flex { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 30px; } }

#slider .swiper-slide { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; height: 100vh; min-height: 800px; background: #fff; }

#slider .swiper-slide .img { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; background: no-repeat center / cover; }

#slider .swiper-slide .txt { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: right; -ms-flex-pack: right; justify-content: right; -webkit-box-align: end; -ms-flex-align: end; align-items: end; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding-bottom: 250px; background: #afcbdc url(/img/water/m_slider_w.jpg) no-repeat right top; }

#slider .swiper-slide .txt .inner { width: 100%; max-width: 750px; color: #fff; }

#slider .swiper-slide .txt .inner h3 { font-size: 60px; line-height: 1; font-weight: 700; }

#slider .swiper-slide .txt .inner p { word-break: keep-all; }

#slider .swiper-slide .txt .inner .p1 { padding: 100px 0 40px; font-size: 32px; font-weight: 500; line-height: 1.25; }

#slider .swiper-slide.slide1 .img { background-image: url(/img/water/m_slider1.jpg); }

#slider .swiper1-btn { position: absolute; left: 50%; bottom: 120px; z-index: 10; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 100%; max-width: 1500px; font-size: 0; }

#slider .swiper1-btn > div { display: inline-block; width: 60px; height: 60px; text-align: center; line-height: 60px; font-size: 24px; border: 1px solid #e1e1e1; background: #fff; }

#slider .swiper1-btn > div.swiper1-next { border-left: 0; }

@media (max-width: 1520px) { #slider .swiper-slide .txt { padding-left: 10px; padding-right: 10px; }
  #slider .swiper1-btn { padding: 0 10px; } }

@media (max-width: 1199px) { #slider .swiper-slide .txt { padding-bottom: 230px; }
  #slider .swiper-slide .txt .inner .p2 br { display: none; } }

@media (max-width: 991px) { #slider .swiper-slide { height: 80vh; min-height: 700px; }
  #slider .swiper-slide .txt { padding-bottom: 200px; }
  #slider .swiper-slide .txt .inner .p1 { padding: 60px 0 30px; font-size: 28px; }
  #slider .swiper-slide .txt .inner .p2 { font-size: 16px; }
  #slider .swiper1-btn { bottom: 100px; }
  #slider .swiper1-btn > div { width: 50px; height: 50px; line-height: 50px; } }

@media (max-width: 768px) { #slider .swiper-slide { height: 70vh; min-height: 600px; }
  #slider .swiper-slide .txt { padding-bottom: 120px; }
  #slider .swiper-slide .txt .inner .p1 { padding: 50px 0 25px; font-size: 24px; }
  #slider .swiper-slide .txt .inner .p2 { font-size: 14px; }
  #slider .swiper1-btn { bottom: 30px; }
  #slider .swiper1-btn > div { width: 40px; height: 40px; line-height: 40px; font-size: 20px; } }

@media (max-width: 576px) { #slider .swiper-slide { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: auto; min-height: inherit; }
  #slider .swiper-slide .img { -webkit-box-flex: 1; -ms-flex: auto; flex: auto; height: 250px; background-position: top -56px center; }
  #slider .swiper-slide .txt { padding: 40px 10px 80px; background-size: 42%; }
  #slider .swiper-slide .txt .inner h3 { font-size: 46px; }
  #slider .swiper-slide .txt .inner .p1 { padding: 25px 0 10px; font-size: 22px; }
  #slider .swiper-slide .txt .inner .p2 { font-size: 14px; }
  #slider .swiper1-btn { bottom: 20px; text-align: right; }
  #slider .swiper1-btn > div { width: 34px; height: 34px; line-height: 34px; font-size: 17px; } }

@media (max-width: 400px) { #slider .img { -webkit-box-flex: 1; -ms-flex: auto; flex: auto; height: 250px; background-position: top 0 center; } }

#product .header { text-align: center; }

#product .header h2 { font-size: 35px; line-height: 1; }

#product .header p { padding: 20px 0 50px; color: #999; line-height: 1; }

@media (max-width: 576px) { #product .header h2 { font-size: 32px; } }

@media (max-width: 440px) { #product .header h2 { font-size: 27px; }
  #product .header p { padding: 17px 0 40px; } }

#com .flex .brand, #com .flex .contact { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: end; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; position: relative; width: 100%; min-height: 800px; color: #fff; }

#com .flex .brand .inner, #com .flex .contact .inner { padding: 0 70px 150px; width: 100%; max-width: 750px; }

#com .flex .brand .inner h2, #com .flex .contact .inner h2 { padding: 0 0 40px; font-size: 60px; font-weight: 700; line-height: 1; }

#com .flex .brand .inner p, #com .flex .contact .inner p { font-size: 18px; word-break: keep-all; }

#com .flex .brand .inner p span, #com .flex .contact .inner p span { display: block; }

#com .flex .brand { -webkit-box-pack: right; -ms-flex-pack: right; justify-content: right; background: #0a4692 url(/img/water/m_brand_w.jpg) no-repeat right top; }

#com .flex .brand .more { display: block; position: absolute; right: 0; bottom: 0; width: 90px; height: 90px; text-align: center; font-size: 16px; line-height: 90px; background: #0c4da2; }

#com .flex .contact { -webkit-box-pack: left; -ms-flex-pack: left; justify-content: left; background: url(/img/water/m_contact_bg.jpg) no-repeat center/cover; }

@media (max-width: 1300px) { #com .flex .brand, #com .flex .contact { min-height: 700px; }
  #com .flex .brand .inner, #com .flex .contact .inner { padding: 0 10px 150px; } }

@media (max-width: 991px) { #com .flex .brand, #com .flex .contact { min-height: 660px; }
  #com .flex .brand .inner, #com .flex .contact .inner { padding: 0 10px 120px; }
  #com .flex .brand .inner h2, #com .flex .contact .inner h2 { font-size: 48px; }
  #com .flex .brand .inner p, #com .flex .contact .inner p { font-size: 16px; }
  #com .flex .brand .inner p br, #com .flex .contact .inner p br { display: none; }
  #com .flex .brand { background-size: 80%; }
  #com .flex .brand .more { width: 80px; height: 80px; line-height: 80px; } }

@media (max-width: 768px) { #com .flex .brand, #com .flex .contact { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; min-height: auto; }
  #com .flex .brand .inner, #com .flex .contact .inner { padding: 250px 10px 120px; }
  #com .flex .brand .inner h2, #com .flex .contact .inner h2 { font-size: 40px; }
  #com .flex .brand .inner p, #com .flex .contact .inner p { font-size: 15px; }
  #com .flex .brand .inner br, #com .flex .contact .inner br { display: none; }
  #com .flex .brand .more { width: 70px; height: 70px; line-height: 70px; } }

@media (max-width: 576px) { #com .flex { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  #com .flex .brand .inner, #com .flex .contact .inner { padding: 80px 10px 80px; }
  #com .flex .brand .inner h2, #com .flex .contact .inner h2 { font-size: 40px; }
  #com .flex .brand .inner p, #com .flex .contact .inner p { font-size: 15px; }
  #com .flex .brand .inner br, #com .flex .contact .inner br { display: none; }
  #com .flex .brand .more { width: 90px; height: 50px; line-height: 50px; font-size: 14px; } }