@charset "utf-8";
/* CSS Document */
.title h2{
	font-family: Branch;
	font-size: 11rem;
	color:#16110e;
}
.title h2 span{
	display:block;
	font-size:6rem;
	color:#161616;
	font-family: Branch;
}
.story{
	width:78.125%;
	margin:13rem auto;
	padding-top:13rem;
	padding-bottom:13rem;
	padding-left:12rem;
	background-size:cover;
	background-repeat: no-repeat;
}
.story p{
	display:block;
	font-size:2rem;
	color:#161616;
	letter-spacing:2px; 
	line-height: 1.9;
}
.story .circle{
	display:block;
	position: relative;
	z-index: 1;
	width:105px;
	height:105px;
	FONT-SIZE:20PX;
	color:#fff;
	font-weight: 600;
	text-align: center;
	border-radius: 50%;
	background: #16110e;
	line-height: 105px;
	margin-top: 12rem;
	-webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s;
    -moz-transition: -moz-transform ease-out 0.1s, background 0.2s;
    transition: transform ease-out 0.1s, background 0.2s;
}
.story .circle:hover{
	background: transparent;
	color:#16110e;
	border:1px solid #16110e;
}
.story .circle:after{
	pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    content: '';
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
	top: 0;
    left: 0;
    padding: 0;
    z-index: -1;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
    opacity: 0;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
}
.story .circle:hover:after{
	-webkit-animation: sonarEffect 1.3s ease-out 75ms;
    -moz-animation: sonarEffect 1.3s ease-out 75ms;
    animation: sonarEffect 1.3s ease-out 75ms;
}

@keyframes sonarEffect {
	0% {
		opacity: 0.3;
	}
	40% {
		opacity: 0.5;
		box-shadow: 0 0 0 10px rgba(0,0,0,0.1), 0 0 10px 10px #5c5c5c, 0 0 0 6px rgba(0,0,0,0.5);
	}
	100% {
		box-shadow: 0 0 0 10px rgba(0,0,0,0.1), 0 0 10px 10px #5c5c5c, 0 0 0 6px rgba(0,0,0,0.5);
		transform: scale(1.1);
		opacity: 0;
	}
}
.pclass .swiper{position:relative;}
.pclass .p-item{
	position:relative;
}
.pclass .swiper-pagination{
    position:static;
    margin-top:30px;
}
.pclass .swiper-pagination-bullet-active{
    background: #212121;
}
.pclass .swiper-button-next,.pclass .swiper-button-prev{
    display:flex;
    justify-content: center;
    align-items: center;
    width:50px;
    height:50px;
    background: rgba(0,0,0,.4);
    border-radius: 3px;
}
.pclass .swiper-button-next:hover,
.pclass .swiper-button-prev:hover{
    background: #000;
}
.pclass .p-item .p-con{
	position:absolute;
	z-index: 2;
	left:50%;
	top:50%;
	transform: translate(-50%,-50%);
	text-align: center;
}
.pclass .p-item .p-con h2{
	font-size:3.4rem;
	font-weight: bold;
	color:#fff;
}
.pclass .p-item .p-con a{
	display:inline-block;
	margin:0 auto;
	padding:5px 22px;
	border:1px solid rgba(255,255,255,.6);
	color:#fff;
	margin-top:15px;
	border-radius: 2px;
}
.pclass .p-item .p-con a:hover{
	background:#fff;
	color:#212121;
}
.bc .ts h2{
	font-family: Branch;
	font-size:5.4rem;
	color:#010101;
	margin-top:12rem;
	margin-bottom: 3rem;
}
.bc-txt{
	display:flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	padding:12rem 7.5rem;
	box-sizing: border-box;
	max-width:83.1rem;
}
.bc-txt h4{
	font-size:2.8rem;
	line-height: 4.8rem;
	color:#000;
	text-align: center;
	padding:0 5rem;
}
.bc-txt p{
	font-size:2rem;
	line-height: 1.9;
	color:#000;
	text-align: center;
	padding:0 2rem;
}
.bc-txt a{
	display:block;
	width:100%;
	background: #000;
	color:#fff;
	font-size:2rem;
	text-align: center;
	line-height: 50px;
	border:1px solid #000;
	-webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s;
    -moz-transition: -moz-transform ease-out 0.1s, background 0.2s;
    transition: transform ease-out 0.1s, background 0.2s;
}
.bc-txt a:hover{
	background:#fff;
	color:#000;
}
.ibtn .container{
	position:relative;
	margin:15rem auto;
}
.ibtn-word{
	position:absolute;
	width:100%;
	z-index: 1;
	left: 50%;
	top:50%;
	text-align: center;
	transform: translate(-50%,-50%);
}
.ibtn-word p{
	font-size:5.4rem;
	font-family: Branch;
	color:#fff;
}
.ibtn-word h2{
	font-size:5.4rem;
	font-family: Flower;
	color:#fff;
	padding-top:5rem;
	letter-spacing: 3.375px;
}