@charset "utf-8";

#main_container *{ box-sizing: border-box;}

.quick{ position: absolute; top: 0; right: 20px; width: 100px; z-index: 99;}
.quick li{ position: relative; height: 100px; outline: solid 10px rgba(255,240,0,0.3); background: #fff000;  border-radius: 50%; box-shadow: 0 0 3px rgba(0,0,0,0.2); margin: 30px 0; text-align: center;}
.quick li a{display: inline-block; width:80%; font-size: 17px; font-weight: 500; letter-spacing: -0.04em; color: #000; word-break: keep-all;  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.quick li a.popup{padding-top: 30px; background: url("/resource/dino/images/jewelry/main/icon_popup.png") center top no-repeat;}

@media all and (max-width :480px) {
	.quick{ right: 20px; width: 70px; }
	.quick li{ height: 70px;outline: solid 8px rgba(255,240,0,0.3);margin: 25px 0;}
	.quick li a{display: inline-block; width:80%; font-size: 15px; line-height: 1.2em;}
	.quick li a.popup{padding-top: 20px;  background-size:26px;}
}

/* mainbox_area01 **************************************************************************************************/
.mainbox_area01{ position:relative; text-align:center;}
.mainbox_area01:after{background: url("/resource/dino/images/dinosaur/inc/sub_wave.png") top center no-repeat;position:absolute; bottom:-1px; right:0%; display:block; content:''; width: 100%;height: 22px; }
.mainbox_area01 .slideWrap{position:relative; width:100%; margin:0px auto;}
.mainbox_area01 .slideWrap .slide{}
.mainbox_area01 .slideWrap .slide .main_img{width:100%; height:650px; background-position: center top; background-repeat: no-repeat; background-size: cover; text-align: center; }
.mainbox_area01 .slideWrap .slide .main_img01{background:url("/resource/dino/images/dinosaur/main/main_txtimg01.jpg") center top no-repeat;}
.mainbox_area01 .slideWrap .slide .main_img02{ background:url("/resource/dino/images/dinosaur/main/main_txtimg02.jpg")center top no-repeat;}
.mainbox_area01 .slideWrap .slide .txt_guide { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); display:flex; flex-flow:column; font-family:"SCDream"; text-shadow:-2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff; }
.mainbox_area01 .slideWrap .slide .txt_guide .small		{ font-size:2rem; font-weight:bold; }
.mainbox_area01 .slideWrap .slide .txt_guide strong		{ font-size:4.8rem; font-weight:900; color:#5f8b00}
.mainbox_area01 .slideWrap .slide .txt_guide .text		{ font-size:3.6rem; font-weight:500; color:#ff6000}

.mainbox_area01 .slideWrap .slick-list{ overflow:visible;}
.mainbox_area01 .slideWrap .slide .slick-slide{overflow:hidden; position:relative;}
.mainbox_area01 .slideWrap .slick-navi{ position:absolute; z-index:56; left:50%; bottom:60px; vertical-align:top; text-align:center; transform: translateX(-50%);}
.mainbox_area01 .slideWrap .slick-dots{ display:inline-block; text-align:center; vertical-align:top;}
.mainbox_area01 .slideWrap .slick-dots li{ display:inline-block;margin:0 3px; overflow:hidden; font:0/0 a; vertical-align:top;}
.mainbox_area01 .slideWrap .slick-dots li button[type="button"]{ width:30px; height:30px;  border:none; font:0/0 a; border-radius:15px; }
.mainbox_area01 .slideWrap .slick-dots .slick-active{}
.mainbox_area01 .slideWrap .slick-dots .slick-active button[type="button"]{width:60px; height:30px; background:#c53438;}

.mainbox_area01 .slick-arrow{ position:absolute; z-index:555; top:50%;transform:translateY(-50%); display:block; width:70px; height:70px;background-color:rgba(255,255,255,0.0); background-position:center; background-repeat:no-repeat; font:0/0 a;}
.mainbox_area01 .slick-arrow.slick-prev{ left:10px;background-image:url(/resource/dino/images/jewelry/main/visual_btn_prev.png);}
.mainbox_area01 .slick-arrow.slick-next{ right:10px;background-image:url(/resource/dino/images/jewelry/main/visual_btn_next.png);}
.mainbox_area01 .slideWrap .slick-play{display:inline-block; width:30px; height:30px; margin:0 3px; border:none; background:transparent url('/resource/dino/images/jewelry/main/visual_nav_stop.png') no-repeat; font:0/0 a;  vertical-align:top;}
.mainbox_area01 .slideWrap .slick-play.pause{background:url('/resource/dino/images/jewelry/main/visual_nav_play.png') no-repeat}



@media all and (max-width :1024px) {

	.mainbox_area01 .slideWrap .slick-navi{ display:none;}

	.mainbox_area01 .slideWrap .slide .main_img{height:500px;}
	.mainbox_area01 .slideWrap .slide .main_img01{background:url("/resource/dino/images/dinosaur/main/main_txtimg01_01.jpg") center no-repeat;background-size: cover;}
	.mainbox_area01 .slideWrap .slide .main_img02{ background:url("/resource/dino/images/dinosaur/main/main_txtimg02_01.jpg") center no-repeat;background-size: cover;}

	.mainbox_area01 .slick-arrow{top:60%;transform:translateY(00%); }
	
	.mainbox_area01 .slideWrap .slide .txt_guide .small		{ font-size:1.8rem;  }
	.mainbox_area01 .slideWrap .slide .txt_guide strong		{ font-size:4rem; }
	.mainbox_area01 .slideWrap .slide .txt_guide .text		{ font-size:3rem; }
}
@media all and (max-width :868px) {
	.mainbox_area01 .slideWrap .slide .txt_guide			{ top:inherit; left:4%; width:92%; transform:inherit; bottom:3em; align-items:flex-start; text-shadow:-1.5px -1.5px 0 #fff, 1.5px -1.5px 0 #fff, -1.5px 1.5px 0 #fff, 1.5px 1.5px 0 #fff; }
	.mainbox_area01 .slideWrap .slide .txt_guide .small		{ font-size:1.5rem;  }
	.mainbox_area01 .slideWrap .slide .txt_guide strong		{ font-size:3.5rem; }
	.mainbox_area01 .slideWrap .slide .txt_guide .text		{ font-size:2.5rem; }
}
@media all and (max-width :767px) {
	.mainbox_area01 .slick-arrow{ width:50px; height:50px;}
	.mainbox_area01 .slick-arrow.slick-prev{left:2%;}
	.mainbox_area01 .slick-arrow.slick-next{right:2%;}
	.mainbox_area01 .slideWrap .slide .txt_guide .small		{ font-size:1.2rem;  }
	.mainbox_area01 .slideWrap .slide .txt_guide strong		{ font-size:3rem; }
	.mainbox_area01 .slideWrap .slide .txt_guide .text		{ font-size:2rem; }
}


@media all and (max-width :480px) {
	.mainbox_area01 .slideWrap .slide .main_img{height:420px;}
	.mainbox_area01:after{background-size: 200%;}
	.mainbox_area01 .slideWrap .slide .txt_guide			{ bottom:2em;  }
	.mainbox_area01 .slideWrap .slide .txt_guide .small		{ font-size:1.167rem;  }
	.mainbox_area01 .slideWrap .slide .txt_guide strong		{ font-size:2.5rem; }
	.mainbox_area01 .slideWrap .slide .txt_guide .text		{ font-size:1.5rem; }

}
@media all and (max-width :368px) {
	.mainbox_area01 .slideWrap .slide .txt_guide			{ bottom:1.5em;  }
	.mainbox_area01 .slideWrap .slide .txt_guide .small		{ font-size:1.067rem;  }
	.mainbox_area01 .slideWrap .slide .txt_guide strong		{ font-size:2.2rem; }
	.mainbox_area01 .slideWrap .slide .txt_guide .text		{ font-size:1.2rem; }

}



/* mainbox_area02 **************************************************************************************************/
.mainbox_area02{ padding: 60px 0 70px;}
.mainbox_area02 > div{ display: flex; justify-content: space-between;}
.mainbox_area02 > div > div{padding: 40px;}
.mainbox_area02 h3{color: #111; font-size: 30px; font-weight: 700;margin-bottom: 30px;line-height: 30px;}

/* infor */
.mainbox_area02 .infor{width: 30%; background: #dbe1ef url("/resource/dino/images/dinosaur/main/infor_bg.png") right bottom no-repeat;order: 1;}
.mainbox_area02 .infor ul li{margin-top: 8px;}
.mainbox_area02 .infor ul li:first-of-type{margin-top: 0px;}
.mainbox_area02 .infor ul li span{display: inline-block;color: #111; font-size: 14px;border: 1px solid #ccc; border-radius: 13px;width: 70px; background-color: #fff;text-align: center;vertical-align: middle;margin-right: 10px;padding: 2px 0;}
.mainbox_area02 .infor ul li p{width:calc(100% - 80px); display: inline-block;color: #111; font-size: 18px;word-break:break-all;vertical-align: top;}
.mainbox_area02 .infor ul li p > em{display: block;font-size: 15px; font-style: normal; word-break: keep-all;}

/* notice */
.mainbox_area02 .notice{position: relative;width: 40%;border: 1px solid #ddd;order: 2;}
.mainbox_area02 .notice h3 > a{display: inline-block; width: 25px; height: 25px; background: url("/resource/dino/images/dinosaur/main/icon_more.png")center no-repeat; border: 1px solid #ddd; overflow: hidden; text-indent: -500px; margin-left: 10px;position: absolute; right: 40px;}
.mainbox_area02 .notice ul{font-size: 0;}
.mainbox_area02 .notice ul li{margin-bottom: 10px;}
.mainbox_area02 .notice ul li a {position: relative;}
.mainbox_area02 .notice ul li .txt{ display: inline-block;font-size: 18px;width:calc(100% - 150px); overflow: hidden;white-space: nowrap;text-overflow: ellipsis; vertical-align: top;}
.mainbox_area02 .notice ul li .date{display: inline-block; font-size: 16px;color: #777;width: 130px;text-align: right; vertical-align: top;}


/* ticket */
.mainbox_area02 .ticket{position: relative;width: 25%; background:url("/resource/dino/images/dinosaur/main/ticket_bg.png") left bottom no-repeat,linear-gradient(90deg, rgba(47,19,138,1) 0%, rgba(70,30,214,1) 100%);order: 3;color: #fff;}
.mainbox_area02 .ticket > h3{color: #fff;}
.mainbox_area02 .ticket .btn_t{text-align: right;margin-top: 40px;}
.mainbox_area02 .ticket .btn_t a{color: #fff!important; display: inline-block;width: 200px; padding: 14px 40px;background: url("/resource/dino/images/dinosaur/main/ticket_arrow.png") 135px 15px no-repeat,linear-gradient(90deg, rgba(11,149,253,1) 0%, rgba(35,216,124,1) 100%);border-radius: 25px;text-align: left;}


@media all and (max-width :1420px) {
	.mainbox_area02 > div{flex-wrap: wrap;}
	.mainbox_area02 .infor{ order: 1; width: 48%;}
	.mainbox_area02 .ticket{order: 2;width: 48%;}
	.mainbox_area02 .notice{order: 3;width: 100%;margin-top: 4%;}
}


@media all and (max-width :767px) {
	.mainbox_area02 h3{font-size: 26px;}
	.mainbox_area02 .infor{width: 100%;}
	.mainbox_area02 .ticket{width: 100%;margin-top: 0;order: 3;}
	.mainbox_area02 .notice{width: 100%;order: 2;margin: 30px 0;}
}

@media all and (max-width :480px) {
	.mainbox_area02{ padding: 30px 0 70px;}
	.mainbox_area02 > div > div{padding: 30px}
	.mainbox_area02 .infor ul li p{font-size:16px;}

	.mainbox_area02 .infor ul li p > em{font-size: 14px;}
	.mainbox_area02 .notice ul li .date{display: none;}
	.mainbox_area02 .notice ul li .txt{width: 100%; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
	.mainbox_area02 .ticket .btn_t{margin-top: 20px;}
}

.quick-links { position: absolute; top: 20px; left: 20px; width: 180px; background: rgba(255, 255, 255, 0.9); border-radius: 10px; padding: 15px; z-index: 600; font-size: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.quick-links strong { display:block; text-align:center; color:#000;}
.quick-links strong span { display:block; font-size:20px; font-weight:bold; color:#37a173;}
.quick-links ul { padding: 10px 0; display:flex; gap:5px; flex-wrap:wrap; flex-direction:column; }
.quick-links li { display: flex; justify-content: space-between; max-width: 250px; align-items:center; border:1px solid #37a173; border-radius:10px; padding:3px 2px 3px 7px; color:#000;}
.quick-links p{ display:flex; align-items:center; justify-content:space-between;}
.quick-links p span{ display:flex; align-items:center; justify-content:center;}
.status { display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin: 0 5px}
.status.on { background-color: #28a745;}
.status.off { background-color: #dc3545;}

@media (max-width: 425px) {
	.quick-links { width:auto;}

}