@charset "utf-8";

@import "reset.css";
@import "default.css";
@import "base.css";

.visual_wrap {
	width: 100%;
	max-width: 640px;
	margin: 0px auto;
	position: relative;}
.visual_wrap .bnImg { display: block; width: 100%; position: absolute; bottom: 0px; left: 0%; z-index: 10;}	
.visual_wrap .bnImg img{ display: block; widtH: 100%;}
.visual_wrap .vsBg { display: block; width: 100%;}	
.rolling_wrap {width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; overflow: hidden; }
.rolling_wrap li {	width: 100%; height: 100%; position: absolute; top: 0px; right: 0px; display: block; overflow: hidden; background-color: #000;}
.layout { width: 100%; height: 100%; position: relative;}
.bgWrap { width: auto; position: relative; overflow: hidden;}

.rolling_wrap li.view {}
.rolling_wrap li.pop_01 { z-index: 6;}
.rolling_wrap li.list_01 { z-index: 5;}
.rolling_wrap li.list_02 { z-index: 4;}
.rolling_wrap li.list_03 { z-index: 3;}
.rolling_wrap li.list_04 { z-index: 2;}
.rolling_wrap li.list_05 { z-index: 1;}
.rolling_wrap li.pop_01 .btn { display: block; width: 82%; height: 17%; position: absolute; top: 79%; left: 9%; background: url(../img/common/ir_img.gif) repeat top left;}
.rolling_wrap li.pop_02 .btn { display: block; width: 82%; height: 17%; position: absolute; top: 79%; left: 9%; background: url(../img/common/ir_img.gif) repeat top left;}
.rolling_wrap li img.vsImg {display: block;	position: relative; display: block; width: 100%;}
.rolling_wrap li .bg1 { display: block; position: absolute; top: 0px; right: 0px; width: 100%; height: 100%; background-color: rgba(0,0,0,.5); z-index: 2;}
.rolling_wrap li .bg2 { display: block; position: absolute; top: 0px; right: 0px; width: 100%; height: 100%; background-color: rgba(255,255,255,.5); z-index: 1;}
.rolling_wrap li.view .bg1 { transition: right .3s; right: 100%;}
.rolling_wrap li.view .bg2 { transition: right .8s, opacity 1s; right: 100%; opacity:0;}
.rolling_wrap li .mainTxt { display: block; position: absolute; bottom: 20px; left: 434px;}

.rolling_wrap li.list_01 img.vsTxt1 {display: block; position: absolute; top: 125px; left: 50%; opacity: 0; margin-left: -175px; transition: all 1s;}
.rolling_wrap li.list_01 img.vsTxt2 {display: block; position: absolute; top: 697px; left: 50%; opacity: 0; margin-left: -193px;  transition: all 2s ease .3s;}
.rolling_wrap li.list_01 img.vsTxt3 {display: block; position: absolute; top: 612px; left: 50%; opacity: 0; margin-left: -112px;  transition: all 2s ease .6s;}
	
.rolling_wrap li.list_02 img.vsTxt1 {display: block; position: absolute; top: 125px; left: 50%; opacity: 0; margin-left: -175px; transition: all 1s;}
.rolling_wrap li.list_02 img.vsTxt2 {display: block; position: absolute; top: 697px; left: 50%; opacity: 0; margin-left: -300px;  transition: all 2s ease .3s;}
.rolling_wrap li.list_02 img.vsTxt3 {display: block; position: absolute; top: 598px; left: 50%; opacity: 0; margin-left: -47px;  transition: all 2s ease .6s;}

/*.rolling_wrap li.view img.vsImg { width: 2000px; margin-left: -1000px; transition: width 4s, margin-left 4s;}*/
.rolling_wrap li.view.list_01 img.vsTxt1 { opacity:1;  margin-left: -225px; transition: all 1s;}
.rolling_wrap li.view.list_01 img.vsTxt2 { opacity:1;  margin-left: -243px; transition: all 2s ease .3s;}
.rolling_wrap li.view.list_01 img.vsTxt3 { opacity:1;  margin-left: -162px; transition: all 2s ease .6s;}

.rolling_wrap li.view.list_02 img.vsTxt1 { opacity:1;  margin-left: -225px; transition: all 1s;}
.rolling_wrap li.view.list_02 img.vsTxt2 { opacity:1;  margin-left: -350px; transition: all 2s ease .3s;}
.rolling_wrap li.view.list_02 img.vsTxt3 { opacity:1;  margin-left: -97px; transition: all 2s ease .6s;}

.content_wrap .link_wrap { width: 100%; height: 15px; text-align: center; position: absolute; bottom: 26px; left: 0px; z-index: 9;}
.content_wrap .link_wrap a { display: inline-block; width: 10px; height: 10px; border: 1px solid #fff;  margin-left: 4px; margin-right: 4px; background-size: contain; vertical-align: middle;} 
.content_wrap .link_wrap a.on { width: 15px; height: 15px; background-color: #e83828; border: none;}

.btnWrap { width: 120px; position: absolute; bottom: 0%; left: 0px; z-index:9;}
.btnWrap img { width: 100%; display: block;}
.btnWrap .prevBtn { display: block; width: 50%; height: 100%; position: absolute; bottom: 0px; left: 0px; background: url(../img/common/ir_img.gif) no-repeat top left;}
.btnWrap .nextBtn { display: block; width: 50%; height: 100%; position: absolute; bottom: 0px; right: 0px; background: url(../img/common/ir_img.gif) no-repeat top left;}

.visual_wrap .link_wrap2 { width: 50px; height: 30px; position: absolute; bottom: -2px; left: 34px; z-index: 9; text-align:center; font-size: 13px; line-height: 30px; font-weight: bold; color: #222;  }
					
.bn_01 { width: 100%; max-width: 640px; margin: 0px auto; position: relative;}
.bn_01 img { display: block; width: 100%;}
.bn_01 a {
	width: 20%;
	height: 100%;
	display: block;
	background: url(../img/common/ir_img.gif) repeat top left;
	position: absolute;}

.bn_01 a.nth_01 { top: 0px; left: 0px;}
.bn_01 a.nth_02 { top: 0px; left: 20%;}
.bn_01 a.nth_03 { top: 0px; left: 40%;}
.bn_01 a.nth_04 { top: 0px; left: 60%;}
.bn_01 a.nth_05 { top: 0px; right: 0px;}


.banner { width: 100%; max-width: 640px; margin: 0px auto; position: relative;}

.banner img { display: block; width: 100%;}

.banner a {
	width: 25%;
	height: 100%;
	display: block;
	background: url(../img/common/ir_img.gif) repeat top left;
	position: absolute;}

.banner a.btn_01 { top: 0px; left: 0px;}
.banner a.btn_02 { top: 0px; left: 25%;}
.banner a.btn_03 { top: 0px; left: 50%;}
.banner a.btn_04 { top: 0px; right: 0%;}
.banner a.btn_05 { top: 0px; right: 0px;}



.pr_wrap { width: 100%; max-width: 640px; margin: 0px auto; position: relative;}		
.pr_wrap img { display: block; width: 100%;}
.pr_wrap .wrap { width: 100%; height: auto; overflow: hidden; position: absolute; top: 0%;}
.pr_wrap .wrap ul { width: 500%; position: relative;}

.pr_wrap li { width: 20%; position: relative; float: left;}
.pr_wrap li a{ display: block; width: 100%; height: 100%; position: absolute; left: 0%; top: 0px; background: url(../img/common/ir_img.gif) repeat top left;}
.pr_wrap li:nth-child(1) { z-index: 6; }
.pr_wrap li:nth-child(2) { z-index: 5;}
.pr_wrap li:nth-child(3) { z-index: 4;}
.pr_wrap li.view { opacity: 1; transition: all .5s; z-index: 7;}
.pr_wrap .btnWrap { width: 12%; position: absolute; bottom: 0%; left: 88%; z-index: 9;}
.pr_wrap .btnWrap a { display: block; width: 50%; height: 100%; background: url(../img/common/ir_img.gif) repeat top left;  position: absolute; top: 0px;}
.pr_wrap .btnWrap a.prev { left: 0%;}
.pr_wrap .btnWrap a.next { right: 0%;}
.pr_wrap .btnWrap img { width: 100%;}
.pr_wrap a.viewBtn{ display: block; width: 34%; height: 8%; position: absolute; left: 33%; top: 81%; background: url(../img/common/ir_img.gif) repeat top left;}


.bn_02 { width: 100%; max-width: 640px; margin: 0px auto; position: relative;}		
.bn_02 img { display: block; width: 100%;}
.bn_02 .wrap { width: 100%; height: auto; overflow: hidden; position: absolute; top: 26%; left: 0%; z-index: 3;}
.bn_02 .wrap ul { width: 300%; position: relative; margin-left: -46%;}

.bn_02 li { width: 20%; margin-right: 2%; position: relative; float: left;}
.bn_02 li a{ display: block; width: 100%; height: 100%; position: absolute; left: 0%; bottom: 0px; background: url(../img/common/ir_img.gif) repeat top left;}

.bn_02 li.view { opacity: 1; transition: all .5s; z-index: 7;}
.bn_02 .btnWrap { width: 20%; height: 7%; position: absolute; top: 82%; left: 39%; z-index: 9;}
.bn_02 .btnWrap a { display: block; width: 50%; height: 100%; position: absolute; top: 0px;  background: url(../img/common/ir_img.gif) repeat top left;}
.bn_02 .btnWrap a.prev { left: 0%;}
.bn_02 .btnWrap a.next { right: 0%;}

.bn_03 { width: 100%; max-width: 640px; margin: 0px auto; position: relative;}		
.bn_03 img { display: block; width: 100%;}


.bn_03 a {
	width: 21%;
	height: 40%;
	display: block;
	background: url(../img/common/ir_img.gif) repeat top left;
	position: absolute;}

.bn_03 a.btn_01 { top: 0px; left: 0px; width: 40%; height: 56%;}
.bn_03 a.btn_02 { top: 60%; left: 14%;}
.bn_03 a.btn_03 { top: 60%; left: 37%;}
.bn_03 a.btn_04 { top: 60%; left: 61%;}

.bn_04 { width: 100%; max-width: 640px; margin: 0px auto; position: relative;}		
.bn_04 img { display: block; width: 100%;}


.bn_04 a {
	width: 73%;
	height: 48%;
	display: block;
	background: url(../img/common/ir_img.gif) repeat top left;
	position: absolute;}

.bn_04 a.btn_01 { top: 19%; left: 14%;}
.bn_04 a.btn_02 { top: 31%; left: 14%;}


.popupWrap { width: 100%; height: 100%; position: fixed; top: 0%; left: 0%; padding-top: 60px; z-index: 100000; background-color: rgba(0,0,0,.5)}
.popupWrap ul { width: 80%; position: relative; background-color: #fff; margin: 0px auto 60px; max-width: 495px;}
.popupBox {width: 100%;	position: absolute; top: 0px; left: 0px; opacity:0; transition: all .5s; background-color: #fff;}
.popupWrap .view { opacity: 1; transition: opacity .5s; z-index: 102; position: relative;}
		
	.popupBox .imgWrap { display: block; width: 100%; max-width: 600px; position: relative;}
	.popupBox img { display: block; widtH: 100%;}
	.popupBox .imgWrap a.btn_01 {width: 74%; height: 14%; display: block; background: url(http://cdn.hobansummit-sp1.co.kr/sp1/mobile/img/common/ir_img.gif) repeat top left; position: absolute; top: 74.5%; left: 13%;}
	.popupBox .imgWrap a.btn_02 {width: 76%; height: 9%; display: block; background: url(http://cdn.hobansummit-sp1.co.kr/sp1/mobile/img/common/ir_img.gif) repeat top left; position: absolute; top: 83%; left: 12.5%;}
	.popupBox .imgWrap a.btn_03 {width: 76%; height: 8%; display: block; background: url(http://cdn.hobansummit-sp1.co.kr/sp1/mobile/img/common/ir_img.gif) repeat top left; position: absolute; top: 39.5%; left: 12.5%;}
	.popupBox .imgWrap a.btn_04 {width: 76%; height: 8%; display: block; background: url(http://cdn.hobansummit-sp1.co.kr/sp1/mobile/img/common/ir_img.gif) repeat top left; position: absolute; top: 48.5%; left: 12.5%;}
	.popupBox .imgWrap a.btn_05 {width: 76%; height: 8%; display: block; background: url(http://cdn.hobansummit-sp1.co.kr/sp1/mobile/img/common/ir_img.gif) repeat top left; position: absolute; top: 57.5%; left: 12.5%;}
	.popupBox .imgWrap a.btn_06 {width: 76%; height: 8%; display: block; background: url(http://cdn.hobansummit-sp1.co.kr/sp1/mobile/img/common/ir_img.gif) repeat top left; position: absolute; top: 66.3%; left: 12.5%;}
	.popupBox .imgWrap a.btn_07 {width: 76%; height: 8%; display: block; background: url(http://cdn.hobansummit-sp1.co.kr/sp1/mobile/img/common/ir_img.gif) repeat top left; position: absolute; top: 75.3%; left: 12.5%;}
	.popupBox .imgWrap a.btn_08 {width: 76%; height: 8%; display: block; background: url(http://cdn.hobansummit-sp1.co.kr/sp1/mobile/img/common/ir_img.gif) repeat top left; position: absolute; top: 84.2%; left: 12.5%;}
	
	.popupBox .pcBtn { display: block; width: 100%; text-align: center; padding: 15px 0px; background-color: #fff; font-size: 20px; line-height: 24px; position: fixed; bottom: 0px; left: 0px; color: #000; border-bottom: 1px solid #000;}

.popupWrap .btnWrap { width: 100%; height: 60px;  position: fixed; bottom: 0px; left:  0px; background-color: #cbcbcb; text-align: center; z-index: 103;}
.popupWrap .btnWrap a { color: #000; font-size: 20px; font-weight: 400; line-height: 60px;}
.popupWrap .closeBtn { }
.popupWrap .cookieBtn { }

.popupWrap .btnWrap2 { width: 100%; height: 1px; position: absolute; top: 30%; left: 0px; z-index: 101;}
.popupWrap .btnWrap2 a { display:block; width: 10%;}
.popupWrap .btnWrap2 a.nextBtn { position: absolute; top: 0px; right: 0px;} 
.popupWrap .btnWrap2 a img { widtH: 100%;}