@charset "UTF-8";
/* CSS Document */



/* FONT size
---------------------------------------------------------------------
[ px ]	[ % ]
10px 	72  %		19px 	136 %
11px 	79  %		20px 	143 %
12px 	86 %		21px 	150 %
13px 	93 %		22px 	158 %
14px 	100 %		23px 	165 %
15px 	108 %		24px 	172 %
16px 	115 %		25px 	179 %
17px 	122 %		26px 	186 %
18px 	129 %
---------------------------------------------------------------------*/




	



/* min 801px */
@media screen and (min-width: 801px), print {

/* mainimage
--------------------- */
#mainimage {
	width: 100%;
	min-width: 1100px;
	height: 700px;
	position: relative;
}
	#mainimage .skippr div {
		position: relative;
	}
		#mainimage .skippr div img {
			position: absolute;
			top: 50%;
			left: 50%;
			z-index: 3;
			transform: translateY(-50%) translateX(-50%);
			 -webkit- transform: translateY(50%) translateX(-50%);
		}
		#mainimage .skippr div a {
			display:block;
			width: 1100px;
			height: 700px;
			font-weight: 500;
			color: #fff;
		}
		#mainimage .skippr div a:hover {
			color: #0081dd;
		}
			#mainimage .skippr div a span.caption{
				float: left;
				position: absolute;
				left: 50px;
				bottom: 60px;
			}





#header #globalnav ul li a:hover {
				background: #2e5bcd;
			}



/* mainimage
---------------------
#mainimage {
	width: 100%;
	min-width: 1100px;
}
	#mainimage img {
		width: 100%;
		height: auto;
	} */


	
	
/* head
--------------------- */
.head {
	text-align: center;
	padding: 50px 0 40px 0;
	margin-bottom: 40px;
	background: url(../common/img/title_border.png) no-repeat center bottom;
	position: relative;
	z-index: 5;
}
	.head h2 {
		font-size: 44px;
		font-weight: 500;
		letter-spacing: 3px;
		line-height: 1;
		padding-bottom: 5px;
	}
		.head h2 span {
			color: #0081dd;
		}
	
	.head p {
		letter-spacing: 3px;
		line-height: 1;
	}


	
	
/* competiton
--------------------- */
#competiton {
	width: 100%;
	min-width: 1100px;
	background: url(../common/img/bg01.gif) no-repeat center;
	background-size: cover;
	padding: 0 0 180px 0;
}
	#competiton .box {
		width: 350px;
		margin-bottom: 30px;
	}
		#competiton .box a {
			display: block;
		}
			#competiton .box a .pht {
				overflow: hidden;
			}
				#competiton .box a .pht img {
					width: 100%;
					height: auto;
					-moz-transition: -moz-transform 0.2s linear;
					-webkit-transition: -webkit-transform 0.2s linear;
					-o-transition: -o-transform 0.2s linear;
					-ms-transition: -ms-transform 0.2s linear;
					transition: transform 0.2s linear;
				}
				#competiton .box a:hover .pht img {
					-webkit-transform: scale(1.05);
					-moz-transform: scale(1.05);
					-o-transform: scale(1.05);
					-ms-transform: scale(1.05);
					transform: scale(1.05);
				}

			#competiton .box a p {
				padding-top: 12px;
				font-size: 108%;
				font-weight: 700;
			}
	
	#competiton .btn {
		padding: 30px 0;
	}


	
	
/* news
--------------------- */
#news {
	width: 100%;
	min-width: 1100px;
	background: url(../common/img/bg02.png) no-repeat center top;
	background-size: 100%;
	position: relative;
	overflow: hidden;
	margin-top: -150px;
}
#news:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 80%;
  margin: 0 -10% 0;
  background: #f6f6f6;
  -webkit-transform-origin: right center;
  -ms-transform-origin: right center;
  transform-origin: right center;
  -webkit-transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  transform: rotate(-5deg);
}
#news .inner {
	padding-top: 70px;
	padding-bottom: 300px;
}
	#news .flex .box {
		width: 260px;
		margin-right: 20px;
		margin-bottom: 20px;
	}
	#news .flex .box:nth-child(4n) {
		margin-right: 0;
	}
		#news .flex .box a {
			display: block;
			position: relative;
		}
			#news .flex .box a .pht {
				overflow: hidden;
			}
				#news .flex .box a .pht img {
					width: 100%;
					height: auto;
					-moz-transition: -moz-transform 0.2s linear;
					-webkit-transition: -webkit-transform 0.2s linear;
					-o-transition: -o-transform 0.2s linear;
					-ms-transition: -ms-transform 0.2s linear;
					transition: transform 0.2s linear;
				}
				#news .flex .box a:hover .pht img {
					-webkit-transform: scale(1.05);
					-moz-transform: scale(1.05);
					-o-transform: scale(1.05);
					-ms-transform: scale(1.05);
					transform: scale(1.05);
				}

			#news .flex .box a .text {
				width: 240px;
				background: #fff url(../common/img/box_arrow.png) no-repeat right bottom;
				padding: 20px;
				position: absolute;
				top: 200px;
				left: 10px;
			}
				#news .flex .box a .text .days {
					letter-spacing: 2px;
				}
				#news .flex .box a .text .txt {
					line-height: 1.5em;
				}
	
	#news .btn {
		padding: 15px 0;
	}



#news .set .box {
	border-top: solid 1px #ddd;
}
#news .set .box:nth-child(5n) {
	border-bottom: solid 1px #ddd;
}
	#news .set .box a {
		display: block;
		padding: 20px 0;
		transition: 0.3s;
		-webkit-transition: 0.3s;
	}
	#news .set .box:nth-child(5n) {
		margin-bottom: 20px;
	}
	#news .set .box a:hover {
		background: #0081dd;
	}
		#news .set .box a .center {
			background: url(/common/img/icon_arrow_black01.gif) no-repeat right center;
			padding-right: 40px;
		}
			#news .set .box a .center .cat {
				width: 155px;
				float: left;
				background: #0081dd;
				text-align: center;
			}
				#news .set .box a .center .cat span {
					font-weight: 200;
					font-size: 129%;
					font-family: 'Teko', sans-serif;
					color: #fff;
					padding: 7px 0;
				}

			#news .set .box a .center .days {
				width: 90px;
				float: left;
				font-weight: 300;
				font-size: 129%;
				font-family: 'Teko', sans-serif;
				padding-top: 2px;
				padding-left: 20px;
				color: #000;
				transition: 0.2s;
				-webkit-transition: 0.2s;
			}
				#news .set .box a:hover .center .days {
					color: #fff;
				}

			#news .set .box a .center .text {
				width: 800px;
				float: right;
				font-weight: 500;
				padding-top: 2px;
				color: #000;
				transition: 0.2s;
				-webkit-transition: 0.2s;
			}
				#news .set .box a:hover .center .text {
					color: #fff;
				}






/* channel
--------------------- */
#channel {
	width: 100%;
	min-width: 1000px;
	background: url(../img/dot_bg.png);
	margin-top: -360px;
	padding-top: 200px;
	padding-bottom: 360px;
	color: #fff;
}
	#channel #youtube-movie {
		margin: 0 auto;
		width: 100%;
		position: fixed;
		top: 0;
		bottom: 0;
		min-width: 150%;
		height: auto;
		z-index: -3;
	}
	#channel #mainvisual .container{
		padding: 7em 0 3em 0;
	}

	#channel #youtube-movie-content {
		padding-top: 56.25%;
		position: relative;
		width: 100%;
	}

	#channel #youtube-movie-content iframe {
	  height: 100% !important;
	  left: 0;
	  position: absolute;
	  top: 0;
	  width: 100% !important;
	}

	
	#channel .btn_c {
		width: 280px;
		margin: 0 auto;
	}
		#channel .btn_c a {
			display: block;
			height: 66px;
			border-radius: 66px;
			background: url(../common/img/btn_bg.png) no-repeat center -1px;
			font-size: 20px;
			color: #fff;
			text-align: center;
			border: solid 2px #fff;
			line-height: 72px;
			letter-spacing: 3px;
			transition: 0.3s;
			-webkit−transition: 0.3s;
		}
		#channel .btn_c a:hover {
			background: #2e5bcd url(../common/img/btn_bg.png) no-repeat center -1px;
		}






/* sns
--------------------- */
#sns {
	width: 100%;
	min-width: 1100px;
	position: relative;
	overflow: hidden;
	margin-top: -200px;
	display: none;
}
#sns:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 120%;
	height: 80%;
	margin: 0 -10% 0;
	background: #ecf6fd;
	-webkit-transform-origin: right center;
	-ms-transform-origin: right center;
	transform-origin: right center;
	-webkit-transform: rotate(-5deg);
	-ms-transform: rotate(-5deg);
	transform: rotate(-5deg);
}
#sns .inner {
	padding-top: 120px;
	padding-bottom: 200px;
}
	#sns .box {
		width: 500px;
	}
		#sns .box .head {
			padding-bottom: 20px;
			margin-bottom: 20px;
		}
	
		#sns .insta ul li {
			width: 33.3333333%;
			float: left;
			overflow: hidden;
		}
			#sns .insta ul li a {
				width: 100%;
				height: auto;
			}
				#sns .insta ul li a img {
					width: 100%;
					height: auto;
					-moz-transition: -moz-transform 0.2s linear;
					-webkit-transition: -webkit-transform 0.2s linear;
					-o-transition: -o-transform 0.2s linear;
					-ms-transition: -ms-transform 0.2s linear;
					transition: transform 0.2s linear;
				}
				#sns .insta ul li a:hover img {
					-webkit-transform: scale(1.05);
					-moz-transform: scale(1.05);
					-o-transform: scale(1.05);
					-ms-transform: scale(1.05);
					transform: scale(1.05);
				}
	
		
	#sns .btn {
		padding-top: 30px;
	}


	
	
/* news
--------------------- */
#featuring {
	width: 100%;
	min-width: 1100px;
	background: url(../common/img/bg03.png) no-repeat center 1px;
	background-size: 100%;
	position: relative;
	overflow: hidden;
	margin-top: -165px;
	z-index: 3;
	display: none;
}
#featuring:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 80%;
  margin: 0 -10% 0;
  background: #f6f6f6;
  -webkit-transform-origin: right center;
  -ms-transform-origin: right center;
  transform-origin: right center;
  -webkit-transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  transform: rotate(-5deg);
}
#featuring .inner {
	padding-top: 70px;
	padding-bottom: 250px;
}
	#featuring .box {
		width: 340px;
		margin-right: 40px;
		margin-bottom: 40px;
	}
	#featuring .box:nth-child(3n) {
		margin-right: 0;
	}
		#featuring .box a {
			display: block;
			position: relative;
		}
			#featuring .box a .pht {
				overflow: hidden;
			}
				#featuring .box a .pht img {
					width: 100%;
					height: auto;
					-moz-transition: -moz-transform 0.2s linear;
					-webkit-transition: -webkit-transform 0.2s linear;
					-o-transition: -o-transform 0.2s linear;
					-ms-transition: -ms-transform 0.2s linear;
					transition: transform 0.2s linear;
				}
				#featuring .box a:hover .pht img {
					-webkit-transform: scale(1.05);
					-moz-transform: scale(1.05);
					-o-transform: scale(1.05);
					-ms-transform: scale(1.05);
					transform: scale(1.05);
				}

			#featuring .box a .text {
				padding-top: 15px;
			}
				#featuring .box a .text .days {
					letter-spacing: 2px;
				}
				#featuring .box a .text .txt {
					line-height: 1.5em;
				}


	
	
/* league
--------------------- */
#league {
	width: 100%;
	min-width: 1100px;
	background-size: 100%;
	position: relative;
	overflow: hidden;
	margin-top: -250px;
	background: #fff;
	display: none;
}
#league:after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	background: url(../common/img/bg04.png) no-repeat top right;
	width: 1379px;
	height: 338px;
}
#league:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 80%;
  margin: 0 -10% 0;
  background: #fff;
  -webkit-transform-origin: right center;
  -ms-transform-origin: right center;
  transform-origin: right center;
  -webkit-transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  transform: rotate(-5deg);
}
#league .inner {
	padding-top: 90px;
	padding-bottom: 60px;
}
	#league .box {
		width: 260px;
		margin-right: 20px;
		margin-bottom: 30px;
		position: relative;
		z-index: 5;
	}
	#league .box:nth-child(4n) {
		margin-right: 0;
	}
		#league .box a {
			display: block;
			position: relative;
		}
			#league .box a .pht {
				overflow: hidden;
			}
				#league .box a .pht img {
					width: 100%;
					height: auto;
					-moz-transition: -moz-transform 0.2s linear;
					-webkit-transition: -webkit-transform 0.2s linear;
					-o-transition: -o-transform 0.2s linear;
					-ms-transition: -ms-transform 0.2s linear;
					transition: transform 0.2s linear;
				}
				#league .box a:hover .pht img {
					-webkit-transform: scale(1.05);
					-moz-transform: scale(1.05);
					-o-transform: scale(1.05);
					-ms-transform: scale(1.05);
					transform: scale(1.05);
				}

			#league .box a p {
				padding-top: 12px;
			}





/* movie
--------------------- */
#movie .movieframe {
	width: 100%;
	padding-bottom: 56.25%;
	height:0px;
	position: relative;
	margin-bottom: 70px;
}
	#movie .movieframe iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}








}








/* max 800px */
@media only screen and (max-width: 800px) {

/* mainimage
--------------------- */
#mainimage {
	width: 100%;
	height: 400px;
	padding-top: 60px;
	position: relative;
}
	#mainimage .skippr div {
		position: relative;
	}
		#mainimage .skippr div img {
			width: 200px;
			height: auto;
			position: absolute;
			top: 50%;
			left: 50%;
			z-index: 3;
			transform: translateY(-50%) translateX(-50%);
			 -webkit- transform: translateY(50%) translateX(-50%);
		}
		#mainimage .skippr div a {
			display:block;
			width: 100%;
			height: 700px;
		}


/* mainimage
---------------------
#mainimage {
	width: 100%;
	padding-top: 60px;
}
	#mainimage img {
		width: 100%;
		height: auto;
	} */


	
	
/* head
--------------------- */
.head {
	text-align: center;
	padding: 30px 0 30px 0;
	margin-bottom: 30px;
	background: url(../common/img/title_border.png) no-repeat center bottom;
	position: relative;
	z-index: 5;
}
	.head h2 {
		font-size: 30px;
		font-weight: 500;
		letter-spacing: 3px;
		line-height: 1;
		padding-bottom: 5px;
	}
		.head h2 span {
			color: #0081dd;
		}
	
	.head p {
		font-size: 86%;
		letter-spacing: 3px;
		line-height: 1;
	}


	
	
/* competiton
--------------------- */
#competiton {
	width: 100%;
	background: url(../common/img/bg01.gif) no-repeat center;
	background-size: cover;
	padding-bottom: 40px;
}
	#competiton .box {
		margin-bottom: 20px;
	}
		#competiton .box a {
			display: block;
		}
			#competiton .box a .pht {
				overflow: hidden;
			}
				#competiton .box a .pht img {
					width: 100%;
					height: auto;
				}

			#competiton .box a p {
				padding-top: 12px;
				font-size: 86%;
				font-weight: 700;
			}
	
	#competiton .btn {
		padding-top: 20px;
	}


	
	
/* news
--------------------- */
#news {
	width: 100%;
  background: #f6f6f6;
	padding-bottom: 40px;
}
#news .flex {
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
	#news .flex .box {
		width: 49%;
		margin-right: 2%;
		margin-bottom: 20px;
	}
	#news .flex .box:nth-child(2n) {
		margin-right: 0;
	}
		#news .flex .box a {
			display: block;
		}
			#news .flex .box a .pht {
				overflow: hidden;
			}
				#news .flex .box a .pht img {
					width: 100%;
					height: auto;
				}

			#news .flex .box a .text {
				background: #fff url(../common/img/box_arrow.png) no-repeat right bottom;
				padding: 10px;
			}
				#news .flex .box a .text .days {
					letter-spacing: 2px;
				}
				#news .flex .box a .text .txt {
					font-size: 86%;
					line-height: 1.5em;
				}
	
	#news .btn {
		padding-top: 20px;
		margin-bottom: 20px;
	}



#news .set {
	position: relative;
}

#news .set .box {
	border-top: solid 1px #ddd;
}
#news .set .box:nth-child(5n) {
	border-bottom: solid 1px #ddd;
}
	#news .set .box a {
		display: block;
		padding: 20px 5%;
	}
		#news .set .box a .center {
			background: url(/common/img/icon_arrow_black01.gif) no-repeat right center;
		}
			#news .set .box a .center .cat {
				background: #0081dd;
				float: left;
				width: 115px;
				margin-right: 20px;
				text-align: center;
			}
				#news .set .box a .center .cat span {
					font-weight: 200;
					font-size: 115%;
					font-family: 'Teko', sans-serif;
					color: #fff;
					padding: 5px 8px;
				}
			#news .set .box a .center .days {
				font-weight: 200;
				font-size: 115%;
				font-family: 'Teko', sans-serif;
				padding-top: 2px;
				color: #000;
			}
			#news .set .box a .center .text {
				font-size: 93%;
				font-weight: 200;
				padding-top: 2px;
				padding-right: 30px;
				color: #000;
			}



/* channel
--------------------- */
#channel {
	width: 100%;
	background: url(../img/channel_bg.jpg) no-repeat center;
	background-size: cover;
	color: #fff;
}
#channel .dot {
	background: url(../img/dot_bg.png);
	padding-top: 20px;
	padding-bottom: 40px;
}

	
	#channel #youtube-movie {
		display: none;
	}

	
	#channel .btn_c {
		width: 212px;
		margin: 0 auto;
	}
		#channel .btn_c a {
			display: block;
			height: 50px;
			border-radius: 50px;
			background: url(../common/img/btn_bg.png) no-repeat center -1px;
			background-size: 212px;
			font-size: 20px;
			color: #fff;
			text-align: center;
			border: solid 2px #fff;
			line-height: 56px;
			letter-spacing: 3px;
		}






/* sns
--------------------- */
#sns {
	width: 100%;
	background: #ecf6fd;
	padding-bottom: 40px;
	display: none;
}
	#sns .head {
		padding-bottom: 20px;
		margin-bottom: 20px;
	}
	
	#sns .fb .facebookarea {
		width: 100%;
		max-width: 500px;
	}

	#sns .insta ul li {
		width: 33.3333333%;
		float: left;
		overflow: hidden;
	}
		#sns .insta ul li a {
			width: 100%;
			height: auto;
		}
			#sns .insta ul li a img {
				width: 100%;
				height: auto;
				-moz-transition: -moz-transform 0.2s linear;
				-webkit-transition: -webkit-transform 0.2s linear;
				-o-transition: -o-transform 0.2s linear;
				-ms-transition: -ms-transform 0.2s linear;
				transition: transform 0.2s linear;
			}
			#sns .insta ul li a:hover img {
				-webkit-transform: scale(1.05);
				-moz-transform: scale(1.05);
				-o-transform: scale(1.05);
				-ms-transform: scale(1.05);
				transform: scale(1.05);
			}

		
	#sns .btn {
		padding-top: 30px;
	}


	
	
/* news
--------------------- */
#featuring {
	width: 100%;
	background: #f6f6f6;
	padding-bottom: 20px;
	display: none;
}
#featuring .flex {
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
	#featuring .box {
		width: 49%;
		margin-right: 2%;
		margin-bottom: 20px;
	}
	#featuring .box:nth-child(2n) {
		margin-right: 0;
	}
		#featuring .box a {
			display: block;
			position: relative;
		}
			#featuring .box a .pht {
				overflow: hidden;
			}
				#featuring .box a .pht img {
					width: 100%;
					height: auto;
				}

			#featuring .box a .text {
				padding-top: 15px;
			}
				#featuring .box a .text .days {
					letter-spacing: 2px;
				}
				#featuring .box a .text .txt {
					font-size: 86%;
					line-height: 1.5em;
				}


	
	
/* league
--------------------- */
#league {
	width: 100%;
	background: #fff;
	display: none;
}
#league .flex {
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
	#league .box {
		width: 49%;
		margin-right: 2%;
		margin-bottom: 20px;
	}
	#league .box:nth-child(2n) {
		margin-right: 0;
	}
		#league .box a {
			display: block;
			position: relative;
		}
			#league .box a .pht {
				overflow: hidden;
			}
				#league .box a .pht img {
					width: 100%;
					height: auto;
				}

			#league .box a p {
				font-size: 72%;
				letter-spacing: 0;
				padding-top: 5px;
			}





/* movie
--------------------- */
#movie .movieframe {
	width: 100%;
	padding-bottom: 56.25%;
	height:0px;
	position: relative;
	margin-bottom: 40px;
}
	#movie .movieframe iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}





}