#brand_banner_container{width: 100%; display: block; position: relative; margin: 0; padding: 0; }
#brand_banner_container > img{ width: 100%; display: block;}
#brand_banner_container > div{
    position: absolute; width: 30%; left:10%;
    top:50%; transform: translateY(-50%);
}
#brand_banner_container > div > h1,
#brand_banner_container > div > h2,
#brand_banner_container > div > h3,
#brand_banner_container > div > h4,
#brand_banner_container > div > h5
{margin:0; line-height: 1.6;text-align: justify;}

#brand_banner_container > div > h1{ color:var(--menubackground);}
#brand_banner_container > div > h4{ color:var(--superDrakCoffee); font-weight: 300; }

.center_container{
    width: 100%; gap:120px;
    padding:0px 5%;
    }
.center_area{
    width: 100%; max-width: 1400px;  margin:0; gap:60px;
    display:flex; flex-direction: row; justify-content: center; align-items: center;
}
/*
.max1400_content_area{
    width: 100%; border:1px #c00 solid;
}
*/
.wpercent{flex:0 0 60%;}
.wauto{flex:1;}

.layout_photo_area{ width: 100%; padding-top:90%; position: relative;}
.layout_photo_area > .main_view_left{ width:90%; position: absolute; left:0; top:0}
.layout_photo_area > .main_view_right{ width:90%; position: absolute; right:0; top:0}
.layout_photo_area > .sub_view_left{ width:40%; position: absolute; left:0; bottom:0;}
.layout_photo_area > .sub_view_right{ width:40%; position: absolute; right:0; bottom:0;}
.layout_photo_area > .main_view_left > img, 
.layout_photo_area > .sub_view_left > img,
.layout_photo_area > .main_view_right > img, 
.layout_photo_area > .sub_view_right > img{
    width: 100%; height: auto; display: block; border-radius: 30px;
}

.layout_photo_area > .remark_area{ width: 60%; position: absolute; left:0; top: 78% ; gap:10px}
.layout_photo_area > .remark_area > .remark_imgs{ flex:0 0 85px;}
.layout_photo_area > .remark_area > .remark_imgs > img{ width: 100%;}
.layout_photo_area > .remark_area > .remark_txt{ flex:1; padding:0 10px; }
.layout_photo_area > .remark_area > .remark_txt > h4{margin: 0; text-align: left; font-weight: 700; color:var(--coffee)}
.layout_photo_area > .remark_area > .remark_txt > h5{
    margin: 0;
    text-align: justify;
    display: -webkit-box; 
    display: -moz-box;
    line-clamp: 3; 
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.center_data_area{ width: 100%;}
.center_data_area > h2{margin: 0;}
.center_data_area > h3{margin: 0;}
.center_data_area > h4{margin: 0;}
.center_data_area > h5{text-align: justify; line-height: 2;}

#principle_container{width: 100%; text-align: center; padding:80px 5%;}
.principle_area{width: 100%; max-width: 1600px; margin: 0 auto;}
.principle_caption{width: max-content; margin: 0 auto;}
.principle_caption > h3{width: max-content;}
.principle_area > ul{ 
    width: 100%; list-style: none; padding: 0; margin:50px 0 0;
    display:flex; flex-direction: row; flex-wrap: wrap;  justify-content: flex-start; align-items: flex-start;
    gap: 2%;
}

.principle_area > ul > li{ flex:0 0 calc(100% / 5 - (2% * 4 / 5));}
.principle_imgs{width: 100%; position: relative;padding-top:75%; overflow: hidden;}
.principle_imgs > img{ 
    width: 100%; max-width: 100%; position: absolute;
    display: block; transform: translate(-50%,-50%); left:50%; top:50%;
  }

.principle_data{padding:5px;}
.principle_data > h4{margin: 0;padding:5px; font-weight: 500; }
.principle_data > h5{ margin: 0; text-align: justify; line-height: 1.5;}



@media screen and ( max-width:1400px ) {
    #brand_banner_container > div{
        width:40%;
        left:5%;
    }
    #brand_banner_container > div > h1{
        font-size:34pt;
    }
    #brand_banner_container > div > h4{
        font-size:16pt;
    }

    .center_data_area > h5{
        line-height: 1.5;
    }
    .center_area{ gap:30px}
    
}

@media screen and ( max-width:1023px ) {
    #brand_banner_container > div{
        width:40%;
        left:5%;
        z-index: 1;
    }
    #brand_banner_container > div > h1{
        font-size:31pt;
    }
    #brand_banner_container > div > h4{
        font-size:16pt;
    }

    .center_area{ flex-wrap: wrap;}
    .wpercent{ flex:0 0 80%}
    .wauto{ flex:100%}

    .center_container{gap:30px}

    .principle_area > ul > li{ flex: 0 0 calc(100% / 3 - (2% * 2 / 3)); margin-bottom: 20px;}
    
}

@media screen and ( max-width:959px ){
     #brand_banner_container > div > h1{
        font-size:27pt;
    }
    #brand_banner_container > div > h4{
        font-size:14pt;
    }

    #brand_banner_container{ overflow-x: hidden;}
    #brand_banner_container > img{ 
        position: relative; top:0; left:60%; transform: translateX(-50%);
        min-width: 1150px; z-index: 0;
    }

    #brand_banner_container > div{
        width:50%;
        left:5%;
    }
}

@media screen and ( max-width:767px ){
    .wpercent{ flex:0 0 100%}
}

@media screen and ( max-width:560px ){
    #brand_banner_container > div{
        width:100%;
        left:0%;
        padding: 0 5%;

    }
    #brand_banner_container > img{ 
        position: relative; top:0; left:0%; transform: translateX(0%);
        min-width: 1150px; z-index: 0;
    }

    .principle_area > ul{gap:4%}
    .principle_area > ul > li{ flex: 0 0 calc(100% / 2 - (4% / 2)); margin-bottom: 20px;}

    .wpercent{margin-bottom: 30px;}
    .wpercent:nth-child(1){margin-bottom: 70px;}
    .layout_photo_area > .remark_area{width: 100%;}
    .layout_photo_area > .remark_area > .remark_imgs{display:none}
    .layout_photo_area > .remark_area > .remark_txt{ flex:1 1 100%;}
    .center_area{gap:0}

    
    #principle_container{padding:0px 5%}
    .principle_area > ul{margin-top:20px}

    .center_data_area > h5{margin:10px 0}
}