/* LESS Document */

/* import */
@import "owl.carousel.css";
@import "animate.min.css";
@import "animate.css";
@import "../font/stylesheet.css";

/*
font-family:'bebas_neuebook';
*/


/* Breakpoints */
@highdensity: ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)",
              ~"only screen and (min--moz-device-pixel-ratio: 1.5)",
              ~"only screen and (-o-min-device-pixel-ratio: 3/2)",
              ~"only screen and (min-device-pixel-ratio: 1.5)";
@mobile:      ~"only screen and (max-width: 529px)";
@tablet:      ~"only screen and (min-width: 530px) and (max-width: 949px)";
@desktop:     ~"only screen and (min-width: 950px) and (max-width: 1128px)";
@desktop-xl:  ~"only screen and (min-width: 1129px)";

/* SNS COLOR */
.clr_facebook{ background-color:#305097;}
.clr_google{background-color:#db4a39;}
.clr_line{background-color:#5ae628;}
.clr_twitter{background-color:#00aced;}
.clr_hatena{background-color:#00a4de;}

/* common */
.m0{margin:0;}
.p0{ padding:0;}
.mp0{margin:0;padding:0;}
.w980{width:980px; margin:0 auto; .p0;
	@media @mobile{
		width:100%;
	}
}
.bebas{font-family:'bebas_neuebook';}
.clear{content:""; display:block; clear:both;}
.opacity10{filter: alpha(opacity=100); -moz-opacity:1; opacity:1; }
.opacity8{filter: alpha(opacity=80); -moz-opacity:0.8; opacity:0.8;}
.opacity5{filter: alpha(opacity=50); -moz-opacity:0.5; opacity:0.5;}
.opacity3{filter: alpha(opacity=30); -moz-opacity:0.3; opacity:0.3;}
.opacity0{filter: alpha(opacity=0); -moz-opacity:0; opacity:0;}
.rounded-corners (@radius: 4px){border-radius: @radius;  -webkit-border-radius: @radius; -moz-border-radius: @radius;}
.box-shadow(@arg: 0px 4px 0px 0px #eee;){ -moz-box-shadow: @arg; -webkit-box-shadow: @arg;box-shadow: @arg;}

/* 変数定義 */
@red:rgba(255,0,4,1.00);
@blue:#3592cd;
@green:#bbe61c;
@pink:#eb5e80;
@black:#222222;
@gray:#eeeeee;

/* 2.フォントサイズ&タイプ指定 */
@biggest-size:23px;
@bigger-size:20px;
@big-size:18px;
@mid-size:16px;
@basic-size:13px;
@min-size:10px;

/* 基本設定 */
* { 
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}
input{
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}
body{ font-size:13px; line-height:1.5; color:#333; .mp0; background:#000; position:relative; height:100%;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; 
	@media @mobile{ min-width:100%;}

}
body,html{ height:100%;}
img { vertical-align:bottom; max-width:100%;}
ul,li,dl,dt,dd,ol,p,h1,h2,h3,h4,h5,h6,p,figure,figcaption{ .mp0; list-style:none;}
a,button{ color:@black; text-decoration:none;outline: none; cursor:pointer; 
	&:hover{.opacity8;}
}
a{
	img{ border:none; outline:none;}
}
input,option,select{outline:none;
	&:focus{outline:none; border:none;}
	
}
input::-moz-focus-inner{border :0px;}
select::-moz-focus-inner{border :0px;}
option::-moz-focus-inner{border :0px;}
input{ outline:none;/*IE*/  }
input[type="text"]::-moz-focus-inner{ border :0px;/*FireFox*/  }
.invisible{display: none;}

.left{ float:left;
	@media @tablet{ float:none; width:100% !important;}
	@media @mobile{ float:none; width:100% !important;}
}
.right{ float:right;
	@media @tablet{ float:none; width:100% !important;}
	@media @mobile{ float:none; width:100% !important;}
}
.page{ display:block; width:100%;
	&:after{.clear;}
}

.copyright{ color:#999999; text-align:center; font-size:@min-size; padding-bottom:20px;
}

#loader {width: 32px;height: 32px;display: none;position: fixed;_position: absolute; top: 50%;left: 50%;margin-top: -16px; margin-left: -16px;z-index: 400;}
#fade {width: 100%;height: 100%; min-height:100%;display: none;background-color: #FFFFFF;position: absolute;top: 0px;left: 0px;z-index: 350;}

	.social{max-width:960px; margin:0 auto 20px auto;
		&:after{.clear;}
		.fb-page{float:left;width: 100%; margin:0px auto 20px auto;
		}
		
			#jisseki{width: 100%; margin:0px auto 20px auto; 
				p{text-align: center; font-size: 3em; margin-top: 40px; margin-bottom: -100px;font-weight: bold;
   					 			}
			}
			
			
	}
  .sns-icon {
    float: left;
    display: block;
    width: 100%;
    text-align: center;
  }
  .sns-icon .lsf {
  }
  .sns-icon a{color:#fff; display:block;padding:15px;}
  .sns-count {
    padding-bottom: 3px;
    font-size: 12px;
    color: #666;
  }
  
 .pc{display:block;
	  @media @mobile{ display:none;}
 }
 
 .smp{display:none;
	 @media @mobile{ display:block;}
}
  
/*
======================================
  TOP slide
======================================
*/

#container { width: 100%; text-align: center;}
.fullSlideShow {width: 100%;text-align: left;position: relative;overflow: hidden;
	ul {top: 50%;left: 50%;width: 100%;position: fixed; overflow: hidden; background:@black;
		li {top: 0; left: 0;width: 100%;display: none;position: absolute;
			img {width: 100%;}
		}
	}
	 .btnPrev,.btnNext {margin-top: -25px; top: 50%;width: 50px;height: 50px;position: fixed; z-index: 105;}
	 .btnPrev{  left: 10px;background: transparent url(../img/btnPrev.png) no-repeat center center;}
	 .btnNext{  right: 10px;background: transparent url(../img/btnNext.png) no-repeat center center;}
}
.pagiNation {bottom: 30px; left: 0; width: 100%; height: 15px; text-align: center; position: fixed;z-index: 110; visibility: visible; display:none;
	a{margin: 0 5px;width: 20px; height: 20px; display: inline-block;overflow: hidden; background: #000;}
	a.pnActive{filter:alpha(opacity=100)!important;  -moz-opacity: 1!important; opacity: 1!important;}		
}
#wrapper { width: 100%;text-align: left;background: #fff; position: relative; z-index: 120;
	nav{ 
	}
}
.contents { padding: 0px; max-width:1200px; width:100%; margin:0 auto;
	@media @mobile{ padding: 0px;width:100%; margin:0 auto;}
	p { padding-bottom: 3em;line-height: 180%; width:100%;}
}
.fullSlideShow ul {display: inline-block;overflow: hidden;
	&:after{.clear;}
}

#top{ position:relative; min-height:600px; background:url(../bg.jpg) no-repeat center center; background-size:cover;
	.center{ position:absolute; left:50%; top:50%; margin-top:-150px; margin-left:-150px; z-index:400;
		img{ width:300px; height:auto; padding:0px; }
	}
	.logo{position:absolute; left:20px; top:20px; z-index:520;
		img{ width:300px; height:auto;}
	}
	.arrow{position:absolute; left:0%; bottom:0%;  z-index:400; width:100%; text-align:center;
		a{ .bebas; font-size:30px; color:#fff;
			span{ display:block;}
			img{ width:80px; height:auto;}
		}
	}
}



/*
======================================
  Header
======================================
*/

nav{background:@black; height:50px; width:100%;
	ul.naver{ padding:12px 0; text-align:center;
		li{ display:inline-block;height:50px; padding:0 20px;
			a{ text-align:center; display:block; padding-top:0px; .bebas; font-size:20px; letter-spacing:2px; color:#fff; font-weight:lighter;  .opacity5;
				&:hover{
					 .opacity8;
				}
			}
		}
		li.active{
			a{
			}
		}
		&:after{.clear;}
	}
	.naver{ }
	&:after{.clear;}
	
	@media @mobile{  height:auto;background:@black;
	
		.naver-handle{ border:none; color:#fff;; .bebas; text-align:center; font-size:30px;background:@black;}
		ul.naver{ padding:0; border:none;background:@pink; border:none;
			li{ width:100%; float:none; height:auto;;border:none;
				a{ display:block; padding:10px; color:#fff;}
			}
		}
	
	}
}


#news{  padding-top:20px; width:100%; margin:0 auto 50px;
	.title{ text-align:center; width:70%; margin:0 auto; padding-top:30px;
		h2{ background:url(../img/icon-news.png) top center no-repeat; padding-top:60px; background-size:60px; .bebas; font-weight:normal; font-size:40px; line-height:1; margin-bottom:10px;
			span{ display:block; font-size:11px; color:#999;}
		}
		@media @mobile{ width:90%;
		}		
	}

	figure{ padding:10px;  text-align:center;border-top:1px solid #eee; border-bottom:1px solid #eee; margin:10px; text-align:center;
		img{ width:100%; height:auto; .rounded-corners(100%);}
		figcaption{ padding: 20px; text-align:left;
			time{ font-size:@min-size;text-align:center; display:block; margin-bottom:5px;}
			h3{ font-size:@basic-size; line-height:1.3;text-align:center;}
		}
		a{ color:@black;}
		@media @mobile{padding:0px 20px 0 20px;}
	}
	&:after{.clear;}
}


#service_other{  padding-top:20px; width:100%; margin:0 auto 0px;
	figure{ padding:10px; text-align:center;
		img{ width:80%; height:auto; padding:0%;}
		figcaption{ padding:15px 0; text-align:left;
			h3{ font-size:@big-size; line-height:1.3; .bebas; font-weight:normal; text-align:center; margin-bottom:10px; color:@blue;
				span{ display:block; font-size:@min-size;}
			}
			p{ font-size:@min-size;}
		}
		@media @mobile{padding:0px 20px 0 20px;}
	}
	&:after{.clear;}
}

#service{margin-bottom:0px;
	.title{ text-align:center; width:70%; margin:0 auto; padding-top:30px;
		h2{ background:url(../img/icon-service.png) top center no-repeat; padding-top:60px; background-size:60px; .bebas; font-weight:normal; font-size:40px; line-height:1; margin-bottom:10px;
			span{ display:block; font-size:11px; color:#999;}
		}
		@media @mobile{ width:90%;
		}		
	}
	ul{ display:table; width:100%;table-layout: fixed; border-bottom:0px solid #fff;
		li{ display:table-cell;vertical-align:middle;text-align:center; 
		h3{.bebas; color:#fff; text-align:right; font-size:40px; line-height:1; font-weight:normal; letter-spacing:2px;}
		h3.title{ color:#777; font-size:18px; text-align:start; width:100%; margin:0; padding-top:0; margin-bottom:10px; border-left:2px solid rgba(0,0,0,0.40); padding-left:15px; color:rgba(0,0,0,0.40); font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
		span{color:#fff; text-align:right; font-size:10px; display:block;}
		h4{ text-align:left; margin-bottom:10px; font-size:18px; font-weight:normal; line-height:1.4;}
		p{ text-align:left; padding:0; font-size:12px; line-height:1.3;}
		a{ position:absolute; left:20px;}
		&:after{.clear;}
		@media @mobile{ display:block; width:100%;
			&:first-child{ float:none;width:100%;}
			&:last-child{ float:none;width:100%;}
		}
		}
	}
	.yakusuru{ background:#fff;border-top:1px solid #eee;
		li{ padding:30px; position:relative;
			&:first-child{ background:url(../service/yakusuru.jpg) no-repeat center center  ; background-size:cover; 
				@media @mobile{ background-size:cover;}
			}
			a{ position:absolute; left:10px; top:50%; margin-top:-35px; right:auto; background:url(../img/arrow-left.png) no-repeat  center 10px;.rounded-corners; padding:10px; background-size:50px; padding-top:65px; color:#fff;}
		}
	}

	.airbnb{ background: #fff; 
		li{ padding:30px; position:relative;
			&:first-child{ background:url(../service/airbnb.jpg) no-repeat center center  ; background-size:cover;
				@media @mobile{ background-size:cover;}
			}
			a{ position:absolute; left:10px; top:50%; margin-top:-45px; right:auto; background:url(../img/arrow-left.png) no-repeat  center 10px;.rounded-corners; padding:10px; background-size:50px; padding-top:65px; color:#fff;}
		}
	}

	.marketing{
		li{ padding:30px; position:relative; 
			&:first-child{background:url(../service/marketing.jpg) no-repeat right center ; background-size:cover; float:right; width:50%;
				@media @mobile{ float:none; width:100%;}
			}
			&:last-child{float:left; width:50%;
			@media @mobile{ float:none; width:100%;}
			}
			
		h3{text-align:left; padding-top:25px;
		@media @mobile{ padding-top:0;}
		}
		span{text-align:left;}
		}
	}

	.hr{border-bottom:1px solid #eee;
		li{ padding:30px; position:relative; 
			&:first-child{background:url(../service/hr.jpg) no-repeat right center ; background-size:cover; float:right; width:50%;
				@media @mobile{ float:none; width:100%;}
			}
			&:last-child{float:left; width:50%;
			@media @mobile{ float:none; width:100%;}
			}
			a{ position:absolute; right:10px; top:50%; margin-top:-35px; left:auto; background:url(../img/arrow-right.png) no-repeat  center 10px;.rounded-corners; padding:10px; background-size:50px; padding-top:65px; color:#fff;}
			
		h3{text-align:left; padding-top:65px;
		@media @mobile{ padding-top:0;}
		}
		span{text-align:left;}
		}
	}


}

#company{ margin-bottom:30px;
	.title{ text-align:center; width:70%; margin:0 auto; padding-top:30px; padding-bottom:20px;
		h2{ background:url(../img/icon-company.png) top center no-repeat; padding-top:60px; background-size:60px; .bebas; font-weight:normal; font-size:40px; line-height:1; margin-bottom:10px;
			span{ display:block; font-size:11px; color:#999;}
		}
		@media @mobile{ width:90%;
		}		
	}
	ul{ display:table; width:100%;table-layout: fixed;
		li{ display:table-cell;vertical-align:middle;text-align:center;
		
		h3{.bebas; color:#fff; text-align:center; font-size:40px; line-height:1; font-weight:normal; padding-top:15px; letter-spacing:2px;}
		h4{ text-align:center; margin-bottom:10px; font-size:11px; color:#fff; line-height:1; font-weight:normal;}
		a{ display:block;}
		&:after{.clear;}
		@media @mobile{ display:block; width:100%;
			&:first-child{ float:none;width:100%;}
			&:last-child{ float:none;width:100%;}
		}
		}
	}
	.menu{ background:#eee;
		li{ padding:30px; position:relative; cursor:pointer;
			
			img{.rounded-corners(100%); width:80px; height:80px;}
			&:first-child{ background:@black; background-size:cover;
				h3{ text-align:center;}
				h4{text-align:center;}
				img{ float:right; margin-left:30px;}
				&:hover{ background:#eee; h3,h4{color:#222 !important;}}
			}
			&:last-child{ background:@pink; background-size:cover;
				h3{ text-align:center;}
				h4{text-align:center;}
				img{ background:@green; float:left;margin-right:30px;}
				&:hover{ background:#eee;h3,h4{ color:#222 !important;}}
			}
		}
	}
	.detail{
		li{ text-align:center; background:#eee;
			&:first-child{ padding:20px;}
			table{ width:100%; text-align:left; border:1px solid #eee; border-collapse:collapse; background:#fff;
				tr{
					th{ min-width:25%; padding:10px;border:1px solid #eee; font-size:12px;}
					td{ min-width:75%; font-size:12px;padding:10px;border:1px solid #eee;}
				}
			}
			@media @mobile{padding:0px 20px 20px 20px;
			}
		}
	}
}

#recruit{ padding-bottom:50px;
	.title{ text-align:center; width:50%; margin:0 auto; padding-top:30px; padding-bottom:20px;
		h2{ background:url(../img/icon-recruit.png) top center no-repeat; padding-top:60px; background-size:60px; .bebas; font-weight:normal; font-size:40px; line-height:1; margin-bottom:10px;
			span{ display:block; font-size:11px; color:#999;}
		}
		@media @mobile{ width:90%;
		}		
	}
	
	ul{ width:100%;background: #fff; background-size:cover; padding:20px; margin-bottom:30px;
		li{ vertical-align:middle;text-align:center; color:@black; padding:10px;font-size:14px; font-weight:normal; float:left; width:25%;
			a{ text-align:left; display:block; padding:0px; .rounded-corners; background:#eee; color:#222; margin-right:0%;
				img{ margin-bottom:1px;}
				p{ padding:10px;}
			}
			@media @mobile{ color:#fff; float:left; width:50%;
				a{margin-right:0%;}
			}
		h3{ }
		&:after{.clear;}
		}
		&:after{.clear;}
	}


}

footer{max-width:960px; margin:0 auto;
	ul{ display:table; width:100%;
		li{ width:50%; float:left; text-align:center; background:#eee; border:1px solid #ccc;
			a{ display:block;padding:10px;}
		}
		&:after{.clear;}
	}
	.copyright{ text-align:center; padding:10px;}
}


#contact{ padding-bottom:50px; max-width:960px; margin:0 auto;
	@media @mobile{ max-width:100%;}
	.title{ text-align:center; width:50%; margin:0 auto; padding-top:30px; padding-bottom:20px;
		h2{ background:url(../img/icon-contact.png) top center no-repeat; padding-top:60px; background-size:60px; .bebas; font-weight:normal; font-size:40px; line-height:1; margin-bottom:10px;
			span{ display:block; font-size:11px; color:#999;}
		}
		@media @mobile{ width:90%;
		}		
	}
	
	form#mailformpro{ width:100%; margin:0 auto; border:1px solid #eee;.rounded-corners; padding:20px;
		@media @mobile{ width:90%;}
		dl{
			dt{ border-top:none; border-bottom:1px solid #eee;width:100%; text-align:left; font-size:@basic-size;
				.must{ background:@red; background-image:none; border:none; padding:3px 6px; float:right;box-shadow:none;text-shadow:none;}
			}
			dd{ border-top:none; padding:10px;
				input[type="text"],input[type="email"],input[type="tel"],textarea{ border:none; background:#eee;.rounded-corners; padding:10px; width:100%; font-size:@mid-size; }
				select{ width:100%;}
			}
		}
		.mfp{ float:none;
		}
		.mfp_buttons{ font-size:@mid-size;
			button[type="submit"]{border:none; padding:5px; background:@blue; color:#fff;.rounded-corners; }
			button[type="reset"]{ border:none; padding:5px; background:@gray;.rounded-corners; }
		}
	}

}


.closebt{.bebas; text-align:center; display:inline-block; padding:20px; font-size:40px; color:#fff; background:@blue; margin-bottom:30px; cursor:pointer;}
.ideal-contents{ text-align:center; padding-bottom:50px;
	img{.rounded-corners(100%); width:200px; height:200px; margin-bottom:20px; background:#FFFFFF; border:1px solid #eee; padding:20px;}
	h3{ width:80%; margin:0 auto;.bebas; font-weight:normal; font-size:50px; line-height:1; margin-bottom:20px; color:@blue;
		span{ font-size:15px; display:block;}
	}
	h4{ width:80%; margin:0 auto;.bebas; font-weight:normal; font-size:50px; line-height:1; margin-bottom:20px; color:@blue; padding-top:50px;
		span{ font-size:10px; display:block;}
	}
	p{ width:40%; margin:0 auto 15px; text-align:left; font-size:@basic-size;
		@media @mobile{width:80%;}
		span{ font-size:@min-size; display:block;}
	}
	
}

.message-contents{ text-align:center; padding-bottom:50px;
	img{.rounded-corners(100%); width:150px; height:150px; margin-bottom:20px; border:1px solid #eee;
	@media @mobile{width:100px; height:100px;}
		}
	h3{ width:80%; margin:0 auto;.bebas; font-weight:normal; font-size:50px; line-height:1; margin-bottom:20px; color:@blue;
		span{ font-size:15px; display:block;}
	}
	h4{ width:80%; margin:0 auto;.bebas; font-weight:normal; font-size:50px; line-height:1; margin-bottom:20px; color:@blue; padding-top:50px;
		span{ font-size:10px; display:block;}
	}
	p{ width:40%; margin:0 auto 15px; text-align:left; font-size:@basic-size;
		@media @mobile{width:80%;}
		span{ font-size:@min-size; display:block;}
	}
	p.text-right{ text-align:right;}
}



.common-contents{ text-align:center; padding-bottom:50px;
	img{.rounded-corners(100%); width:150px; height:150px; margin-bottom:20px; border:1px solid #eee;
	@media @mobile{width:100px; height:100px;}
		}
	h3{ width:80%; margin:0 auto;.bebas; font-weight:normal; font-size:50px; line-height:1; margin-bottom:20px; color:@blue;
		span{ font-size:15px; display:block;}
	}
	h4{ width:80%; margin:0 auto;.bebas; font-weight:normal; font-size:50px; line-height:1; margin-bottom:20px; color:@blue; padding-top:50px;
		span{ font-size:10px; display:block;}
	}
	p{ width:40%; margin:0 auto 15px; text-align:left; font-size:@basic-size;
		@media @mobile{width:80%;}
		span{ font-size:@min-size; display:block;}
	}
	ul{width:40%; margin:0 auto 15px; text-align:left; font-size:@basic-size;
		@media @mobile{width:90%;}
		li{ text-align:left;
		}
	}
	table{width:40%; margin:0 auto 15px; text-align:left; font-size:@basic-size;
	@media @mobile{width:90%;}
		tr{text-align:left;
			th{ width:30%; border-bottom:2px solid #eee;}
			td{ width:70%; border-left:2px solid #eee; border-bottom:2px solid #eee; padding:10px;}
		}
	}
}


.works-contents{ text-align:center; padding-bottom:50px;
	img{.rounded-corners(100%); width:150px; height:150px; margin-bottom:20px; border:1px solid #eee;
	@media @mobile{width:100px; height:100px;}
		}
	h3{ width:80%; margin:0 auto;.bebas; font-weight:normal; font-size:50px; line-height:1; margin-bottom:20px; color:@blue;
		span{ font-size:15px; display:block;}
	}
	
	p{ width:40%; margin:0 auto 15px; text-align:left; font-size:@basic-size;
		@media @mobile{width:80%;}
		span{ font-size:@min-size; display:block;}
	}
	ul{ margin-bottom:30px;width:40%; margin:0 auto 50px;
		@media @mobile{width:80%;}
		li{ width:100%;  .rounded-corners; padding:10px;
			h4{ width:100%; margin:0 auto; font-weight:normal; font-size:14px; line-height:1; margin-bottom:10px; color:@blue; text-align:left; border-bottom:1px solid @blue; padding-bottom:10px;
		span{ font-size:10px; display:block;}
			}
			p{width:100%; margin:0 auto;}
		}
		&:after{.clear;}

	}
}



form { padding:32px; display:block;
	@media @mobile{ padding:0px;}
	table.formTable { width:100%; border-collapse:collapse; border:3px solid #ddd; margin-bottom:16px;
		@media @mobile{ width:90%; margin:0 auto;border:none;}
		tbody {
			tr {@media @mobile{}
				th,td{ border:1px solid #ddd; padding:10px;
					@media @mobile{ display:block; width:100%; padding:10px 0; border:none;}
				}
				th {
				}
				td {
					input { width:100%; padding:5px;border:1px solid #ddd;}
					select {
						option {
						}
					}
					span.must {
					}
					textarea { width:100%; border:1px solid #ddd;
					}
				}
			}
		}
	}
	p {
		input[type="submit"] { background:rgba(205,35,38,1.00); color:#fff; border:none; font-size:20px; display:block;-webkit-appearance: none;
		}
	}
}





/* 
 * Naver v3.1.2 - 2014-11-25 
 * A jQuery plugin for responsive navigation. Part of the Formstone Library. 
 * http://formstone.it/naver/ 
 * 
 * Copyright 2014 Ben Plum; MIT Licensed 
 */
.ch-item{position:relative;cursor:default;}.ch-info-wrap,.ch-info{position:absolute;width:245px;height:245px;cursor:pointer;}.ch-info-wrap{top:0px;left:0px;}.ch-info>div{display:block;position:absolute;width:100%;height:100%;background-position:center center;-webkit-backface-visibility:hidden;}.ch-item{width:100%;height:100%;position:relative;cursor:default;-webkit-transition:all 0.4s ease-in-out;-moz-transition:all 0.4s ease-in-out;-o-transition:all 0.4s ease-in-out;-ms-transition:all 0.4s ease-in-out;transition:all 0.4s ease-in-out;}.ch-info{position:absolute;width:100%;height:100%;opacity:1;-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-backface-visibility:hidden;}.ch-item:hover .ch-info{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}
.naver{margin:0}.naver,.naver *,.naver :before,.naver :after{box-sizing:border-box}.naver-handle{width:100%;background:#fff;border:1px solid #ccc;color:#111;cursor:pointer;display:none;font-size:16px;margin:0;padding:10px 15px;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.naver-handle:after{height:3px;width:15px;position:absolute;top:0;right:15px;bottom:0;background:#ccc;box-shadow:0 5px 0 #ccc,0 -5px 0 #ccc;content:'';display:block;margin:auto 0}.naver.open .naver-handle:after{width:15px;height:15px;background:0 0;border:none;box-shadow:none;color:#ccc;content:"\00d7";font-size:22px;font-weight:700;line-height:15px;text-align:center}.naver-wrapper{border:none;height:auto;margin:0;padding:0}.naver-container:after{clear:both;content:".";display:block;height:0;line-height:0;visibility:hidden}.naver.enabled .naver-handle{display:block}.naver.enabled .naver-wrapper{height:0;overflow:hidden}.naver.enabled .naver-container{}