@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Lakki+Reddy);
@import url(http://fonts.googleapis.com/css?family=Rum+Raisin);
@import url(http://fonts.googleapis.com/css?family=Kranky);

body{
	margin: 0;
	padding: 0;
	background-color: #fffaf0;
}
ul,li,p,h2{
	margin:0;
	padding: 0;
}
ul li{
	list-style: none;
}
h2{
	font-size: 70px;
	margin: 40px 0;
	/*font-family: 'Lakki Reddy', cursive;*/
	/*font-family: 'Rum Raisin', sans-serif;*/
	font-family: 'Kranky', cursive;
	font-weight: bold;
}
body#stiff_top h2,#stiff_schedule h2,#stiff_corse h2{
	padding-top: 20px;
	width: 80%;
	text-align: left;
	margin: 0 auto;
	max-width: 1303px;
	font-weight: bold;
}
a {
	text-decoration: none;
}
#stiff_container{
	width: 100%;
	height: 100%;
	min-width: 986.667px;
	margin-bottom: 40px;
}
body#stiff_top #stiff_contents{
	width: 80%;
	height: auto;
	margin: 20px auto;
	min-width: 800px;
	max-width: 1303px;
}

#stiff_header{
	width: 100%;
	height: 100px;
	background-color: #FFFF66;
	border-bottom: 7px solid #fff;
	z-index: 999;
	position: fixed;
}
#inner_header{
	width: 80%;
	height: 160px;
	background: url(../img/header_center.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 230px 160px;
	margin:0 auto;
	min-width: 800px;
}
#inner_header ul{
	width: 100%;
	height: 130px;
}
.stiff_nav_left,.stiff_nav_right{
	width: 35%;
	float: left;
	height: 130px;
}
.stiff_nav_left li,.stiff_nav_right li{
	display: inline-block;
	width: 50%;
	height: 132px;
	float: left;
	text-align: center;
}
.stiff_nav_left a,.stiff_nav_right a{
	display: block;
	width: 100%;
	height: 100px;
	font-family: 'Rum Raisin', sans-serif;
	font-size: 20px;
	padding-top: 65px;
}
.stiff_nav_school{
	display: block;
	background: url(../img/school.png);
	background-repeat: no-repeat;
	background-position: center 5px;
	background-size: auto 60%;
	color: #999999;
}
.stiff_nav_school:hover,.stiff_school_active{
	background: url(../img/school_hover.png);
	background-repeat: no-repeat;
	background-position: center 5px;
	background-size: auto 60%;
	color: #00CCFF;
}
.stiff_nav_staff{
	display: block;
	background: url(../img/staff.png);
	background-repeat: no-repeat;
	background-position: center 5px;
	background-size: auto 60%;
	color: #999999;
}
.stiff_nav_staff:hover,.stiff_staff_active{
	background: url(../img/staff_hover.png);
	background-repeat: no-repeat;
	background-position: center 5px;
	background-size: auto 60%;
	color: #00CCFF;
}
.stiff_center{
	float: left;
	width: 30%;
	height: 165px;
}
.stiff_nav_center{
	display: block;
	width: 100%;
	height: 165px;
	background: url(../img/stiff_logo.png);
	background-repeat: no-repeat;
	background-position: center 10px;
	background-size: 180px auto;
}
.stiff_nav_center:hover,.stiff_center_active{
	width: 100%;
	height: 165px;
	background: url(../img/stiff_logo_hover.png);
	background-repeat: no-repeat;
	background-position: center 10px;
	background-size: 180px auto;
}
.stiff_nav_diary{
	display: block;
	background: url(../img/diary.png);
	background-repeat: no-repeat;
	background-position: center 20px;
	background-size: auto 40px;
	color: #999999;
}
.stiff_nav_diary:hover,.stiff_diary_active{
	background: url(../img/diary_hover.png);
	background-repeat: no-repeat;
	background-position: center 20px;
	background-size: auto 40px;
	color: #00CCFF;
}
.stiff_nav_gallery{
	display: block;
	background: url(../img/gallery.png);
	background-repeat: no-repeat;
	background-position: center 20px;
	background-size: auto 40px;
	color: #999999;
}
.stiff_nav_gallery:hover,.stiff_gallery_active{
	background: url(../img/gallery_hover.png);
	background-repeat: no-repeat;
	background-position: center 20px;
	background-size: auto 40px;
	color: #00CCFF;
}
#stiff_wrap{
	width: 100%;
	height: auto;
	padding-top: 100px;
}
#stiff_footer{
	width: 100%;
	height: 40px;
	background-color: #FFFF66;
	border-top: 7px solid #fff;
	position: fixed;
	bottom: 0;
	z-index: 998;
}
.stiff_footer_menu{
	width: 390px;
	height: 40px;
	line-height: 40px;
	float: right;
	color: #999;
}
.stiff_footer_menu li{
	display: inline-block;
	padding: 0 10px;
}
.stiff_footer_menu li a{
	color: #999;
	direction: block;	
}
.stiff_footer_menu li a:hover{
	color: #00CCFF;
}
/*TOP*/
.top_photo{
	width: 100%;
	height: 600px;
	background: url(../img/top_photo.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	margin: 0 auto;
}
#letter{
	width: 46%;
	height: 340px;
	background-color: #fff;
	border-radius: 20px;
	opacity: 0.6;
	position: absolute;
	top: 325px;
	left: 2%;
	padding: 20px;
	min-width: 400px;
	box-shadow: rgb(255, 255, 255) 0px 0px 15px,
				rgb(255, 255, 255) 0px 0px 15px,
				rgb(255, 255, 255) 0px 0px 15px,
				rgb(255, 255, 255) 0px 0px 15px,
				rgb(255, 255, 255) 0px 0px 15px;
	min-width: 566px;
	max-width: 850px;
}
.letter p{
	text-align: left;
}
.news_bord{
	float: left;
	width: 60%;
	height: 531px;
	background: url(../img/news_bord.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 531px;
	margin: 117px -320px 80px 1.5%;
	text-align: center;
}
.news_bord img{
	margin-top: -77px;
}
.news_title ul{
	width: 90%;
	margin: 0 auto;
	font-size: 20px;
	height: 55px;
}
.news_title a{
	display: block;
	color: #fff;
}
.news_title a{
	color: 
}
.news_title ul li{
	display: inline-block;
	height: 55px;
	line-height: 55px;
	text-align: left;
}
.news_title ul li:first-child{
	width: 130px;
	margin-right: 2%;
	display: block;
	float: left;
}
.news_title ul li:last-child{
	width: 65%;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.stiff_fb{
	float: right;
	width: 350px;
	height: 531px;
	margin: 117px 20px 0 20px;
}

/*SCHOOOL*/
#school_message{
	width: 100%;
	height: 650px;
	background: url(../img/croud.png) no-repeat;
	background-position: bottom;
	background-size: 100% 513px;
	background-color: #00CCFF;
	clear: both;
}
.school_message_contents{
	width: 80%;
	height: 597px;
	margin: 0 auto;
	min-width: 800px;
	max-width: 1303px;
}
.school_message_wrap{
	width: 70%;
	padding-top: 80px;
	float: left;
}
.school_message_text{
	width: 100%;
	height: auto;
	line-height: 30px;
	margin: 20px auto;
}
.whats_school_btn{
	width: 214px;
	height: 86px;
	background: url(../img/button.png);
	background-position: center;
	text-align: center;
	font-size: 20px;
	line-height: 86px;
	font-weight: bold;
	margin: 0 auto;
}
.whats_school_btn a{
	display: block;
	color: #fff;
}
.whats_school_btn a:hover{
	color: #FFFF66;
}
.sun,.wave_girl{
	position: absolute;
}
.sun{
	margin: 50px 0 0 10%;

}
.wave_girl{
	margin-top: 350px;
}
.stiff_school_wave{
	width: 100%;
	height: 53px;
	background: url(../img/wave.png);
	background-repeat: repeat-x;
	background-position: bottom;
	background-size: auto 53px;
}
#stiff_schedule{
	width: 100%;
	height: 2758px;
	background: url(../img/school_bak.png) no-repeat;
	background-position: top;
	background-size: cover;
}
.film_1,.film_2,.film_3{
	width: 100%;
	height: 560px;
	background: url(../img/film_bak.png) no-repeat;
	background-position: center;
	background-size: 80% 100%;
	margin: 0 auto;
	max-width: 1673px;
}
.film_wrap_1,.film_wrap_2,.film_wrap_3{
	width: 93.5%;
	height: 150px;
	padding-top: 100px;
	margin: 0 auto;
}
.film_wrap_1,.film_wrap_3{
	transform: rotate(-5deg);
}
.film_wrap_2{
	transform: rotate(5deg);
}
.film_frame{
	width: 100%;
	height: 40px;
	background: url(../img/film_frame.png);
	background-repeat: repeat-x;
	background-position: center center;
	background-size: auto 40px;
}
.film_box_1,.film_box_2,.film_box_3{
	width: 70%;
	height: 200px;
	margin: 0 auto;
	background: url(../img/film_border.png);
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 12px 100%;
	max-width: 1200.14px;
}
.film_img_2 li,.film_img_3 li{
	width: 33.333%;
	height: 205px;
	display: inline-block;
	background: url(../img/film_border.png);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 12px 100%;
	float: left;
	text-align: center;
	margin-top: -2px;
}
.film_img_1 li{
	width: 25%;
	height: 205px;
	display: inline-block;
	background: url(../img/film_border.png);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 12px 100%;
	float: left;
	text-align: center;
	margin-top: -2px;
}
.film_img_1 li:nth-child(2) img,
.film_img_1 li:nth-child(odd) img,
.film_img_2 li:nth-child(odd) img,
.film_img_3 li:nth-child(odd) img{
	height: 190px;
	margin-top: 7px;
}
.film_img_1 li:last-child img{
	width: 80%;
	margin-top: 40px;
}
.film_img_2 li:nth-child(2) img{
	height: 150px;
	margin-top: 25px;
}
.film_img_3 li:nth-child(2) img{
	height: 120px;
	margin-top: 40px;
}
.film_title_1,.film_title_2,.film_title_3{
	width: 70%;
	margin: 0 auto;
}
.film_title_2 li,.film_title_3 li{
	width: 33.333%;
}
.film_title_1 li{
	width: 25%;
}
.film_title_1 li,.film_title_2 li,.film_title_3 li{
	height: 50px;
	line-height: 35px;
	font-size: 22px;
	float: left;
	text-align: center;
	color: #fff;
	font-weight: bold;
	display: inline-block;
	max-width: 1200.14px;
	padding-top: 15px;
}
.film_1_text,.film_2_text,.film_3_text{
	width: 78%;
	margin: 40px auto;
	font-size: 16px;
	font-weight: bold;
	line-height: 50px;
	max-width: 1303px;
}
#stiff_corse{
	width: 100%;
	height: 2148px;
	background: url(../img/school_course_bak.png) no-repeat;
	background-position: top;
	background-size: 100% 2158px;
	margin: 0 auto;
}
.stiff_corse_contents{
	width: 80%;
	height: 1800px;
	margin: 0 auto;
	min-width: 800px;
	margin-top: 150px;
}
.stiff_tree{
	position: absolute;
	margin-top: -147px; 
}
.stiff_windsurfing_img{
	position: absolute;
	margin:-200px 0 0 75%; 
}
.stiff_corse_wrap{
	width: 90%;
	height: 350px;
	min-width: 800px;
	max-width: 1303px;
	margin: 40px auto;
	clear: both;
}
.stiff_corse_wrap img{
	text-align: left;
	float: left;
	margin-top: -160px;
}
.stiff_corse_text{
	padding: 20px 0 20px 370px;
	margin-top: -160px;
	font-size: 16px;
	line-height: 35px;
}
.stiff_corse_name,.stiff_price,.stiff_corse_name_advance{
	width: 315px;
	height: 80px;
	line-height: 40px;
	font-size: 24px;
	position: relative;
	transform: rotate(-9deg);
	font-weight: bold;
	text-align: center;
}
.stiff_corse_name{
	top: 90px;
}
.font_color_w{
	color: #fff;
}
.font_color_b{
	color: #006699;
}
.stiff_corse_name_advance{
	top: 80px;
	color: #fff;
}
.stiff_price{
	top: 127px;
	padding-left: 92px;
}

/*STSFF*/
body#stiff_staff{
	width: 100%;
	height: 100%;
}
body#stiff_staff #stiff_container{
	background: url(../img/staff_bak.png) no-repeat;
	background-position: top;
	background-size: 100% auto;
}
body#stiff_staff #stiff_contents{
	width: 100%;
	height: auto;
	padding-bottom: 30px;
	
}
body#stiff_staff #stiff_contents h2{
	width: 80%;
	margin: 100px auto 50px auto;
	min-width: 800px;
	max-width: 1303px;
}
.stiff_staff_message_left,.stiff_staff_message_right{
	width: 80%;
	height: auto;
	margin: 20px auto;
	min-width: 800px;
	max-width: 1303px;
}
.stiff_staff_message_left img,.stiff_staff_message_right img{
	width: 275px;
	height: 274px;
	border-radius: 200px;
}
.stiff_staff_message_left img{
	text-align: left;
	float: left;
}
.stiff_staff_message_right img{
	text-align: right;
	float: right;
}
.stiff_staff_name_left,.stiff_staff_name_right{
	width: 275px;
	height: 50px;
	text-align: center;
	line-height: 30px;
	font-size: 18px;
	font-weight: bold;
	padding-top: 20px;
}
.stiff_staff_name_left{
	clear: both;
	float: left;
}
.stiff_staff_name_right{
	clear: both;
	float: right;
}
.stiff_staff_text_left,.stiff_staff_text_right{
	font-size: 18px;
	font-weight: bold;
}
.stiff_staff_text_left{
	padding-left: 300px;
}
.stiff_staff_text_right{
	padding-right: 300px;
}
.stiff_staff_wave{
	width: 100%;
	height: 179px;
}
.stiff_staff_wave_turn{
	width: 100%;
	height: 179px;
	-webkit-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-moz-transform: scaleX(-1);
	transform: scaleX(-1);
	filter: FlipH;
	-ms-filter: "FlipH";
}

/*DIARY*/
#stiff_diary div.stiff_contents{
	padding-top: 50px;
	width: 80%;
	max-width: 1303px;
	margin: 0 auto;
}
/*GALLERY*/
#stiff_gallery div.stiff_contents{
	padding-top: 50px;
	width: 80%;
	max-width: 1303px;
	margin: 0 auto;
}

/*CONTACT*/
#stiff_contact div#stiff_wrap{
	padding-top: 180px;
}
#stiff_contact div.stiff_contents{
	width: 80%;
	margin: 0 auto;
	max-width: 1303px;
}

/*SECRET*/
#stiff_secret div.stiff_contents{
	padding: 100px 0 60px 0;
	width: 80%;
	max-width: 1303px;
	margin: 0 auto;
}
#stiff_secret div h2{
	font-size: 40px;
}
#stiff_secret div h3{
	font-size: 20px;
}

/*ACCESS*/
body#stiff_access .stiff_wrap{
	width: 80%;
	height: 100%;
	max-width: 1303px;
	margin: 0 auto;
	padding-top: 150px;
	padding-bottom: 80px;
}
#map{
	width: 100%;
	height: 700px;
	margin-top: 40px;
}