@charset "utf-8";

/* 전체레이아웃 설정값 */
#wrap{min-width:1400px;}
.ly_center{ width:1400px; margin:0 auto; position:relative;} /* 모바일일떄 100% 센터정렬*/
.ly_center_m{ width:1400px; margin:0px auto; position:relative;}/* 모바일일떄 마진이 들어간 센터정렬*/
.ly_w100{position:relative;}

#skip{top:0;right:0;position:absolute;width:100%;height:15px;text-align:center; z-index:11111;}
#skip li a{display:block;left:-10000px;position:absolute;top:0;width:100%;text-align:center;z-index:0;height:1px}
#skip li a:hover,
#skip li a:focus,
#skip li a:active {background:#363636;position:absolute;top:0px;left:0;z-index:5000;color:#fff;width:100%;height:25px;padding:5px 0 0 0;}

#main_container { overflow:hidden;position:relative;}

#container{ overflow:hidden; }
#container *{box-sizing: border-box;}
#container > div{ font-size: 0;}
#content_guide{position:relative; vertical-align: top; padding: 0 5%;}
#content{ min-height:300px; margin-bottom:50px; font-size:16px; margin-top: 60px; }

@media all and (max-width :1420px) {
	/* 전체레이아웃 설정값 */
	#wrap{min-width:360px;}
	.ly_center{ width:100%;}
	.ly_center_m{ width:90%; margin:0 5%;}
	.ly_w100{width:100%;}

	#content_guide{width:100%; padding: 0 5%;}
}

@media all and (max-width :640px) {
	#container{ background:url(/resource/dino/images/jewelry/inc/history_bg.gif) center 0px repeat-x;}
	#content{ min-height:300px; margin-bottom:50px; font-size:16px; margin-top: 30px; }

}

/* 서브타이틀 */
.title_guide{height: 370px;position: relative;background-size: cover;text-align: center;background-repeat: no-repeat;background-position: bottom;}
.title_guide:before{background: url("/resource/dino/images/dinosaur/inc/sub_wave.png") top center no-repeat;position:absolute; bottom:-1px; right:0%; display:block; content:''; width: 100%;height: 22px;}

.title_guide img{margin-top: 95px;}
.title_guide span{display:block;text-align:center;font-size:60px;font-weight:800;padding-top:80px;color:#fff;text-shadow:5px 5px 0 rgba(10,100,82,1)}

.title_guide.bg01{background-color:#8ff2df;background-image:url("/resource/dino/images/dinosaur/inc/sub_img01.png");}
.title_guide.bg02{background-color:#f6e544;background-image:url("/resource/dino/images/dinosaur/inc/sub_img02.png");}
.title_guide.bg03{background-color:#86dbff;background-image:url("/resource/dino/images/dinosaur/inc/sub_img03.png");}
.title_guide.bg04{background-color:#ddf6ab;background-image:url("/resource/dino/images/dinosaur/inc/sub_img04.png");}

@media all and (max-width :1280px) {
  .title_guide span{font-size:58px;padding-top:65px;}
}

@media all and (max-width :1023px) {
  .title_guide span{font-size:56px;padding-top:55px;}
}


@media all and (max-width :768px) {
	.title_guide span{padding-top:50px;font-size:50px;text-shadow:4px 4px 0 rgba(10,100,82,1)}
}

@media all and (max-width :640px) {
	.title_guide span{padding-top:15px;font-size:36px;}
}

@media all and (max-width :568px) {
	.title_guide span{padding-top:25px;font-size:32px;}
}


@media all and (max-width :425px) {
	.title_guide span{padding-top:20px;font-size:30px;text-shadow:3px 3px 0 rgba(10,100,82,1)}
}









/* 히스토리 */

.history ul{display: inline-block;background: #000;border-radius: 15px; padding: 5px 30px;margin: 10px auto;}
.history li{ display:inline-block; font-size:15px;vertical-align:middle;color: #fff;}
.history li:last-of-type{ background:url("/resource/dino/images/dinosaur/inc/history_arrow.png") 10px center no-repeat;padding-left:30px;}




@media all and (max-width :1280px) {
	.title_guide{height: 280px;}
	.title_guide img{margin-top: 65px;height: 67px;}
}


@media all and (max-width :1023px) {
	.title_guide{height: 240px;background-size: 130%;}
	.title_guide img{height: 50px;}
}


@media all and (max-width :767px) {

	.history ul li{font-size: 13px;}

}

@media all and (max-width :640px) {
	.title_guide{ height: 150px;}
	.title_guide img{margin-top: 25px;height: 35px;}
	.history ul{ padding: 5px 20px;}
	.history ul li{font-size: 13px;}
	.title_guide:before{background-size: 200%;}


}



/*배너*/
.banner_area{ padding:20px 0; background: #ccc;}
.banner_area *{ box-sizing: border-box;}
.banner_area > div{ font-size:0;}
.banner_area h3{ position:relative; display:inline-block; width:260px; font-size:22px; font-weight:500; color:#000; line-height: 35px; }
.banner_area .btn_guide{ display: inline-block;  margin-left: 20px; line-height: 30px;vertical-align: top; }
.banner_area .btn_guide li{ display: inline-block;vertical-align: top;}
.banner_area .btn_guide li a{ display: inline-block; width: 30px; height: 30px; text-align: center; line-height: 30px; background-color: #555; background-repeat: no-repeat; background-position: center; border-radius: 50%; font-size:10px;color: rgba(255,255,255,.0);}
.banner_area .btn_guide .play{ background-image: url("/resource/dino/images/jewelry/inc/banner_play.png");}
.banner_area .btn_guide .stop{ background-image: url("/resource/dino/images/jewelry/inc/banner_stop.png");}
.banner_area .btn_guide .prev{ background-image: url("/resource/dino/images/jewelry/inc/banner_prev.png");}
.banner_area .btn_guide .next{ background-image: url("/resource/dino/images/jewelry/inc/banner_next.png");}

.banner_area .banner_box{display:inline-block !important; width:calc(100% - 280px) !important; text-align:center; height:35px; overflow:hidden; vertical-align:top;}
.banner_area .banner_box > div > div{display:inline-block !important; text-align: center;}
.banner_area .banner_box > div img{width:150px; margin: 0 auto;}






@media all and (max-width :1024px) {
	.banner_area h3{width:100%; font-size:20px; text-align: center; margin-bottom: 10px;}
	.banner_area .banner_box{width:100% !important;}
	.banner_area .banner_box > div > div{padding:0 5px; text-align: center !important;}
}



/* 푸터레이아웃 */

footer{ }

.copyright {color:#fff; padding:30px 0; text-align:center;  background: #1b162e;}
.copyright .fmenu{margin-bottom:20px;}
.copyright .fmenu li{ display:inline-block;}
.copyright .fmenu li a{ color:#fff; padding:0 10px;font-size:16px;}
.copyright .fmenu li a:hover{ text-decoration: underline;}
.copyright address { font-size:15px; font-style: normal; font-weight: 200;}


/* 맨위로버튼 */
.first_top_go {  position: absolute; right:0; z-index:9; top:10px; opacity:0.5;}



@media all and (max-width :640px) {
	.copyright .fmenu li{ margin-bottom:5px;}
	.copyright address { font-size:14px;}

	.first_top_go {  right:-5%;}
}





/* 사이트맵*/
.sitemap_guide{ width:100%;}
.sitemap_guide ul li a{ display:block;}
.sitemap_guide ul li a:hover, .sitemap_guide ul li a:focus{ text-decoration:underline;}
.sitemap_guide > ul{ font-size:0;}
.sitemap_guide > ul > li{ display:inline-block; font-size:15px; width:25%; vertical-align:top; padding:10px 20px;}
.sitemap_guide > ul > li > a{ background:#48495f url(/resource/dino/images/jewelry/inc/bg01.png) right center no-repeat; background-size:cover; text-align:center; padding:20px; border-radius:20px 20px 0 0; color:#fff; font-size:18px; }
.sitemap_guide > ul > li div{ padding:20px;}
.sitemap_guide > ul > li > div > ul > li{ border-bottom:1px solid #ddd; padding:10px 0;}
.sitemap_guide > ul > li > div > ul > li > a{ background:url(/resource/dino/images/jewelry/inc/h6.png) left 8px no-repeat; padding-left:20px;}
.sitemap_guide > ul > li > div > ul > li > a > span{ line-height:30px;}
.sitemap_guide > ul > li > div > ul > li > ul{ background:#f5f5f5; padding:20px; margin-top:10px;}
.sitemap_guide > ul > li > div > ul > li > ul > li > a{ background:url(/resource/dino/images/jewelry/inc/dot02.gif) left 15px no-repeat; padding-left:15px; color:#152b75;}
.sitemap_guide > ul > li > div > ul > li > ul > li > a span{ font-size:14px; line-height:25px;}
.sitemap_guide > ul > li > div > ul > li > ul > li > a i.new_win {background:url(/resource/dino/images/jewelry/inc/btn_go01.png) left center no-repeat; display:inline-block;width:13px;height:13px; overflow:hidden; text-indent:-500px; margin-left:5px;}



@media all and (max-width:1023px){
	.sitemap_guide{padding:0 3%;}
	.sitemap_guide > ul > li{ width:50%; padding:10px;}
	.sitemap_guide > ul > li div{ padding:10px;}
}
@media all and (max-width:640px){
	.sitemap_guide > ul > li{ width:100%;}
	.sitemap_guide > ul > li > div > ul > li{padding:5px 0;}
	.sitemap_guide > ul > li > div > ul > li > ul{padding:10px; margin-top:5px;}
}


/* 팝업창 */
.popup_guide {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background: #fff; z-index: 11111; box-shadow: 1px 1px 10px rgba(0,0,0,0.3);}
.popup_guide > h4{position: relative; background: #009ebb; color: #fff; font-size: 18px; padding: 15px 20px; margin: 0;}
.popup_guide > h4 .btn_close{position: absolute; display: inline-block; top: 50%; right: 10px; transform: translateY(-50%); width: 30px; height: 30px; line-height: 22px; border-radius: 50%; font-size: 30px; color: #fff; text-align: center;}
.popup_guide .popup_contents{ padding: 30px;}
.popup_guide .btn_guide{ margin-top: 20px;}
.popup_guide .sbtn_style{ padding: 0 15px;}

@media all and (max-width:640px){

	.popup_guide.w_100,
	.popup_guide.w_200,
	.popup_guide.w_300,
	.popup_guide.w_400,
	.popup_guide.w_500,
	.popup_guide.w_600{ max-width: 90%;}
}



/* 실시간 좌석 현황 레이어 팝업 */
.layer_con .comment {position: absolute; top: -99999px;left: -99999px; font-size: 1px; overflow: hidden;}

.layer_pop {position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 9999;}
.layer_pop:before { content: ''; display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.5);}
.layer_inner {position: relative; width: 100%;}

.layer_con {margin: 0 20px; background: #fff; padding: 20px 12px; border-radius: 10px; word-break: keep-all;  box-shadow: 0 10px 20px rgba(0,0,0,.1);}
.layer_con .img{position:relative;}
.layer_con img{width: 100%;}
.layer_con .img a{position:absolute;bottom: 0;right: 0;width: 100px;padding: 8px 0;text-align: center;background: #fff;color: #382d70;}

.layer_con .layer_close {border-radius: 20px; max-width: 350px; margin: auto;background: #333; text-align: center; font-size: 0;}
.layer_con .layer_close a {display: block; padding:  5px 5%; color: #fff; font-size: 16px;}
.layer_con .layer_close a.day {border-right: 1px solid #787878;}

@media all and (min-width:768px) {
	.layer_inner{top: 30%;}
	.layer_con {max-width: 800px;margin: 0 auto;padding:30px;border-radius: 15px;}
	.layer_con .img a {display: none;}

	.layer_con .layer_close a { padding: 10px 10%;}
}

@media all and (min-width:1024px) {
	.layer_con .content .box01 p a:hover, .layer_con .content .box01 p a:focus, .layer_con .co_link li a:hover, .layer_con .co_link li a:focus {background: #ff5e5c}
}

@media all and (min-width:1800px) {
	.footer {width:auto;}
}