@font-face{
	font-family:'branley';
	src: url('../../styles_fonts/branley.ttf');
}

@font-face{
	font-family:'epical';
	src: url('../../styles_fonts/epical.otf');
}

.batikBody{position: relative; z-index: 1;}
.batikLayout{max-width: 1000px;}

.batikPreview img{width: 100%;}

.batikTitle{width: 90%; padding-top: 25px;}
.batikTitle > div{padding-bottom: 30%;}

.batik_main{margin-top: 55px;}
.batik_main > div:first-child > div{padding-bottom: 50%;}
.batik_main > div:nth-child(2){margin-top: 55px; text-align: center; padding: 0px 20px; font-size: 25px; font-family: 'branley'; line-height: 40px;}

.batik_slider{margin-top: 55px; white-space: nowrap; overflow: hidden;}
.batik_slider > div{width: 400px; display: inline-block; cursor: pointer;}
.batik_slider > div:not(:last-child){margin-right: 25px;}
.batik_slider > div > div{padding-bottom: 70%;}

.batik_history{margin-top: 55px; padding: 0px 20px;}
.batik_history .bhTitle{font-size: 35px; font-weight: bold; font-family: 'epical'}
.batik_history .bhContent{margin-top: 35px; font-size: 17px; font-family: 'branley'; line-height: 30px;}
.batik_history .bhContent > div{display: grid; grid-template-columns: 200px 1fr; grid-gap: 25px;}
.batik_history .bhContent > div:not(:last-child){margin-bottom: 35px;}
.batik_history .bhContent > div > div{width: 100%;}
.batik_history .bhContent > div > div:first-child{color: #AC6D02;}

.batik_map{position: relative; margin-top: 55px;}
.batik_map .bmIcon{padding-bottom: 40%;}
.batik_map .bmTitle{max-width: 700px; text-align: center; position: absolute; top: 50%; left: 50%; font-size: 30px; transform: translate(-50%, -50%); font-family: 'branley';}

.batik_grid{margin-top: 55px; max-width: 800px; display: grid; align-items: center; grid-template-columns: 1fr 1fr; grid-gap: 35px;}
.batik_grid > div{width: 100%;}
.batik_grid .bgImg{cursor: pointer;}
.batik_grid .bgImg > div{padding-bottom: 100%;}
.batik_grid .bgTitle{text-align: right; font-size: 25px;}
.batik_grid .bgTitle > div{max-width: 250px; float: right; font-family: 'branley'; line-height: 40px;}

.batik_legend{margin-top: 55px; max-width: 800px;}
.batik_legend .blTitle{font-size: 45px; text-align: center; margin-bottom: 55px; font-family: 'branley'; color: #F89E08;}
.batik_legend .blContent{}
.batik_legend .blContent .bcHead{padding-bottom: 146%; position: relative;}
.batik_legend .blContent .bcHead .bhImg{position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);}
.batik_legend .blContent .bcHead .bhTitle{width: 100%; position: absolute; bottom: 25px; font-size: 35px; font-weight: bold; text-align: center; font-family: 'epical';}
.batik_legend .blContent .bcInfo{margin-top: 35px; font-size: 25px; text-align: center; font-family: 'branley'; line-height: 45px;}

.batik_colab{margin-top: 155px; padding-bottom: 55px;}
.batik_colab .blLogo{width: 700px; margin-bottom: 105px;}
.batik_colab .blLogo > div{padding-bottom: 15%;}
.batik_colab .blInfo{text-align: center; max-width: 900px; font-family: 'branley';}
.batik_colab .blInfo p{font-size: 20px; line-height: 35px;}

.batik_footer{text-align: center; margin-top: 25px; font-family: 'branley';}
.batik_footer > div:nth-child(2){margin-top: 15px; padding: 35px 0px 45px 0px; background: #d9d9d9;}
.batik_footer .bmTxt{max-width: 500px; padding: 0px 15px 15px 15px; font-family: 'regular';}
.batik_footer .bmSocmed{width: 200px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 20px; align-items: center;}
.batik_footer .bmSocmed > a{width: 100%;}
.batik_footer .bmSocmed > a > div{padding-bottom: 100%;}

@media screen and (max-width: 1100px) {
	.batik_slider{overflow: auto;}
}

@media screen and (max-width: 880px) {
	.batik_colab .blLogo{width: 450px;}
}

@media screen and (max-width: 835px) {
	.batik_grid .bgTitle > div{padding-right: 15px;}
}

@media screen and (max-width: 830px) {
	.batik_legend, .batik_colab{padding: 0px 20px;}
}

@media screen and (max-width: 720px) {
	.batik_map .bmTitle{left: unset; transform: unset; padding: 0px 20px;}
}

@media screen and (max-width: 705px) {
	.batik_grid .bgTitle{font-size: 18px;}
}

@media screen and (max-width: 660px) {
	.batik_grid{grid-gap: 20px;}
}

@media screen and (max-width: 640px) {
	.batik_colab .blLogo{width: 85%;}
}

@media screen and (max-width: 615px) {
	.batik_history .bhContent > div{grid-template-columns: 140px 1fr; grid-gap: 15px;}
}

@media screen and (max-width: 600px) {
	.batik_main > div:nth-child(2){font-size: 17px; line-height: 30px;}
}

@media screen and (max-width: 540px) {
	.batik_history .bhContent > div{grid-template-columns: 110px 1fr;}
}

@media screen and (max-width: 525px) {
	.batik_slider > div{width: 270px;}
	.batik_slider > div:not(:last-child){margin-right: 15px;}
	
	.batik_grid .bgTitle > div{line-height: 30px;}
}

@media screen and (max-width: 500px) {
	.batik_history .bhContent > div{grid-template-columns: 1fr;}
}

@media screen and (max-width: 460px) {
	.batik_grid .bgTitle{font-size: 15px;}
	.batik_grid .bgTitle > div{line-height: 22px;}
}