@charset "utf-8";

.popup { position:relative;}
.popup .swiper { overflow:hidden; }
.popup .control { display:flex; align-items:center; justify-content:flex-end; margin-top:15rem; }
.popup .control .paging { display:flex; align-items:center; width:auto; margin-right:20rem; }
.popup .control .paging span {left:auto; width:15rem; height:15rem; border-radius:50%; background:#41423f; transform:none; opacity:1; margin-right:15rem; }
.popup .control .paging .swiper-pagination-bullet-active { background:var(--orange); }
.popup .control a { display:flex; align-items:center; }
.popup .control a::before { content:''; display:block; width:13px; height:15px; background:var(--sprite_m) -96px 0; margin-right:10rem; }
.popup .control a.play {display:none;}
.popup .control a.play::before { width:11px; background-position-x:-75px; }
.popup div img {width:100%;}
.popup::before { content:''; position:absolute; right:-85px; bottom:-130px; width:126px; height:138px; background:var(--sprite_m) 0 -110px; z-index:-1; animation: rotate-center 5s ease-in-out infinite both; }
@keyframes rotate-center {
	0% {
	  -webkit-transform: rotate(0);
			  transform: rotate(0);
	}
	20% {
	  -webkit-transform: rotate(360deg);
			  transform: rotate(360deg);
	}
}


.info { position:relative; display:flex; flex-wrap:wrap; justify-content:space-between; margin-bottom:40rem; margin-top:60rem; }
.info dl { width:calc((100% - 80rem)/3); }
.info dt { display:flex; align-items:center; font-size:25rem; font-weight:600; margin-bottom:15rem; }
.info dt span { display:flex; flex-shrink:0; align-items:center; justify-content:center; background:var(--p_color); width:50rem; height:50rem; border-radius:50%; margin-right:15rem; }
.info dt span::before {content:''; display:block; width:28px; height:28px; background:var(--sprite_m) -75px -25px; }
.info dl:nth-of-type(2) dt span::before { width:26px; height:25px; background-position-x:-113px; }
.info dl:nth-of-type(3) dt span::before { width:28px; height:20px; background-position-x:-149px; }
.info dd p {font-size:25rem; font-weight:600; color:var(--p_color); margin-bottom:5rem; }
.info dd span {margin-right:10rem; white-space:nowrap; }
@media (max-width:1500px) and (min-width:1201px), all and (max-width:768px) {
	.info dl { width:100%; }
	.info dl { display:flex; align-items:flex-start; justify-content:space-between; width:100%; margin-bottom:20rem; }
	.info dl dd {width:calc(100% - 180rem); }
}
@media all and (max-width:480px){
	.info dl {flex-wrap:wrap;}
	.info dl dd {width:100%; }
}

.ticket { position:relative; display:flex; flex-wrap:wrap; text-align:center; z-index:1; }
.ticket::before { content:''; position:absolute; left:0; top:0; width:calc(100% + 10rem); height:calc(100% + 10rem); background:url('/design2024/science/img/main_ticket_bg.png') no-repeat center/100% 100%; z-index:-1; }
.ticket > * { width:20%; min-height:180rem; align-content:center; }
.ticket dl { position:relative; color:#fff; font-size:17rem; padding-bottom:50rem; }
.ticket dl dt {font-size:25rem; font-weight:600; }
.ticket dl .fixed {position:absolute; left:0; bottom:0; width:100%; height:50rem; align-content:center; font-size:15rem; }
.ticket div {font-size:15rem; }
.ticket div .title {color:var(--p_color); font-size:20rem; font-weight:600; margin-bottom:5rem; }
.ticket div a { display:inline-block; background:var(--p_color); color:#fff; height:35rem; border-radius:18rem; align-content:center; padding:0 20rem; margin-top:5rem; }
.ticket div a.end {background:#a3a3a3; }
@media (max-width:1500px) and (min-width:1201px), all and (max-width:768px) {
	.ticket::before {display:none;}
	.ticket dl { display:flex; align-items:flex-end; width:100%; min-height:auto; text-align:left; color:#222; padding-bottom:20rem;  }
	.ticket dl dt {font-size:30rem;}
	.ticket dl dd {margin:0 0 7rem 15rem; }
	.ticket dl .fixed {display:none;}
	.ticket div { width:25%; background:url('/design2024/science/img/main_ticket_bg1.png') no-repeat center/100% 100%; }
	.ticket div:nth-of-type(2n) { background-image:url('/design2024/science/img/main_ticket_bg2.png'); }
}
@media all and (max-width:600px){
	.ticket div { width:50%; }
	.ticket div:nth-of-type(3) { background-image:url('/design2024/science/img/main_ticket_bg2.png'); }
	.ticket div:nth-of-type(4) { background-image:url('/design2024/science/img/main_ticket_bg1.png'); }
}


#container h2 { font-size:30rem; font-weight:600; margin-bottom:30rem; }
#container a.more {position:absolute; right:0; top:20rem; font-style:italic; text-transform:uppercase; border-bottom:1px solid #222; z-index:2;}
.notice_wrap { position:relative; display:flex; justify-content:space-between; margin-top:60rem; }
.notice_wrap::after { content:''; display:block; width:265px; height:325px; background:var(--sprite_m) 0 -258px; }
.notice_wrap .notice { position:relative; width:calc(100% - 295rem); }
.notice_wrap .notice > div a {display:flex; align-items:center; margin-top:40rem;  }
.notice_wrap .notice > div a p { width:80rem; flex-shrink:0; }
.notice_wrap .notice > div a p strong {display:block; font-size:30rem; }
.notice_wrap .notice > div a dl { width:calc(100% - 80rem); }
.notice_wrap .notice > div a dt { font-size:20rem; font-weight:500; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; } 
.notice_wrap .notice > div a dd { white-space:nowrap; text-overflow:ellipsis; overflow:hidden; margin-top:10rem; }
.notice_wrap::before { content:''; position:absolute; left:-60px; top:-40%; width:110px; height:225px; background:var(--sprite_m) -274px -110px; z-index:-1; } 
@media (max-width:1500px) and (min-width:1201px), all and (max-width:768px) {
	.notice_wrap .notice { width:100%; }
	.notice_wrap::after {display:none;}
}

.guide_map_wrap {margin:30rem 0 100rem;}
.guide_map_wrap,
.guide_map { position:relative; }
.guide_map .control a { position:absolute; display:flex; align-items:center; justify-content:center; width:35rem; height:35rem; border-radius:50%; right:calc(34% + 35rem); top:50%; background:rgba(0,0,0,0.5); transform:var(--hcenter); z-index:2; }
.guide_map .control a::before {content:''; display:block; width:7rem; height:7rem; border-top:2px solid #fff; border-right:2px solid #fff; transform:rotate(45deg); }
.guide_map .control a.prev {transform:var(--hcenter) scaleX(-1); left:15rem; right:auto; }
.guide_map .swiper-slide { display:flex; justify-content:space-between; opacity:0 !important; }
.guide_map .swiper-slide-active {opacity:1 !important;}
.guide_map .left { position:relative; width:calc(66% - 20rem); }
.guide_map .left strong { position:absolute; display:flex; align-items:center; justify-content:center; font-size:20rem; right:20rem; top:20rem; width:60rem; height:60rem; border-radius:50%; background:var(--navy); color:#fff; box-shadow:0 0 10rem rgba(0,0,0,0.5); }
.guide_map .left strong.f2 { background:var(--p_color); }
.guide_map .left img {width:100%;}
.guide_map .right { position:relative; width:calc(34% - 20rem);}
.guide_map .right dt {font-size:22rem; font-weight:600; margin:30rem 0 10rem; }
.guide_map .right .map { position:absolute; right:0; bottom:-80rem; width:calc(100% + 80rem); transition:0.3s; }
.guide_map .swiper-slide-active .right .map { bottom:-45rem; }
.guide_map .right .map::before { content:''; position:absolute; display:block; width:27px; height:36px; background:var(--sprite_m) -75px -63px; margin-top:-10rem; transition:0.3s; transition-delay: 0.4s; opacity:0; }
.guide_map .swiper-slide-active .right .map::before { opacity:1; margin-top:0; }
.guide_map .right .pin2-1::before { left:80%; top:16%; }
.guide_map .right .pin2-2::before { left:81%; top:-10%; }
.guide_map .right .pin2-3::before { left:22%; top:8%; }
.guide_map .right .pin3-1::before { left:42%; top:30%; }
.guide_map .right .pin3-2::before { left:68%; top:0; }
.guide_map .right .map img {width:100% }
.guide_map .left::before {content:''; position:absolute; right:-40px; top:-50px; width:128px; height:126px; background:var(--sprite_m) -136px -110px; z-index:-1; animation: rotate-center2 5s ease-in-out infinite both; }
@keyframes rotate-center2 {
	0% {
	  -webkit-transform: rotate(0);
			  transform: rotate(0);
	}
	100% {
	  -webkit-transform: rotate(-360deg);
			  transform: rotate(-360deg);
	}
}
@media (max-width:1500px) and (min-width:1201px), all and (max-width:768px) {
	.guide_map_wrap {margin-top:60rem;}
	.guide_map .right dt { margin:0 0 10rem; }
}
@media all and (max-width:600px){
	.guide_map_wrap { margin-bottom:60rem; }
	.guide_map .control a {right:15rem;}
	.guide_map .swiper-slide { flex-wrap:wrap; padding-bottom:0;}
	.guide_map .left,
	.guide_map .right {width:100%;}
	.guide_map .right .map {display:none;}
	.guide_map .right dt { margin-top:20rem; }
}