
.idx{
	margin:auto;
	width:100%;
	max-width:1200px;
	padding-bottom:30px;
	/*
	transform:translateY(30%);
	transition:all 1s;
	opacity:0;
	*/
}
.idx h1,
.idx h2{
	margin:0px;
	text-align:center;	
	font-weight:400;
	color:#333333;
}
.idx h1{
	padding:70px 30px 40px 30px;
	font-family: 'Playfair Display', serif;
	font-size:1.6em;
	line-height:140%;
}
.idx h1 span{
	white-space:nowrap;
}
.idx h2{
	padding:20px 30px 15px 30px;
	border-bottom:2px solid #509cf6;
	text-transform:uppercase;
	font-size:1.4em;
}
.idx p{
	margin:auto;
	padding:0px 30px 20px 30px;
	line-height:140%;
	max-width:880px;
	text-align:center;
	font-size:1.2em;
	color:#454545;
}

.idx_act{
	transform:translateY(0%);
	transition:all 1s;
	opacity:1;
}

.idx-ct{
	position:relative;
	width:100%;
}
.idx-ct h2{
	letter-spacing:0.1em;
	font-weight:100;
	font-size:1.5em;
}
.idx-ct p{
	font-family:Arial, Helvetica, sans-serif;
	font-size:0.9em;
	line-height:140%;
}
.balloon-decor{
	position:absolute;
	top:0px;
	right:-11px;	
	z-index:-1;
}
.idx-ct-h{
	margin:auto;
	width:100%;
	min-height:580px;
	padding:20px 35% 20px 30px;
}
.prtnr{padding:20px 0px 40px 0px; width: 100%; overflow: hidden;}
.prtnr::after{
	content:'';
	display:block;
	clear:both;
}
.prtnr-l{float:left; padding-right:10px;}
.prtnr-r{float:left; padding-left:10px;}
.prtnr-l ul{
	list-style:none;
	margin:0px;
	padding:0px;
}


.wrap{margin:auto; width:100%; max-width:1200px;}
.ls-4{padding:0px 20px 20px 20px;}
.ls-4::after{content:''; display:block; clear:both;}
.ls-2x::after{content:''; display:block; clear:both;}

.ls{
	float:left;
	width:25%;
	padding:0px 10px;
	transition:all 0.3s;
}

.ls-img{
	position:relative;
	width:100%;
	height:180px;
	background-color:#EEE;
	overflow:hidden;
}
.ls-img img{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	min-width:300px;
	width:100%;
	min-height:100%;
}
.ls-dtl{
	padding:20px 0px 0px 0px;
	min-height:140px;
}



.idx_xy{
	background-color:#F5F5F5;
	background-image:url('../../img/idx/father-656734_925.jpg');
	background-position:left bottom;
	background-repeat:no-repeat;
	-webkit-backface-visibility: hidden;
	-webkit-background-size:50%;
	-moz-background-size:50%;
	-o-background-size:50%;
	background-size:50%;
}
.idx_xy_txt{
	padding:25px 0px 25px 50%;
}
.idx_xy_txt h2{
	margin:0px;
	padding:0px;
}
.idx_xy_txt h2{
	margin:0px;
	padding:0px 0px 20px 0px;
	font-size:1.8em;
	font-weight:400;
}
.idx_xy_txt p{
	margin:0px;
	padding:0px 0px 20px 0px;
}
.idx_xy_pd{
	width:100%;
	max-width:500px;
	padding:0px 20px 20px 30px;	
}
.idx_xy_lnk{
}
.idx_xy_lnk::after{
	content:'';
	display:block;
	clear:both;	
}
.idx_xy_lnk a{
	display:block;
	float:left;
	white-space:nowrap;
	border:1px solid #509cf6;
	padding:10px 25px;
	margin-right:10px;
	margin-bottom:10px;
	font-size:0.8em;
	letter-spacing:0.05em;
	text-decoration:none;
	text-transform:uppercase;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
.idx_xy_lnk a.bg{
	background-color:#509cf6;
	color:#FFF;
}
.idx_xy_lnk a.bgx{
	background-color:transparent;
	color:#509cf6;
}
.idx_xy_lnk a:hover{
	border:1px solid #4688d7;
	background-color:#4688d7;
	color:#FFF;
}

.idx-cty-desc{
	padding:20px 30px;
}
.idx-cty-tt{
	border-top:1px solid #DDD;
	border-bottom:1px solid #DDD;
	text-align:center;
	padding:20px;
}
.idx-cty-tt strong,
.idx-cty-tt span{
	display:block;
	text-align:center;
	text-transform:uppercase;
}
.idx-cty-tt strong{
   font-size:1.2em;
   font-weight:400;
   color:#223b37;
   letter-spacing:0.1em;
}
.idx-cty-tt span{
   font-size:0.9em;
   color:#555;
}
.idx-cty-dl{
	padding:20px 0px;
}

.cidx-box{
	padding:0px 20px 20px 20px;
}
.cidx-box::after{
	content:'';
	display:block;
	clear:both;
}
.cidx-ls{
	float:left;
	width:33%;
	padding:0px 10px 20px 10px;
}
.cidx-img{
	position:relative;
	height:200px;
	overflow:hidden;
}
.cidx-img img{
	position:absolute;
	top:50%;
	left:50%;
	min-width:100%;
	height:100%;
	transform:translate(-50%,-50%);
	z-index:2;
}
.cidx-img span{
	position:absolute;
	display:block;
	top:0%;
	left:0%;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.5);
	color:#FFF;
	z-index:3;	
}
.cidx-img b{
	position:absolute;
	top:50%;
	left:50%;
	width:100%;
	transform:translate(-50%,-50%);	
	text-transform:uppercase;
	font-size:1.5em;
	color:#FFF;
	z-index:4;	
	text-align:center;
	text-shadow:#000 0px 0px 5px;
	cursor:pointer;
}
.cidx-img b label{
	display:block;
	font-weight:400;
	font-size:0.6em;
}


.cty-ls{
	padding:10px 0px 50px 0px;	
}
.cty-ls ul{
	margin:0px;
	padding:0px;
	list-style:none;
	display:table;
	width:100%;
}
.cty-ls li{
	display:table-cell;
	width:20%;
	text-align: -webkit-match-parent;
	padding:0px;
	overflow:hidden;
}
.cty-ls li a{
	position:relative;
	display:block;
	height:150px;
	padding:1px;
	overflow:hidden;
	border:2px solid #FFF;
}
.cty-ls li a img{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	max-height:150px;
	min-width:100%;
	
}
.cty-ls li span{
	display:block;
	padding:5px;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	font-size:0.8em;
	color:#555;
}
.cty-ls ul li + li + li + li + li + li{display:none;}




.htl_recommend{
	margin:auto;
	max-width:1200px;
	width:100%;
	padding:40px 20px;
}
.htl_recommend::after{
	content:'';
	display:block;
	clear:both;
}
.htl_recommend_tt{
	text-align:center;
	padding:20px 20px 40px 20px;
	letter-spacing:0.1em;
	font-weight:100;
	font-size:1.5em;
	text-transform:uppercase;
	color:#223b37;
}
.loop_2{
	float:left;
	width:50%;
}
.loop_2::after{
	content:'';
	display:block;
	clear:both;
}
.loop_4{}
.loop_4::after{
	content:'';
	display:block;
	clear:both;
}
.loop{
	float:left;
	width:50%;
	padding:0px 10px;
}
.htl_img{
	position:relative;
	width:100%;
	height:160px;
	overflow:hidden;
}
.htl_img img{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	min-width:100%;
	height:100%;
}

.htl_dtla{
	padding:10px 0px;	
}
.htl_dtla1{
	font-weight:bold;
	padding-bottom:7px;
	line-height:120%;
	color:#223b37;
}
.htl_pkg{
	padding:10px 0px;
	min-height:140px;
}
.htl_dtla2{
	padding-bottom:5px;
}
.htl_dtlb{
	position:relative;
	padding-bottom:20px;
	color:#555;
}
.htl_dtlc{
	width:70%;	
	font-size:0.8em;
	line-height:150%;
}
.htl_dtld{
	position:absolute;
	top:0px;
	right:0px;
	width:30%;
	padding-left:15px;
}
.htl_dtld a{
	display:block;
	width:100%;
	padding:8px 0px;
	text-align:center;
	font-size:0.65em;
	color:#FFF;
	background-color:#2b9af4;
	text-decoration:none;
	text-transform:uppercase;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

.htl_dtlpk{
	padding-bottom:10px;
	line-height:150%;
	font-size:0.8em;
	color:#555;
}
.htl_dtlpz{
	padding:10px 0px 30px 0px;	
	text-align:right;
	color:#555;
}
.htl_dtlpz b{
	margin-left:7px;
	padding:5px 10px;
	font-size:0.9em;
	background-color:#F90;
	color:#FFF;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

.trans_dtla{padding:10px 0px;}
.trans_dtla b{color:#223b37;}
.trn_dl{
	font-family:Arial, Helvetica, sans-serif;
	font-size:0.8em;
	color:#555;
	padding-bottom:3px;
}
.trn_dl b{
	padding-right:10px;
	color:#333;
}



.htl_recommend_dd::after{
	content:'';
	display:block;
	clear:both;	
}
.htl_recommend_lp{
	float:left;
	width:20%;
	padding:5px;
}
.htl_recommend_lp span{
	position:relative;
	display:block;
	width:100%;
	height:300px;
	background-color:#EEE;
	overflow:hidden;
}
.htl_recommend_lp span img{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);	
	height:100%;
	z-index:1;
}

.htl_recommend_dd div + div + div + div + div + div {display:none;}


.htl_recommend_lp span a{
	position:absolute;
	display:block;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);	
	width:100%;
	height:100%;
	padding:50% 20px;
	z-index:2;
	background:rgba(0,0,0,0.7);
	font-weight:bold;
	color:#FFF;
	text-transform:uppercase;
	text-decoration:none;
	text-align:center;
	opacity:0.0;
	transition:all 0.3s;
}
.htl_recommend_lp a:hover{
	opacity:1.0;
}
.rms_gst_block{
	display:none;
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.8);
	z-index:99;
}



.rec_image_box{padding:0px 10px}
.rec_image_box::after{
	content:'';
	display:block;
	clear:both;
}
.st_image{
	float:left;
	width:50%;
	padding:0px 0px 0px 0px;
}
.oth_image{
	float:left;
	width:25%;
	padding:0px 0px 5px 5px;
}

.rec_image_box img{
	width:100%;	
}

.st_image a{
	display:block;
	position:relative;
	width:100%;
	height:385px;
	overflow:hidden;
}
.oth_image a{
	display:block;
	position:relative;
	width:100%;
	height:190px;
	overflow:hidden;
}
.st_image a img,
.oth_image a img{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	transition:all 0.5s;
	min-width:100%;
	height:100%;
	z-index:1;
}
.rec_image_box a:hover img{
	min-width:110%;
	height:110%;
	transform:rotate(2deg) translate(-50%,-50%);
}
.rec_image_box a b{
	position:absolute;
	display:block;
	width:100%;
	height:100%;
	top:0%;
	left:0%;
	background-color:rgba(0,0,0,0.2);
	transition:all 0.5s;
	z-index:2;
}
.rec_image_box a:hover b{background-color:rgba(0,0,0,0.7);}
.rec_image_box a span{
	position:absolute;
	display:block;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	transition:all 0.5s;
	min-width:100%;
	font-weight:bold;
	padding:0px 20px;
	color:#FFF;
	text-align:center;
	z-index:3;
	text-shadow:#333 1px 1px;
}

.st_image a span{font-size:1.8em; cursor:pointer;}
.oth_image a span{font-size:1.2em; cursor:pointer;}
.st_image a span label,
.oth_image a span label{
	display:block;
	padding:5px 0px;
	font-size:0.7em;
	font-weight:100 !important;
	cursor:pointer;
}




.messgae_balloon{
	position:fixed;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	background-color:rgba(0,0,0,0.7);	
	z-index:99;
}
.messgae_balloon_pop{
	width:70%;
	max-width:700px;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	background-color:#FFF;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.pd-top-message{padding-top:10px;}
.txt-message{
	padding:20px 40px 20px 40px;
}
.txt-message strong{
	border:1px dashed #a2b4b4;
	display:block;
	color:#234D4D;
	font-size:1.4em;
	padding:12px 0px 15px 0px;
	margin-bottom:20px;
	text-align:center;
}
.txt-message strong span{
	display:block;
	color:#575859;
	font-size:0.7em;
	font-weight:100;
	text-align:center;
	padding:5px 0px 0px 0px;
}
.txt-message p{
	margin:0px;
	padding:0px 0px 15px 0px;
	color:#343536;
}
.scroll{
	width:100%;
	height:310px;
	overflow:hidden;
	overflow-y:auto;
}
.scroll::-webkit-scrollbar {width: 5px;}
.scroll::-webkit-scrollbar-track {background: #FFF; -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1);}
.scroll::-webkit-scrollbar-thumb {background: #CCC; -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.2);}
.scroll::-webkit-scrollbar-thumb:hover {background: #AAA; }
.scroll::-webkit-scrollbar-thumb:active {background: #888; -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.3);}	

.ftr-msg{
	padding:15px 20px;
	border-top:1px solid #DDD;
}
.ftr-msg::after{
	content:'';
	display:block;
	clear:both;
}
.ftr-msg-chk{float:left;}
.ftr-msg-btn{float:right;}
.ftr-msg-chk label{
	font-size:0.8em;
	color:#555;	
}
.ftr-msg-chk label input{margin-right:5px;}
.ftr-msg-btn input{
	border:0px;
	padding:0px 0px 0px 20px;
	background-color:#FFF;
	outline:none;
	color:#555;
	cursor:pointer;
	background-image:url('data:image/gif;base64,R0lGODlhDQAMANUAAAAAAP////T09PDw8O/v7+7u7u3t7ebm5uXl5eLi4t/f397e3tra2tjY2NHR0c/Pz87OzsnJycbGxsTExMPDw8DAwL29vby8vLu7u7q6uri4uLa2trOzs7KysrGxsa6urq2traysrKurq6qqqqioqKampqOjo6KioqGhoaCgoJ+fn52dnZqampmZmZiYmJGRkf///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAADAALAAAAAANAAwAAAZWwEwKRiwSBa2GQgMSGGGKEaUAK3wshCLj4nmuLgbYgRR6EkEcmEpiJhYyL0ebmMCwIlTzQNSBpSxtLhVFIyVGBSgPRgQSJ0QQIRdmCBsgCRMjczAmC0EAOw==');
	background-repeat:no-repeat;
	background-position:left center;
}
.ftr-msg-btn input:hover{
	color:#23362b;
	text-decoration:underline;
}


.rec-db{
	padding:20px 20px;
}
.rec-fix{
	position:relative;
	background-color:#f7f7f7;
	min-height:360px;
	padding-bottom:70px;
}
.rec-fix::after{
	content:'';
	display:block;
	clear:both;
}
.rec-img{
	position:absolute;
	width:50%;
	height:100%;
	top:0px;
	left:0px;
}
.rec-img a{
	display:block;
	width:100%;
	height:100%;
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
}
.rec-txt{
	padding:0px 0px 0px 50%;
}
.rec-txt h2{
	margin:0px;
	padding:25px 30px 15px 30px;
	font-size:1.8em;
	color:#204242;
}
.rec-txt p{
	margin:0px;
	padding:0px 30px 15px 30px;
	line-height:140%;
	font-size:0.9em;
	color:#5d5d5d;
}
.rec-txt a{
	display:block;
	position:absolute;
	bottom:25px;
	right:25px;
	background-color:#204242;
	font-weight:bold;
	font-size:0.9em;
	color:#FFF;
	padding:10px 30px;
	text-decoration:none;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
} 


	

@media only screen and (max-width:900px)
{	
	.ls-4{padding-bottom:20px;}
	.ls{float:left; width:50%; padding-bottom:20px;}
	.ls-2{padding-bottom:20px;}
	.ls-2y{float:left; width:100%;}
	.ls-2::after{content:''; display:block; clear:both;}
	.ls-2y::after{content:''; display:block; clear:both;}
	.balloon-decor{opacity:0.4;}
	.idx-ct-h{padding:20px 30px 20px 30px;}
	.cidx-ls{width:50%;}
	.cty-ls ul{display:block;}
	.cty-ls ul::after{content:''; display:block; clear:both;}
	.cty-ls li{display:block; float:left; width:33.33%;}
	.cty-ls li span{display:none;}		
	.cty-ls ul li + li + li + li + li + li{display:block;}
	
	.htl_recommend_dd div + div + div + div + div + div{display:block;}
	.htl_recommend_lp{
		float:left;
		width:33.333%;
		padding:5px;
	}
	.htl_recommend_lp span{height:250px;}

	.loop_2{width:100%;}
	.loop_2::after{
		content:'';
		display:block;
		clear:both;
	}
	.htl_img{
		height:180px;
	}
	.htl_img img{
		position:static;
		width:100%;
		left:auto;
		top:auto;
		transform:translate(0%,0%);
		height:auto;
	}
}
@media only screen and (max-width:800px)
{
	.idx_xy{
		-webkit-background-size:cover;
		-moz-background-size:cover;
		-o-background-size:cover;
		background-size:cover;
	}
	.idx_xy_txt{
		padding:40px 0px 40px 0%;
		min-height:inherit;
		background-color:rgba(0,0,0,0.7);
	}
	.idx_xy_pd{
		width:100%;
		max-width:inherit;
		padding:0px 40px 20px 40px;	
	}
	.idx_xy_txt h2{
		color:#FFF;
	}
	.idx_xy_txt p{
		color:#FFF;
		opacity:0.7;
	}
	.htl_recommend_lp{width:33.3333%;}
	
	.st_image{
		width:100%;
	}
	.oth_image{
		float:left;
		width:50%;
		padding:5px 0px 0px 5px;
	}

	
}

@media only screen and (max-width:768px)
{
	.rec-img{ width:40%;}
	.rec-txt{ padding:0px 0px 0px 40%;}
	.rec-txt h2{ font-size:1.2em;}
	.rec-txt p{ font-size:0.8em; line-height:150%;}
	.rec-txt a{ font-size:0.8em;}
}

@media only screen and (max-width:578px)
{
	.cidx-ls{width:100%; float:none;}
	.cty-ls li{width:50%;}
	.htl_recommend{padding:40px 5px;}
	.loop{float:none; width:100%;}
	.htl_img{height:auto;}
	.htl_recommend_lp{width:50%; height:200px; overflow:hidden;}
	.htl_recommend_lp span{height:100%;}
	.htl_recommend_lp span img{ min-width:100%; min-height:100%;}
	.htl_recommend_lp span a{
		opacity:1;
		height:inherit;
		top:70%;
		left:0%;
		transform:none;
		background-color:rgba(0,0,0,0.5);
		padding:10px 20px;
	}
	.rec-img{ width:100%; height:300px; position:static;}
	.rec-txt{ padding:0%;}
	.rec-txt h2{ font-size:1.2em;}
	.rec-txt p{ font-size:0.8em; line-height:150%;}
	.rec-txt a{ font-size:0.8em;}
}

@media only screen and (max-width:478px)
{

	.idx h1{padding: 40px 20px 0px 20px; font-size: 0.9em;}
	.ls{width:100%; padding-bottom:20px;}
	.ls-4{padding:0px 10px 20px 10px;}
	.ls-2{padding-bottom:0px;}
	.ls-2::after{content:''; display:block; clear:both;}
	.ls-dtl{min-height:inherit;}
	.ls-2y{float:none; width:100%;}
	.idx h1{font-size:1.0em;}
	/*.balloon-decor{opacity:0.2; right:50%; transform:translateX(50%);}*/
	.balloon-decor{display: none;}
	.prtnr-l{width:100%; padding:10px 0px 0px 0px;}
	.prtnr-r{width:100%; padding:10px 0px 0px 0px;}
	.htl_recommend_lp{width:100%;}
	.cidx-box{padding:0px;}
	.rec_image_box{padding:0px;}
	.oth_image{padding:5px 0px 0px 0px;}
	.oth_image img{border-left:2px solid #FFF; border-right:2px solid #FFF;}


}






