:after, :before, * { box-sizing: border-box; } 
.container { width:1200px; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } 
body { margin: 0; } 
h2 { font-size:4rem; line-height:4rem; margin-bottom:4rem; font-weight:700; } 

/*MV Swiper slider Style start*/
.hero-slider { width: 100%; height: 700px; display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; z-index: 0; } 
@media (max-width: 991px){
	.hero-slider { height: 600px; } 
}
@media (max-width: 767px){
	.hero-slider { height: 500px; } 
}
.hero-slider .swiper-slide { overflow: hidden; color: #fff; } 
.hero-slider .swiper-container { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } 
.hero-slider .slide-inner { width: 100%; height: 100%; position: absolute; left: 0; top: 0; /*z-index: 1; */
 background-size: cover; background-position: center; display: flex; justify-content: center; align-items: center; text-align: left; } 
.slide-inner_custom { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } 
.hero-slider .swiper-button-prev,
.hero-slider .swiper-button-next { background: transparent; width: 55px; height: 55px; line-height: 53px; margin-top: -30px; text-align: center; border: 2px solid #d4d3d3; border-radius: 55px; opacity:0; visibility:hidden; transition:all .3s ease; } 
.hero-slider:hover .swiper-button-prev,
.hero-slider:hover .swiper-button-next { transform:translateX(0); opacity:1; visibility:visible; } 
@media (max-width: 767px){
	.hero-slider .swiper-button-prev,
	.hero-slider .swiper-button-next { display: none; } 
}
.hero-slider .swiper-button-prev { left: 25px; transform:translateX(50px); } 
.hero-slider .swiper-button-prev:before { font-family: "Font Awesome 5 Free"; content: "\f060"; font-size: 15px; color: #d4d3d3; font-style: normal; display: inline-block; vertical-align: middle; font-weight: 900; } 
.hero-slider .swiper-button-next { right: 25px; transform:translateX(-50px); } 
.hero-slider .swiper-button-next:before { font-family: "Font Awesome 5 Free"; content: "\f061"; font-size: 15px; color: #d4d3d3; font-style: normal; display: inline-block; vertical-align: middle; font-weight: 900; } 
.hero-slider .swiper-pagination-bullet { width: 12px; height: 12px; text-align: left; line-height: 12px; font-size: 12px; color: #000; opacity: 0.3; background:#fff; transition:all .2s ease; } 
.hero-slider .swiper-pagination-bullet-active { opacity:1; } 
.hero-slider .swiper-container-horizontal > .swiper-pagination-bullets,
.hero-slider .swiper-pagination-custom,
.hero-slider .swiper-pagination-fraction { bottom: 30px; } 
@media screen and (min-width: 992px){
	.hero-slider .swiper-container-horizontal > .swiper-pagination-bullets,
	.hero-slider .swiper-pagination-custom,
	.hero-slider .swiper-pagination-fraction {/* display: none; */} 
}
.swiper-pagination { text-align:left; } 
.hero-slider .swiper-container-horizontal > .swiper-pagination-bullets { bottom:50px; max-width: 1200px; padding: 0 15px; margin: 0 auto; left: 50%; transform: translateX(-50%); text-align:center;} 
@media (min-width: 767px){
 .hero-slider .swiper-container-horizontal > .swiper-pagination-bullets { bottom:30px; } 
}
/*--------------------------------------------------------------
#hero-style
--------------------------------------------------------------*/
.hero-style { height: 850px; transition:all .4s ease; } 
@media (max-width: 991px){
	.hero-style { height: 600px; } 
}
@media (max-width: 767px){
	.hero-style { height: 500px; } 
}
@media screen and (min-width: 992px){
	.hero-style .container { padding-top: 95px; } 
}
.hero-style .slide-title,
.hero-style .slide-text,
.hero-style .slide-btns { max-width: 690px; } 
.hero-style .slide-title h2 { font-size: 100px; font-weight: 600; line-height: 1; color: #ffffff; margin: 0 0 40px; text-transform: capitalize; transition:all .4s ease; } 
@media (max-width: 1199px){
	.hero-style .slide-title h2 { font-size: 75px; } 
}
@media (max-width: 991px){
	.hero-style .slide-title h2 { font-size: 50px; margin: 0 0 35px; } 
}
@media (max-width: 767px){
	.hero-style .slide-title h2 { font-size: 35px; margin: 0 0 30px; } 
}
.hero-style .slide-text p { opacity: 0.8; font-family: Rajdhani; font-size: 32px; font-weight: 500; line-height: 1.25; letter-spacing: normal; color: #ffffff; margin: 0 0 40px; transition:all .4s ease; } 
@media (max-width: 767px){
	.hero-style .slide-text p { font-size: 16px; font-size: 1rem; font-weight: normal; margin: 0 0 30px; } 
}
.hero-style .slide-btns > a:first-child { margin-right: 10px; } 

/*추가 및 변경 220802*/
/*1번째 슬라이더*/
.mv-slide-title1 { margin-top:25px; display: flex; justify-content: center; position: relative; z-index: 3; } /*보라 바탕 합리적인 리퍼브 소핑의 기준..경험하세요*/
.mv-slide-text1 { text-align:center;  z-index: 3;  position: relative; }  /*margin-top:-100px;*/ /*수정 251101*//*가격은 덜고 만족은 더하다*/ 
.mv-slide-img1 { position:absolute; top:183px; left:6%; } /*우산 도깨비*/
.mv-slide-img2 { position:absolute; bottom:13px; right:28%; z-index: 4; } /*즐거운 핑크 도깨비*/
.mv-slide-img3 { position:absolute; top:100px; right:17%; }  /*혀 메롱 도깨비*/
.mv-slide-img4 { position:absolute; top:39%; right:5%; } /*로봇청소기 위 도깨비*/

.mv_first_bg1 { background:url('../images/main/mv_01_pc_bg.jpg')no-repeat; } /*백그라운드 이미지*/ /*pc용 이미지 호출 (모바일 사이즈에서는 이미지 교체 예정)*/
/*.mv_first_mobile_bg1 { background:url('../images/main/mv_01_mobile_bg.jpg')no-repeat; display:none; } */
.mv-slide-img-mo-hap { display:none; }


/*2번째 슬라이더*/
.mv-slide2-img1 { position: absolute; top: 165px; left: 15%;  z-index:2; } /*margin-top: -4px; */ /*수정 251031*/ /*background: rgba(0, 0, 0, 0.1);  */
.mv-slide2-img2 { position: absolute; top: 155px; right: 10%; } /*margin-top: -4px; */ /*수정 251031*/ /*background: rgba(0, 0, 0, 0.1); */

.mv-pc_bg_1 { background:url('../images/main/mv_02_pc_bg.jpg')no-repeat; } /**/
.mv-mobile_bg_1 { background:url('../images/main/mv_02_m_bg.jpg')no-repeat; display:none; } /*display:block; */

/*MV 2번째 슬라이더 컨텐츠 이미지 pc/모바일 스위칭용*/
.mv2_m_img_01 { display:none; text-align:center; width:100%; } 
.mv2_m_img_02 { display:none; } 


@media(max-width:1600px){
	.mv-slide-img2 { right: 24%; }
}
@media(max-width:1540px){
	.mv-slide2-img1 { width: 550px; }
	.mv-slide2-img1 img { object-fit: cover; width: 100%; }
	.mv-slide2-img2 { width: 500px; }
	.mv-slide2-img2 img { object-fit: cover; width: 100%; }
}
@media(max-width:1330px){
	.mv-slide-img2 { right: 18%; }
	.mv-slide2-img1 { left:5%; top: 195px; }
	.mv-slide2-img2 { right:5%; top: 190px; }
}
@media(max-width:1180px){
	.mv-slide2-img1 {  width: 520px; top: 210px; }
	.mv-slide2-img2 {  width: 470px; top: 205px; }
	
}
@media(max-width:1140px){ /*이미지 위치 및 사이즈 조절용*/
	.mv-slide-img1 { left:1%; top: 127px; width: 270px; }
	.mv-slide-img1 img { object-fit: cover; width: 100%; bottom: 31px; }
	.mv-slide-img2 { width:230px; }
	.mv-slide-img2 img { object-fit: cover; width: 100%; }
	.mv-slide-img3 { right: 13%; width: 150px; }
	.mv-slide-img3 img { object-fit: cover; width: 100%; }
	.mv-slide-img4 { right: 1%; width:230px; }
	.mv-slide-img4 img { object-fit: cover; width: 100%; }
}
@media(max-width:1100px){
	.mv-slide2-img1 { width: 480px; top: 240px; }
	.mv-slide2-img2 { width: 420px; top: 240px; }
}

@media (max-width: 991px) {
	.hero-style { height: 126vmin; } /*타블렛~모바일에서 높이값 비율을 맞춰주기 위해 추가함, 안하면 세로형으로 보임, 높이값 반영 후 내부 이미지들 비율도 재조정함. */ /*height: 143vmin;*/
	
}


@media(max-width:990px) {

	.container.mv_wrap { max-width: 94% } /*불필요한 공간 생기는 이유가 마진패딩이 아닌 container에 적용된 max-width값 때문이었음. 선택자 추가해서 넓혀줌. 모바일 사이즈에서 없애게 처리할 것*//*추가 251101*/
	
	/*MV 1번째 슬라이더 컨텐츠 이미지 pc/모바일 스위칭용*/
	.hero-slider .slide-inner {  } /*background-size: unset;*/ /*수정 251101*/
	.mv_first_bg1 { background:url('../images/main/mv_01_mobile_bg.jpg')no-repeat; }
	.mv-slide-title1 { display:none; } /*width: 120%; margin-top: -150px; margin-left: -10%; */ /**/ /*background:url('/images/main/mv_01_mobile_2.png')no-repeat; */
	/*.mv-slide-title1 img { display:none;}*/  /*width: 100%; */
	.mv-slide-text1 { display:none;  } /*width:120%; margin-left:-10%; margin-top: -100px; */ /**/ /*background:url('/images/main/mv_01_mobile_1.png')no-repeat !important;*/
	/*.mv-slide-text1 img { width:70%; } */
	.mv-slide-img1 { display:none; } /*right를 하면 width가 100%가 되는 오류 있음*/ /*top: 100px; left:63%; background: rgba(0, 0, 0, 0.05);*/
	.mv-slide-img2 { display:none; }
	.mv-slide-img3 { display:none; }
	.mv-slide-img4 { display:none; } /*bottom: 30px; left: 5%;*/
	
	.mv-slide-img-mo-hap { display:block; }
	.mv-slide-img-mo-hap img { width: 100%; height: 100%; } /*background: rgba(0, 0, 0, 0.1); */
	
		
	/*MV 2번째 슬라이더 컨텐츠 이미지 pc/모바일 스위칭용*/
	/*.mv-mobile_bg_1 { display:block !important; } */
	.mv-pc_bg_1 { background:url('../images/main/mv_02_mobile_bg.jpg')no-repeat; }
	.mv-slide2-img2 { display:none; }
	
	.mv2_pc_img_01 { display:none; } 
	.mv2_m_img_01 { width:80%; margin: -100px auto 0; display: flex; justify-content: center; } 
	.mv2_m_img_01 img { width:100%; } 
	.mv2_pc_img_02 { display:none; } 
	.mv2_m_img_02 { display:block; width:80%; margin: 0 auto; display: flex; justify-content: center; } 
	.mv2_m_img_02 img { width:100%; } 
}
@media(max-width:768px) {
	.mv-slide-title1 { width:130%; margin-left: -20%; margin-top: -80px; } 
	.mv-slide-text1 { margin-top:-50px } 
	.mv-slide-text1 img { width:70%; } 
	.mv2_m_img_01 { margin: -40px auto 0; } 
}
@media(max-width:500px) {

	.container.mv_wrap { max-width: unset } /*추가 251101*/ /*모바일에서는 container에 사용된 원래 여백 값 사용위해 히든처리*/
	
	.mv-slide-title1 { margin-top: -70px; } 
	.mv-slide-text1 { width:100%; margin-left:unset; margin-top:-20px; } 
	.mv-slide-text1 img { width:100%; } 
}

  /*--------------------------------------------------------------
#button-style (필요한 것만 사용)
--------------------------------------------------------------*/
.theme-btn, .theme-btn-s2 { background-color: #ffffff; font-size: 20px; font-weight: 500; line-height: 1.4; text-align: center; color:#2b3b95; padding: 9px 32px; border: 0; border-radius: 3px; text-transform: uppercase; display: inline-block; line-height: initial; transition:all .4s ease; } 
/*a { text-decoration: none; transition: all 0.2s ease; } /*필요할때만 사용*/
.theme-btn-s2 { background-color: rgba(255, 255, 255, 0.9); color: #131e4a; } 
.theme-btn:hover, .theme-btn-s2:hover, .theme-btn:focus, .theme-btn-s2:focus, .theme-btn:active, .theme-btn-s2:active { background-color:#2b3b95; color: #fff; } 
.theme-btn-s3 { font-size: 16px; font-weight: 500; line-height: 1.5; color: #ffffff; text-transform: uppercase; } 
i.fa-chevron-circle-right { height:22px; width:22px; } 
/*a:hover { text-decoration: none; } /*필요할때만 사용*/
@media (max-width: 991px){
	.theme-btn, .theme-btn-s2, .theme-btn-s3 { font-size: 13px; padding: 15px 25px; } 
}
@media (max-width: 767px){
	.theme-btn, .theme-btn-s2 { padding: 13px 20px; font-size: 13px; } 
}

/*--------------------------------------------------------------
슬라이더 사용법, 튜닝, 원본소스 오류 개선 등
--------------------------------------------------------------*/
/*사용 가능한 코드*/
/*이미지 가운데 정렬을 위해 text-align:center과, display:flex;와 justify-content: center;를 사용해서 배치 가능 ( 너비가 전체 100%가 아닌 박스 내 이미지가 좌측 정렬되어 우측 이미지가 잘려보이는 경우)*/

/*사용 불가능한 코드*/
/*
position:absolute 이후 left:50%; 과 transform:translateX(-50%)와 같은걸 사용하면 parallax 시차 등장 모션이 작동이 안됨!
높이의 배치는 margin-top 음수마진으로, 좌우측 배치는 margin-left 마진이나 음수마진을 이용하여 배치하자.
*/

/*참고사항*/
/*
0. 첫번째 Scene은 pc/모바일용 이미지들을 구분하지 않고 하나의 이미지로 반응형으로 구현하였고,
    두번째 Scene은 pc용 배경 이미지 및 컨텐츠 이미지와, 모바일용 배경 이미지 및 컨텐츠 이미지로 2종을 별도로 반영하였음.
	Scene 별로 내부 컨텐츠의 복잡도나 디자인 구성에 따라 모바일에서 다른 레이아웃으로 반영해야했기 때문. 
	가급적 하나의 이미지 세트로 작업 하는 것이 효율적일 것으로 보임.

1.첫번째 슬라이더는 백그라운드 이미지가 부모 div 박스에 data로 반영되었고,
    두번째 슬라이더는 백그라운드 이미지가 자식 div 박스를 추가하여 반영함. 
	모바일용 배경이미지를 사용해야해서 부모 박스에 사용할 수 없기 때문.
	*data를 이용하여 두개의 div에 각각 이미지를 반영하는 방법 실패 >> 모바일 이미지를 display:none 처리해도 계속 보이는 현상이 있음 >> div 박스내에 background:url(); 로 직접 반영함.
	   모바일 이미지에 display:none처리 시 !important가 있어서 반영됨, 미디어쿼리로 1000픽셀 이상 시 보이도록 할때도 disply:block !important;를 해야 반영됨.

2. 모바일용 이미지 (배경/내용 이미지)를 반영하기 위해 pc용/모바일용 이미지를 반영하고, class로 pc/모바일 구분하여 display:none/block를 미디어쿼리로 제어함.
     모바일용 이미지 사이즈는 가로 1000px을 기준으로 작업함. 모바일 환경에서 선명하게 보이도록.
	 백그라운드 이미지 반영을 위해서 slider-inner 클래스를 자식 박스에 옮겼더니 이미지가 1200픽셀까지만 가운데 정렬되었음. display:flex와 justify-content: center;  align-items: center; 이 사라졌기때문.
	 그래서 부모에 이 스타일 반영위해 slider-inner-custom을 추가해줌. (부모에 slider-inner 클래스만 옮길경우 자식 박스에 반영한 백그라운드 이미지가 안보임)

3. 한 슬라이더 Scene 내에서 2개의 컨텐츠 이미지가 존재한다면 data-swiper-parallax가 800과 2400값이 가장 이상적으로 보임. (2000부터 등장을 반대쪽에서 하게됨). 위아래 컨텐츠가 엇갈리게 등장하여 주목도 높음.

4. 원본소스 오류.
    -닫기 오류
	 .hero-slider .swiper-container-horizontal > .swiper-pagination-bullets { bottom:50px; max-width: 1200px; padding: 0 15px; margin: 0 auto; left: 50%; transform: translateX(-50%); } 
	 } >> 한번 더 닫힘. 삭제해도 오류 없었음.
	
	-세미콜론 없음 오류
	.hero-slider .swiper-button-prev:before { ... display: inline-block ...여기에 구분용 세미콜론 없음 vertical-align: middle; ... } 
	.hero-slider .swiper-button-next:before { ... display: inline-block ...여기에 구분용 세미콜론 없음 vertical-align: middle; ... }