﻿

/*공통 스타일*/
#wraper { width:100%;  min-width:320px; }
#wraper,#container, .inner:after,.header_Area:after { content:""; display:block; clear:both; }

.inner{/* width:1200px; */clear:both;/* margin:0 auto; */}



/* 인트로 */
.intro_wrap {}
.intro {text-align:center;position:absolute;left:50%;top:50%;max-width: 1250px;margin:-360px 0 0 -625px;}
.intro .go_box {overflow:hidden;position:relative;overflow:hidden;margin-top:30px;margin-left:-20px;}
.intro .go_box li {list-style:none;float:left;width:50%;position:relative;}
.intro .go_box img {float:left;max-width: 100%;}
.intro .round_box {width:200px;height:200px;border-radius:100px;position:absolute;left:50%;top:50%;margin:-100px 0 0 -100px;z-index:4;}
.intro .round_box {background:#ef7327 url('../images/intro_arrow.png') center 140px no-repeat;}
.intro .round_box dt {color:#fff;font-size: 20px;/margin-top:50px;line-height: 40px;margin-top: 30px;}
.intro .round_box dd {color: rgba(255,255,255,1);font-size: 20px;}
.intro .img_box {overflow:hidden; position:relative; margin-left:20px}
.intro .copyright {color:#888; margin-top:20px}
.intro .right_float {float:right}
.intro .right_float .round_box {background-color:#1e7ca7}
.intro .go_box .left_float:hover .round_box {background-color:#f54016}
.intro .go_box .right_float:hover .round_box {background-color:#084985}
.intro .go_box li:hover .upper_bg50 {animation: intro 0.6s ease; -webkit-animation: intro 0.6s ease; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards}
.intro .go_box li:hover .img_box {animation: intro2 0.6s ease; -webkit-animation: intro2 0.6s ease; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards}
.intro .go_box li:hover .round_box {animation: intro3 0.6s ease; -webkit-animation: intro3 0.6s ease; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards}

.wrap {position:relative; height:100%;}
.lineup {display:inline-block} 
.layout_fix {width:1250px; margin:0 auto; position:relative}
.upper_link {position:absolute;left:0;top:0;width:100%;height:100%;z-index:9;}
.upper_link img {width:100%; height:100%;}
.upper_bg50 {position:absolute; width:100%; height:100%; z-index:2; background:transparent url('/images/bg_50.png') left top repeat;}

@-webkit-keyframes intro {
    to { -webkit-filter: opacity(0%); filter: opacity(0%); }
    from {-webkit-filter: opacity(100%); filter: opacity(100%);}
}
@keyframes intro {
    to {filter:alpha(opacity=0); opacity:0;}
    from {filter:alpha(opacity=1); opacity:1;}
}

@-webkit-keyframes intro2 {
    from {}
    to {border-radius:200px;}
}
@keyframes intro2 {
    from {}
    to {border-radius:200px;}
}

@-webkit-keyframes intro3 {
    from {}
    to {width:300px; margin-left:-150px}
}
@keyframes intro3 {
    from {}
    to {width:300px; margin-left:-150px}
}



/*해더영역 스타일*/
.main_header {
	position: relative;
	top: 0px;
	width: 100%;
	height: auto;
	z-index: 9999;
	border-top: 5px solid #ba0005;
	border-bottom: 1px solid #d0d0d0;
}

.top_line{width:100%;height: 1px;background-color: #dedede;position: absolute;top: 124px;}

#top_space{}

#logo {
	width: 200px;
	margin-left: -100px;
	position: absolute;
	left: 50%;
	top: -4px;
}
.btn_gosite{

position: absolute;

left: 14%;

top: 8%;

z-index: 99;

}
.call_btn{

/* margin-right: 20px; */

position: absolute;

left: 4%;

top: 20%;

z-index: 99;
}
.gnb{

/* margin-right: 20px; */

position: absolute;

right: 6%;

top: 6%;

z-index: 99;

-webkit-animation: up-down 2s infinite;

-ms-animation: up-down 2s infinite;

animation: up-down 2s infinite;
}

@keyframes up-down {
	0% { top:8%; }
	50% { top:2%; }
	100% { top:8%; }
}

.gnb ul li{display:inline-block;height: 80px;}

.rollover {
	position:relative;
	cursor:pointer;
}

.rollover img {
	
	left:0;
	top:0;
	-webkit-transition: opacity 0.2s ease-in-out;
	-moz-transition: opacity 0.2s ease-in-out;
	-o-transition: opacity 0.2s ease-in-out;
	transition: opacity 0.2s ease-in-out;
}

.rollover img.out:hover {
	opacity:0;
}


/*스크롤버튼*/
.btn-scroll {position: relative;bottom:30px;/* left:50%; */z-index:1500;width: 175px;height: 50px;/* margin-left:-32px; */background: url('../images/btn_scroll.png') 0 0 no-repeat;/* background-size:100%; *//*! -webkit-animation: up-down 1.8s infinite; */-ms-animation:up-down 2s infinite;/*! animation: up-down 1.8s infinite; */border: 0px;transition: all 0.4s;}
.btn-scroll:hover{background: url(../images/btn_scroll_on.png) 0 0 no-repeat;}
.btn-top {display:none;position:fixed;bottom:20px;right: 3%;z-index:3000;width:61px;height:60px;background: url(/images/btn_top.png) 0 0 no-repeat rgba(27, 28, 33, 0.6);background-size:100%;border: 0px;}
.btn-gnb {display:block;width: 60px;height: 77px;margin: 40px auto 0 auto;background: url('../img/common/btn_gnb.png') center 1px no-repeat;color: #ffffff;font-size: 16px;}

.navi{float:left;margin-left: 43px;margin-top: 31px;}

.main_bn_txt{position:absolute; z-index:999999;top:10px;left:10px;}


/*섹션타이틀 공통*/
section p{text-align:center;/* width: 38%; */margin: 0 auto;}
section p.title {font-size: 70px;color: #333333;font-family: 'Vijaya';border-bottom: 1px solid #dcdcdc;letter-spacing: 0px;line-height: 64px;width: 70%;font-weight: 200;}
section p.title span {display: inline-block;margin-right: 5px;color: #e83a3a;/*text-transform: uppercase;*/}
section p.title_txt{font-size: 18px;color: #555;padding-bottom: 35px;padding-top: 15px;letter-spacing: -0.5px;}
section .st_title{margin-bottom:15px;}


/*jssor_slide */
.jssor_slide_wrap{position: relative; z-index:900;margin: 0 auto; top: 0px; left: 0px; width:1200px; height: 760px; overflow: hidden; visibility: hidden;}
.jssor_slide_cont{cursor: default; position: relative; top: 0px; left: 0px; width: 1200px; height: 760px; overflow: hidden;}



/*객실미리보기*/
#section01 {min-height: 100%;background: #fff;}
#section01 .rooms{padding-top: 60px;padding-bottom: 60px;}
#section01 .rooms img{margin:0 auto;}
#section01 .rooms .room_row ul{text-align:center;}
#section01 .rooms .room_row li{display:inline-block;/* margin: 0px 0px; */padding-bottom: 16px;/* width: 380px; */padding-left: 4px;padding-right: 4px;}
#section01 .rooms .room_row li:first-child{margin-left: 0px;}
#section01 .rooms .room_row li:last-child{margin-right: -1px;}
#section01 .rooms .room_row .box{position:relative;background-color: #fff;width: 100%;overflow: hidden;}
#section01 .rooms .room_row .over{border: 0px solid #bf184d;opacity: 1;filter:alpha(opacity=0);width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 3;cursor: pointer;transition: 
-webkit-transition:opacity 0.3s,border-width 0.3s;-moz-transition: opacity 0.3s,border-width 0.3s;-ms-transition: opacity 0.3s,border-width 0.3s;-o-transition:opacity 0.3s,border-width 0.3s;transition: opacity 0.4s,border-width 0.4s;}
#section01 .rooms .room_row .overText{color:#fff;font-size: 20px;width: 100%;line-height: 24px;/* margin-top: 33%; */background: rgba(0, 0, 0, 0.3);padding: 10px 0px;position: absolute;bottom: 0px;}
#section01 .rooms .room_row .overText span{color:#fff;font-size: 17px;}
#section01 .rooms .room_row .over:hover{opacity:1;filter:alpha(opacity=100);border-width: 4px;}
#section01 .rooms .room_row .box img{width: 100%;opacity: 1;transition: -webkit-transition: all 0.6s;-moz-transition: all 0.6s;-ms-transition: all 0.6s;-o-transition: all 0.6s;overflow: hidden;transition: all 0.6s;}

#section01 .rooms .room_row .box:hover{box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.4);}
#section01 .rooms .room_row .box:hover img{

opacity: 0.8;

/* filter: blur(2px); */

/* -webkit-filter: blur(2px); */

-moz-filter: blur(2px);

-o-filter: blur(2px);

transform: scale(1.3,1.3);

}

/*스페셜영역*/
#section02 {
    padding-top: 50px;
    padding-bottom: 60px;
    background: url(/images/bg_special_list.jpg)no-repeat center center fixed;
    background-size: cover;
}
#section02 img{margin:0 auto;}
#section02 .special .sp_left{margin-right: 14px;width:674px;}
#section02 .special .sp_left .sp01{margin-bottom: 14px;}
#section02 .special .sp_right{width: 512px;}
#section02 .special .sp_right .sp03{margin-bottom: 15px;}
#section02 .sp_item{padding-right: 0px;/* width: 100px; */}
#section02 .special  li  .box_black{ background-color:#000; position:relative;}
#section02 .special li img{opacity: 1;transition:
-webkit-transition: all 0.5s;-moz-transition: all 0.5s;-ms-transition: all 0.5s;-o-transition: all 0.5s;transition: all 0.5s;}
#section02 .special li:hover .sp_img{opacity: 0.6;}

#section02 .special .over{opacity: 0;filter:alpha(opacity=1);width: 100%;height: 100%;position: absolute;top: 0;text-align: center;left: 0;z-index: 3;cursor: pointer;transition: 
-webkit-transition:opacity 0.3s,border-width 0.3s;-moz-transition: opacity 0.3s,border-width 0.3s;-ms-transition: opacity 0.3s,border-width 0.3s;-o-transition:opacity 0.3s,border-width 0.3s;transition: opacity 0.4s,border-width 0.4s;}
#section02 .special li .over:hover{opacity:1;filter:alpha(opacity=100);}

#section02 .special .sp01 .overText{padding-top: 48%;}
#section02 .special .sp02 .overText{padding-top: 22%;}
#section02 .special .sp03 .overText{padding-top: 27%;}
#section02 .special .sp04 .overText{padding-top: 30%;}
#section02 .special li .overText img{ margin:0 auto;}

/*인포메이션영역*/
#section03 {background: #ffffff;padding: 50px 0px 60px 0px;}
#section03 .info .info_left{float:left;margin-right: 1px;width: 622px;}
#section03 .info .info_left li.st_info01{float:left;margin-right: 1px;width: 315px;}
#section03 .info .info_left li.st_info02{float:left;width: 306px;overflow: hidden;}
#section03 .info .info_right li.st_info03{float:left;width: 283px;margin-right: 1px;}
#section03 .info .info_right li.st_info04{float:left;width: 293px;}

#section03 .info .info_left .info01{}
#section03 .info .info_right{float:left;width: 577px;}
#section03 .info .info_right .info03{
    margin-bottom: 1px;
    /* width: 577px; */
}
#section03 .info .info_right .info04{position:relative;padding-top: 35%;padding-bottom: 32.4%;}
#section03 .info .info_right li{float:left;/* width: 283px; */}
#section03 .info  li .box_black { position:relative;  background-color:#000;}
#section03 .info  li .box_white {position:relative;/* width: 306px; */background-color:#fff;}

#section03 .info  li img {opacity: 1;transition:
-webkit-transition: all 0.5s;-moz-transition: all 0.5s;-ms-transition: all 0.5s;-o-transition: all 0.5s;transition: all 0.5s;}

#section03 .info li:hover .sp_img{opacity: 0.3;}


#section03 .info .text01{position:absolute;bottom:0px;width: 100%;background: rgba(0,0,0,0.45);font-size: 18px;line-height: 150%;padding: 12px 0;color:#fff;}
#section03 .info .text02{position:absolute;top: 30%;left:0px;width: 100%;font-size: 16px;vertical-align:middle;line-height: 160%;color:#111;}
#section03 .info .text02 a{text-decoration:underline;padding-top:20px;line-height: 60px;}
#section03 .info .text03{position:absolute;top: 0px;left:0px;width: 100%;}
#section03 .info .text03 p{font-size: 20px;vertical-align:middle;line-height: 144%;color:#fff;margin-top: 4.5%;}
#section03 .info .text03 span{font-size: 18px;}
#section03 .info .text04{/* position:absolute; *//* top: 15%; */left:0px;width: 100%;height: 100%;padding-top: 11%;}
#section03 .info .text04 p.line{width:27px;border-bottom:1px solid #fff; height:1px;}
#section03 .info .text04 p{font-size: 20px;vertical-align:middle;line-height: 120%;color:#fff;margin-top: 3%;}
#section03 .info .text04 p span{color: #ffffff;}
#section03 .info .text04 p.txt01{font-size: 1.5rem;font-family:'open sans';letter-spacing:3px;margin-top: 15px;}

#section03 .info .text05{position:absolute;top: 16%;left:0px;width: 100%;z-index: 10;}
#section03 .info .text05 p{font-size: 18px;vertical-align:middle;line-height: 130%;color:#fff;}
#section03 .info .over{opacity: 0;filter:alpha(opacity=1);width: 100%;height: 100%;position: absolute;top: 0;left: 0;text-align: center;z-index: 3;cursor: pointer;transition: 
-webkit-transition:opacity 0.3s,border-width 0.3s;-moz-transition: opacity 0.3s,border-width 0.3s;-ms-transition: opacity 0.3s,border-width 0.3s;-o-transition:opacity 0.3s,border-width 0.3s;transition: opacity 0.4s,border-width 0.4s;}

#section03 .info li .over:hover{opacity:1;filter:alpha(opacity=100);}
#section03 .info .info01 .overText{padding-top: 29%;}
#section03 .info li .info01 img{ margin:0 auto;}

#section03 .info .info_right .info04 .box_bg{
	position:absolute;
	top: 0px;
	left:0px;
	width: 100%;
	height:100%;
	background-color: #ba0005;
	cursor: pointer;
	transition:
-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
	}

#section03 .info .info_right .info04 .box_bg:hover{background-color:#cb4009;}
#section03 .info .info_right .info04:hover p span{color: #ffffff;}

#section03 .info .info05 {
	position:relative;
	width: 100%;
	cursor:pointer;
}
#section03 .info .info_right .info05 .over01{}

#section03 .info .info05 .rollover01 img.out_img {
	opacity:1;
	position:absolute;
	top: 0px;
	left: 0px;
}

#section03 .info .info05:hover .rollover01 img.out_img {
	opacity:0;
}

/*푸터영역*/
.footer_box{background-color: #ffffff;padding: 10px 20px 20px;border-top: 1px solid #c9d1d1;}


.footer_info {

}
.footer_info .address_txt p {
	font-size: 12px;
	text-align: center;
	line-height: 20px;
	padding-bottom: 5px;
}
.footer_info .address_txt {
	
	padding-top: 20px;
}
.footer_info .address_txt span {
	font-size: 11px;
	color: #777777;
	display: block;
	padding-top: 5px;
}
.footer_info .address_txt ul {
	/* width: 200px; */
	/* position: relative; */
	/* top: -23px; */
	text-align: center;
	/* left: 640px; */
	margin: 0 auto;
}
.footer_info .address_txt li {
	padding-left: 3px;
	display: inline-block;
}

@media (max-width: 1199px){	
	#section02 .special .sp_left{margin-right: 14px;width: 55.9%;}
#section02 .special .sp_right{width: 42.4%;}
	
}

@media all and (max-width: 1024px){

	.intro {text-align:center;position: relative;left: 0%;top: 5%;max-width: 1250px;margin: 0px 0 0 -0px;}
}


@media (min-width: 768px){
    .sct_20 .sct_li_1,.sct_20 .sct_li_4{width:50%;}
    .sct_20 .sct_li_1 .sct_tit_wr, .sct_20 .sct_li_4 .sct_tit_wr{width:80%;}
    .sct_20 .sct_li_1 .sct_img, .sct_20 .sct_li_4 .sct_img{width:50%;right:10px }
    .sct_20 .sct_li_1,.sct_20 .sct_li_2,.sct_20 .sct_li_3,.sct_20 .sct_li_4{height:230px;}
    .sct_20 .sct_li_2 .sct_basic,.sct_20 .sct_li_3 .sct_basic{display:none}
    .sct_20 .sct_li_2 .sct_tit,.sct_20 .sct_li_3 .sct_tit{margin:0}
    .footer_info .address_txt p {
	font-size: 15px;
	color: #464646;
	text-align: center;
	line-height: 25px;
	padding-bottom: 5px;
}
}

@media (max-width: 768px){

	.main_header{position: relative;top:0px;left: 0px;background-color: #ffffff;}

	#logo{width: 30%;position: relative;margin: 0 auto;left: inherit;}
	#section01 .rooms .room_row li{padding-bottom: 10px;padding-left: 5px;padding-right: 5px;}



	/*섹션타이틀 공통*/
section p{text-align:center;/* width: 38%; */margin: 0 auto;}
section p.title,
section p.title span{font-size: 24px;line-height: 34px;}
section p.title_txt{font-size: 10px;color: #555;padding-bottom: 35px;padding-top: 15px;letter-spacing: -0.5px;}
section .st_title{margin-bottom:15px;}

#section01 .rooms{padding-top: 15px;padding-bottom: 20px;}
#section01 .rooms .room_row .overText{font-size: 16px;padding: 3px 0px;background: rgba(0, 0, 0, 0.16);}
#section01 .rooms .room_row .overText span{color:#fff;font-size: 14px;}	
#section02 .special .sp_left{
		width:100%;margin-bottom:3%;
	}
#section02 .special .sp_right{width:100%;}
#section03 .info .text02{font-size: 1.2rem;}

.room_row{}
#section03 .info .text01{font-size: 14px;}
#section03 .info .info_right .info04{padding-top: 35%;padding-bottom:30.4%;}	
#section03 .info .info_left,
#section03 .info .info_right,
#section03 .info .info_right .info03{max-width: 100%;}
#section03 .info .info_left li.st_info01
{
    width: 49.9%;
}	
#section03 .info .info_left li.st_info02,
#section03 .info .info_right li.st_info03,
#section03 .info .info_right li.st_info04{
	width: 48.5%;
}
#section03 .info .info_left li.st_info02{/* height: 249px; */margin-bottom: 1px;overflow: hidden;}
#section03 .info .text05{top:12%;}
#section03 .info .text04 p{font-size: 14px;line-height: 140%;margin-top: 1.6%;}
#section03 .info .text04 p.txt01{font-size: 0.8rem;margin-top: 8px;}
#section03 .info .text03 p{font-size: 13px;line-height: 140%;margin-top: 4%;}
#section03 .info .text03 span{font-size: 14px;}
#section03 .info .text05 p{font-size: 15px;line-height: 140%;}
}

.videowrapper {position: relative;padding-bottom: 66.6%; /* 16:9 비율인 경우 */
/* padding-bottom값은 4:3 비율인 경우 75%로 설정합니다 */padding-top: 25px;height: 0;}

.videowrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

@media all and (max-width: 700px) {	
.btn-gnb {display:block;width: 60px;height: 40px;margin: 50px auto 0 auto;background: url('../img/common/btn_gnb.png') center center no-repeat;color: #ffffff;font-size: 16px;}
.btn-top {width:40px;height:40px;opacity:0.8;right: 12px;}
.btn-scroll { display:none; }
.intro .round_box {background: rgba(239, 115, 39, 0) url(../images/intro_arrow.png) center 140px no-repeat;}
.intro .right_float .round_box {background-color: rgba(30, 124, 167, 0);}
.intro .go_box li {list-style:none;float:left;width: 100%;position:relative;padding: 10px;}
.upper_bg50 {position:absolute;width:100%;height:100%;z-index:2;background: transparent url('//images/bg_50.png') left top repeat;}
}


.btn_reser_adm{
    padding: 3px 10px;
    background: #bb4208;
    color: #ffffff !important;
}