@charset "utf-8";
/* *******************************************************
 * filename:common.css
 * description:공통디자인 CSS
 * date:2021-06-29
******************************************************** */
html,body {width:100%;	}

body.active {overflow:hidden}

.wrap {}
.inner {width:1200px; margin:0 auto}

* {
	box-sizing: border-box;
	-ms-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	font-size:10px;
}

header {width:100%; height:100px; overflow:hidden; }
	header .inner { }
	header .top-area {text-align:right; padding:10px 0}	
	header .top-area button i {color:#fd7e14; font-size:1.2rem; margin-right:5px}
		header .top-area button {color:#666; margin-left:10px; font-size:1.2rem; font-weight:600}
		header .top-area button:hover {color:#fd7e14;}

	header nav {overflow:hidden; border:1px solid #eee; border-radius:10px; background-color:#fff; position:relative; padding-left:200px; box-shadow:0 0 3px rgba(0,0,0,.15)}
		header nav h1 {
			font-size:0;  font-weight:800; text-indent:-99999px;
			overflow:hidden; background:url(../images/common/logo.png) no-repeat center top 10px;
			background-size:100px auto;
			width:140px; height:52px; position:absolute; top:0; left:0
		}
		header nav .gnb li {float:left; padding:0 10px}
			header nav .gnb li a {font-size:1.8rem; color:#222; text-align:center; font-weight:800; line-height:52px; display:block; min-width:100px}
			header nav .gnb li a:hover {color:#fd7e14;}


.loc-area {height:30px; border-radius:5px; background-color:#fff;  width:calc(100%); margin:5px auto 0; box-shadow:0 0 3px 0 rgba(0,0,0, .2); padding:0}
	.loc-area li {float:left; line-height:30px; font-size:1.2rem; position:relative; padding:0 10px 0 30px; background-color:#fff; text-align:center}
	.loc-area li:before {
		content: " ";
		position: absolute;
		top: 0;
		right: -20px;
		width: 0;
		height: 0;
		border-top: 15px solid transparent;
		border-bottom: 15px solid transparent;
		border-left: 18px solid rgba(204,204,204,.5);
		z-index: 2;
		transition: border-color 0.2s ease;
	}
	.loc-area li:after {
		content:''; display:block; position:absolute; top:0; right:-19px; 
		width: 0;	height: 0;
		border-top: 15px solid transparent;
		border-left: 18px solid #fff;
		border-bottom: 15px solid transparent;	
		z-index: 3;
	}
	.loc-area li.active {font-weight:800; color:#fd7e14}
	.loc-area li.active:before, .loc-area li.active:after {display:none} 

.search-area {overflow:hidden; background-color:#f1f1f1; width:calc(100%); margin:10px auto; border-radius:5px; box-shadow:0 0 3px 0 rgba(0,0,0, .2); padding:10px 5px }
	.search-area h3 {color:#222; font-size:1.4rem; font-weight:800; padding:5px}
	.search-area li {float:left; width:calc((100% / 4) - 10px); margin:5px}
	.search-area li select {width:100%; padding:5px 0; font-size:1.2rem; }
		.search-area .btn-area {overflow:hidden; padding:10px 5px 0}
		.search-area .btn-area input {height:30px; vertical-align:top; width:calc(100% - 65px)}	

	.search-area .event-search {margin:0 auto}
		.search-area .event-search input {height:31px; width:calc(100% - 140px); vertical-align:top; font-size:1.2rem; }
		.search-area .event-search select {width:100px; padding:5px 0; font-size:1.2rem; margin-right:5px; vertical-align:top; }

	.search-area .btn-area .btn, .search-area .event-search .btn {width:30px; height:30px; border:1px solid #ccc; background-color:#fff; padding:5px; border-radius:5px;   }


.m-title {font-size:2.2rem; letter-spacing:-2px; font-weight:900; color:#222; text-align:center; margin:25px 0 0; position:relative}
	.m-title button {font-size:1.2rem; position:absolute; bottom:0; right:10px; border:1px solid #eee; padding:5px 10px; border-radius:5px}
	.m-title button i {font-size:1.4rem; margin-right:5px}

.s-title {font-size:2.2rem; letter-spacing:-2px; font-weight:900; color:#222; margin:20px 0 0; position:relative}
	.s-title i {font-size:2.4rem; margin-right:10px}
	.s-title span {font-size:1.2rem; color:#666; font-weight:600; letter-spacing:-1px; margin-left:10px}

.detailList {width:calc(100% - 0); margin:10px auto 20px; }
	.detailList ul {overflow:hidden;}
	.detailList li {float:left; width:calc((100% / 5) - 10px); margin:5px; position:relative; }
	.detailList li a {display:block;  padding:10px;  border:1px solid #eee; overflow:hidden; height:282px }
	.detailList li a:hover {border-color:#17469e}
	.detailList li a:hover .promotion {
		animation-name: promotion;
		animation-duration:1s;
		animation-duration: leaner;
		animation-direction:alternate;
		animation-fill-mode: forwards;		
	}
	.detailList li a:hover .img {
		-moz-transform:scale(1.0);
		-webkit-transform:scale(1.0);
		-moz-transition: transform .35s;
		-webkit-transition: transform .35s;
	}
	.img {width:100%; height:160px; text-align:center; position:relative}
		.img img {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%) scale(0.9); max-height:160px; max-width:160px; -moz-transform:translate(-50%, -50%) scale(0.9); -webkit-transform:translate(-50%, -50%) scale(0.9);}
	
	.promotion {z-index:9; display:block; position:absolute; top:10px; left:10px; width:30px; height:30px; border-radius:100%; font-size:1.3rem; font-weight:800; text-align:center; line-height:30px; color:#fff; box-shadow:0 1px 4px rgba(2,2,2,.5);}	
		.promotion.opo {background-color:#b43cc8}
		.promotion.tpo {background-color:#00a99d}
		.promotion.hpo {background-color:#fdb525}

		/* promotion */
		@-webkit-keyframes promotion {
		  0% {
			top:0;
		  }
		  50% {
			top:15px;
		  }
		   100% {
			top:10px;
		  }
		}

	.market {z-index:9; display:block; position:absolute; top:10px; right:10px; border-radius:5px; font-size:1rem; font-weight:700; color:#fff; text-align:center; padding:0 5px;  line-height:1.6rem; }
		.market.emart24 {background-color:#fdb525}
		.market.cu {background-color:#8c32aa}
		.market.gs25 {background-color:#0072bc}
		.market.eleven {background-color:#dc3545}
		.market.ministop {background-color:#17469e}
		.market.cspace {background-color:#fcc900}
		
	.tit-box {width:calc(100% - 20px); margin:0 auto; }
		.tit-box .category { background-color:#eee; font-size:1rem; color:#666; text-align:center; padding:0 5px; border-radius:5px; line-height:1.6rem; border:1px solid #ccc }
		.tit-box p {font-size:16px; white-space:normal; display:-webkit-box;  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;	}
		.tit-box .money	{font-size:1.8rem; color:#222; font-weight:900}
		.tit-box .money i {font-style:normal}
		.tit-box .money em {color:#fd7e14; margin-left:5px; font-weight:800}

	.add {display:block; height:40px; border:1px solid #eee; text-align:center; width:calc(100%); margin:0 auto 10px; color:#999}

/* 리스트 타입*/
.detailList.list-type ul li {width:calc(100% - 10px); position:relative}
	.detailList.list-type li a {height:inherit}
	.detailList.list-type li:after {content:''; display:block; clear:both}
	.detailList.list-type li .img {float:left; width:50%; text-align:center}
	.detailList.list-type li .tit-box {float:right; width:50%; position:relative}
	.detailList.list-type li .market {right:inherit; position:static; display:inline-block}
	.detailList.list-type li .category {display:inline-block; }
	.detailList.list-type li .market + span {margin-left:5px}
	.detailList.list-type li .tit-box p {margin-top:10px}	
	


/* 상세보기*/
.detailView {position:relative; width:calc(100%); margin:0 auto}
	.detailView dt {border:1px solid #f1f1f1; border-radius:10px; padding:20px; overflow:hidden; position:relative;}
	.detailView dt .prod-box {width:calc(100% - 50%); position:relative; }
		.detailView dt .prod-box:after {content:''; display:block; width:1px; height:calc(100% - 20px); background-color:#f1f1f1; position:absolute; right:0; top:50%; transform:translateY(-50%) } 
	.detailView dt .text-box {width:calc(100% - 55%); padding:0; position:absolute; top:50%; right:0; transform:translateY(-50%) }

	.detailView dt .market {top:0; right:20px; width:30px; height:30px; border-radius:100%; line-height:30px}
	.detailView .promotion {top:0; left:0} 
	.detailView .img {height:300px;}
	.detailView .img img {max-height:300px; max-width:300px; transform:translate(-50%, -50%) scale(1);  -moz-transform:translate(-50%, -50%) scale(1); -webkit-transform:translate(-50%, -50%) scale(1);}
	.detailView .tit-box { width:calc(100%);}
		.detailView .tit-box p {font-size:1.8rem}
		.detailView .tit-box .category {font-size:1.1rem; }
		.detailView .tit-box .money	{font-size:2.4rem; }
		.detailView .tit-box .money i, .detailView .tit-box .money em  {font-size:1.4rem}
	.detailView .tag-wrap {padding:20px 0; position:static;}

	.detailView dd {padding:10px 0}
		.detailView dd h3 {text-align:center; font-size:1.3rem; color:#fff; font-weight:800; padding:5px 0; background-color:#fd7e14; border-radius:5px; border:1px solid #fd7e14; box-shadow:0 1px 4px rgba(2,2,2,.3)}	
		.detailView dd ul {border-top:2px solid #222; border-bottom:1px solid #222; margin-top:10px}
		.detailView dd li {padding:8px; border-top:1px dotted #ccc; font-size:1.3rem; font-weight:700; position:relative}
		.detailView dd li:first-child {border-top:0}
		.detailView dd li span.date {font-size:1.3rem; font-weight:700;}		
		.detailView dd li span.moy {font-size:1.3rem; font-weight:800; color:#222}
		.detailView dd li span.moy em {color:#fd7e14; font-size:1.2rem; margin-left:5px; font-weight:800}
		.detailView dd li .promotion {z-index:9; display:inline-block; position:static; top:inherit; left:inherit; width:inherit; height:inherit; border-radius:5px; font-size:1.1rem; font-weight:800; text-align:center; line-height:inherit; color:#fff; box-shadow:inherit; padding:0 10px}	
		.detailView dd li .market {z-index:9; display:inline-block; position:static; top:inherit; right:inherit; border-radius:5px; font-size:1rem; font-weight:700; color:#fff; text-align:center; padding:0 5px;  line-height:1.6rem; width:60px}
		.detailView dd li span + span {margin:0 2px}

#toTop{ 
	position: fixed;
    right:10px;
    bottom: 10px;
    display: none;
    z-index: 999;
	color:#fd7e14
}


/* tag */
.tag-wrap {position:absolute; bottom:8px; width:100%; padding:0 10px}
	.tag-wrap .tag {display:inline-block; padding:0 5px; text-align:center; line-height:18px; font-size:1rem; border-radius:5px; border:1px solid #ccc;}
	.tag-wrap .tag i {margin-right:3px; color:#fd7e14}

.detailList.list-type li .tag-wrap {width:50%; right:0; padding:0}	


/* 인기검색어 */
.tag-search {border-top:1px inset #ccc; border-bottom:1px outset #ccc; border-collapse:seperate; padding:10px 10px 10px 65px; width:calc(100%); margin:0 auto; position:relative}
	.tag-search:before {content:'인기검색어'; color:#fd7e14; font-weight:800; display:block; position:absolute; width:45px; top:50%; left:10px; transform:translateY(-50%)}
	.tag-search button {border-radius:15px; background-color:#fd7e14; color:#fff; text-align:center; padding:5px}
	.tag-search button + button {margin:2px}
	.tag-search button i {color:#fff}


.menu {cursor:pointer; width:30px; height:30px; position:absolute; color:#fd7e14; transform:translateY(-50%); top:50%; left:0; padding:8px}

.menu span{
  background-color:#fd7e14;
  width:14px;
  height:2px;
  margin:2px 0;
  display:block;
  transition: all .4s ease;
  transform-origin:0 0;
}

.diam {}
	.diam span:nth-child(1) {transform: rotate(45deg) translate(0, -2px);}
	.diam span:nth-child(2) {transform: scaleX(0);}
	.diam span:nth-child(3) {transform: rotate(-45deg) translate(0, 0);}


/* 사이드바 */
.left-side-bar-box {
    position:fixed;
    top:45px;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0);
    visibility:hidden;
    transition:visibility .5s, background-color .5s;
	z-index:999;
}
	.left-side-bar-box.active {
		background-color:rgba(0,0,0,0.5);
		visibility:visible;
	}
	.left-side-bar {
		position:fixed;
		top:45px;
		left:-300px;
		width:calc(100% - 80px);
		height:100%;
		background-color:#efefef;
		padding:20px 10px;
		transition:left .5s;
		overflow-y:auto
	}
	.left-side-bar-box.active > .left-side-bar {
		left:0;
	}
	.left-side-bar > .menu-1 ul > li > a {
		display:block;
		padding:5px; font-size:1.3rem; border-bottom:1px solid #ddd
	}
		.left-side-bar > .menu-1 ul > li a i {margin-right:5px}
	.left-side-bar > .menu-1 ul > li:hover > a {
		color:#fd7e14; font-weight:800
	}
	.left-side-bar > .menu-1 ul > li > a:not(:only-child)::after {
		content:"+";
		float:right; font-size: 1.3rem;
		width: 20px;
		font-weight: 700;
		text-align: center;
	}
	.left-side-bar > .menu-1 ul > li.active > a:not(:only-child)::after {
		content:"-"; 
	}
	.left-side-bar > .menu-1 > ul ul {
		display:none;
	}	
	.left-side-bar > .menu-1 > ul ul ul {
		background-color:#eee;
	}
	.left-side-bar > .menu-1 ul > li.active > ul {
		display:block;
	}
	.left-side-bar > .menu-1 > ul ul li a {text-indent:10px}
	.left-side-bar > .menu-1 > ul ul li li a {text-indent:15px}
	.left-side-bar .banner {width:100%}
	.left-side-bar .banner:after {content:''; display:block; clear:both}
		.left-side-bar .banner li {float:left; width:calc(100% / 2)}		
		.left-side-bar .banner li a {display:block; border:1px solid #ddd; padding:10px; margin:5px; border-radius:5px; font-size:1.2rem; background-color:#fff}
		.left-side-bar .banner li a i {margin-right:5px}



/* copyright */
footer {padding:10px 0; border-top:1px solid #dcdcdc; text-align:center; color:#646464}


/* sns 공유 */
.sns {position:absolute; top:10px; right:10px; width:30px; height:30px; border-radius:100%; background-color:#f783ac; color:#fff}
.detailList .sns {right:inherit; left:45px}
.detailView .sns {right:inherit; top:0; left:40px}

.sns-wrap li {float:left; width:calc(100% / 4); text-align:center; font-size:1.3rem; color:#222; font-weight:800; margin:5px 0}
	.sns-wrap li .sns-i {width:50px; height:50px; display:block; margin:0 auto} 
		.sns-wrap li .sns-i.talk {background:url(../images/common/sns_talk.png) no-repeat center;  background-size:50px auto}
		.sns-wrap li .sns-i.band {background:url(../images/common/sns_band.png) no-repeat center;  background-size:50px auto}
		.sns-wrap li .sns-i.blog {background:url(../images/common/sns_blog.png) no-repeat center;  background-size:50px auto}
		.sns-wrap li .sns-i.face {background:url(../images/common/sns_face.png) no-repeat center;  background-size:50px auto}
		.sns-wrap li .sns-i.kas {background:url(../images/common/sns_kas.png) no-repeat center;  background-size:50px auto}	
		.sns-wrap li .sns-i.line {background:url(../images/common/sns_line.png) no-repeat center;  background-size:50px auto}
		.sns-wrap li .sns-i.twitter {background:url(../images/common/sns_twitter.png) no-repeat center;  background-size:50px auto}
.address {width:100%; margin:10px 0}
.copy {width:100%; font-size:1.4rem; color:#fff; background-color:#f783ac; border-radius:5px; padding:5px 10px;}

/* dialog popup */
	.ui-dialog.ui-widget.ui-widget-content {
		padding: 0;
		margin: 0;
		border-radius: 0;
		border: 0;
		box-shadow: 0 0 3px 0 rgba(0,0,0,0.4);
	}
	.ui-dialog .ui-dialog-titlebar {
		padding: 0 15px;
		margin: 0;
		border-radius: 0;   
		border:0;
		background:#f783ac 
	}
	.ui-dialog .ui-dialog-title {
		line-height: 40px; 
		font-size: 16px;
		font-weight: 900;
		color: #fff;
	}
	.ui-dialog .ui-dialog-content {
		padding: 15px;
		border:0;
		border-top: 0;
		font-size:14px
	}
	.ui-dialog .ui-dialog-titlebar-close {
		width: 20px;
		height: 20px;
		border: 0;
		border-radius: 0;
		outline: none;
		right: 10px;
		margin-top: -10px;
		font-size:0; letter-spacing:-9999px
	}
	.ui-dialog .ui-dialog-titlebar-close:before {
		content:'\f00d'; font-size: 1.5rem;
		font-family: "Font Awesome 5 Free";
		font-weight: 900; color:#fff
	}

	.ui-dialog .ui-dialog-titlebar-close span {
		display: none;
	}
	.ui-dialog .ui-dialog-buttonpane button {	
		padding: .9rem 2rem;
		border-radius: 3rem;
		font-size: 1.3rem;
		color: #fff;
		background-color:#515b7f;
	}
	.ui-dialog  .ui-widget-content {
		border: 0;
	 } 
	.ui-dialog .ui-dialog-buttonpane {
		text-align:center;
	}

	.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
		 float: none; 
	}


/* plus 행사 */
.plus-pro-search {
	padding:20px;
	border:1px solid #eee; border-radius:10px;
	background: rgb(227,227,227);
	background: linear-gradient(180deg, rgba(227,227,227,1) 0%, rgba(255,255,255,1) 70%);
	margin:20px 0; box-shadow:0 0 5px rgba(227,227,227,0.35)
}
	.plus-pro-search h3 {font-size:1.6rem; text-align:center; margin:0 auto 10px}
	.plus-pro-search .input-search-wrap {width:calc(100%); margin:0 auto; box-shadow:0 0 5px rgba(2,2,2,.5); border-radius:40px; padding:5px 10px; background-color:#fff}
	.plus-pro-search .input-search-wrap input {border:0; width:calc(100% - 32px); font-size:1.5rem; line-height:28px}
	.plus-pro-search .input-search-wrap .btn {border:0; background-color:transparent; width:30px; height:30px} 

.msg-check {font-size:1.3rem; color:#fd7e14; width:calc(100% - 40px); margin:10px auto 0; letter-spacing:-1px; position:relative; padding-left:15px }
.msg-check:before {content:'※'; display:block; width:10px; height:10px; position:absolute; top:0; left:0;}

/* banner */
.visual {width:100%; margin:0 auto; position:relative; background-color:#eee; border-radius:10px; padding:10px}	
	.visual .swiper-container {width:720px; background-color:#fff; border-radius:5px;}
	.visual .swiper-slide a {display:block;}
	.visual .swiper-slide img {width:100%; height:300px;}
	.visual .swiper-slide .tit-box {width:100%; box-sizing:border-box; padding:10px 20px 25px; border-radius:0 0 10px 10px}
	.visual .swiper-slide .tit-box p {color:#222}
	.visual .swiper-slide .tit-box .market {right:30px}
	.visual .swiper-button-next, .visual .swiper-button-prev{
		background-color:#fff; border-radius:100%;
		width:30px; height:30px; top:inherit; bottom:50%; box-shadow:0 0 3px rgba(0,0,0,.3)
	}
	.visual .swiper-button-next, .visual .swiper-container-rtl .swiper-button-prev,
	.visual .swiper-button-prev, .visual .swiper-container-rtl .swiper-button-next {background-size:10px auto}
	.visual .swiper-container-horizontal>.swiper-pagination-bullets, .visual .swiper-pagination-custom, .visual .swiper-pagination-fraction {bottom:5px}
	.visual .swiper-pagination-bullet-active {background:#fd7e14}
	.visual .swiper-button-prev, .visual .swiper-container-rtl .swiper-button-next {left:7px}

	.visual .banner {position:absolute; width:223px; height:372px; border-radius:10px; border:1px solid #ddd; background-color:#fff; box-sizing:border-box} 
		.visual .banner img {width:100%; border-radius:10px;}
		.visual .banner.left {top:10px; left:10px} 
		.visual .banner.right {top:10px; right:10px} 

		.visual .banner .barcode {position:relative; height:calc(100% - 100px);}
		.visual .banner .barcode .card.no {width:180px; background-color:transparent; border:0; padding:0; position:absolute; top:50%; transform:translateY(-50%)}
			.visual .banner .barcode .card.no span {display:block; color:#444; font-size:15px; font-weight:600; letter-spacing: -1px; text-align:center; }
			.visual .banner .barcode .card.no span i {display:block; color:#ddd; margin:0 0 10px; font-size:40px}
			.visual .banner .barcode .card.no .btn {text-align:center}
			.visual .banner .barcode .card.no .btn button {font-size:12px; width:100%; margin:10px auto; border:1px solid #ccc; background-color:#fff; padding:5px; border-radius:5px;}

.jazzbanner {width:221px; height:100px; background:url(../images/common/jazzkr_banner.png) no-repeat center; background-size: 85% auto;}

/* barcode */
.barcode {padding:20px;}
	.barcode li {margin:10px 0}
	.barcode li:first-child {margin:0}
	.barcode .card {border:1px solid #eee; border-radius:5px; width:100%; padding:20px}
	.barcode h4 {font-size:1.3rem; font-weight:700; color:#222; padding-bottom:10px; position:relative }
	.barcode span {font-size:1.3rem; }
	.barcode span.gs25 {color:#0072bc}	
	.barcode span.emart24 {color:#fdb525}
	.barcode span.cu {color:#8c32aa}
	.barcode span.eleven {color:#dc3545}
	.barcode span.ministop {color:#17469e}
	.barcode span.kt {color:#119891}	
	.barcode span.skt {color:#e0002a}	
	.barcode span.lgt {color:#e90087}	
	.barcode .btn-ab {position:absolute; top:0; right:-10px}
	.barcode .btn-ab button {font-size:1.1rem; border-radius:100%; width:20px; line-height:20px; box-shadow:0 0 5px rgba(2,2,2,.2); background-color:#f1f1f1; color:#222 }
	.barcode .btn-ab button + button {margin-left:5px}	

	.barcode .card.no {background-color:#f2f2f2; border:1px solid #f2f2f2; width:100%; padding:20px}
	.barcode .card.no span {display:block; color:#666; font-size:1.8rem; font-weight: 300;letter-spacing: -2px; text-align:center; }
	.barcode .card.no span i {color:#666; margin-right:10px}
	.barcode .card.no .btn {text-align:center}
		.barcode .card.no .btn button {font-size:1.3rem; width:calc(100% - 50%); margin:10px 0 0; border:1px solid #ccc; background-color:#fff; padding:5px; border-radius:5px;   }

/* event list */
.eventlList {width:calc(100%); margin:10px auto; }
	.eventlList ul {overflow:hidden;}	
	.eventlList li {float:left; margin:5px; position:relative; width:calc(100% / 12 * 6 - 10px)}	
	.eventlList li a {display:block; padding:10px;  border:1px solid #eee; overflow:hidden; }
	.eventlList li a:hover {border-color:#17469e}
	.eventlList .img {float:left; width:calc(100% - 300px); height:120px;}
		.eventlList .img img {
			width:100%; max-width:252px;
			transform: translate(-50%, -50%) scale(1);		
			-moz-transform: translate(-50%, -50%) scale(1);
			-webkit-transform: translate(-50%, -50%) scale(1);
		}
	.eventlList .tit-box {position:absolute; top:50%; right:20px; width:275px; transform:translateY(-50%) }
		.eventlList .tit-box .market {position:static; display:inline-block}
		.eventlList .tit-box .date {font-size:1.3rem; margin-left:5px; color:#d04001}
		.eventlList .tit-box p {font-size:1.5rem; color:#222; margin-top:5px; font-weight:800}

/* event view */
.eventView {position:relative; width:calc(100%); margin:20px auto}
	.eventView dt {border:1px solid #f1f1f1; border-bottom:0; padding:20px; position:relative; overflow:hidden}
	.eventView dd {border:1px solid #f1f1f1;} 
	.eventView .tit-box {width:100%}
	.eventView .tit-box .date {font-size:1.2rem; color:#d04001}	
	.eventView .tit-box p {font-size:1.5rem; color:#222; margin-top:5px; font-weight:800}
	.eventView .view {padding:20px; text-align:center}
	.eventView .view img {box-shadow:0 0 5px rgba(0,0,0,.25); border:1px solid #ddd}

.btn-wrap {width:100%; margin:10px 0; padding:10px 0; text-align:center}
	.btn-wrap button {padding:5px 10px; border-radius:5px; background-color:#fd7e14; color:#fff; font-size:1.2rem}
	.btn-wrap button i {margin-right:5px}


/* bottom fixed */
.btn-wrap.sticky {position:sticky; bottom:0; background-color:#fff}

.title {color: #000; font-size:2.4rem; font-weight: 300;letter-spacing: -3px; text-align:center; margin-top:20px}
.title + .barcode {padding-top:0}


#orientation-status {
	display:none;
    text-align: center;
    margin: 30px 0;
    color: black;
}

/* paging */
.paging {text-align: center; overflow: hidden; margin:10px auto 20px; position: relative}
	.paging a {display: inline-block; width:30px; line-height: 30px; text-align: center;	border: 1px solid #ddd; border-radius:3px; font-size: 1.1rem; margin: 0 1px;	color: #646464}
	.paging a:hover {border: 1px solid #fd7e14; background-color:#fd7e14; color:#fff}
	.paging a.selected {border: 1px solid #fd7e14; background-color:#fd7e14; color: #fff;	font-weight: bold}



/* login */
.login-system {width:800px; height:370px; overflow:hidden; margin:30px auto; background-color:#dfecf1; box-shadow:0 0 3px rgba(0,0,0,.15)}
	.login-system ul li {float:left; width:360px}
	.login-system li.banner {width:220px}	
	.login-system li .join-area.tm {margin-top:120px}	

	.login-system.join {width:1200px; height:580px }
		.login-system.join ul li {float:left; width:760px}
		.login-system.join li.banner {width:220px;}
			.login-system.join li.banner.tb {width:220px; padding-top:210px}
			.login-system.join li textarea {height:250px}

	.login-area {margin:150px auto 0;}
		.login-area .lg-area-l-b {margin:20px 0; text-align:center}

		.login-area p {font-size:1.4rem; text-align:center}
			.login-area p span {font-size:1.4rem;  font-weight:700}

		.join-area dl {width:calc(100% - 40px); margin:20px auto; padding:20px 0; overflow:hidden; border-radius:5px; background-color:#fafafa; box-shadow:0 0 3px rgba(0,0,0,.15)}
			.join-area dl dt, .join-area dl dd {float:left; font-size:1.4rem; }
			.join-area dl dt {width:25%; padding:5px 10px 5px 20px; position:relative}
					.join-area dl dt:after {content:":"; position:absolute; right:0}
			.join-area dl dd {width:75%; padding:5px 10px}

			.join-area .terms {width:calc(100% - 40px); margin:20px auto 10px; padding:20px; overflow:hidden; border-radius:5px; background-color:#fafafa; box-shadow:0 0 3px rgba(0,0,0,.15)}
				.join-area .terms label {display:block; padding:5px 0; font-size:1.2rem}
				.join-area .terms	.stitle {margin-bottom:10px}
			.join-area .btn-wrap {border:0; margin:0 0 40px; padding:0}
				
/* 개인정보취급방침*/
.support-list {width:calc(100% - 20px); padding:20px}
	.support-list h1 {font-size:20px; border:1px solid #eaeaea; padding:10px; text-align:center; background-color:#ccc}
	.support-list h2 {font-size:15px; padding:10px; margin-bottom:20px}
			.support-list h2 span {font-size:15px; color:#ff0000; font-weight:700; display:block}
	.support-list dl {overflow:hidden}
		.support-list dl dt {font-size:16px; color:#333; font-weight:800; padding:10px; border-top:1px solid #eaeaea; border-bottom:1px solid #eaeaea}
		.support-list dl dd { font-size:14px; color:#333; font-weight:700; padding:10px}
			.support-list dl dd h2 {padding:5px 0; margin-bottom:5px}
			.support-list dl dd span {font-size:14px; color:#333; font-weight:700}
			.support-list dl dd ul {margin:10px 0}
			.support-list dl dd ul li {font-size:13px; padding:10px; font-weight:normal; }
				.support-list dl dd ul li h3 {font-size:14px; margin-bottom:10px}
				.support-list dl dd ul li li {padding:5px 5px 5px 10px; position:relative}
					.support-list dl dd ul li li:before {content:''; display:block; width:6px; height:6px; border-radius:100%; background-color:#333; position:absolute; top:12px; left:0}