.side_line{
	position:fixed;
	left:0;
	width: 38px;
	height:100%;
	background:#c8d7ca;
}

.top_item{
	
}



.top_item > div{
	position:absolute;
	opacity:0;
}

.top_item > div a{
	pointer-events: none;
}


.top_item > div.top_item01{
	width: 36%;
	top: -120px;
	left: 0;
	z-index: 6;
}

.open .top_item > div.top_item01{
	top: 120px;
	opacity:1;
	-webkit-transition: 1.2s cubic-bezier(0.78, .18, .34, .98) .4s;
	-moz-transition: 1.2s cubic-bezier(0.78, .18, .34, .98) .4s;
	-ms-transition: 1.2s cubic-bezier(0.78, .18, .34, .98) .4s;
	-o-transition: 1.2s cubic-bezier(0.78, .18, .34, .98) .4s;
	transition: 1.2s cubic-bezier(0.78, .18, .34, .98) .4s;
}

.top_item > div.top_item02{
	width: 30%;
	top: -137px;
	left: 30%;
	z-index: 10;
}

.open .top_item > div.top_item02{
	top: 137px;
	opacity:1;
	-webkit-transition: 1s cubic-bezier(0.78, .18, .34, .98) .6s;
	-moz-transition: 1s cubic-bezier(0.78, .18, .34, .98) .6s;
	-ms-transition: 1s cubic-bezier(0.78, .18, .34, .98) .6s;
	-o-transition: 1s cubic-bezier(0.78, .18, .34, .98) .6s;
	transition: 1s cubic-bezier(0.78, .18, .34, .98) .6s;
}

.top_item > div.top_item03{
    width: 29%;
    top: -92px;
    right: 20%;
	z-index: 10;
}

.open .top_item > div.top_item03{
	top: 92px;
	opacity:1;
	-webkit-transition: 1.2s cubic-bezier(0.78, .18, .34, .98) .8s;
	-moz-transition: 1.2s cubic-bezier(0.78, .18, .34, .98) .8s;
	-ms-transition: 1.2s cubic-bezier(0.78, .18, .34, .98) .8s;
	-o-transition: 1.2s cubic-bezier(0.78, .18, .34, .98) .8s;
	transition: 1.2s cubic-bezier(0.78, .18, .34, .98) .8s;
}

.top_item > div.top_item04{
	width: 32%;
	top: -50px;
	right: 0;
}

.open .top_item > div.top_item04{
	top: 220px;
	opacity:1;
	-webkit-transition: 1.2s cubic-bezier(0.78, .18, .34, .98) 1s;
	-moz-transition: 1.2s cubic-bezier(0.78, .18, .34, .98) 1s;
	-ms-transition: 1.2s cubic-bezier(0.78, .18, .34, .98) 1s;
	-o-transition: 1.2s cubic-bezier(0.78, .18, .34, .98) 1s;
	transition: 1.2s cubic-bezier(0.78, .18, .34, .98) 1s;
}

.top_item > div.top_item05{
	width: 20%;
	top: -50px;
	right: 32px;
	z-index:8;
}

.open .top_item > div.top_item05{
	top: 175px;
	opacity:1;
	-webkit-transition: 1.2s cubic-bezier(0.78, .18, .34, .98) 1s;
	-moz-transition: 1.2s cubic-bezier(0.78, .18, .34, .98) 1s;
	-ms-transition: 1.2s cubic-bezier(0.78, .18, .34, .98) 1s;
	-o-transition: 1.2s cubic-bezier(0.78, .18, .34, .98) 1s;
	transition: 1.2s cubic-bezier(0.78, .18, .34, .98) 1s;
}

.top_item > div.top_item06{
    width: 42%;
    top: 150px;
    left: 6%;
    z-index: 9;
}

.open .top_item > div.top_item06{
	top: 350px;
	opacity:1;
	-webkit-transition: 1.2s cubic-bezier(0.78, .18, .34, .98) 1s;
	-moz-transition: 1.2s cubic-bezier(0.78, .18, .34, .98) 1s;
	-ms-transition: 1.2s cubic-bezier(0.78, .18, .34, .98) 1s;
	-o-transition: 1.2s cubic-bezier(0.78, .18, .34, .98) 1s;
	transition: 1.2s cubic-bezier(0.78, .18, .34, .98) 1s;
}


.top_item > div.top_item07{
	width: 30%;
	top: 350px;
	left: 11%;
	z-index: 10;
}

.open .top_item > div.top_item07{
	top: 560px;
	opacity:1;
	-webkit-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.4s;
	-moz-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.4s;
	-ms-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.4s;
	-o-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.4s;
	transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.4s;
}


.top_item > div.top_item08{
	width: 22%;
	top: -150px;
	right: 11%;
	z-index: 10;
}

.open .top_item > div.top_item08{
	top: -70px;
	opacity:1;
	-webkit-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.4s;
	-moz-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.4s;
	-ms-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.4s;
	-o-transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.4s;
	transition: .8s cubic-bezier(0.78, .18, .34, .98) 1.4s;
}




























.main_copy_sec{
	z-index: 99;
	position: relative;
	margin-top: 460px;
	background:rgba(227,235,228,0.8);
	padding:30px 0;
	text-align:center;
}

.main_copy{
	width:340px;
	position:relative;
	display:inline-block;
}


.main_copy span{
	width:140px;
	display:block;
	position:absolute;
	top:-20px;
	right:-120px;
}

.main_copy_note {
	text-align: center;
	margin-top: 10px;
	position: relative;
	z-index: 99;
}

.main_copy_note p{
	display:inline-block;
	font-size: 17px;
	text-align:left;
}


	
.content_index{
	margin-top: 100px;
}


.content_index_inner {
	width: 1120px;
	padding: 0 120px;
	margin: 0 auto;
}


.content_box{
	position:relative;
	padding-top: 80px;
	padding-bottom:100px;
}

.bg_diamond{
	position:absolute;
	top:10%;
	right:-25px;
	z-index:-9;
	width:440px;
}
	


.content_title .title{
	border-bottom:1px solid #000;
	padding-left:5px;
	padding-bottom:18px;
}

.content_title .title p{
	line-height: 100%;
	font-size:45px;
	font-weight:100;
	font-family: "futura-pt", sans-serif;
}

.content_title .note{
	width:35%;
	margin-top:10px;
	padding-left:5px;
}


.content_title .note p{
	font-size:14px;
	line-height:160%;
}








	
	.content_item{
	width:32%;
	float:right;
	margin-top: -280px;
	z-index: 99;
	position: relative;
	margin-top: -180px;
	margin-right: -60px;
	}
		
	
	.content_item {
    position: absolute;
    right: 0;
    top: 200px;
    width: 400px;
    height: 660px;
	}
				
.image-container {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: rotateY 7s infinite; /* Adjusted to account for pauses */
}

.image {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

.front {
    transform: rotateY(0deg);
}

.back {
    transform: rotateY(180deg);
}

/* Keyframes with pauses at 0deg and 180deg */
@keyframes rotateY {
    0% {
        transform: rotateY(0deg);
    }
    40% {
        transform: rotateY(0deg); /* Pause on front */
    }
    50% {
        transform: rotateY(180deg); /* Rotate to back */
    }
    90% {
        transform: rotateY(180deg); /* Pause on back */
    }
    100% {
        transform: rotateY(360deg); /* Rotate back to front */
    }
}






.content_copy{
	width:60%;
    position: relative;
    margin-top: 80px;
    text-align: center;
}



.content_copy .title p{
	font-size:18px;
	font-weight:bold;
	text-align: center;
}

.content_copy .note{
	margin-top:5px;
}

.content_copy .note p{
	font-size:14px;
	line-height:160%;
	font-weight: bold;
	text-align: center;
}


.content_info{
	width:60%;
    position: relative;
    margin-top: 40px;
    z-index: 99;
    text-align: center;
}





	

.content_info .title p{
	font-size: 22px;
	font-weight:bold;
}

.content_info .note{
	margin-top:5px;
}

.content_info .note p{
	font-size:14px;
	line-height:160%;
}

.content_info .note a{
	font-size:13px;
	line-height:160%;
}










@media screen and (max-width: 640px){
	
	
	.main_copy_sec {
		margin-top: 280px;
		padding: 25px 0;
	}
	
	.main_copy {
		width: 60%;
	}
	
	.main_copy span {
		width: 88px;
		top: -30px;
		right: -67px;
	}
	
	
	
	.content_index {
		margin-top: 60px;
	}
	
	
	.content_index_inner {
		width: 100%;
		padding: 0 0px;
	}
	
	.content_box {
		display: block;
		padding: 0 40px;
		margin-bottom:80px;
	}
	
	
	
	
	.side_line {
		width: 20px;
	}
	
	
	
	
	.top_item > div.top_item01 {
		width: 52%;
		top: 0px;
		left: 0;
	}
	
	.open .top_item > div.top_item01 {
		top: 40px;
	}
	
	
	.top_item > div.top_item02 {
		width: 40%;
		top: 19px;
		left: 43%;
	}
	
	.open .top_item > div.top_item02 {
		top: 39px;
	}
	
	.top_item > div.top_item03 {
		width: 38%;
		top: 26px;
		right: 0;
	}
	
	.open .top_item > div.top_item03 {
		top: 46px;
	}
	
	.top_item > div.top_item04 {
		width: 42%;
		top: 320px;
	}
	
	.open .top_item > div.top_item04 {
		top: 350px;
	}
	
	.top_item > div.top_item05 {
		width: 28%;
		top: 282px;
		right: 30px;
	}
	
	.open .top_item > div.top_item05 {
		top: 300px;
	}
	
	.top_item > div.top_item06 {
		width: 60%;
		top: 108px;
		left: 12%;
	}
	
	.open .top_item > div.top_item06 {
		top: 128px;
	}
	
	
	.top_item > div.top_item07 {
        width: 50%;
        top: 170px;
        left: 20%;
	}
	
	.open .top_item > div.top_item07 {
		top: 190px;
	}
	
	
	.top_item > div.top_item08 {
		top: 140px;
		right: 0;
		width: 35%;
	}
	
	.open .top_item > div.top_item08 {
		top: 170px;
		right: 0;
		width: 35%;
	}
	
	
	.main_copy_note {
		text-align: left;
		padding-left: 40px;
		width: 52%;
	}
	
	
	.main_copy_note p {
		font-size: 12px;
		line-height: 250%;
	}
	
	
	.content_item {
		position: relative;
		width: 100%;
		height: auto;
		margin-top: 0;
		margin-right: 0;
		top: 0;
		left: auto;
		right:auto;
		float:none;
	}
	
	
	.image{
		top: 0;
	}
	
	#image1{
		
	}
	
	
	
	
	
	
	.content_title .title p {
		font-size: 36px;
	}
	
	.content_title .title {
		padding-left: 10px;
		padding-bottom: 7px;
	}
	
	
	.content_title .note {
		width: 100%;
		margin-top: 5px;
		padding-left: 10px;
	}
	
	.content_title .note p {
		font-size: 11px;
	}
	
	
	
	
	.content_copy .title p {
		font-size: 15px;
	}
	
	.content_copy .note p {
		font-size: 11px;
	}
	
	.content_copy:after {
		width: 240px;
		height: 240px;
		top: -22%;
		left: -27%;
	}
	
	.content_copy {
		z-index: -9;
		width: 100%;
		margin-top: 0px;
	}
	
	
	
	.content_info .title p {
		font-size: 16px;
	}
	
	
	.content_info .note p {
		font-size: 11px;
	}
	
	.content_info .note a {
		font-size: 11px;
	}
	
	
	.content_info {
		width: 100%;
		margin-top: 20px;
		z-index: 99;
	}
	
	
	
	.content_info:after {
		width: 140px;
		height: 140px;
		top: -40%;
		left: -5%;
	}
	
	
	
	.bg_diamond {
		top: 0%;
		right: -20px;
		width: 90%;
	}
	
	
	
	
}


@media screen and (max-width: 390px){
	
	

}