@charset "utf-8";

/*------------------------------
     catalog Layout 
	created: 2025.06.16 
	updated: 2025.06.16
------------------------------*/
#wrapper,
header,
footer { max-width: 1250px; }

#contents {
	background-color: #E8E8E8;
	padding: 0;
    font-size: 0.95rem;
}

#titles {
	background-color: #262626;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    padding: 20px 30px;
}

#titles h1 {
    display: flex;
    align-items: center;
    column-gap: 1rem;
}

#titles #rightNavi ul {
    display: flex;
    align-items: bottom;
    column-gap: 10px;
}

#titles #rightNavi ul li,
#titles #rightNavi ul li a { display: block; height: 78px; text-decoration: none;}

#titles #rightNavi ul li#toHome { background: url("../../images/Top.png") no-repeat top center;}

#titles #rightNavi ul li#toRandD { 
    background: url("../../../R-D_support/images/logo.png") no-repeat top center;
    background-size: 60px 60px;
    text-align: center;
}

#titles #rightNavi ul li#toRandD a {
    display: flex;
    align-items: flex-end;
}

#breadcrumbs { padding: 10px 30px;}

#breadcrumbs a {
    color: black;
    text-decoration: none;
}

#breadcrumbs a:hover,
#breadcrumbs a:active {
    color:  firebrick;
    text-decoration: underline;
}

#article { padding: 50px; }


@media only screen and  (max-width: 680px){
    #titles {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 20px;
    }
    
    #titles #rightNavi { margin-left: auto; }
    
    #notes {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 30px;
    }
    
    #article { padding: 50px 30px; }
    
    iframe { height: 1024px !important;}
}