/********** container **********/

.container { max-width: 1400px; padding: 140px 0; }
.mainSec-tit { margin-bottom: 60px; font-size: 45px; font-weight: 700; line-height: 60px; }

/* 반응형 */
@media screen and (max-width: 1400px) {
  .container { max-width: 100%; padding: 100px 10px; }
  .mainSec-tit { margin-bottom: 40px; font-size: 35px; line-height: 50px; text-align: center; }
}

@media screen and (max-width: 1240px) {
  .container { padding: 80px 10px; }
}

@media screen and (max-width: 600px) {
  .mainSec-tit { margin-bottom: 25px; font-size: 23px; line-height: 32px; }
}
@media screen and (max-width: 360px) {
  .mainSec-tit { font-size: 21px; }
}
/********** container **********/

/********** visual **********/

#mainVisual { width:100%; height:950px;}
.main-slide, swiper-wrapper { height:100%;}
.main-slide1 { background: url(../img/visual01.png) no-repeat center center; }
.main-slide2 { background: url(../img/visual02.png) no-repeat center center; }
.main-slide3 { background: url(../img/visual03.png) no-repeat center center; }
.main-visual-img { position:absolute; width:100%; height:100%; }

/* typo */
.slide-txt-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; color: #fff; }
.slide-txt-wrap em { margin-bottom: 30px; font-size: 30px; font-weight: 600; }
.slide-txt-wrap strong { margin-bottom: 60px; font-size: 65px; text-align: center;}
.slide-txt-wrap p { font-size: 20px; line-height: 30px; text-align: center; }

/* progressbar */
.all-box {  position: absolute; display: flex; width: 90%; height: 17px; left: 50%; bottom: 10%; box-sizing: border-box; padding: 0 20px; transform: translate(-50%, -50%); z-index: 20; }
.progress-box { display: flex; position: relative; width: 316px; height: 17px; z-index: 11; }
.autoplay-progress { position: absolute; left: 30px; top: 6px; z-index: 10; width: 200px; height: 3px; background-color: rgba(255, 255, 255, 0.5); }
.autoplay-progress svg { --progress: 0; position: absolute; left: 0; top: 0; z-index: 10; width: 100%; stroke-width: 3px; stroke: #fff; fill: none; stroke-dashoffset: calc(100 * (1 - var(--progress))); stroke-dasharray: 100; }

/* pagination */
.swiper-pagination { display: inline-block !important; position: static !important; width: 20px !important; color: #fff !important; }
.swiper-total-pagination { position: absolute; right: 47px; color: #fff; }

/* arrow */
.arrow-box { display: inline-flex; position: absolute; left: 300px; z-index: 1000; }
.visual-button, .scrollDown-icon { width: 10px; height: 17px; background: url(../img/visual-arrow-prev.png) no-repeat center center; cursor: pointer; }
.visual-button:first-child { margin-right: 20px; }
.visual-button:last-child { transform: rotate(180deg); }

/* scrollDown */
.scrollDown { display: flex; align-items: center; position: absolute; right: 0; }
.scrollDown span:first-child { margin-right: 20px; font-size: 16px; font-weight: 800; color: #fff; }
.scrollDown .scrollDown-icon { width: 10px; height: 17px; animation: scrollDown 2s linear infinite; }
@keyframes scrollDown {
  0% { transform: translateY( 0 ) rotate(-90deg); }
  50% { transform: translateY( 5px ) rotate(-90deg); }
  100% { transform: translateY( 0 ) rotate(-90deg); }
}

/* 반응형 */

@media screen and (max-width: 1200px) {
  .slide-txt-wrap strong { margin-bottom: 25px; font-size: 45px; }
}
@media screen and (max-width: 900px) {
  #mainVisual { height: 600px; }
}
@media screen and (max-width: 600px) {
  #mainVisual { height: 450px; }
  .slide-txt-wrap em { font-size: 18px; }
  .slide-txt-wrap strong { margin-bottom: 25px; font-size: 35px; }
  .slide-txt-wrap p { font-size: 16px; line-height: 23px; }
  .all-box { align-items: center; width: 300px; height: 40px; }
  .arrow-box { left: 208px; }
  .scrollDown { display: none; }
  .autoplay-progress { width: 150px; }
  .progress-box { width: 18px; }
  .swiper-total-pagination { right: -240px; }
}

/********** visual **********/

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

.mainProduct-contents-wrap { display: flex; gap: 60px; }
.mainProduct-contents strong { display: block; margin-top: 30px; font-size: 25px; font-weight: 700; text-align: center; color: #000; }
.mainProduct-contents p { font-size: 18px; font-weight: 400; color: #555; line-height: 25px; text-align: center; }
.mainProduct-contents img { width: 100%; }

@media screen and (max-width: 900px) {
  .mainProduct-contents-wrap { justify-content: center; flex-wrap: wrap; }
}

@media screen and (max-width: 600px) {
  .mainProduct-contents p { font-size: 16px; }
  .mainProduct-contents p br { display: none; }
}
@media screen and (max-width: 360px) {
  .mainProduct-contents strong { font-size: 20px; }
}
/********** product **********/

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

.mainAbout { background: url(../img/main-about-bg.png) no-repeat center center; background-size: cover; }
.mainAbout-tit { margin-bottom: 40px; font-size: 70px; font-weight: 700; color: #fff; text-align: center; }
.mainDesc { margin-bottom: 40px; font-size: 18px; font-weight: 400; color: #fff; line-height: 25px; text-align: center; }
.mainAbout-contents-wrap { display: flex; justify-content: center; }
.mainAbout-contents { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 280px; height: 280px; border-radius: 100%;  background-color: rgba(255, 255, 255, .15); }
.mainAbout-contents img { object-fit: contain; margin-bottom: 35px; }
.mainAbout-contents p { font-size: 18px; font-weight: 700; color: #fff; line-height: 25px; text-align: center; }

@media screen and (max-width: 1400px) {
  .mainAbout-contents { border-radius: 0; }
  .mainAbout-contents-wrap { flex-wrap: wrap; gap: 80px; }
}

@media screen and (max-width: 1240px) {
  .mainAbout-tit { margin-bottom: 25px; font-size: 60px; font-weight: 700; }
}

@media screen and (max-width: 600px) {
  .mainAbout-contents-wrap { gap: 25px; }
  .mainDesc { font-size: 16px; font-weight: 300; }
  .mainAbout-tit { font-size: 45px; }
  .mainDesc br { display: none; }
}


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

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

.mainContact-contants-wrap { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.mainContact-leftBox strong { display: block; margin-bottom: 25px; font-size: 30px; font-weight: 700; }
.mainContact-leftBox .contact-num { display: block; margin-bottom: 25px; font-size: 25px; font-weight: 700; color: #282d61; }
.mainContact-leftBox p { margin-bottom: 60px; font-size: 18px; font-weight: 400; color: #555; line-height: 25px; }
.mainContact-leftBox .contact-btn { display: flex; justify-content: center; align-items: center; width: 300px; height: 60px; border-radius: 30px; border: 1px solid #555; font-size: 18px; font-weight: 700; color: #000; transition: all .3s; }
.mainContact-leftBox .contact-btn:hover { color: #fff; background-color: #555; }

@media screen and (max-width: 1400px) {
  .mainContact-contants-wrap { flex-direction: column; text-align: center; }
  .mainContact-rightBox { width: 100%; }
  .mainContact-rightBox iframe { width: 100% !important; height: 400px; }
  .mainContact-leftBox a { margin: 0 auto 50px auto; }
}
@media screen and (max-width: 1240px) {
  .mainContact-leftBox strong { font-size: 25px; }
  .mainContact-leftBox p { margin-bottom: 25px; }
}
@media screen and (max-width: 600px) {
  .mainContact-leftBox strong { font-size: 18px; }
  .mainContact-leftBox p { font-size: 16px; }
}
@media screen and (max-width: 412px) {
  .mainContact-leftBox p { font-size: 12px; }
}
/********** contact **********/