@charset "UTF-8";
.main {
	position: relative;
	height: 90vh;
	width: 100%;
	background-size: cover;
	background: #fff;
	overflow: hidden;
	background: url("../imgs/bg.png") center top no-repeat;
	background-size: cover;
	min-height: 450px;
}
.main:after,.main:before{ content: ""; display: none;width: 440px; height: 440px; border-radius: 15rem; background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), radial-gradient(ellipse at 70% 60%, #c3e060 0%, rgba(195, 224, 96, 0) 90%), radial-gradient(ellipse at 30% 30%, #c3e060 0%,  rgba(195, 224, 96, 0) 60%), radial-gradient(ellipse at bottom left, #00a3cb 0%, rgba(0, 163, 203, 0) 70%), linear-gradient(135deg, rgba(18, 46, 119, 0) 0%, rgba(18, 46, 119, 0) 75%, #122e77 100%), linear-gradient(to right, #625793 0%, #d55d64 35%, #e49129 65%, #c0671c 100%); background-blend-mode: screen,luminosity,saturation,darken,color-dodge,color; filter: blur(50px); opacity: 0.3; animation: round_anime 5s linear infinite;}


.main:before{position: absolute; left: auto; right: 40px; top: 30%; animation: round_anime2 5s linear infinite;}
@keyframes round_anime {
    0% { border-radius: 30% 50% 60% 40% / 30% 40% 54% 50%; transform: translateY(0); transform: translateX(-100px);  filter: blur(100px);}
   25% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;  transform: translateX(0);}
   50% { border-radius: 50% 30% 30% 70% / 50% 50% 30% 50%; transform: translateY(700px);  transform: translateX(-30px);  filter: blur(140px);}
   75% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;}
  100% { border-radius: 30% 50% 54% 40% / 30% 40% 54% 50%;  transform: translateY(0px); transform: translateX(0);  filter: blur(50px);}
}
@keyframes round_anime2 {
	  0% { border-radius: 50% 30% 30% 70% / 50% 50% 30% 50%; transform: translateY(700px);  transform: translateX(-30px);  filter: blur(140px);}
   25% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;}
    50% { border-radius: 30% 50% 60% 40% / 30% 40% 54% 50%; transform: translateY(70px); transform: translateX(-100px);  filter: blur(100px);}
   65% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;  transform: translateX(0);}
 
  100% { border-radius: 30% 50% 54% 40% / 30% 40% 54% 50%;  transform: translateY(-100px); transform: translateX(0);  filter: blur(100px);}
}
@keyframes bggradient{
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.fitImg{
    position: absolute;
}
.box{
	margin-bottom: 120px;
	overflow: hidden;
	position: relative;
}

.fitMovie{
	position: absolute;
}

.box__centered{
	left: 50%;
	position: absolute;
	top: 50%;
}

.box__contents{
	text-align: center;
	transform: translate(-50%,-50%);
}

	.video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.mvtxt{  width: 100%;  position: absolute; top: 8vh; z-index: 100; text-align: center; color: #fff;}
.mvinner{width: 91.2%; margin: 0 auto;}
.mvtxt h2{ width: 100%;  margin: 0 auto; margin-bottom: 40px; width: 94vh;}
.mvtxt h2 img{ width: 100%; height: auto;}
.mvtxt dt{ font-size: 40px; font-weight: 800; margin-bottom: 20px;}
.mvtxt dd{ font-size: 16px; line-height: 30px; font-weight: 400; }
.mvbanner{ position: absolute; bottom: 30px; right: 30px; width: 323px; z-index: 100;}
.mvbanner img{ width: 100%; height: auto;}
.banner{ width: 195px; position: absolute; right: 40px; bottom: 20vh;}
.banner img{ width: 100%; height: auto}
.date{ bottom: -63px;
    position: relative;}
.date{background:url("../imgs/bg_mainbtm.png") left bottom no-repeat;bottom: 0;height: 100px;width: 100%;position: absolute;left: 0;text-align: center;background-size: cover;background-position: top center;}
.date img{margin:  0 auto}



.secTit{ font-size: 54px; text-align: center; margin-bottom: 40px;}


.access{  background-image: linear-gradient(90deg, rgb(0, 7, 36, 0.9), rgb(99, 76, 22, 0.5) 75%, rgb(198, 145, 7, 0.5)); box-sizing: border-box; padding: 40px;}
.accessCon{ display: flex; border: 1px solid #707070; box-sizing: border-box; padding: 40px; background-color: rgb(0 0 0 / 0.7);}


.andmore{ font-size: 30px; text-align: center;}



.gmap {
    position: relative;
	max-width: 50%;
    width: 100%;
    height: 0;
    padding-top: 26.25%;    /*16:9の比率にしたい場合、9/16=56.25%*/
}

.gmap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.mapTxt{ box-sizing: border-box; padding: 40px; text-align: left;}
.mapTxt dd{ font-size: 17px;}

.mapTxt .secTit{ text-align: left;　margin-bottom: 40px;}
.aboutTxt h2{ background-image: linear-gradient(90deg, rgb(0, 7, 36, 0.9), rgb(99, 76, 22, 0.9) 75%, rgb(198, 145, 7, 0.9)); -webkit-background-clip: text;
-webkit-text-fill-color: transparent; line-height: 1.4}
.sabtit{ position: absolute; left: 40px; top: 40px; z-index: 10;}

.aboutImg{ background-image: linear-gradient(90deg, rgb(0, 7, 36, 0.9), rgb(99, 76, 22, 0.9) 75%, rgb(198, 145, 7, 0.9)); -webkit-background-clip: text;
-webkit-text-fill-color: transparent; font-weight: bold; }

.sectits { text-align: center; position: relative; z-index: 1;}
.sectits dt{ color: #00987E; font-size: 18px; font-weight: 500;}
.sectits dd{ font-weight: 700; font-size: 40px; color: #000;}





.tktitList{ text-align: center;}
.tktitList li{ margin-bottom: 60px;}

.atd{ padding: 20px; box-sizing: border-box; background-color: rgba(255,255,255,0.3); max-width: 900px; margin: 0 auto; height: 500px; overflow-y: scroll;}
.atd p{ font-size: 14px;}

.ticket{ background-image: linear-gradient(90deg, rgb(0, 7, 36, 0.9), rgb(99, 76, 22, 0.9) 75%, rgb(198, 145, 7, 0.9)); color: #fff; padding: 100px 20px;}

.tiketdetail{ max-width: 900px; margin: 0 auto;}
.tiketdetail dl{ margin-bottom: 40px;}
.tiketdetail dt{ font-size: 20px; font-weight: bold;}
.tiketdetail dd{ font-size: 14px;}

.tiketdetail h3{ font-size: 24px; font-weight: bold; padding-top: 50px; margin-bottom: 30px;}
/* =======================================
	ClearFixElements
======================================= */





.newsList li{ margin-bottom: 40px; font-size: 0; border-bottom: 1px solid #707070; padding-bottom: 20px;}
.newsList li dl{ font-size: 0; letter-spacing: 0;}
.newsList dt span{ background: #72BAE6; border-radius: 15px; color: #fff; font-weight: 600; padding: 13px 24px;}
.newsList dt span{ background: #72BAE6; border-radius: 15px; color: #fff; font-weight: 600; padding: 13px 24px;}
.newsList dt.ctgfuture span{ background: #F095A7;}

.newsList dt{ display: inline-block; vertical-align: middle; width: 16%; font-size: 17px;}
.newsList dd{ display: inline-block; vertical-align: middle; font-size: 17px; width: 84%}
.newsList dd.titnews{ font-size: 18px;  width: 70%;}






.ticketList{ display: flex; column-gap: 20px}
.ticketList li{ width: 33%;}
.ticketList li img{ width: 100%; height: auto;}

.atdlink a{ border: 1px solid #fff; padding: 20px; text-align: center; display: block; font-size: 20px; margin-top: 40px;}

.newsBtn a{ background: #00987E; border-radius: 4px; font-size: 18px; font-weight: 600; width: 313px; height: 80px; line-height: 80px; margin: 0 auto; box-sizing: border-box; padding-left: 50px; display: block; color: #fff; margin-top: 60px; position: relative;}
.newsBtn a:after{ content: ""; display: block; width: 9px; height: 8px; background: url("../common/img/arrowicon.svg") left top no-repeat; position: absolute; right: 20px; top: 37px; background-size: cover;}
.newsBtn a:before{ content: ""; display: block; width: 2px; height: 32px; background: url("../common/img/dotline.svg") left top no-repeat; position: absolute; right: 51px; top: 23px; background-size: cover;}



.lineuplist{ display: flex; flex-wrap: wrap; column-gap: 40px;}
.lineuplist li{ width: calc(50% - 20px); margin-bottom: 40px;}
.lineuplist li img{ width: 100%; height: auto;}
.lineuplist li dd{ font-size: 27px;}






.contactArea{ background: url("../common/img/bg_foot.png") center top no-repeat; background-size: cover; padding: 70px 0 154px;}
.contactinner{ max-width: 960px; margin: 0 auto; font-size: 0;}
.contactinner h2{ width: 340px; margin: 0 auto; margin-bottom: 55px;}
.contactinner h2 img{ width: 100%; height: auto;}
.contactbanner li { box-sizing: border-box; width: 50%; display: inline-block;}
.contactbanner li:nth-child(odd){ padding-right: 30px;}
.contactbanner li:nth-child(even){ padding-left: 30px;}
.contactbanner li a{background: rgba(255,255,255,0.95); border: 1px solid #00987E; box-sizing: border-box; display: block; padding: 44px 85px;}

.contactlistTxt{ font-size: 14px; text-align: center;}
.contactlistTxt:before { content: ""; display: block; width: 230px; height: 1px; border-top: 1px dashed #00987E; margin: 0 auto; margin-top: 20px; padding-top: 20px;}
.contactbtn{ width: 36px; margin: 0 auto; padding-top:25px; }


.contactcon.active:before {
	-webkit-animation: loadTriggerAnime1 2.25s  cubic-bezier(1, 0, 0, 1);
	animation: loadTriggerAnime1 2.25s cubic-bezier(1, 0, 0, 1);
	opacity: 0;
}
.animein.active:after, .animein.active:before{ display: none;}

.contactcon:before{ background: #8589b0}



	/* mod_message
-----------------------------------------*/
.mod_message {
	display: none;
	position: fixed;
	background-color: rgba(0,0,0,0.5);
	color: #000;
	width: 100%;
	height: 100vh;
	box-sizing: border-box;
	/*padding: 50px;*/
  /* border-radius */
/*  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;*/
	top: 0;
	right: 0;
	z-index: 10000;
}
.mdWrapp {
	box-sizing: border-box;
	padding: 0 20px;
	display: table;
	height: 100vh;
	width: 100%;
}
.mdconW {
	display: table-cell;
	vertical-align: middle;

}

.mdcon {
	width: 100%;
	border-radius: 5px;
	margin: 0 auto;
	max-width: 800px;
	margin-top: 10000px;
	color: #000;
	font-size: 12px;
	background: #fff;
	/*position: absolute;*/
			/*top: 50%;*/
	margin-top: 10%;
	position: relative;
	box-sizing: border-box;
transition: all 0.8s 0.9s ease-out;

	opacity: 0;
transform: translateY(200px);

}
.on .mdcon{opacity: 1; margin-top: 0; transform: translateY(0);
}


.mod_message button {
	background: #000;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	display: block;
	height: 40px;
	position: absolute;
	right: -15px;
	text-align: center;
	top: -15px;
	width: 40px;
	border: none;
}
.modsecimg {
	border-radius: 5px 5px 0 0;
	overflow: hidden;
}
.modsecimg img {
	width: 100%;
	height: auto;
}
.modlogoimgs {
	width: 100px;
	margin: 30px auto;
}

.close img {
	width: 15px;
	height: auto;
}
.delete {
	z-index: 1000000;
	position: fixed;
	top: 0;
	right: 0;
}
.yuotubecons {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
.yuotubecons iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}

.swiper-container{ padding-bottom: 10px;}
.swiper-container {
  padding-left: 125px;
}


.swiper-container{ padding-bottom: 70px;}


	 .swiper-pagination-bullet {
    width: 36px;
    height: 2px;
    display: inline-block;
    border-radius: 0;
    background: #000;
    
}
	 .swiper-pagination-bullet-active{background: #00987E;}


@supports (-webkit-touch-callout: none) {
  .main {
    /* The hack for Safari */
    height: -webkit-fill-available;
  }
}

 @media screen and (max-width:900px) {
	 
	 .maincon .box{min-height: 100vh }

.mvinner {
	max-width: 73.6%;  margin: 0 auto;
}
	 
	 .contents{ background: none;}
	 .contents:before{ content: ""; display: block; width: 100%; height: 100%; background: url("../common/img/bg.png") left top no-repeat; position: fixed; left: 0 ; top: 0; z-index: 0;}
	 section{ position: relative; z-index: 1;}
	
.mvtxt {
    top: 17vh;
}
	 #maincon{ padding: 0;}

	 .mvtxt h2{width: 100%;max-width: 80%;margin-bottom: 35px;position: absolute;top: 10vh;}
	 .mvtxt dt {
    font-size: 34px;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 45px;
}
	 
	 .date img{margin: 0 auto;/* position: absolute; *//* top: -79px; *//* left: 56px; */}

.mvbanner {
    position: absolute;
    bottom: 12vh;
    right: 12%;
    width: 78.66%;
    z-index: 100;
	max-width: 295px;
}
	 
	 .mvinner .youtubeBtn{ margin-top: 40px}
	 
.scrolltext {
  position: absolute;
    font-weight: normal;
    font-size: 12px;
    bottom: 17px;
    color: #fff;
    left: 39.5%;
    transform: rotate( 90deg);
    font-weight: bold;
    letter-spacing: 0.173em;
}
	 .sectits dd{ font-size: 30px;}
	 .about {
    padding-top: 55px;
		 padding-bottom: 60px;
}
	 .aboutContent{ padding: 0 20px;}
	 .aboutTxt {
    width: 100%;
    float: none;
	 margin-top: 45px;
}
.conytentTit {
    font-size: 55px;
    position: relative;
    line-height: 1;
    margin-bottom: 30px;
}

	 .about{ background: #fff; padding-bottom: 85px;}
.aboutTxt dt {
    font-size: 30px;
    line-height: 40px;
    margin-bottom: 25px;
    font-weight: 600;
}
	.aboutTxt dd {
    font-size: 16px;
    line-height: 30px;
    font-weight: 400;
}
.aboutImg {
    width: 100%;
    float: none;
    margin-top: 40px;
    margin-right: -3%;
}
	 .loopslider ul li{ width: 157px; height: 88px;}
	 .loopslider{ margin-top: 34px; height: 88px; z-index: 10;}

.platform {
    padding-top: 0;
}
.pratformcontent {
    width: 100%;
    margin-left: auto;
    margin-right: 0;
	box-sizing: border-box; padding: 0 20px;
}
.pfmTxt{ margin-bottom: 25px;}
.pfmTxt dt {
    font-size: 30px;
    line-height: 40px;
    margin-bottom: 30px;
    font-weight: 900;
    width: 100%;
    float: none;
}
.pfmTxt dd {
    font-size: 16px;
    line-height: 30px;
    font-weight: 400;
    width: 100%;
    float: none;
}
	 
.hybridTxt {
    width: 100%;
    margin-left: auto;
    margin-right: 0;
	box-sizing: border-box;
	padding: 0 20px;
    margin-bottom: 307px;
}
	 
	.hybrid {
    padding-top: 66px;
    background: #F6FCFB;
    position: relative;
    overflow: hidden;
}
	 
.hybridImg {
    width: 110%;
    position: absolute;
    left: -5%;
    top: 90px;
    z-index: 9;
}
	.hybridTxt dl{ margin-top: 155px; z-index: 10; position: relative;}
	 .hybrid dt {
    font-size: 30px;
    line-height: 40px;
    margin-bottom: 32px;
    font-weight: 900;
}
.hybrid dd {
	line-height: 30px;}
.hybridTxt {
    margin-bottom: 60px;
}
	 
	 .hybridTxt {
    width: 100%;
    margin-left: auto;
    margin-right: 0;
    box-sizing: border-box;
    padding: 0 20px;
    margin-bottom: 60px;
}
	 
.hybrid:before {
    top: -1500px;
}
	 
.hybridList {
    width: 100%;
    position: relative;
    z-index: 20;
    padding: 0 40px;
	box-sizing: border-box;
}
.hybridList li:nth-child(odd) {
    padding-right: 0;
}
.hybridList li:nth-child(even) {
    padding-left: 0;
}
.hybridList li {
    width: 100%;
    margin-bottom: 57px;
}
	 
.hybridList li dt {
    font-size: 18px;
    padding: 25px 0;
    margin: 0;
    line-height: 1;
}
.hybridList li dd {
    font-size: 14px;
    line-height: 26px;
}
.pfmmain {
    width: 100%;
    box-sizing: border-box;
    padding-right: 20px;
}
	 
.performanceTxt {
    width: calc(100% - 20px);
	
	
    margin-left: 20px;
    margin-top: -60px;
    background: #fff;
    position: relative;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    padding: 47px 20px 0 20px;
    box-sizing: border-box;
}
.pfmmainWrapp:before {
    width: 114px;
    height: 107px;
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 0;
}
.pfmmainWrapp {
    background: #fff1;
    position: relative;
    padding-top: 20px;
}
.performanceTxt dt {
    font-size: 30px;
    line-height: 40px;
    margin-bottom: 45px;
}
	 
.permBtom {
    width: 79.2%;
    margin: 0 auto;
    padding-top: 64px;
    padding-bottom: 102px;
    font-size: 0;
}
	 
.permBtom dl {
    width: 100%;
    box-sizing: border-box;
    padding-left: 0;
    display: block;
    vertical-align: top;
	text-align: center;
}
	 
.permBtom dt .right {
    text-align: right;
    display: block;
    font-size: 14px;
    font-weight: 400;
    position: absolute;
    right: 60px;
    bottom: -20px;
}
.permBtom .pfsImg {
    width: 100%;
    display: block;
    box-sizing: border-box;
    vertical-align: top;
    padding-left: 0;
}
	 .permBtom .spperTxt{ padding-top: 60px;}
	.permBtom .spperTxt dt{ font-size: 16px; line-height: 30px; margin-bottom: 35px; text-align: left; color: #000; font-weight: 500;}
	.permBtom .spperTxt dd{ font-size: 12px; line-height: 18px; text-align: left;}
	 
	 .massagemain {
    width: 100%;
    text-align: center;
    position: relative;
     padding: 0;
    box-sizing: border-box;
}
	 .messagetxtWrapp{ padding: 0 10px; box-sizing: border-box; }
	 .msstxtin{background: #1F1F1F; padding-bottom: 30px}
	 .massegeTxt dt {
    color: #4DBBAA;
    letter-spacing: 0.3em;
    font-size: 12px;
    margin-bottom: 30px;
    line-height: 24px;
}
	 .massegeTxt{ padding: 85px 27px 0;background: url(../img/bg_messge.png) center center no-repeat #1F1F1F;
    background-size: 90%;
    position: relative;
	 margin-top: -46px;}
	 
	 .massegeTxt dd {
    color: #fff;
    letter-spacing: 0;
    font-size: 24px;
    font-weight: 400;
    line-height: 40px;
    margin-bottom: 40px;
}
	 
.mesread {
    color: #E6E6E6;
    font-size: 14px;
    line-height: 30px;
    font-weight: 400;
    text-align: left;
}
.prgname {
    color: #E6E6E6;
    font-size: 12px;
    line-height: 20px;
    font-weight: 400;
    padding-top: 40px;
    margin-left: auto;
    display: block;
	text-align: right;
}
	 
.massageList {
    margin-top: 37px;
    position: relative;
    z-index: 20;
    padding: 0 20px;
}
	 
.massageList li:nth-child(odd) {
    padding-right: 0;
	margin-bottom: 20px;
}
.massageList li {
    width: 100%;
    display: block;
    vertical-align: top;
    box-sizing: border-box;
}
.massageList li:nth-child(even) {
    padding-left: 0;
}
	 
	 
.massageList li dt {
    font-size: 18px;
    margin-bottom: 35px;
    box-sizing: border-box;
    padding-left: 16px;
    border-left: 1px solid #00987E;
}
.massageList li dd {
    font-size: 14px;
    line-height: 28px;
}
.massageList li dl {
    background: #fff;
    box-sizing: border-box;
    padding: 40px 30px;
}
	/* .messagetxtWrapp{ padding-bottom: 40px;}*/
	 .ftimgTxt dl {
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 50px 30px;
}
	 
.ftimgTxt dt {
    font-size: 26px;
    font-weight: 600;
    line-height: 40px;
    margin-bottom: 35px;
}
.ftimgTxt dd {
    font-size: 14px;
    font-weight: 400;
    line-height: 28px;
}
.feature {
    text-align: center;
    padding-top: 70px;
}
	 
.featureTit dd {
    font-size: 30px;
    
}
	 .ftimgTxt:before{ display: none;}
	 .ftimgTxt {
    top: 0;
}
	 
	 
	 .robttits dt{ font-size: 20px;}
	 .imgrobot {
    margin-bottom: 45px;
}
.futuresec h2 span {
    background: #000;
    color: #fff;
    box-sizing: border-box;
    padding: 5px;
}
	 
.futuresec {
    width: 100%;
   ;}
.futuresec h2 {
    font-size: 20px;
    font-weight: 600;
    line-height: 37px;
    margin-bottom: 20px;
    text-align: right;
}
	 .futuresec p{ padding: 0 20px; box-sizing: border-box; font-size: 16px; line-height: 30px;}
	 
	 .secondList{ padding: 0;}
	 .secondList li{ width:  84%; display: block; margin-bottom: 38px;}
	 .secondList p{ padding: 0;}
	 .hybridList li:nth-child(odd){ margin-left: 8%;}
	 .hybridList li:nth-child(even){ margin-left: auto;}
	 .futuresec .hybridList li dd {
    margin-top: 24px;
}
	 .futuresec .hybridList li:nth-child(even) dt {
    left: calc(9px + 7%);
}
	.hybridList li:nth-child(even) {
    margin-left: auto;
} 
	 
	 .newsList dt span {
    border-radius: 28px;
    font-weight: 600;
    padding: 9px 24px;
}
	 .itemlistWrap{ padding-top: 44px; ackground: url(../img/tsiteimg.svg) no-repeat #F6F6F6;
    background-size: 85% 85%;
    background-position: right -0 top -156px;
}
	 .itemlistWrap .futuresec h2{ text-align: left;}
	 .newsList dt {
    display: inline-block;
    vertical-align: middle;
    width: 110px;
    font-size: 12px;
}
	 .newsList{ padding: 20px;}
	 .newsList dd {
    display: inline-block;
    vertical-align: middle;
    font-size: 12px;
    width: 33%;
}
	 .newsList dd.titnews {
    font-size: 14px;
    width: 100%;
		 margin-top: 20px
}
	 
	 .contactbanner li {
    width: 100%;
    display: block;
}
.contactbanner li:nth-child(odd) {
    padding-right: 0;
	margin-bottom: 40px
}
.contactbanner li:nth-child(even) {
    padding-left: 0;
}
	 .contactbanner{ box-sizing: border-box; padding: 0 40px}
	 .companybtn li:nth-child(odd) {
    padding-right: 0;
		margin-bottom: 15px;
}
	.companybtn li:nth-child(even) {
    padding-left: 0;
}
	.companybtn li:nth-child(even) a {
    background: #fff;
}
.swiper-container {
  padding-left: 34px;
}
	 .swiper-wrapper li{ padding: 0;}
	 
	 .swiper-button-next,.swiper-button-prev{background-image:url("../common/img/playicon.svg"); width: 36px; height: 36px; background-size: cover;}
.swiper-button-prev{transform:rotate(180deg); left: 10px;}
.swiper-button-next{ right: 10px;}
.swiper-button-next, .swiper-button-prev {
	top: 48%;}
	 .swiper-container{ padding-bottom: 0;}

	 .massagemain:before {
    top: -20px;
}
.massagemain:after {
    bottom: -20px;
}
	 
	 .mesage .sidessabtits{    writing-mode: inherit; right: -10px;
    top: -52px;}
	 .newsList{ margin-top: 48px; border: none;}
	 .newsBtn a { margin-top: 10px;}
	 .news {
    padding: 45px 0 55px;
}
.contactinner h2 {
	max-width: 290px;}
	 .contactArea {
    padding: 54px 0 88px;
}
	 .swiper-wrapper { padding-bottom: 50px;}
	.itemlistWrap{ padding-bottom: 40px;}

}

@media screen and (max-width: 500px){
.mvbanner {
   
    max-width: 78.66%;
}
}

 @-webkit-keyframes loadTriggerAnime1 {
0% {
-webkit-transform: translateX(-101%);
}
47% {
-webkit-transform: translateX(0%);
}
53% {
-webkit-transform: translateX(0%);
}
100% {
-webkit-transform: translateX(101%);
}
}
@keyframes loadTriggerAnime1 {
0% {
-webkit-transform: translateX(-101%);
-moz-transform: translateX(-101%);
-o-transform: translateX(-101%);
-ms-transform: translateX(-101%);
transform: translateX(-101%);
}
47% {
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-o-transform: translateX(0%);
-ms-transform: translateX(0%);
transform: translateX(0%);
}
53% {
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-o-transform: translateX(0%);
-ms-transform: translateX(0%);
transform: translateX(0%);
}
100% {
-webkit-transform: translateX(101%);
-moz-transform: translateX(101%);
-o-transform: translateX(101%);
-ms-transform: translateX(101%);
transform: translateX(101%);
}
}



.leftin{ opacity: 0; transform:translateX(-15px);transition: all 0.6s 0.2s ease-in;}
.leftin.active{ opacity: 1; transform:translateX(0);}

.bottomin{ opacity: 0; transform:translateY(25px); transition: all 1.4s 0.8s ease-out;}
.bottomin.active{ opacity: 1; transform:translateY(0); }

.bottomindly{ opacity: 0; transform:translateY(25px);transition: all 1.8s 1.2s ease-out;}
.bottomindly.active{ opacity: 1; transform:translateY(0); }


.animein{ overflow: hidden; position: relative;}
.animein:before {
    will-change: auto;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    right: 0;
    top: 0;
    z-index: 1;
    background-color: #00987E;
    -webkit-transition: all .8s cubic-bezier(.77,0,.175,1);
    transition: all .8s cubic-bezier(.77,0,.175,1);
    -webkit-transition-timing-function: cubic-bezier(.77,0,.175,1);
    transition-timing-function: cubic-bezier(.77,0,.175,1);
    -webkit-transition-delay: .2s;
    transition-delay: .2s;
	z-index: 10;
}
.animein.active:after, .animein.active:before {
    right: -100%;
}

.animein::after {
    background-color: #f5f5f5;
}

.animein:after {
    will-change: auto;
	display: none;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    right: 0;
    top: 0;
    background-color: #fff;
    z-index: 2;
    -webkit-transition: all .8s cubic-bezier(.77,0,.175,1);
    transition: all .8s cubic-bezier(.77,0,.175,1);
    -webkit-transition-timing-function: cubic-bezier(.77,0,.175,1);
    transition-timing-function: cubic-bezier(.77,0,.175,1);
	z-index: 10
}

.date {
    background: url(../imgs/bg_mainbtm.png) left bottom no-repeat;
    bottom: 0;
    height: 150px;
    width: 100%;
    position: absolute;
    left: 0;
    text-align: center;
    background-size: cover;
    background-position: top center;
    padding-top: 120px;
}

.ticketIn{background-image: linear-gradient(90deg, rgb(0, 7, 36, 0.7), rgb(99, 76, 22, 0.9) 75%, rgb(169, 198, 7, 0.8));
    width: 100%;
    padding: 40px;}



.remodal{ background: none; color: #fff; }
.mapmodal{background-color: transparent;}

.remodal-overlay{
    background: rgba(000, 000, 000, 0.8);
}
.atd{ background-color: transparent;}
.mapmodal{ text-align: left;}


.remodal{ max-width: 1040px;}
.atd li{ margin-bottom: 70px;}
.atd dt{ font-size: 20px; font-weight: bold; margin-bottom: 40px;}
.atd dd{ font-size: 14px; line-height: 28px;}

.atd dd .tits{ font-size: 16px; font-weight: bold; margin-bottom: 20px;}
.ssbtns{ margin-bottom: 40px;}

.modalclose{ position: absolute; right: 0; top: 0;}
.modlin{ position: relative;}

.atd{ height: auto; overflow: auto;}

.ticketlinks{ border: 1px solid #fff; background-image: linear-gradient(90deg, rgb(0, 7, 36, 0.7), rgb(99, 76, 22, 0.9) 75%, rgb(198, 145, 7, 0.8)); width: 100%; padding: 40px; text-align: center; box-sizing: border-box; margin-top: 40px;}

.ticketlinks dt{font-size: 21px;font-weight: bold;padding-bottom: 20px;}
.ticketlinks dd{ font-size: 18px;}
.ticketlinks dd a{ font-size: 20px; font-weight: bold; background: #000; padding: 20px; box-sizing: border-box; display: block; margin-top: 20px;}

.newsTit{ font-size: 24px;}
.newsTit .daydates{ font-size: 14px; margin-bottom: 40px;}
.newsTit{ border-bottom: 1px solid #fff; padding-bottom: 40px; margin-bottom: 20px;}

.newsdetail{ font-size: 16px; line-height: 28px;}

.nolink {text-decoration: line-through; display: block; text-decoration-color: #fff;}

 .mapTxt .secTit{ margin-bottom: 20px;}

.js-btn-more,.js-btn-close{
    padding: 20px;
    text-align: center;
    display: block;
    font-size: 20px;
    margin-top: 40px;
	border: 1px solid #fff;
}

.movieList{ font-size: 0; letter-spacing: 0;}

.movieList li{ width: 50%; display: inline-block; padding: 0 20px; box-sizing: border-box}

 @media screen and (max-width:900px) {
	 .sabtit{ display: none;}
	 .main:before{display: none}
	 .sabtit {
    position: absolute;
    left: 160px;
    top: -70px;
    z-index: 10;
    width: 114px;
    transform: rotate(93deg);
}
	 
	 .banner {
    width: 115px;
    position: absolute;
    right: 20px;
    top: 16vh;
		 bottom: auto;
    z-index: 100;
}
	 
	     .mvtxt {
			 top: auto;
        bottom: auto;
        z-index: 1000;
			 top: auto;}
	 .date {
    bottom: 0;
    position: absolute;
}
	 .loopslider{ margin: 0; height: 60px}
	 .loopslider ul li{ width: 380px}
	 .loopslide{ font-size: 30px;}
	 .conytentTit span {
    font-size: 40px;
}
	 .conytentTit{ font-size: 30px}
	  .conytentTit span{ font-size: 40px}
	 
	 .aboutImg h3 {
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 30px;
}
	 
	 .tktitList {
    text-align: center;
    max-width: 70%;
    margin: 0 auto;
}
	 
	 .tktitList li {
    margin-bottom: 30px;
}
	 
	 .secTit{ margin-bottom: 50px;}
	 
	 .newsList dd{ width: 100%; font-size: 14px;}
	 .newsList{ padding: 0;}
	 section{ padding: 30px 0;}
	 .ticketList{ display: block;}
	 .ticketList li{ width: 100%; height: auto; margin-bottom: 20px;}
	 .lineuplist{ display: block;}
	 .lineuplist li{ width: 100%}
		 
		 .access{ padding: 10px;}
		 .accessCon{ padding: 20px; display: block;}
	 .gmap{ max-width: 100%;   padding-top: 64.25%;}
	 .mapTxt{ padding: 0;}
	 .mapTxt .secTit{ margin-bottom: 20px;}
	 
	 .main{height: 50vh;} 
	 .date{ height: 90px;padding-top: 0;}
	 .scroll{ display: none;}
	 .scrolltext{ display: none;}
	 .secTit{ font-size: 30px; margin-bottom: 2-px;}
	 
	 .lineuplist li dd{ font-size: 18px; padding-top: 10px;}
	 .js-btn-more, .js-btn-close {
    padding: 12px;
    text-align: center;
    display: block;
    font-size: 16px;
    margin-top: 40px;
    border: 1px solid #fff;
    font-weight: 500;
}
	 .ticketlinks dt { font-size: 20px;}
	 .ticketlinks dd{ font-size: 14px;}
	 .ticketlinks dd a {
    font-size: 18px;
    font-weight: bold;
    background: #000;
    padding: 10px;
    box-sizing: border-box;
    display: block;
    margin-top: 20px;
}

	 .ticketlinks{ padding: 20px;}
	 .newsList dd{ font-size: 16px;}
	 
}

.plist {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
	text-align: center;
	margin: 0 auto;
	margin-top: 50px;
}

.plist iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
	max-height: auto;
}

.youtube{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.youtube iframe {
 position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;}
 @media screen and (max-width:900px) {
	 .movieList li{ width: 100%; margin-bottom: 20px;}
	 .plist iframe{ min-height: 660px;}
}
.amapimg{ width: 100%; height: auto; max-width: 800px; margin: 0 auto; display: block;}
.areamap{ margin-bottom: 40px;}
 @media screen and (min-width:901px) {
	 .tkuther{ margin-top: 40px; }
}
.modlin h3{
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 40px;
	padding-left: 55px;
}

@media screen and (max-width:900px) {
	.modlin h3{
  
	padding-left: 35px;
}
}