@charset "utf-8";

#mVisual {position:relative; width:100%; height:490px; 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: right center; }

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

#mVisual .mv_slider .mv-txt { width:100%; max-width:1400px; margin:0 auto;  height:100%;  padding:2%; box-sizing: border-box;  color:#fff; display:table;}
#mVisual .mv_slider .mv-txt > div { display:table-cell;  vertical-align:middle;  box-sizing:border-box;padding:0; }
#mVisual .mv_slider .mv-txt > div h3 { font-size:3.375em; line-height:1.2em; font-family: 'SB Aggro'; font-weight: 700; }
#mVisual .mv_slider .mv-txt > div h3 .fc-point {color:#50d4ff}
#mVisual .mv_slider .mv-txt > div .t1 { font-size:1.125em; padding-top:1em; line-height: 1.5em; opacity:.7; }


@media all and (max-width:1480px) {
#mVisual .mv_slider  {background-position:70% center;}
}

@media all and (max-width:976px) {
  #mVisual { height: 50vw; }
  #mVisual .mv_slider .mv-txt > div { text-align:center }
}
@media all and (max-width:767px) {
  #mVisual { height:60vw; }
}
@media all and (max-width:580px) {
  #mVisual { height:70vw; }
  #mVisual .mv_slider .mv-txt > div h3 { font-size:3.0em}
}
@media all and (max-width:430px) {
  #mVisual { height:80vw; }
    #mVisual .mv_slider .mv-txt > div h3 { font-size:2.3em}
}



/* 홈서비스메인비쥬얼 */
.mv_slider.mv3 {position: relative; background-image:url('/images/main/mv3-bg.png'); }
.mv_slider.mv3:before{content: ''; position: absolute; left: 27%; top:0; width: 269px; height: 94px; background:url('/images/main/mv3-bg1.png')no-repeat top center/contain; z-index: 2;}
.mv_slider.mv3:after{content: ''; position: absolute; left: 0; bottom: 0; width: 184px; height: 155px; background:url('/images/main/mv3-bg2.png')no-repeat left bottom/contain; z-index: 2;}
#mVisual .mv_slider.mv3 .mv-img{width: 100%; padding-left: 100px; height: 100%;}
#mVisual .mv_slider.mv3 .mv-img > div{height: 100%; display: flex; align-items: center; justify-content: flex-end; gap: 60px;}
#mVisual .mv_slider.mv3 .mv-img > div .imgbox.c{display: flex; align-items: flex-end; height: 100%;}
#mVisual .mv_slider.mv3 .mv-img > div .imgbox img{width: 100%;}
@media all and (max-width:1280px){
    #mVisual .mv_slider.mv3 .mv-img{padding-left: 40px;}

}
@media all and (max-width:976px){
    .mv_slider.mv3:before{left: 10%; width: 130px; }
    .mv_slider.mv3:after{width: 140px;}
    #mVisual .mv_slider.mv3 .mv-img{padding-left: 0;}
    #mVisual .mv_slider.mv3 .mv-img > div{position: relative; flex-direction: column; gap: 20px; justify-content: flex-start; padding: 40px;}
    #mVisual .mv_slider.mv3 .mv-img > div .imgbox img{width: auto; height: 100%;}
    #mVisual .mv_slider.mv3 .mv-img > div .imgbox.a{height: 10vw;}
    #mVisual .mv_slider.mv3 .mv-img > div .imgbox.b{height: 20vw;}
    #mVisual .mv_slider.mv3 .mv-img > div .imgbox.c{height: 25vw; position: absolute; right: 0; bottom: 0;}
}
@media all and (max-width:767px){
    .mv_slider.mv3:before{left: 80%; width: 110px; }
    .mv_slider.mv3:after{width: 120px;}
    #mVisual .mv_slider.mv3 .mv-img > div {padding: 30px;}
    #mVisual .mv_slider.mv3 .mv-img > div .imgbox.a{height: 13vw;}
    #mVisual .mv_slider.mv3 .mv-img > div .imgbox.b{height: 22vw; margin-left: -60px;}
    #mVisual .mv_slider.mv3 .mv-img > div .imgbox.c{height: 35vw; z-index: -1;}
}
@media all and (max-width:430px){
    .mv_slider.mv3:before{width: 70px; }
    .mv_slider.mv3:after{width: 80px;}
    #mVisual .mv_slider.mv3 .mv-img > div .imgbox.a{height: 16vw;}
    #mVisual .mv_slider.mv3 .mv-img > div .imgbox.b{height: 25vw; margin-left: -80px;}
    #mVisual .mv_slider.mv3 .mv-img > div .imgbox.c{height: 40vw;}
}


/* 4단계메인비쥬얼 */
.mv_slider.mv4 {position: relative; background-image:url('/images/main/mv4-bg.png'); }
.mv_slider.mv4:before{content: ''; position: absolute; right: 0; top: 0; width: 685px; height: 469px; background: url('/images/main/mv4-img4.png')no-repeat right top/contain;}
#mVisual .mv_slider.mv4 .mv-img{width: 100%; padding: 70px; height: 100%;}
#mVisual .mv_slider.mv4 .mv-img img{max-width: 100%;}
#mVisual .mv_slider.mv4 .mv-img .top{padding-left: 40px; padding-bottom: 50px; display: flex; justify-content: space-between; max-width: 980px;}
#mVisual .mv_slider.mv4 .mv-img > div .imgbox.c{max-width: 70%; width: 1080px;}
@media all and (max-width:1699px){
    #mVisual .mv_slider.mv4 .mv-img .top{padding-bottom: 30px; display: block; text-align: center; width: 980px; max-width: 70%;}
    #mVisual .mv_slider.mv4 .mv-img .top img{display: inline-block;}
    #mVisual .mv_slider.mv4 .mv-img > div .imgbox.b{margin-top: 20px;}
    .mv_slider.mv4:before{width: 30vw;}
}
@media all and (max-width:976px){
    #mVisual .mv_slider.mv4 .mv-img{padding: 30px;}
    #mVisual .mv_slider.mv4 .mv-img .top{text-align: left; padding-left: 0;}
    #mVisual .mv_slider.mv4 .mv-img > div .imgbox.c{max-width: 100%; width: 1080px;}

}



#mSearch {width:90%; max-width:630px; overflow:hidden;   box-sizing:border-box;position:relative; margin:-35px auto 0; background:#0b4da3; border-radius:5px;  color:#FFF }
#mSearch .mCar_sch {width:calc(100% - 80px);  height:70px; float:left;  font-size:1.0em; padding:0 25px; border:0; margin:0; color:#FFF; box-sizing:border-box;  
							background:#0b4da3;   font-family: 'S-CoreDream'; font-weight:300}
#mSearch input::placeholder { color: #FFF;}
#mSearch .mSch_btn {width:80px; height:70px; float:right; background:url('/images/main/msearch-icon.png') no-repeat center center}

@media all and (max-width:767px) {
	#mSearch .mCar_sch {height:60px;}
	#mSearch .mSch_btn {height:60px;}
}


#mNew {text-align:center; position:relative; margin-bottom:5em; }
#mNew:after {content:''; width:195px; height:320px; background:url('/images/main/mnew-left.png') no-repeat left top; position:absolute; left:0; top:0 }
#mNew:before {content:''; width:169px; height:294px; background:url('/images/main/mnew-right.png') no-repeat right bottom; position:absolute; right:0; bottom:0 }
#mNew h3 {padding:2em 0 0.7em;  font-size: 2.625em; color:#222;  line-height:1.5em;font-family: 'SB Aggro'; font-weight: 700; letter-spacing:0.01em}
#mCar_wrap {width:100%;padding-bottom:3.5em;}
.mCarbx {  text-align:center; margin: 0 10px;  }
.mCarbx a {width:100%}
.mCarbx a img {width:100%;  display:inline-block;}
.mCarbx a dl {border:1px solid #e9e9e9; padding:1em; text-align:left}
.mCarbx a dl dt {padding-bottom:0.9em; font-size:1.25em; color:#222; line-height:1.2em;}
.mCarbx a dl dd span {font-size:0.933em;  line-height:1.1em; padding-right:0.8em; border-right:1px solid #e3e3e3;  margin-right:0.8em;}
.mCarbx a dl dd span:last-child  { padding-right:0; border-right:0;  margin-right:0;}
.mCarbx a dl .shop {margin:0.7em 0 1em; display:inline-block;  font-size:0.87em; background:#f6f6f6; padding:0.3em; border-radius:5px;}
.mCarbx a dl .price { font-size:2.0em; font-family: 'Barlow', sans-serif; font-weight:800; color:#0b4da3 }
.mCarbx a dl .price .won {padding-left:0.5em; font-size:0.563em; color:#222; font-family:'S-CoreDream'; font-weight:500;  }

@media all and (max-width:976px) {
	#mNew:after {background-size:70% auto}
	#mNew:before {background-size:70% auto}
}
@media all and (max-width:799px) {
	#mNew:after {background-size:50% auto}
	#mNew:before {background-size:50% auto}
}
@media all and (max-width:480px) {
	#mNew h3 {font-size: 2.0em}
}


#mVod {width:100%; height:450px; background:#f6f9fb; padding:4.5em 0; position:relative; overflow:hidden}
#mVod:before {content:''; width:50%; height:100%; background:url('/images/main/mvod-bg.png') no-repeat; position:absolute; right:0; top:0}

#mVod .media {width:60%; float:left; overflow:hidden}
#mVod .media .title {padding-top:10px; width:calc(100% - 538px); float:left;  }
#mVod .media .title dl {}
#mVod .media .title dl dt {padding:0.5em 0 0.8em; font-size:2.375em; font-weight:300; color:#222; line-height:1.3em}
#mVod .media .title dl dd { font-size:1.875em; color:#0b4da3; font-family: 'SB Aggro'; font-weight: 500; letter-spacing:0.01em}
#mVod .media .title dl dd .st1 {font-size:0.6333em; color:#222} 
#mVod .media .vod-cont {width:538px; height:303px;float:left;  position: relative}
#mVod .media .vod-cont .vodCover { position: absolute; left:0; top:0; z-index:10; width: 100%; height: 100%; cursor: pointer; padding: 4%; box-sizing: border-box;
                              background:url("/images/main/vod.png") no-repeat center; background-size:cover} 
#mVod .media .vod-cont .vodPlay {width: 100%; height: 100%;   }

#mVod .msell {float:right; color:#FFF; }
#mVod .msell .in-box {height:303px; border:1px solid rgba(255,255,255,0.2); text-align:center; display:table; padding:0 3em;}
#mVod .msell .in-box dl {display:table-cell; vertical-align:middle; box-sizing:border-box}
#mVod .msell .in-box dl dt {font-size:2.375em; font-family: 'SB Aggro'; font-weight: 700; letter-spacing:0.01em}
#mVod .msell .in-box dl dd {padding:1em 0 3em; opacity:.7; font-weight:300}
#mVod .msell .in-box dl .sell-btn {display:inline-block; padding:0.5em 2.3em; font-size:1.250em; border-radius:5px; background:#26a9da; color:#FFF}
#mVod .msell .in-box dl .sell-btn:hover { background:#222; }

@media all and (max-width:1380px) {
	#mVod {height:auto }
	#mVod .media {width:68%; }
	#mVod .msell .in-box { padding:0 2em;}
}
@media all and (max-width:1170px) {
	#mVod:before {width:100%;  right:0; top:50%; background-size:100% auto}
	#mVod .media {width:100%;}
	#mVod .media .title {width:unset}
	#mVod .media .vod-cont {width:calc(100% - 300px); height:39vw; float:right; margin-bottom:3em}
	#mVod .msell {width:46%; margin:0 auto; float:unset}
	#mVod .msell .in-box {width:100%; height:auto; padding:3em;  }
}
@media all and (max-width:978px) {
	#mVod .media .vod-cont {width:calc(100% - 250px); height:37vw; }	
}
@media all and (max-width:750px) {
	#mVod .media .vod-cont { height:35vw; }
	#mVod .msell {width:55%;}
}
@media all and (max-width:690px) {
	#mVod:before { background-size: cover}
	#mVod .media .title dl dt br {display:none}
	#mVod .media .vod-cont {margin-top:2em; width:100%; ; height:54vw;}
	#mVod .msell {width:100%;}
	#mVod .msell .in-box { padding:2em 1em;  }
}
@media all and (max-width:480px) {
	#mVod .media .title dl dt {font-size:2.0em;}
	#mVod .msell .in-box dl dt {font-size:2.0em}
}





#mBanner ul {margin:5em 0;overflow:hidden}
#mBanner ul li {width:calc(33.3333% - 23.3333px);  height:174px; margin-left:35px; float:left; border-radius:5px; }
#mBanner ul li:nth-child(3n+1) { margin-left:0}
#mBanner ul li a {display:block; width:100%; height:100%; padding-top:16%; color:#FFF; border-radius:5px;}
#mBanner ul li a .t1 {font-size:1.500em;  text-align:center}
#mBanner ul li a:hover { color:#71d8ff;  }
#mBanner ul li dl {padding:2.3em 1.8em; }
#mBanner ul li dl dt {font-size:1.125em; color:#222}
#mBanner ul li dl dd {font-size:2.875em; color:#0b4da3;  font-family: 'Barlow', sans-serif; font-weight:800; }
#mBanner ul li dl dd.st1 { font-size:1.2em; color:#2d848b;  font-weight:600;  }

#mBanner ul li a.bg1 { background:url('/images/main/mbanner-bg1.png')no-repeat; }
#mBanner ul li a.bg2 { background:url('/images/main/mbanner-bg2.png')no-repeat; }
#mBanner ul li.bg3 {background:#e8e8ea url('/images/main/mbanner-bg3.png')no-repeat right center; background-size:auto 100%;}

@media all and (max-width:1380px) {
	#mBanner ul li { height:160px;}
}
@media all and (max-width:1280px) {
	#mBanner ul li {width:calc(33.3333% - 13.3333px); margin-left:20px;  height:145px;}
	#mBanner ul li a { padding-top:60px; }
}
@media all and (max-width:976px) {
	#mBanner ul li {width:calc(30% - 6.6666px); margin-left:10px;  height:135px;}
	#mBanner ul li.bg3  {width:calc(40% - 10px)}
}
@media all and (max-width:830px) {
	#mBanner ul li.bg3  {background-position:50%;}
}
@media all and (max-width:700px) {
	#mBanner ul li {width:100%; margin-left:0; margin-bottom:1em; height:auto; }
	#mBanner ul li a.bg1,
	#mBanner ul li a.bg2 {background-size:100% auto}
	#mBanner ul li.bg3  {width:100%; background-position:100%;}

	#mBanner ul li a { padding:3em 0; }
}