/*-----------------------------------ORIGINS-----------------------------------------*/
/*-----------------------------------ORIGINS-----------------------------------------*/
/*-----------------------------------ORIGINS-----------------------------------------*/


/*----------------------------ENTRY-------------------------------------*/

#oriEntrySection .entryCon{
	position:relative;
	margin: var(--uniP-lg2) 0 0 0;
	display:grid;
	grid-template-columns: 2fr 3fr;
	grid-gap: var(--uniP);
}

#oriEntrySection .storyCon {
    padding: 0vw var(--uniP);
}

#oriEntrySection .storyCon .row-01{
	padding: 6vw 6vw 0vw 6vw;
}

#oriEntrySection .entryCon .col{
	position:relative;
	display:flex;
	flex-direction:column;
	justify-content: flex-end;
	gap: 6vw;
}

.oriTitle{
	font-size:12vw;
	min-width: max-content;
	text-transform: uppercase;
	position:relative;
	margin: 0 -30vw 0 0px;
	z-index: 1;
	color: var(--white01);
} 

#oriEntrySection .entryCon .subRow-02{
	position:relative;
	display:flex;
	gap: var(--uniP);
}

.oSamIMG{
	position:relative;
}

#oSam_wrpr01-e{
	width: clamp(120px, 52%, 360px);
    height: auto;
    margin: 3% 0 0 0;
}

.oHeroIMG_wrpr{
	position:relative;
}


#oriEntrySection .entryCon .subRow-02 .copyCon{
	position:relative;
	margin: var(--uniP) var(--uniP) var(--uniP) 0;
    padding: var(--uniP) 0;
	display:flex;
	flex-direction:column;
	gap: var(--uniP-sm);
	border-top: var(--orgLine01);
}

.storyCon .hwText{
	font-size:2vw;
	line-height: 1.33em;
	color: var(--org01);
}

.oHeroIMG_wrpr{
	position:relative;
}


/*----------------------------MAIN-------------------------------------*/

.chpSection{
	padding: 5vw 0;
}

.chpSection .sectCon{
	min-height: 200px;
	padding: 0 var(--uniP);
	display:grid;
	grid-template-columns: 3fr 5fr;	
	grid-gap: var(--uniP);
	/*grid-template-columns: 2fr 3fr;	*/

}

.chpSection .col-01{
	position:relative;
	display:flex;
	flex-direction:column;
	/*background-color:rgba(255,255,255,0.04);*/
}

.chpSection .col-02{
	position:relative;
	display:flex;
	flex-direction:column;
	/*background-color:rgba(255,255,255,0.08);*/
}

.yrTitle{
	font-size:4vw;
	color: var(--org01);
}

.tlCon{
	position:relative;
	width:100%;
	display:grid;
	grid-template-columns: 3fr 1fr 3fr;
	flex-grow: 1;
}

.tlCon .subCol{
	position:relative;
	width:100%;
	display:flex;
	justify-content:center;
}

.tlCon .subCol-03{
	justify-content: flex-start;
}

.tlCon .samsCol{
	position:relative;
	display:flex;
	flex-direction:column;
	align-items: center;
	justify-content:flex-start;
}

.oSam_wrpr{
	position:relative;
	width:100%;
}

.yrCon{
	position:relative;
	width:100%;
	display:flex;
}

.yrDot{
	position:absolute;
	width:20px;
	height:20px;
	top:0;
	left:0;
	right:0;
	margin:auto;
	border-radius: 100%;
	background-color:var(--org01);
}

.yrLine{
	position:absolute;
	width:1px;
	height:calc(100% + 14vw);
	height:calc(100% + 10vw + (var(--uniP) * 2));
	background-color:var(--org01);
	transform-origin: top;
}

.chaptMain{
	position:relative;
	display:flex;
	flex-direction:column;
}

.ch_preCon {
    position: relative;
    width: auto;
    padding: 0 0 var(--uniP-sm) 0;
    margin: 0 0 var(--uniP) 0;
    display: flex;
    justify-content: space-between;
}

.ch_preCon .fwLine{
	top: unset;
	bottom: 0;
}

.chptrCopyCon{
	position:relative;
	padding: var(--uniP) 0;
	display:grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: var(--uniP);
	
}

.chptrCopyCon .sbT03{
	line-height: 1.33em;
	margin: 0 0 var(--uniP-sm) 0;
}


/*--------------------CHAPTER-1----------*/

#chp1Section01{
	position:relative;
	min-height: 100vh;
}

#chp1Section01 .preCon{
	margin: var(--uniP) var(--uniP);
}

#chp1Section01 .ch_preCon{
	position:absolute;
	visibility: hidden;
}


.firstYrCon{
	justify-content: center;
	margin: -5% 0 var(--uniP-sm) 0;
}


#oSam_wrpr01{
	width:clamp(100px, 52%, 360px);
	top: -1vw;
}

#oSam_wrpr02{
	width:clamp(100px, 52%, 360px);
	top: 20vw;
}

#yrLine-01{
	height: clamp(130vw, 200%, 200vh);
	height: 0;

}


/*--------------------DEV-ART----------*/

.devArtMain{
	position:relative;
	width:100vw;
	height: fit-content;
	display:flex;
	align-items: center;
	overflow: hidden;
}

.devArtCon{
	position:relative;
	width:100%;
}

.mstrDA{
	position: relative;
	width:220%;
	/*width:100%;*/
	height:fit-content;
	aspect-ratio: 3680/984;
	/*background-color:rgba(255,255,255,0.33);*/
}

.mstrDAIMG{
	position:absolute;
	width:100%;
	height: 100%;
	opacity: 0.33;
}

.da_wrpr_o{
	position:absolute;
	width:10%;
	height:auto;
	top: unset;
	left: unset;
	bottom: unset;
	right: unset;
	z-index: 1;
	opacity: 0;
	opacity: 1;
	cursor: pointer;
}

.daIMG{
	transition: 200ms ease-out;
}	


.da_wrpr_i{
	position:relative;
	width:100%;
	height: auto;
	filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.3));
}

.da_wrpr_o:hover{
	    z-index: 1000 !important;
}

.da_wrpr_o:hover .daIMG{
	    transform: rotate(0deg) scale(1.1) !important;
	    z-index: 1000 !important;
		filter: drop-shadow(10px 10px 26px rgba(0, 0, 0, 0.66));

}

#daItem-01 {
    width: 13%;
    top: 23%;
    left: -1%;
    z-index: 7;
}

#daItem-01 .daIMG{
    transform: rotate(-5deg);
}

#daItem-02 {
    width: 9%;
    top: 62%;
    left: 2%;
    z-index: 3;
}

#daItem-02 .daIMG{
	transform: rotate(5deg);
}

#daItem-03 {
    width: 12%;
    top: 41%;
    left: 8%;
    z-index: 6;
}

#daItem-03 .daIMG{
	transform: rotate(-11deg);
}

#daItem-04 {
    width: 15%;
    top: 13%;
    left: 10%;
    z-index: 3;
}

#daItem-04 .daIMG{
	transform: rotate(19deg);
}

#daItem-05 {
    width: 11%;
    top: 57%;
    left: 17%;
    z-index: 5;
}

#daItem-05 .daIMG{
	transform: rotate(-9deg);
}

#daItem-06 {
    width: 15%;
    top: 17%;
    left: 23%;
    z-index: 4;
}

#daItem-06 .daIMG{
	transform: rotate(5deg);
}

#daItem-07 {
    width: 13%;
    top: 59%;
    left: 26%;
    z-index: 5;
}

#daItem-07 .daIMG{
	transform: rotate(-15deg);
}

#daItem-08 {
    width: 11%;
    top: 8%;
    left: 38%;
    z-index: 3;
}

#daItem-08 .daIMG{
	transform: rotate(-3deg);
}

#daItem-09 {
    width: 13%;
    top: 58%;
    left: 39%;
    z-index: 4;
}

#daItem-09 .daIMG{
	transform: rotate(12deg);
}

#daItem-10 {
    width: 14%;
    top: 32%;
    left: 34%;
    z-index: 3;
}

#daItem-10 .daIMG{
	transform: rotate(-3deg);
}

#daItem-11 {
    width: 16%;
    top: 9%;
    left: 49%;
    z-index: 2;
}

#daItem-11 .daIMG{
	transform: rotate(13deg);
}

#daItem-12 {
    width: 16%;
    top: 39%;
    left: 45%;
    z-index: 2;
}

#daItem-12 .daIMG{
	transform: rotate(-11deg);
}

#daItem-13 {
    width: 10%;
    top: 64%;
    left: 55%;
    z-index: 2;
}

#daItem-13 .daIMG{
	 transform: rotate(25deg);
}

#daItem-14 {
    width: 16%;
    top: 36%;
    left: 59%;
    z-index: 1;
}

#daItem-14 .daIMG{
	transform: rotate(7deg);
}

#daItem-15 {
    width: 12%;
    top: 7%;
    left: 68%;
    z-index: 2;
}

#daItem-15 .daIMG{
	transform: rotate(9deg);
}

#daItem-16 {
    width: 15%;
    top: 63%;
    left: 65%;
    z-index: 2;
}

#daItem-16 .daIMG{
	transform: rotate(-1deg);
}

#daItem-17 {
    width: 12%;
    top: 14%;
    left: 77%;
    z-index: 3;
}

#daItem-17 .daIMG{
	transform: rotate(-15deg);
}

#daItem-18 {
    width: 12%;
    top: 51%;
    left: 76%;
    z-index: 3;
}

#daItem-18 .daIMG{
	transform: rotate(5deg);
}

#daItem-19 {
    width: 11%;
    top: 15%;
    left: 84%;
    z-index: 1;
}

#daItem-19 .daIMG{
	transform: rotate(8deg);
}

#daItem-20 {
    width: 13%;
    top: 57%;
    left: 85%;
    z-index: 2;
}

#daItem-20 .daIMG{
	transform: rotate(-11deg);
}

#daItem-21 {
    width: 9%;
    top: 17%;
    left: 90%;
    z-index: 1;
}

#daItem-21 .daIMG{
	transform: rotate(19deg);
}


/*--------------------CHAPTER-2----------*/

.altYrTitle{
	font-size:2vw;
	line-height: 1.66em;
	height: fit-content;
	color: var(--org01);
}

#oSam_wrpr03{
	width:clamp(120px, 75%, 360px);
	top: -1vw;
}

#oSam_wrpr04{
	width:clamp(120px, 75%, 360px);
	top: 25vw;
}

.altYrTitle .downArr{
	display: none;
}

/*--------------------CHAPTER-3----------*/


#oSam_wrpr05{
	width: clamp(120px, 95%, 360px);
    top: 5vw;
}

#oSam_wrpr06{
	width: clamp(120px, 55%, 360px);
    top: 35vw;
}


/*--------------------CHAPTER-4----------*/


#oSam_wrpr07{
	width: clamp(120px, 75%, 360px);
    top: 35vw;
}

#oSam_wrpr08{
	width: clamp(120px, 55%, 360px);
    top: 65vw;
}


#chp4Section01 .caroCon{
	position:relative;
	display:flex;
	flex-direction:column;
	grid-gap: var(--uniP-sm);
}

.caroControls{
	position:relative;
	width:fit-content;
	height:fit-content;
}

.caroSidebar{
	position: absolute;
	left: -25px;
    bottom: 10px;
	display:flex;
	flex-direction:column;
	align-items: center;
	display: none;
}

.caroControls{
	position:relative;
	display:flex;
	flex-direction:column;
	align-items: center;
	gap: 8px;
}

.caroDot{
	position:relative;
	width:12px;
	height:12px;
	border-radius: 100%;
	border:var(--orgLine01);
	display:flex;
}

.caroDot.curr{
	background-color:var(--org01);
}

.caroBtn{
	writing-mode: sideways-rl;
}

.caroDataBlk{
	position:relative;
	margin: 6vw 0 0 0;
	display:flex;
	writing-mode: sideways-lr;
	gap: 2vw;
}

#chp4Section01 .subRow-03 .titleCon{
	position:relative;
	margin: var(--uniP-lg2) 0 var(--uniP) 0;
	display:flex;
	justify-content:space-between;
}

#chp4Section01 .subRow-03 .titleCon .acc01{
	width:clamp(120px, 30%, 210px);
}

.dlGrid{
	position:relative;
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: var(--uniP);
}


/*--------------------CHAPTER-5----------*/

#chp5Section01 .bgCon{
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    display: flex;
    padding: 0;
    margin: 0;
    overflow: hidden;
    pointer-events: none;
}


.outroTitle{
	font-size: clamp(1rem, 4vw, 5rem);
    line-height: 1.33em;
    letter-spacing: 7%;
    margin: var(--uniP-lg1) 0;
    color: var(--white01);
}


#yrLine-05{
	position: absolute;
	visibility: hidden;
	height:0;
	width:0;
}

#dlPortalSection01 .catTitle{
	display: none;
}