header {
background: rgba(238, 238, 238, 0);
}
/*---------------------------------------
SECTION
-----------------------------------------*/
/* HERO */
#Hero-area {
background-image: url('https://t2biomod2024.github.io/2024/pics/home/1-title.gif'), url('https://t2biomod2024.github.io/2024/pics/home/2-title.png');
background-size: 50%, cover;
background-position: top 55% right 43%, center;
background-color: #7f96c2;
background-blend-mode: normal;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
/* MOVIE */
.Movie-area {
position: relative;
background: var(--primary-color);
color: var(--white-color);
padding: var(--global-space);
margin-left: calc(-1 * var(--global-space));
margin-right: calc(-1 * var(--global-space));
margin-bottom: 10vw;
margin-top: 10vw;
}
.Movie-area::before, .Movie-area::after{
content: "";
position: absolute;
left: 0;
width: 100%;
height: calc(5vw + 1px);
background: var(--primary-color);
}
.Movie-area::before {
top: -5vw;
clip-path: polygon(0 100%, 100% 20%, 100% 100%);
}
.Movie-area::after {
bottom: -5vw;
clip-path: polygon(0 0, 100% 0, 0 80%);
}
.Movie-area a{
color: inherit;
}
/* CONTENTS */
.Contents-area {
background-size: cover;
width: 100%;
margin: 0 auto 10vh;
padding: 20px;
}
/*---------------------------------------
CONTAINER
-----------------------------------------*/
/* img-container */
.img-container {
background-image: url('https://t2biomod2024.github.io/2024/pics/team1.jpeg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: relative;
width: 70%;
height: 50vh;
border-radius: 20px;
cursor: pointer;
display: inline-block;
margin: 0 auto;
text-align: center;
overflow: hidden;
}
.img-container::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.3s ease;
}
.img-container:hover::after {
opacity: 1;
}
/* solution-container */
.solution-container {
margin: 0 auto 10vh;
padding-top: 100px;
width: 100%;
color: var(--white-color);
padding-left: 70px;
}
.solution-container a {
color: var(--white-color);
}
.solution-container h4 {
position: relative;
padding: 1rem 2rem calc(1rem + 8px);
background: #7f96c2;
}
.solution-container h4:before {
position: absolute;
top: -5px;
left: -5px;
width: 100%;
height: 100%;
content: '';
border: 4px solid #eee;
;
}
/* contents-text-container */
.contents-text-container {
display: flex;
flex-direction: column;
}
/* video-container */
.video-container {
width: 50%;
max-width: 800px;
aspect-ratio: 16 / 9;
margin: 0 auto;
position: relative;
}
.video-container iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.tab-container{
margin-left: auto;
margin-right: auto;
padding-left: 20vh;
padding-right: 20vh;
}
/*---------------------------------------
IMG
-----------------------------------------*/
.img-contain {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #eee;
font-size: 20px;
opacity: 0;
transition: opacity 0.3s ease;
text-align: center;
z-index: 2;
margin-bottom: 1em;
}
.img-container:hover .img-contain {
opacity: 1;
}
.hometeam-text{
color: #eee;
font-size: 20px;
padding-top: 20px;
}
.contents-title{
font-weight: 500;
}
.lead {
font-size: 1.1rem;
}
/*---------------------------------------
CONTENTS-BLOCK
-----------------------------------------*/
.contents-block {
background-color: rgba(255, 255, 255, 0.8);
border-radius: var(--border-radius-medium);
position: relative;
overflow: hidden;
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 20px;
transition: box-shadow 0.3s;
word-wrap: break-word;
}
.contents-block div {
flex: 1;
}
.contents-block img {
width: auto;
height: 200px;
border-radius: 20px;
background: #fff;
}
.contents-block .contents-title{
color: #6f6f6f;
display: inline-block;
font-size: 24px;
font-weight: 300;
transition: color 0.3s;
}
.contents-block:hover {
background-color: var(--secondary-color);
box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
transform: translateY(-3px);
text-decoration: none;
}
.contents-block:hover * {
text-decoration: none;
}
.contents-block > a {
width: 100%;
}
.contents-block:hover p {
color: #555;
text-decoration: none;
}
.contents-block:hover .contents-title {
color: var(--primary-color);
}
.contents-text {
color: #A2A2A2;
text-indent: 1em;
font-size: 16px;
line-height: 26px;
transition: color 0.3s;
margin-top: 1px;
}
.pink {
color: #FF4838;
font-weight: bold;
}
/*---------------------------------------
DIV
-----------------------------------------*/
/* Hero-area_down */
.Hero-area_down{
background: #eee;
overflow:hidden;
position:relative;
margin-left: calc(-1 * var(--global-space));
height: 100px;
}
.Hero-area_down::before{
content:'';
position: absolute;
z-index: 3;
pointer-events: none;
background-repeat: no-repeat;
bottom: -0.1vw;
left: -0.1vw;
right: -0.1vw;
top: -0.1vw;
background-size: 100% 90px;
background-position: 50% 0%; background-image: url('data:image/svg+xml;charset=utf8, ');
}
@media (min-width:2100px){
.Hero-area_down::before{
background-size: 100% calc(2vw + 90px);
}
}
/* Solution_top */
.shapedividers_solution_top{
overflow:hidden;
position:relative;
margin-left: calc(-1 * var(--global-space));
margin-right: calc(-1 * var(--global-space));
margin-top: var(--global-space);
height: 100px;
}
.shapedividers_solution_top::before{
content:'';
position: absolute;
z-index: 3;
pointer-events: none;
background-repeat: no-repeat;
bottom: -0.1vw;
left: -0.1vw;
right: -0.1vw;
top: -0.1vw;
background-size: 100% 45px;
background-position: 50% 100%; background-image: url('data:image/svg+xml;charset=utf8, ');
}
@media (min-width:2100px){
.shapedividers_solution_top::before{
background-size: 100% calc(2vw + 45px);
}
}
/* Solution_down */
.shapedividers_solution_down{
overflow:hidden;
position:relative;
margin-left: calc(-1 * var(--global-space));
margin-right: calc(-1 * var(--global-space));
margin-bottom: var(--global-space);
height: 100px;
}
.shapedividers_solution_down::after{
content:'';
position: absolute;
z-index: 3;
pointer-events: none;
background-repeat: no-repeat;
bottom: -0.1vw;
left: -0.1vw;
right: -0.1vw;
top: -0.1vw;
background-size: 100% 45px;
background-position: 50% 0%; background-image: url('data:image/svg+xml;charset=utf8, ');
}
@media (min-width:2100px){
.shapedividers_solution_down1::before{
background-size: 100% calc(2vw + 45px);
}
}