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

#main_visual {
    display: block;
    margin:0;
    border-bottom:1px solid #454462;
}

#main_visual > .visual_list {
    display: block;
    margin:0;
    min-width:320px;
    max-width:800px;
    height:200px;
    position: relative;
    overflow: hidden;
}

#main_visual > .visual_list > .visual_item {
    display: block;
    position: absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    opacity: 0;
    transition: all 600ms;
}

#main_visual > .visual_list > .visual_item.active {
    opacity: 1;
    transition: all 600ms;
}

#main_visual > .visual_list > .visual_item > .visual_bg {
    display: block;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    height:200px;
    object-fit: none;
    object-position: center;
}

#main_visual > .visual_list > .visual_item > .visual_entity {
    display: block;
    position:absolute;
    right:-150px;
    bottom:-100px;
    width:90%;
    max-width: 430px;
    object-fit:scale-down;
    object-position: bottom right;
    filter: brightness(0.6 );
    opacity: 0;
} 

#main_visual > .visual_list > .visual_item.active > .visual_entity {
    transition-delay: 200ms;
    transition-property: all;
    transition-duration: 400ms;
    bottom:-50px;
    right:-100px;
    opacity: 1;
}

#main_visual > .visual_list > .visual_item > .visual_label {
    display: block;
    position: absolute;
    top:50%;
    left:0px;
    right:0px;
    width:100%;
    max-width:430px;
    object-fit: scale-down;
    object-position: 10px center;
    margin-left:-50px;
    transform: translate(0,-50%);
    opacity: 0;
} 

#main_visual > .visual_list > .visual_item.active > .visual_label {
    transition-delay: 400ms;
    transition-property: all;
    transition-duration: 400ms;
    margin-left:0px;
    transform: translate(0,-50%);
    opacity: 1;
}

#main_visual > .visual_list > .visual_item > .visual_mask_left {
    display: block;
    position: absolute;
    /*right:50%;*/
    top:0px;
    bottom:0px;
}

#main_visual > .visual_list > .visual_item > .visual_mask_right {
    display: block;
    position: absolute;
    left:100%;
    top:0px;
    bottom:0px;
}

#main_visual .visual_btns {
    position:absolute;
    display: flex;
    left:50%;
    height:0px;
    bottom:50px;
    transform: translate(-50%, -50%);
	display:none;
}

#main_visual .visual_btns > .btn_circle {
    display: block;
    flex-shrink: 0;
    width:10px;
    height:10px;
    margin:10px;
    border-radius: 10px;
    background:#42425f;
    transform: translateY(-50%);
    cursor:pointer;
    transition: all 300ms;
}

#main_visual .visual_btns > .btn_circle.active {
    background:#ffc967;
    box-shadow: 0px 0px 20px 5px #ffc967;
    width:16px;
    height:16px;
    border-radius:10px;
    transition: all 300ms;
}



/* @media screen and (max-width: 560px) {	
	#main_visual > .visual_list > .visual_item.active > .visual_label {
		transform : translate(-50%,-50%) scale(0.6);
		left:37%;
	}
	#main_visual > .visual_list > .visual_item.active > .visual_entity {	
		transform : translate(-50%) scale(0.5);
		left:30%;
	}
}

@media screen and (max-width: 460px) {	
	#main_visual > .visual_list > .visual_item.active > .visual_label {
		transform : translate(-50%,-50%) scale(0.5);
		left:37%;
	}
	#main_visual > .visual_list > .visual_item.active > .visual_entity {	
		transform : translate(-50%) scale(0.5);
		left:25%;
	}
}
 */