@charset "utf-8";

#mVisual {position:relative; width:100%; height:950px; max-height: 100vh; overflow:hidden; }
.mv_slider.slick-slide,
.mvWrap .slick-track,
.mvWrap .slick-list{ position:relative; height:100%; outline:none; }

#mVisual .mv_slider { background-repeat: no-repeat; background-size: cover; background-position: center center; }

#mVisual .slick-arrow { z-index:99; }

.mv_slider.mv1 {background-image:url('/images/main/m_visual1_250618.jpg'); }
.mv_slider.mv2 {background-image:url('/images/main/m_visual2.jpg'); }
.mv_slider.mv3 {background-image:url('/images/main/m_visual3.jpg'); }

#mVisual .mv_slider .mv-txt { position: relative; display:flex; align-items: center; width:100%; height:100%; margin:0 auto; padding: 0 5%; }
#mVisual .mv_slider .mv-txt div { width: 100%; box-sizing:border-box; color:#fff;  }
#mVisual .mv_slider .mv-txt div .t1 { font-size: 3rem; font-weight: 700; font-family: 'ONE-Mobile'; line-height: 1.0em; }
#mVisual .mv_slider .mv-txt div .t2 { font-size: 11rem; font-weight: 800; font-family: 'Barlow Semi Condensed'; font-style: italic; line-height: 1.0em; }
#mVisual .mv_slider .mv-txt div .t3 { font-size: 2rem; margin-top: 1.5em; line-height: 1.5em; }


@media all and (max-width:1580px){
  #mVisual { height: 55vw;  }
}

@media all and (max-width:1480px){
  #mVisual { height: 60vw;  }
  #mVisual .mv_slider .mv-txt div .t1 { font-size: 2.5rem; }
  #mVisual .mv_slider .mv-txt div .t2 { font-size: 9.5rem; }
  #mVisual .mv_slider .mv-txt div .t3 { font-size: 1.8rem;}
}

@media all and (max-width:1280px){
  #mVisual { height: 75vw;  }
}


@media all and (max-width:976px){
  #mVisual { height: 90vw;  }
}

@media all and (max-width:767px){
  #mVisual { height: 100vw; }
  #mVisual .mv_slider { background-position: 70% center;  }
  #mVisual .mv_slider::before { content: ''; width: 100%; height: 100%; background: rgba(0,0,0,0.4); position: absolute; left:0; top:0; }
  #mVisual .mv_slider .mv-txt div .t1 { font-size: 2.2rem; }
  #mVisual .mv_slider .mv-txt div .t2 { font-size: 8.5rem; }
}

@media all and (max-width:640px){
  #mVisual { height: 120vw; }
  #mVisual .mv_slider .mv-txt div .t1 { font-size: 2rem; }
  #mVisual .mv_slider .mv-txt div .t2 { font-size: 13vw; }
  #mVisual .mv_slider .mv-txt div .t3 { font-size: 1.6rem; line-height: 1.25em; max-width: 85%; }

  #mVisual .mv_slider .mv-txt div .t3 br { display: none; }
}







.mtit { text-align: center; margin-bottom: 8rem; }
.mtit p { font-size: 2rem; color:#bebebe; font-family: 'Barlow Semi Condensed'; margin-bottom: 1em; font-weight: 800;
            text-transform: uppercase; letter-spacing: 0.3em; }
.mtit h3 { font-size: 4rem; color:#212121; font-family: 'ONE-Mobile'; font-weight: 700; line-height: 1.2em; }


@media all and (max-width:1280px){
  .mtit { margin-bottom: 6rem; }
  .mtit p { font-size: 1.8rem; }
  .mtit h3 { font-size: 3.5rem; }
}

@media all and (max-width:767px){
  .mtit p { font-size: 1.6rem; }
  .mtit h3 { font-size: 3.2rem; }
}

@media all and (max-width:640px){
  .mtit { padding: 0 10%; }
}

@media all and (max-width:480px){
  .mtit { padding: 0 5%; margin-bottom: 5rem; }
}


#mProduct { position: relative; overflow: hidden; padding: 5vw 0; text-align: center; }
#mProduct .pdList { position: relative;  }
#mProduct .pdList::before { content: '';  background: #0c0c0c; position: absolute; left:0; top: 50%; z-index:-1; width: 100%; height: 100%; }
#mProduct .productSlide { width: 92%; margin: 0 auto; max-width: 1660px; padding: 0 20px; }
#mProduct .productSlide li { margin: 20px 10px; box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.06), 0 3px 12px 0 rgba(0, 0, 0, 0.06); }
#mProduct .productSlide li a { display: block; background: #fff;  }
#mProduct .productSlide li a img { max-width: 100%; }
#mProduct .productSlide li dl { padding: 3.5em 0 3em; font-weight: 800; }
#mProduct .productSlide li dl dt { font-size: 2rem; font-family: 'Barlow Semi Condensed'; color:#d50010; }
#mProduct .productSlide li dl dd { font-size: 3.2rem; color:#212121; }

@media all and (max-width:1480px){
  #mProduct { padding: 7vw 0 6vw; }
  #mProduct .productSlide li dl { padding: 3em 0 2.6em; }
  #mProduct .productSlide li dl dt { font-size: 1.8rem; }
  #mProduct .productSlide li dl dd { font-size: 2.8rem; }
}

@media all and (max-width:1280px){
  #mProduct { padding: 8vw 0 6vw; }
}

@media all and (max-width:1080px){
  #mProduct .productSlide li { margin: 10px 7px; }
}

@media all and (max-width:880px){
  #mProduct { padding: 9vw 0; }
  #mProduct .productSlide li dl { padding: 2.5em 0; }
  #mProduct .productSlide li dl dt { font-size: 1.6rem; }
  #mProduct .productSlide li dl dd { font-size: 2.5rem; }
}

@media all and (max-width:480px){
  #mProduct .productSlide { width: 85%; }
  #mProduct .productSlide li dl dt { font-size: 1.5rem; }
  #mProduct .productSlide li dl dd { font-size: 2.3rem; }
}

@media all and (max-width:400px){
  #mProduct .productSlide { width: 92%; }
}




#mAbout { position: relative; padding: 7.5% 0; text-align: center; overflow: hidden; }
#mAbout::before { content: ''; width: 25%; height: 100%; background: #f9f9f9; position: absolute; left: 25%; top:0; }
#mAbout::after { content: ''; width: 25%; height: 100%; background: #f9f9f9; position: absolute; right: 0; bottom:0; }
#mAbout .mtit { z-index: 1; }
#mAbout ul { display: flex; align-items: stretch; margin-top: 10em; position: relative; z-index: 1; flex-wrap: wrap; }
#mAbout ul li { width: 25%; }
#mAbout ul li a { padding: 2em 0; }
#mAbout ul li a img { max-width: 30%; }
#mAbout ul li h4 { font-size: 2.8rem; font-weight: 800; color:#212121; margin-top:1em;  }
#mAbout ul li .txt { color:#787878; line-height: 1.5em; margin: 1.5em 0; }
#mAbout ul li .more { font-size: 1.3rem; color:#bebebe; font-weight: 700; letter-spacing: 0.15em; font-family: 'Barlow Semi Condensed'; }


@media all and (max-width:1280px){
  #mAbout ul li h4 { font-size: 2.5rem; }
  #mAbout ul li p { font-size: 1.5rem; }
}

@media all and (max-width:1080px){
  #mAbout  { padding: 9% 0; }
  #mAbout ul { margin-top: 8em; }
  #mAbout ul li .txt { padding: 0 1em; }
  #mAbout ul li .txt br { display: none; }
}

@media all and (max-width:767px){
  #mAbout  { padding: 6em 0 0; }
  #mAbout::after, #mAbout::before { display: none; }
  #mAbout ul { margin-top: 3em; }
  #mAbout ul li { width: 100%; text-align: left; }
  #mAbout ul li:nth-child(even) { background: #f9f9f9; }
  #mAbout ul li a { display: flex; align-items: center; justify-content: space-between; padding: 2.5em 3em; }
  #mAbout ul li .ico { width: 24%; text-align: center; }
  #mAbout ul li .ico img { max-width: 50%; }
  #mAbout ul li .cont { width: 74%;  }
  #mAbout ul li h4 { margin-top:0; font-size: 2.3rem;  }
  #mAbout ul li .txt { padding: 0 ; margin-top:0.5em;  }
}

@media all and (max-width:568px){
  #mAbout  { padding: 5em 0 0; }
  #mAbout .mtit { margin-bottom: 3rem }
  #mAbout ul { margin-top: 0; }
  #mAbout ul li a { padding: 2em 3em; }
  #mAbout ul li .ico { width: 14%; }
  #mAbout ul li .ico img { max-width: 100%; }
  #mAbout ul li .cont { width: 80%;  }
  #mAbout ul li .txt { line-height: 1.35em; }
}

@media all and (max-width:400px){
  #mAbout ul li .ico { width: 25%; text-align: left; }
  #mAbout ul li .ico img { max-width: 80%; }
  #mAbout ul li .cont { width: 70%;  }
}


#mComm { position: relative; padding: 7% 0; overflow: hidden; background: url("/images/main/communityBG.jpg") no-repeat center; background-size: cover; }
#mComm .cont { display: flex; gap: 20px; align-items: stretch; flex-wrap: wrap; }
#mComm .cont .tit { padding-bottom: 1.5em; border-bottom: 1px solid #000; display: flex; justify-content: space-between; align-items: center; }
#mComm .cont .tit h4 { font-size: 2.4rem; font-weight: 800; color:#212121; }
#mComm .cont .tit a { width: 23px; height: 23px; display: block; position: relative; }
#mComm .cont .tit a span { background: #ccc; position: absolute;  }
#mComm .cont .tit a span.x { width: 100%; height: 1px; left:0; top: 50%; margin-top: -0.5px; }
#mComm .cont .tit a span.y { width: 1px; height: 100%; top:0; left: 50%; margin-left: -0.5px; }

#mComm .cont .notice { width: 40%; background: #fff; padding: 3.2em 3.2em 2.8em;  }
#mComm .cont .notice ul li { background: url("/images/common/dotline.png") repeat-x bottom; }
#mComm .cont .notice ul li:last-child { background: none; }
#mComm .cont .notice ul li a { display: flex; justify-content: space-between; padding: 1.2em 0; color:#585858; }
#mComm .cont .notice ul li a p { max-width: calc(100% - 60px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mComm .cont .notice ul li a span { color:#b4b4b4; font-size: 1.5rem; font-family: 'Barlow Semi Condensed'; font-weight: 500; letter-spacing: 0.03em; }

#mComm .cont .customer { width: calc(30% - 40px); background: #fff; padding: 3.2em 3.2em 2.8em; }
#mComm .cont .customer .cs { padding: 2em 0; display: flex; align-items: center; background: url("/images/common/dotline.png") repeat-x bottom; }
#mComm .cont .customer .cs div { padding-left: 0.8em; font-family: 'Rubik'; }
#mComm .cont .customer .cs div .tel { font-size: 3.8rem; font-weight: 600; color:#d60010; letter-spacing: -0.04em; }
#mComm .cont .customer .cs div .fax { font-size: 1.8rem; }
#mComm .cont .customer .txt { text-align: center; padding: 1.8em 0; background: url("/images/common/dotline.png") repeat-x bottom; }

#mComm .cont .commBtn { width: 30%; display: flex; flex-direction: column; gap: 20px; }
#mComm .cont .commBtn a { height: calc(50% - 10px); padding: 2.5em; color:#fff;  }
#mComm .cont .commBtn a dl dt { font-size: 2.4rem; font-weight: 800; }
#mComm .cont .commBtn a dl dd { line-height: 1.5em; font-weight: 500; margin-top: 0.7em; }

#mComm .cont .commBtn a.vod { background: #d60010 url("/images/main/ico_vod.png") no-repeat 95% 80%; }
#mComm .cont .commBtn a.inquiry { background: #03264e url("/images/main/ico_inquiry.png") no-repeat 95% 80%; }


@media all and (max-width:1680px){
  #mComm .cont .notice { width: 36%; }
  #mComm .cont .customer { width: calc(34% - 40px); }
}

@media all and (max-width:1480px){
  #mComm .cont .customer .cs img { width: 65px; }
  #mComm .cont .customer .cs div .tel { font-size: 3.2rem; }
  #mComm .cont .customer .cs div .fax { font-size: 1.7rem; }
}

@media all and (max-width:1280px){
  #mComm .cont { gap: 14px; }
  #mComm .cont .customer { width: calc(34% - 28px); }
  #mComm .cont .customer .cs img { width: 50px; }
  #mComm .cont .customer .cs div .tel { font-size: 3rem; }

  #mComm .cont .notice,
  #mComm .cont .customer { padding: 3em 2.5em 2.5em; }

  #mComm .cont .commBtn { gap: 14px; }
  #mComm .cont .commBtn a { height: calc(50% - 7px); }
  #mComm .cont .commBtn a.vod,
  #mComm .cont .commBtn a.inquiry { background-size: 20% auto; }
  #mComm .cont .commBtn a dl dd { font-size: 1.5rem; }
}


@media all and (max-width:1080px){
  #mComm { padding: 6em 0; }
  #mComm .cont .notice { width: 58%; }
  #mComm .cont .customer { width: calc(42% - 14px); }
  #mComm .cont .customer .txt { font-size: 1.5rem; }
  #mComm .cont .commBtn { width: 100%; flex-direction: row; }
  #mComm .cont .commBtn a { height: auto; width: calc(50% - 7px); }
  #mComm .cont .commBtn a.vod,
  #mComm .cont .commBtn a.inquiry { background-size: 15% auto; }
  #mComm .cont .customer .cs div .tel { font-size: 3.2vw; }
}

@media all and (max-width:767px){
  #mComm .cont .notice { width: 100%; }
  #mComm .cont .customer { width: 50%; }
  #mComm .cont .commBtn { width: calc(50% - 14px); flex-direction: column; }
  #mComm .cont .commBtn a { width: 100%; height: calc(50% - 7px); }
  #mComm .cont .customer .cs div .tel { font-size: 4vw; }
  #mComm .cont .customer .cs img { width: 45px; }
}

@media all and (max-width:568px){
  #mComm .cont .customer { width: 100%; }
  #mComm .cont .commBtn { width: 100%; flex-direction: row; }
  #mComm .cont .commBtn a { width: calc(50% - 7px); height: auto; padding: 2em;  }

  #mComm .cont .customer .cs div .tel { font-size: 3rem; }
  #mComm .cont .customer .cs img { width: 50px; }
  /* #mComm .cont .customer .txt { text-align: left; } */


  #mComm .cont .commBtn a.vod,
  #mComm .cont .commBtn a.inquiry { background-size: 20% auto; }
  #mComm .cont .commBtn a dl { max-width: 80%; }
  #mComm .cont .commBtn a dl dd { line-height: 1.3em; }
  #mComm .cont .commBtn a dl dd br { display: none; }
}

@media all and (max-width:480px){
  #mComm { padding: 5em 0;  }
  #mComm .cont { gap: 10px;  }
  #mComm .cont .commBtn { flex-wrap: wrap; gap: 10px; }
  #mComm .cont .commBtn a { width: 100%; padding: 2.5em 2em;  }
  #mComm .cont .commBtn a dl dd br { display: block; }

  #mComm .cont .commBtn a.vod,
  #mComm .cont .commBtn a.inquiry { background-size: 15% auto; }
}




#mBanner { padding: 3% 0; }
#mBanner .s-inner { display: flex; align-items: center; }
#mBanner .s-inner h4 { width: 20%; font-size: 2.3rem; color:#212121; font-weight: 800;  }
#mBanner .s-inner ul { width: 80%; display: flex; justify-content: space-between; flex-wrap: wrap; }
#mBanner .s-inner ul li { border: 1px solid #d9d9d9; max-width: calc((100% - 30px) / 4); }
#mBanner .s-inner ul li a img { max-width: 100%; }


@media all and (max-width:1280px){
  #mBanner .s-inner h4 { font-size: 2rem; }
}

@media all and (max-width:1080px){
  #mBanner .s-inner h4 { font-size: 1.8rem; }
  #mBanner .s-inner ul li { max-width: calc((100% - 18px) / 4); }
}

@media all and (max-width:880px){
  #mBanner .s-inner h4 { display: none; }
  #mBanner .s-inner ul { width: 100%; }
  #mBanner .s-inner ul li { max-width: calc((100% - 12px) / 4); }
}

@media all and (max-width:480px){
  #mBanner { padding: 5% 0; }
  #mBanner .s-inner ul { gap: 4px; }
  #mBanner .s-inner ul li { max-width: calc((100% - 4px) / 2); }
}