/* maib-visual */
#mainVisual 
{position:relative;}
.main-visual-slide, .main-visual-slide .slick-list, .main-visual-slide .slick-track, .main-visual-item 
{height:100%;}

.main-visual-item
{position:relative;}
.main-visual-item .visual-frame-con .main-visual-img 
{width:100%; height:658px;}

.main-visual-txt-con 
{position:absolute; width:100%; bottom:18rem; z-index:9997;}
.main-visual-txt-con h1
{font-size:5.4rem; color:#fff; font-weight:600;}
.main-visual-txt-con p
{font-size:2.4rem; color:#fff; font-weight:500; margin-top:2rem;}

.main-visual-controls { position: absolute; width: 100%; bottom: 6rem; z-index:9998;} 
.main-visual-controls .main-visual-controls-wrap { position:relative; display:flex; align-items:center; z-index:5}
.main-visual-controls .play-pause-circle {position:absolute; width:100%; height:100%; cursor:pointer; z-index:5;}
.main-visual-controls .play-pause-circle svg 
{fill:rgba(0,0,0,0); stroke:#fff; stroke-dasharray:310; stroke-width:1px; width:100%; height:100%;}
.main-visual-controls .play-pause-circle svg.bg 
{opacity:0.5; stroke-dashoffset:0;}
.main-visual-controls .play-pause-circle svg.progressing 
{position:absolute; top:50%; left:50%; stroke:var(--point-color); stroke-width:3px; stroke-dashoffset:310; transform:translate(-50%, -50%) rotate(-90deg);}
.main-visual-controls .play-pause-circle .progressing.active
{animation: circleSpin 9.2s 0.2s ease} 

.main-visual-controls .play-pause-circle .play-pause-btn 
{position:absolute; top:0; width:100%; height:100%; display:flex; align-items: center; justify-content: center; z-index:999;;}
.main-visual-controls .play-pause-circle .play-pause-btn button
{width:11px; height:12px; border-radius:0; background-position:center; background-repeat:no-repeat;}
.main-visual-controls .play-pause-circle .play-pause-btn button:hover 
{background-color:transparent;}
.main-visual-controls .play-pause-circle.pause .progressing
{animation-play-state:paused}
.main-visual-controls .play-pause-circle .play-pause-btn button.main-visual-play-pause-btn
{display:none}
.main-visual-controls .play-pause-circle .play-pause-btn button.main-visual-play-pause-btn.show
{display:block}
.main-visual-controls .main-play-pause-btn 
{position:relative; width:60px; height:60px;}
@keyframes circleSpin {
  5%{
    stroke-dashoffset:310
  }
  100% {
    stroke-dashoffset:0
  }
}

.main-visual-controls .slide-dots-wrapper
{margin-left:3rem;}
.main-visual-controls .slide-dots-wrapper .slick-dots {display:flex;}
.main-visual-controls .slide-dots-wrapper .slick-dots li
{margin-right:2rem;}
.main-visual-controls .slide-dots-wrapper .slick-dots li strong 
{font-size:1.8rem; color:#ffffff40; font-weight:700; cursor:pointer}
.main-visual-controls .slide-dots-wrapper .slick-dots li.slick-active strong 
{color:#fff;}

/* common */
.main-title-con
{text-align:center;}
.main-title-con .main-titie
{padding-bottom: 1.5rem; font-size:5.4rem; color:var(--main-color2); font-weight:700; letter-spacing: -0.01rem;}
.main-title-con .detail
{font-size: 2.5rem; color:#000; font-weight:700;}
.main-title-con p
{padding-top: 1.5rem; font-size:1.8rem; color:#000; font-weight: 500;}

/* mainProductCon */
#mainProductCon 
{margin:12rem 0;}
.pro-btn-con
{padding-top: 5.5rem;}
.pro-btn-wrap
{display: flex; gap: 5px;}
.pro-btn-wrap li
{width: calc((100% - 2rem) / 5);}
.pro-btn-wrap li *
{transition: var(--transition1);}
.pro-btn-wrap li a
{padding: 4.5rem 0 3rem; display: flex; flex-direction: column; align-items: center; background-color: #f2f2f2; border-radius: 1.5rem; overflow: hidden; transition: var(--transition1);}
.pro-btn-wrap li a .title-wrap 
{text-align: center;}
.pro-btn-wrap li a .title-wrap .title
{font-size:2.4rem; color:var(--main-color2); font-weight:800; margin-bottom:1rem;}
.pro-btn-wrap li a .title-wrap .detail 
{font-size:1.8rem; color:#a6a6a7; font-weight:600; margin-bottom:2rem;}

.pro-btn-wrap li a .img 
{transform: translateX(8rem);}
.pro-btn-wrap li a .btn-box 
{margin-top: 3rem; padding: 1rem 3rem; display: flex; align-items: center; justify-content: center; background-color: var(--main-color2); border-radius: 2rem;}
.pro-btn-wrap li a .btn-name 
{font-size: 1.8rem; color: #fff; font-weight: 500;}

/* hover */
.pro-btn-wrap li:hover a
{background-color: var(--main-color2);}
.pro-btn-wrap li:hover a .img
{transform: translateX(0);}
.pro-btn-wrap li:hover a .title-wrap .title,
.pro-btn-wrap li:hover a .title-wrap .detail
{color: #fff;}
.pro-btn-wrap li:hover a .btn-box
{background-color: #fff;}
.pro-btn-wrap li:hover a .btn-box .btn-name
{color: var(--main-color2);}

/* main-contact */
.main-company
{margin:12rem 0;}
.company-btn-con
{padding-top: 5.5rem;}
.company-btn-wrap
{display: flex; justify-content: space-between; gap: 2rem;}
.company-btn-wrap *
{transition: var(--transition1);}
.company-btn-wrap .btn
{position: relative; width: 33.3%; transition: var(--transition1); background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; border-radius: 3rem;}
.company-btn-wrap .btn::before
{opacity: 1; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #e8e8e8; z-index: 1;}

.company-btn-wrap .btn a
{padding: 5rem 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; position: relative; z-index: 2;}
.company-btn-wrap .btn a .title-wrap
{display: flex; flex-direction: column; justify-content: center; align-items: center; }
.company-btn-wrap .btn a .title-wrap .title 
{padding-bottom: 2rem; font-size: 2.8rem; color: var(--main-color2); font-weight: 800;}
.company-btn-wrap .btn a .title-wrap .detail
{padding-bottom: 2rem; font-size: 1.8rem; color: var(--main-color2); line-height: 1.4; text-align: center;}

.company-btn-wrap .btn a .btn-wrap
{padding: 1rem 3rem; display: flex; align-items: center; justify-content: center; background-color: #ffffff30; border: 1px solid #1f2d4c30; border-radius: 2rem;}
.company-btn-wrap .btn a .btn-wrap .btn-name 
{font-size: 1.8rem; color: var(--main-color2);}

/* hover */
.company-btn-wrap .btn:hover
{width: 60%;}
.company-btn-wrap .btn:hover::before
{opacity: 0;}
.company-btn-wrap .btn:hover a
{padding: 0 5rem; justify-content: flex-start;}

.company-btn-wrap .btn:hover a .title-wrap .title,
.company-btn-wrap .btn:hover a .title-wrap .detail,
.company-btn-wrap .btn:hover a .btn-wrap .btn-name
{color: #fff;}
.company-btn-wrap .btn:hover a .btn-wrap
{border: 0;}

/* .main-contact */
.main-contact-con
{padding: 25rem 0; display: flex; align-items: center; flex-direction: column; gap: 4rem; background: url("../img/m-con-bg.jpg") no-repeat center / cover fixed;}
.main-contact-con .main-title-con .main-titie
{font-size: 6rem; color: #fff;}
.main-contact-con .main-title-con .detail
{font-size: 2.8rem; color: #fff; font-weight: 500;}
.main-contact-con .contact-btn a
{display: inline-block; padding: 1rem 3rem; font-size: 2rem; color: #fff; font-weight: 500; background-color: #ffffff30; border-radius: 2rem; transition: var(--transition1);}
.main-contact-con .contact-btn a:hover
{background-color: #fff; color: var(--main-color2);}