/********************** main **********************/
/********************** main **********************/
/********************** main **********************/
/* main slide start */
.mainVisual{overflow: hidden;position:relative;width: 100%;;}
.main-slide .slick-list{overflow: inherit;z-index:0;overflow: hidden;}
.main-slide .main-img
{height:850px;background-repeat: no-repeat; background-size: cover;}
.main-img01 { background: url(/wp-content/uploads/2026/05/mainVisual01.jpg) }
.main-img02 { background: url(/wp-content/uploads/2026/05/mainVisual02.jpg)}
.main-img03 { background: url(/wp-content/uploads/2026/05/mainVisual03.jpg) }
.main-img04 { background: url(/wp-content/uploads/2026/05/mainVisual04.jpg) }

/* MAIN VISUAL PROGRESS BAR */
.main-visual-controls
{display: flex;flex-direction: row;align-items: center;text-shadow: var(--text-shadow);margin-top: 5.5rem; }
.main-visual-controls .main-controls-wrapper
{display: flex;  align-items: flex-end;  flex-direction: column;}
.main-visual-controls .progress
{width:240px; height:2px; position:relative;margin-left: 2rem;}
.main-visual-controls .progress .bg-bar
{position:absolute; width:100%; height:100%; background:#ffffff4f; display:block; left:0; top:0;}
.main-visual-controls .progress .ing-bar
{width:0%; height:100%; display:block; position:relative; background:var(--sub-color);}
.main-visual-controls .progress.active .ing-bar
{width:100%; transition:all 7s ease-in-out;}

/* main slide play pause */
.main-visual-controls .play-pause{}
.main-visual-controls .play-pause button
{display: flex;flex-direction: column;align-items: center;justify-content: center;border-radius: 100%;background-color: var(--color1);border: none; }
.main-visual-controls .play-pause button:hover{background-color: var(--color1);}
.main-visual-controls .play-pause button i
{font-size:1.7rem; color:#fff;line-height: 2rem;}
.main-visual-controls .play-pause .main-visual-play-btn
{display:none;}

/* main slide arrow */
#mainVisual .arrow
{position: absolute; width:100%; left: 50%; top:50%;transform: translate(-50%,-50%);display: flex;flex-direction: row;align-items: center;justify-content: space-between;max-width: 1725px;}
#mainVisual .arrow button
{position: relative;}
#mainVisual .arrow button::before
{content: '';display: block;width: 100%;height: 1px;background-color: #fff;min-width: 130px;position: absolute; bottom: 1.5rem;    margin-bottom: 1.5rem;}
#mainVisual .arrow button span
{font-size: 2rem;font-weight: 600;font-family: var(--font1);color: #fff;text-transform: capitalize;transition: var(--transition1);}
#mainVisual .arrow button.prev-btn::before{right: 0;}
#mainVisual .arrow button.next-btn::before{left: 0;}
#mainVisual .arrow button:hover,
#mainVisual .arrow button:focus,
#mainVisual .arrow button.active{background-color: transparent}
#mainVisual .arrow button:hover span,
#mainVisual .arrow button.active span{color: #ffffff91;}

.main-top-wrap
{position: absolute;position: absolute;transform: translateY(-50%);top: 52%;}

/* mainTopText */
.main-top-text
{width: 100%;  display: block;color: #fff;text-shadow: var(--text-shadow);}
.main-top-text h3
{font-size: 5.2rem; font-weight: 300; margin-bottom: 1.5rem;}
.main-top-text h2
{font-weight: 500;  font-size: 6.2rem;line-height: 1.3;}

/* scroll */
#mainVisual .scroll
{position: absolute;bottom: -100px;left: 50%;transform: translateX(-50%);z-index: 9;background-color: #ffffff36;border: 1px solid #fff;border-radius: 100%;display: flex;flex-direction: column;align-items: center;width: 200px;height: 200px;padding: 2.5rem;}
#mainVisual .scroll img
{margin-bottom: 1rem;}
#mainVisual .scroll span
{color: #fff;font-family: var(--font1);font-size: 1.6rem;font-weight: 600;    text-transform: uppercase;}

.main-con-wrap{}

/* main title */
.main-title{}
.main-title small
{color: #000000;  font-size: 1.8rem;  font-weight: 700;  font-family: var(--font1);display: flex;flex-direction: row;align-items: center;margin-bottom: 4rem;}
.main-title small::before
{content: '';display: block;width: 6px;height: 16px;background-color: #e60012;margin-right: 1rem;}
.main-title h3
{font-family: var(--font1);  color: #000000;  font-weight: 600;  font-size: 4.2rem;  line-height: 1.4;}
.main-title a.more-btn
{font-family: var(--font1);font-weight: 600;  font-size: 1.8rem; color: #fff;display: flex;flex-direction: row;align-items: center;justify-content: center; gap: 5.5rem; background-color: #231815;width: 190px;height: 50px;border-radius: 5rem;transition: var(--transition1);}
.main-title a.more-btn i
{rotate: 45deg;}
.main-title a.more-btn:hover
{background-color:#e60012;}

/* main about */
#mainAbout
{padding: 10rem 0;}
#mainAbout .main-about-wrap
{display: flex;  flex-direction: row;  align-items: start;  justify-content: space-between;}
#mainAbout .main-about-wrap .ab-txt
{flex: 1;}
#mainAbout .main-about-wrap .ab-img
{flex: 1;width: 760px;height: 360px;background: url(/wp-content/uploads/2026/05/main-about.jpg) no-repeat center;background-size: cover;position:relative}
#mainAbout .main-about-wrap .ab-img::after
{content: '';display: block;background: url(/wp-content/uploads/2026/05/main-icon.png) no-repeat center;background-size: contain;width: 227px;height: 117px;position: absolute;left: -13.5rem;bottom: -2.94rem;}
#mainAbout .main-about-wrap .main-title h3
{margin-bottom: 9.5rem}

/* main prd */
#mainPrd
{padding: 10rem 0;background: url(/wp-content/uploads/2026/05/main-prd-bg.jpg) no-repeat center;background-size: cover;}
#mainPrd .main-title
{display: flex;flex-direction: column;align-items: center;margin-bottom: 6rem;}
#mainPrd .main-prd-con
{display: flex;flex-direction: row;align-items: stretch;justify-content: space-between;gap: 2rem;}
#mainPrd .main-prd-con a
{width: calc(100%/4 - 15px);background: #ffffff4d;  border: 1px solid #fff;padding:2rem 1.5rem 6rem;transition: var(--transition1);}
#mainPrd .main-prd-con a dl
{display: flex;  flex-direction: row;  align-items: center;  justify-content: space-between;margin-bottom: 1.5rem;}
#mainPrd .main-prd-con a dl dt
{font-family: var(--font1);  color: #000;  font-size: 1.8rem;  font-weight: 700;}
#mainPrd .main-prd-con a dl dd
{display: flex;flex-direction: row;align-items: center;gap: 2rem;width: 32px;height: 32px;background-color: #fff;justify-content: center;border-radius: 100%; transition: var(--transition1);overflow: hidden;position: relative;}
#mainPrd .main-prd-con a dl dd span
{opacity: 0;visibility: hidden; font-size:1.4rem ;color: #fff;font-family: var(--font1);font-weight: 600;width: 0%;transition: var(--transition2);position: absolute;left: 1.5rem;}
#mainPrd .main-prd-con a dl dd i
{color: #000;  font-size:1.8rem; rotate: 45deg;font-weight: 600;;transition: var(--transition1);}
#mainPrd .main-prd-con a .prd-img
{min-width: 335px;height: 200px;background-repeat: no-repeat;background-size: contain;background-color: #fff;background-position: center;}
#mainPrd .main-prd-con a:nth-child(1) .prd-img{background-image: url(/wp-content/uploads/2026/05/main-prd01.png);background-size: 45%;}
#mainPrd .main-prd-con a:nth-child(2) .prd-img{background-image: url(/wp-content/uploads/2026/05/main-prd02.png);background-size: 90%;}
#mainPrd .main-prd-con a:nth-child(3) .prd-img{background-image: url(/wp-content/uploads/2026/05/main-prd03.png);    background-size: 45%;}
#mainPrd .main-prd-con a:nth-child(4) .prd-img{background-image: url(/wp-content/uploads/2026/05/main-prd04.png);background-size: 85%;}
#mainPrd .main-prd-con a .prd-txt
{margin-top:3rem;}
#mainPrd .main-prd-con a .prd-txt p
{font-size: 2.4rem;font-family: var(--font1);color: #000000;font-weight: 700;}
#mainPrd .main-prd-con a:hover dd
{width: 140px;height: 32px;background-color: #e60012;border-radius: 5rem;display: flex;  flex-direction: column;  align-items: flex-end;}
#mainPrd .main-prd-con a:hover dd span
{opacity: 1;visibility: visible;width:100%;}
#mainPrd .main-prd-con a:hover dd i
{color: #fff;justify-content: flex-end;margin-right: 1.7rem;}

/* mainQu */
#mainQu
{padding: 6rem 0;}
#mainQu .main-qu-wrap
{padding: 9rem 0; background: url(/wp-content/uploads/2026/05/main-qu-bg.jpg) no-repeat center; background-size: cover;width: 100%;height: 100%;}
#mainQu .main-qu-wrap .main-title small
{color: #fff;}
#mainQu .main-qu-wrap .main-title h3
{margin-bottom: 6rem;color: #fff;}

/* 반응형 */
@media screen and (max-width : 1800px) {
  /* mainvisual */
  #mainVisual .arrow
  {left: 0;transform: none;max-width: 100%}
  #mainVisual .arrow .prev-btn
  {left: 6rem;}
  #mainVisual .arrow .next-btn
  {right: 6rem;}
}

@media screen and (max-width : 1660px) {
  .main-slide .main-img
  {background-position: right}
  .main-top-wrap
  {left: 16rem}
}

@media screen and (max-width : 1550px) {
  #mainVisual .arrow button span
  {font-size: 1.8rem}

  /* main prd */
  #mainPrd .main-prd-con a .prd-img
  {min-width: 100%}
}

@media screen and (max-width : 1440px) {
  .main-top-text h2
  {font-size: 5.2rem}
  .main-title h3
  {word-break: keep-all}

}

@media screen and (max-width : 1150px) {
  .main-slide .main-img
  {height: 760px;}
  .main-top-text h2
  {text-align: center;width: 100%;}
  .main-top-wrap
  {left: 0; transform: none; width: 100%; top: 0;margin-top: 24rem}
  /* {left: 50%;transform: translateX(-50%);width: 100%;top: 30%;} */
  .main-visual-controls
  {justify-content: center;margin-top: 0;position: absolute;top: 55rem;left: 50%;transform: translateX(-50%);}
  /* {justify-content: center;margin-top: 18.5rem} */
  #mainVisual .scroll
  {bottom: -80px;width: 150px;height: 150px;padding: 1.5rem}
  #mainVisual .scroll img
  {height: 2rem}
  #mainVisual .scroll span
  {font-size: 1.4rem;}

  /* main about */
  #mainAbout .main-about-wrap
  {flex-direction: column}
  #mainAbout .main-about-wrap .ab-img
  {flex: auto;width: 80%;margin-left: 15%;}
  #mainAbout .main-about-wrap .ab-txt
  {flex: auto;width: 100%;margin-bottom: 5rem}
  #mainAbout .main-about-wrap .main-title
  {width: 80%; padding-left: 15%;}
  #mainAbout .main-about-wrap .main-title h3
  {margin-bottom: 2.5rem;}
  .main-title h3
  {font-size: 3.8rem}
  .main-title small
  {margin-bottom: 2rem}

  #mainPrd .main-title h3
  {text-align: center;}
  #mainPrd .main-prd-con
  {flex-wrap: wrap;width: 95%;margin: auto}
  #mainPrd .main-prd-con a
  {width: calc(100% / 2 - 10px);padding: 2rem 2rem 3rem}
  #mainPrd .main-prd-con a .prd-txt p
  {font-size: 2.1rem}
  #mainPrd .main-prd-con a:nth-child(1) .prd-img,
  #mainPrd .main-prd-con a:nth-child(2) .prd-img,
  #mainPrd .main-prd-con a:nth-child(3) .prd-img,
  #mainPrd .main-prd-con a:nth-child(4) .prd-img
  {background-size: auto;}

  /* main qu */
  #mainQu .main-qu-wrap
  {padding: 5rem 2rem}
}

@media screen and (max-width : 860px)  {
  #mainVisual .arrow
  {display: none;}
  .main-top-text h2
  {font-size: 4.5rem;}
  .main-slide .main-img
  {background-position: right -13rem center}

  #mainAbout .main-about-wrap .main-title
  {width: 100%;padding-left: 0;text-align: center}
  .main-title h3
  {font-size: 3.2rem;}
  .main-title small
  {justify-content: center}
  .main-title a.more-btn
  {margin: auto;font-size: 1.6rem}
  #mainAbout .main-about-wrap .ab-img
  {height: 250px;width: 70%;margin: auto;padding-left: 0;}
  #mainAbout .main-about-wrap .ab-img::after
  {width: 160px; height: 80px;left: -5.5rem;bottom: -2rem;}
  #mainAbout .main-about-wrap .ab-txt
  {margin-bottom: 3rem}
  .main-title small
  {font-size: 1.6rem;}
  .main-title h3
  {font-size: 2.7rem;}
  .main-title a.more-btn
  {justify-content: space-between; gap: 0rem;padding: 0 3rem;width: 50%;height: 45px}
  #mainAbout .main-about-wrap .ab-img
  {height: 280px; width: 95%}
  #mainAbout .main-about-wrap .ab-img::after
  {width: 120px;height: 60px;left: -2.5rem;bottom: -1rem}

  #mainPrd .main-prd-con a dl dt
  {font-size: 1.6rem;}
  #mainPrd .main-prd-con a .prd-txt p
  {font-size: 1.9rem;}

  #mainQu .main-qu-wrap .main-title h3
  {margin-bottom: 2rem;text-align: center;}
}

@media screen and (max-width : 767px) {
  .main-top-text h2
  {font-size: 3.2rem;word-break: keep-all}
  #mainVisual .scroll span,
  .main-top-text h2 br
  {display: none;}
  .main-visual-controls .progress
  {width: 200px;}
  .main-slide .main-img
  {height: 600px}
  #mainVisual .scroll
  {bottom: -55px;width: 100px;height: 100px;}
  .main-top-wrap
  {margin-top: 18rem}
  .main-top-text h2
  {text-align: left;}
  .main-top-text
  {padding: 0 2rem;}
  .main-visual-controls
  {justify-content: flex-start;margin-top: 0;position: absolute;top: 32rem;left: 2rem;transform: none}

  #mainPrd .main-title
  {margin-bottom: 4rem}
  #mainPrd .main-prd-con a
  {width: 100%;}
  #mainQu .main-qu-wrap
  {padding: 10rem 0rem;}
}

@media screen and (max-width : 550px) {
  .main-slide .main-img
  {background-position: right -13rem center;}
}

@media screen and (max-width : 425px) {
  .main-slide .main-img
  {background-position: right -18rem center;}
  #mainPrd .main-prd-con
  {width: 100%;}
  .main-title a.more-btn
  {width: 90%}
}