@charset "utf-8";

/* visual */
.visual {overflow:hidden;}
.visual .visual_slides {}
.visual .visual_slides li {vertical-align: top;}
.visual .visual_slides li a {}
.visual .visual_slides li a img {}

/* notice */
.notice {position:relative; border:1px solid #f0f0f0; background-color:#fff;}
.notice {padding:10px 15px;}
.notice li {position:relative; width:calc(100% - 80px); margin:10px 0;}
.notice li a {display:block; width:100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.notice li a > span {float:left; padding-right:10px;}
.notice li a > span img {vertical-align:middle;}

.notice .btn_more {position:absolute; bottom:18px; right:15px;}

/* content */
#content {margin-top:40px;}
#content:after {clear:both; display:block; content:'';}

.con_left {position:relative; float:left; width:23.3333%/*280px*/;}
.event_block {position:relative; width:100%; padding:35px 25px; border:1px solid #f0f0f0; background-color:#fff;}


/* badge */
.badge {font-size:12px; text-decoration:none !important; white-space:nowrap; display:inline-block; vertical-align:baseline; position:relative; margin:0 4px 4px 0; padding:0 15px; height:24px; line-height:22px; min-width:54px; background-color:#999; color:#fff; border-radius:24px; text-align:center; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; vertical-align:top; font-weight:400; /*  margin:0 2px; */}

.badge.red {background-color:#de3724}
.badge.green {background-color:#11a5a9}
.badge.gray {background-color:#999}
.badge.blue {background-color:#358bd6}
.badge.purple {background-color:#800080}

/* poster */
.poster_alarm {margin-bottom:15px;}

.poster {}
.poster ul {}
.poster li {display:block; border-top:1px solid #f0f0f0; padding:30px 0;}
.poster li:first-child {border:none; padding-top:0;}

.poster dl {}
.poster dt {display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; white-space: normal; word-break:keep-all; height:64px; line-height:32px;}
.poster dt a {font-size:22px;}
.poster dd {margin-top:20px;}

/* ranking */
.ranking {position:relative; float:right; width:75%/*900px*/; padding:55px 33px 40px; border:1px solid #f0f0f0; background-color:#fff;}

.ranking section {position:relative; border-top:1px solid #f0f0f0; padding:20px 0;}
.ranking section:after {clear:both; display:block; content:'';}
.ranking section:first-child {border-top:none; padding-top:0;}

.ranking section h2 {font-size:30px; font-weight:700;}
.ranking section:first-child .btn_more {position:absolute; top:42px; right:0;}
.ranking section .btn_more {position:absolute; top:62px; right:0;}

.ranking section .sub_copy {overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}

.ranking section ol {margin:25px 0 0;}
.ranking section li {float:left;}
.ranking section li a {display:block; overflow:hidden; max-width:180px; margin:0 auto;}
.ranking section li img {display:block; margin:0 auto 20px; vertical-align:top; max-width: 180px; max-height: 100%;
	-webkit-transition: -webkit-transform 1s ease;
	transition: -webkit-transform 1s ease;
	transition: transform 1s ease;
	transition: transform 1s ease, -webkit-transform 1s ease;
}
.ranking section li a:hover img {
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
	-webkit-transition: transform 2.5s ease, -webkit-transform 2.5s ease;
	transition: -webkit-transform 2.5s ease;
	transition: transform 2.5s ease;
	transition: transform 2.5s ease, -webkit-transform 2.5s ease;
	-moz-transition: transform 2.5s ease, -webkit-transform 2.5s ease;
	-ms-transition: transform 2.5s ease, -webkit-transform 2.5s ease;
	-o-transition: transform 2.5s ease, -webkit-transform 2.5s ease;
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
}
.ranking section li .reward {color:#11a5a9 !important; font-weight:500; margin-bottom:15px;}
.ranking section li dl {}
.ranking section li dt {display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; white-space: normal; word-break:keep-all; height:50px; line-height:24px; font-size:18px; font-weight:500;}
.ranking section li dd {margin-top:15px; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; white-space: normal; word-break:keep-all; height:40px; line-height:20px; display:none;}

/*.ranking .slick-slide {margin: 0 10px;}
.ranking .slick-list {margin: 0 -10px;}*/
.ranking .slick-slide, .ranking .slick-slide *{ outline: none !important; }
.ranking .nextArrowBtn{position: absolute; z-index: 800; top: 22%; right: -15px; width:70px; height:70px; background:url("../../inc/img/main/btn-slide-next.png") no-repeat 0 0; cursor:pointer;}
.ranking .prevArrowBtn{position: absolute; z-index: 800; top: 22%; left: -15px; width:70px; height:70px; background:url("../../inc/img/main/btn-slide-prev.png") no-repeat 0 0; cursor:pointer;}


.ranking .nextArrowBtn{position: absolute; z-index: 800; top: 22%; right: -36px; width:70px; height:70px; background:url("../../inc/img/main/btn-slide-next.png") no-repeat 0 0; cursor:pointer;}
.ranking .prevArrowBtn{position: absolute; z-index: 800; top: 22%; left: -12px; width:70px; height:70px; background:url("../../inc/img/main/btn-slide-prev.png") no-repeat 0 0; cursor:pointer;}

/* information */
.information {position:absolute; bottom:100px; left:0; width:100%;}
.information p {}

.information .info_tel {padding-bottom:25px; border-bottom:1px solid #000;}
.information a {display:inline-block; width:50%; font-size:50px; line-height:50px; word-break:keep-all;}
.information .info_logo a {display:block; width:100%; font-size:inherit; line-height:inherit;}

.information .info_tel + p {margin-top:25px;}
.information strong {font-size:20px;}
.information span {display:block; color:#757575;}

.information .info_logo {margin-top:100px;}

.information.info02 {position:relative; bottom:0; margin:100px 0;}

/* responsive */
@media all and (max-width:1024px) {
	.con_left,
	.ranking {float: none; width: 100%;}
	.ranking {margin-top:30px; padding:20px;}

	.event_block {padding:20px;}
	.poster li {display: inline-block; width: calc(50% - 20px); padding:20px 0;}
	.poster li:first-child {padding-top:20px}
	.poster li:nth-child(2) {border-top:none;}
	.poster li:nth-child(2n) {margin-left:36px;}
	.poster_alarm {margin-bottom: 5px;}
	.poster dt {height:40px; line-height: 20px;}
	.poster dt a {font-size:18px; display:block;}
	.poster dd {margin-top:10px;}


	/* information */
	.information.info02 {margin:30px 0; left:auto; width:100%; text-align: center;}
	.information .info_logo {margin-top:30px;}
	.information .info_tel {padding-bottom:10px;}
	.information a {display:block; width:100%; font-size:30px;}
	.information .info_tel + p {margin-top:10px;}
	.information .info_logo {margin-top:20px;}

	/* ranking */
	.ranking section h2 {font-size:18px;}
	.ranking section .sub_copy {width: calc(100% - 100px)}
	.ranking section .btn_more {top:50px}
	.ranking section:first-child .btn_more {top:30px}
	.ranking section .btn_more a {font-size:12px;}

	.ranking section li dt {height: 40px; line-height: 20px; font-size:14px;}
}

@media all and (max-width:767px) {
	.ranking .prevArrowBtn,
	.ranking .nextArrowBtn {background:none;}
	.ranking section:first-child .btn_more {top:28px;}
	.ranking section .btn_more {top:48px;}
}

@media all and (max-width:679px) {
	.inner_block {padding:0 15px;}
	#content, .ranking  {margin-top: 20px; overflow:hidden;}
	.ranking section li a {max-width:150px;}
	.ranking section li img {max-width: inherit; max-height: inherit; margin-bottom:10px;}
	.ranking section li .reward {margin-bottom:5px;}
}

@media all and (max-width:579px) {
	.ranking section li a {max-width:120px;}
	.ranking section li dt {height: 36px; line-height: 18px; font-size:13px;}
}

@media all and (max-width:479px) {
	.event_block {padding:10px;}
	.ranking {padding:10px;}

	.poster li {display: block; width: 100%; padding:10px}
	.poster li:first-child {padding-top:10px;}
	.poster li:nth-child(2) {border-top:1px solid #f0f0f0;}
	.poster li:nth-child(2n) {margin-left:0;}
	.badge {height:20px; line-height: 18px;}
	.poster dt {height:auto; -webkit-line-clamp:inherit}
	.poster dt a {font-size:16px;}
	.poster dd {margin-top:5px; font-size:12px;}
}

/* new */
.visual_text {position:relative;}
.visual_text > a {display:block;}
.visual_text .txt_box {padding:90px 20px; color:#fff; text-align:center;}
.visual_text .txt_box h2 {font-size:60px; font-weight:bold; letter-spacing:-2px;}
.visual_text .txt_box p {margin-top:-5px; font-size:15px;}
.visual_text .visual01 {background:url('../../inc/img/main/bg_visual01.png') no-repeat 50% 50%; background-size:cover;}
.visual_text .visual02 {background:url('../../inc/img/main/bg_visual02.png') no-repeat 50% 50%; background-size:cover;}
.visual_text .visual03 {background:url('../../inc/img/main/bg_visual03.png') no-repeat 50% 50%; background-size:cover;}
.visual_text .visual04 {background:url('../../inc/img/main/bg_visual04.jpg') no-repeat 50% 50%; background-size:cover;}
.visual_text .slick-slide {transition: opacity 2000ms ease 0s !important;}

@media all and (max-width:680px) {
	.visual_text .txt_box h2 {font-size:20px; letter-spacing:-1px;}
}

.performance_exhibition {margin-top: 40px; display: inline-block; width: 100%;}
.performance_exhibition .con_left {display:flex; flex-wrap: wrap; height:370px;}
.performance_exhibition .con_left > div {width:100%;}
.performance_exhibition .con_left > div + div {margin-top:10px;}

.performance_exhibition .con_left .bnn01 {background:#f7edda}
.performance_exhibition .con_left .bnn01 a {background:url('../../inc/img/main/icon_bnn01.png') no-repeat 95% 0; background-size: auto 80%;}
.performance_exhibition .con_left .bnn02 {background:#bedef1}
.performance_exhibition .con_left .bnn02 a {background:url('../../inc/img/main/icon_bnn02.png') no-repeat 95% 50%; background-size: auto 70%;}
.performance_exhibition .con_left .bnn03 {background:#ddc3f2}
.performance_exhibition .con_left .bnn03 a {background:url('../../inc/img/main/icon_bnn03.png') no-repeat 95% 50%; background-size: auto 65%;}

.performance_exhibition .con_left .bnn {font-weight:bold; padding:10px; box-sizing:border-box;}
.performance_exhibition .con_left .bnn a {display:block; position:relative; height:100%; border:1px solid #000; color:#000}
.performance_exhibition .con_left .bnn a div {position:absolute; top:50%; left:20px; transform:translateY(-50%)}
.performance_exhibition .con_left .bnn a div p {font-size:17px; line-height:1}
.performance_exhibition .con_left .bnn a div span {display:inline-block;position:relative;margin-top:15px;font-size:12px;padding-right: 10px;}
.performance_exhibition .con_left .bnn a div span:after {content: ''; width: 5px; height: 5px; border-top: 2px solid #000; border-right: 2px solid #000; display: inline-block; transform: rotate(45deg) translateY(-50%); position: absolute; top: 50%; right: 0; }

.performance_exhibition .con_left .font-white a {border-color:#fff; color:#000;}
.performance_exhibition .con_left .font-white a div span:after {border-color:#000;}

@media all and (max-width:1024px) {
	.inner_block > .performance_exhibition .con_left {display:none;}
	.performance_exhibition .con_left {flex-wrap:nowrap; height:140px;}
	.performance_exhibition .con_left > div + div {margin:0 0 0 10px;}

	.performance_exhibition .con_left .bnn01 a {background-size: auto 70%;}
	.performance_exhibition .con_left .bnn02 a {background-size: auto 60%;}
	.performance_exhibition .con_left .bnn03 a {background-size: auto 55%;}
	.performance_exhibition .con_left + .ranking {margin-top:0;}
}

@media all and (max-width:860px) {
	.performance_exhibition .con_left {flex-wrap:wrap; height:auto;}
	.performance_exhibition .con_left > div {height:140px;}
	.performance_exhibition .con_left > div + div {margin:10px 0 0 0;}
}

.performance_exhibition .ranking {padding:20px 33px 10px; background:url("../../inc/img/main/bg_performance1.png") no-repeat 50% 50%; background-size: cover;}
.performance_exhibition .ranking section li a {background:#fff; padding: 5px 5px 20px 5px;}
.performance_exhibition .ranking section li a img {max-width:100%;}
.performance_exhibition .ranking section h2 {color:#000;}
.performance_exhibition .ranking section li dt {font-size:15px;}
.performance_exhibition .ranking section .btn_more {top:12px;}
.performance_exhibition .ranking section .btn_more a {color:#000;}

#content .performance_exhibition .ranking {display:none;}