@charset "utf-8";

@import url('common.css');


#wrap .contents{width:100%; overflow:hidden; position:relative;display: flex;  align-items:center; text-align: center;}
#wrap .contents .visual{height:763px; width:100%; position:relative;}
#wrap .contents .visual li{width:100%; height:100%; position:absolute; left:0; top:0; opacity:0;}
#wrap .contents .visual li:nth-of-type(1){ background:url(/mobile/images/main/visual0_1.jpg) no-repeat center center; background-size:cover;  opacity:1;}

/*메인 텍스트 정렬  */
#wrap .contents .maintext { position:absolute; font-size: 45px; font-weight:100;color: white; z-index: 99;font-family: 'Roboto', sans-serif;
 line-height: 53px;width:100%; margin-top:12px;}

#wrap .contents .ui{ position:absolute; left:50%; margin-left:-151px; width:302px; height:79px; top:60px;}
#wrap .contents .ui:after{display:block; content:""; clear:both;}
#wrap .contents .ui li{float:left; height:100%;}
#wrap .contents .ui .prev{width:24px; background:url(/mobile/images/main/ui_prev.png) no-repeat center center; background-size:24px}
#wrap .contents .ui .next{width:24px; background:url(/mobile/images/main/ui_next.png) no-repeat center center; background-size:24px}
#wrap .contents .ui .slogan{width:254px; position:relative;  height:100%;}
#wrap .contents .ui .slogan li{position:absolute; left:0; top:0; width:100%; height:100%; opacity:0;}
#wrap .contents .ui .slogan li:nth-of-type(1){background:url(/mobile/images/main/slogan_0.png) no-repeat center center; background-size:cover; opacity:1;}
#wrap .contents .ui .slogan li:nth-of-type(2){background:url(/mobile/images/main/slogan_1.png) no-repeat center center; background-size:cover;}
#wrap .contents .ui .slogan li:nth-of-type(3){background:url(/mobile/images/main/slogan_2.png) no-repeat center center; background-size:cover;}
#wrap .contents .ui .slogan li:nth-of-type(4){background:url(/mobile/images/main/slogan_3.png) no-repeat center center; background-size:cover;}
#wrap .contents .ui .slogan li:nth-of-type(5){background:url(/mobile/images/main/slogan_4.png) no-repeat center center; background-size:cover;}

#wrap .contents .mainBtn{ width:300px; position:absolute; left:50%; margin-left:-150px; bottom:15px;}
#wrap .contents .mainBtn li{ border:1px solid rgba(255,255,255,.6); height:38px; width:100%; text-align:center; font-size:12px; color:#fff; line-height:38px; margin-top:10px; background:rgba(0,0,0,.2);}
#wrap .contents .mainBtn li:nth-of-type(1).on{background:url(/mobile/images/main/btn_bg1.png) no-repeat center center; background-size:cover;}
#wrap .contents .mainBtn li:nth-of-type(2).on{background:url(/mobile/images/main/btn_bg2.png) no-repeat center center; background-size:cover;}
#wrap .contents .mainBtn li:nth-of-type(3).on{background:url(/mobile/images/main/btn_bg3.png) no-repeat center center; background-size:cover;}
#wrap .contents .mainBtn li:nth-of-type(4).on{background:url(/mobile/images/main/btn_bg4.png) no-repeat center center; background-size:cover;}
#wrap .contents .mainBtn a { display:inline-block; width:100%; height:100%; color:#fff; }

/*********** 메인 swiper ***********/
.swiper {
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0 auto;
}