.half{width: 50%; background-size: cover; position: relative;}

.fl > .textArea .mTitle{padding-bottom: 2.5rem; font-size: 2rem; line-height: 1; color: #1b1b1b; position: relative; margin-bottom: 8.5rem; font-family: var(--mi);}
.fl > .textArea .mTitle::before{position: absolute; content: ''; width: 3rem; height: 1px; bottom: 0; left: 0; background: #333;}
.fl > .textArea .mSubTitle{font-size: 7rem; line-height: 8rem; color: #000000; font-family: var(--mi); margin-bottom: 4rem;}
.fl > .textArea .mText{font-size: 1.9rem; line-height: 3.2rem; color: #333333; margin-bottom: 10rem;}


.mainVideo{width: 100vw; height: auto;  max-height: 100vmin; overflow: hidden; position: relative;}
.mainVideo video{width: 100%; aspect-ratio: 16/9;/*  object-position: center; */ z-index: 1;}

.mainVideo .vTxtArea{max-width:1320px; width: 100%; height: calc(100% - 20rem); text-align: left;position: absolute;left:50%;top: 10rem;transform: translateX(-50%);z-index: 2;display: flex;flex-wrap: wrap;flex-direction: row;align-items: center;justify-content: center;}
.mainVideo .vTxtArea .vTxt_in{position: relative; padding: 0 2rem; text-align: center;}

.mainVideo .vTxt .ii.title{font-size:6.2rem; line-height:7rem; font-family: var(--mi); color: rgba(255,255,255,0.95);}
.mainVideo .vTxt .ii.txt{margin-top:2rem; font-size:3.2rem; line-height:1.25; color: rgba(255,255,255,0.85); font-family: var(--mi);}
.mainVideo .vTxt .ii.alink{margin-top: 4rem; padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,0.75); display: inline-block;}
.mainVideo .vTxt .ii.alink a{font-size: 1.6rem; line-height: 1; color: rgba(255,255,255,0.85);}


.mViewMore{display: flex; align-items: center; gap: 1rem; font-size: 1.6rem; line-height: 1; color: var(--point); font-family: var(--mi); width: max-content; transition: all ease 0.3s;}
/* .mViewMore .circle{width: 4.5rem !important; aspect-ratio: 1/1; background: var(--point); border-radius: 50%; display: flex; align-items: center; justify-content: flex-end; color: #fff; } */
.mViewMore .circle{width: 4.5rem !important; aspect-ratio: 1/1; background: var(--point); border-radius: 50%; display: flex; align-items: center;  color: #fff; text-indent: 1.5rem; transition: all ease 0.3s;}
/* .mViewMore:hover{gap: 0.5rem !important; } */
/* .mViewMore:hover .circle{text-indent: 0.775rem !important;} */

.bgArea{position: relative; background-repeat: no-repeat; overflow: hidden;}
.fl > .bgArea::after{background-repeat: no-repeat;  background-size: cover; position: absolute; top: 0; left: 0; bottom: 0; right: 0; content: '';  transition: all ease 0.5s;}
.fl > .bgArea:hover::after{transform: scale(1.05);}

#mBrand .fl > .half{background-size: cover;}
#mBrand .fl > .textArea{background-image: url('/images/main/mBrand_bg.jpg'); background-size: cover; background-position: right bottom; padding: 17rem 8.5% 24rem 8.5%; min-height: 96rem;}
/* #mBrand .fl > .bgArea{background-image: url('/images/main/mBrand.jpg'); background-position: center;} */
#mBrand .fl > .bgArea::after{ background-image: url('/images/main/mBrand.jpg');}

#mProduct{padding: 8rem 0 10rem; min-height: 96rem; display: flex; align-items: center;}
#mProduct .swiper{padding-top: 6rem; }
#mProduct .swiper .swiper-wrapper{}
#mProduct .swiper .swiper-slide{width: calc((100% - 34rem)/3); margin-right: 17rem;}
/* #mProduct .swiper .swiper-slide + .swiper-slide{margin-left: 17rem;} */
#mProduct .swiper .swiper-slide .imgArea{padding: 5rem; background-color: #f9f8f6; display: flex; align-items: center; justify-content: center; aspect-ratio: 6/8; overflow: hidden;}
#mProduct .swiper .swiper-slide .imgArea img{ transition: all ease 0.3s;}
#mProduct .swiper .swiper-slide:hover .imgArea img{transform: scale(1.05);}
#mProduct .swiper .swiper-slide .textArea{margin-top: 4rem; text-align: center; }
#mProduct .swiper .swiper-slide .textArea .title{font-size: 1.7rem; line-height: 2rem; color: #333333; text-align: center; height: 2rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 1rem;}
#mProduct .swiper .swiper-slide .textArea .price{font-size: 1.7rem; line-height: 2rem; color: var(--point); text-align: center; height: 2rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: bold;}

#mProduct .swiper .swiper-pagination{bottom: auto; top: 0;}
#mProduct .swiper .swiper-pagination-bullet{width: 1rem ; height: 1rem; padding: 0; margin: 0; transition: all ease 0.3s;}
#mProduct .swiper .swiper-pagination-bullet + .swiper-pagination-bullet{margin-left: 1rem;}
#mProduct .swiper .swiper-pagination-bullet:hover{background: var(--point);}
#mProduct .swiper .swiper-pagination-bullet-active{width: 2rem ; border-radius: 3rem; background: var(--point);}

#mProcess > .fl{min-height: 96rem;}
#mProcess > .fl > .textArea2{padding: 14rem 8rem; display: flex; align-items: flex-end;}
#mProcess > .fl > .textArea2 .titleArea h4{font-size: 3.6rem; line-height: 1; color: #fff; font-family: var(--mi); margin-bottom: 2rem;}
#mProcess > .fl > .textArea2 .titleArea p{font-size: 2rem; line-height: 1; color: rgba(255,255,255,0.9);}


#mProcess > .fl > .half{overflow: hidden; padding: 2rem 0;}
#mProcess > .fl > .half.textArea2{padding: 14rem 8rem;}
#mProcess > .fl > .half *{position: relative; z-index: 2;}
#mProcess > .fl > .half:after{background-repeat: no-repeat;  background-size: cover; position: absolute; top: 0; left: 0; bottom: 0; right: 0; content: '';  transition: all ease 0.5s; z-index: 1;}
#mProcess > .fl > .half:hover:after{transform: scale(1.05);}
/* #mProcess > .fl > .half:nth-of-type(1){background-image: url('/images/main/mProcess_bg.jpg');} */
#mProcess > .fl > .half:nth-of-type(1)::after{background-image: url('/images/main/mProcess_bg.jpg');}
/* #mProcess > .fl > .half:nth-of-type(2){background-image: url('/images/main/mIngredient_bg.jpg');} */
#mProcess > .fl > .half:nth-of-type(2)::after{background-image: url('/images/main/mIngredient_bg.jpg');}












@media only screen and (max-width : 1720px){
    #mProduct .swiper .swiper-slide{width: calc((100% - 20rem)/3); margin-right: 10rem;}
    #mProduct{min-height: auto;}

}


@media only screen and (max-width : 1440px){
    #mProduct .swiper .swiper-slide{width: calc((100% - 10rem)/3); margin-right: 5rem;}

}
@media only screen and (max-width : 1280px){
}
@media only screen and (max-width : 1024px){
    #mBrand .half{width: 100%;}
    #mBrand .fl > .textArea{min-height: auto; padding: 5rem 8.5%; aspect-ratio: 1/1; display: flex; flex-direction: column; justify-content: center;}
    #mBrand .fl > .bgArea{aspect-ratio: 1/1;}

    #mProduct .swiper .swiper-slide{width: calc((100% - 6rem)/3); margin-right: 3rem;}

    #mProcess > .fl{min-height: auto;}
    #mProcess .half{width: 100%;}
    #mProcess .fl > .textArea2{min-height: auto; padding: 14rem 8.5%; aspect-ratio: 16/9; display: flex; flex-direction: column; justify-content: flex-end;}
    #mProcess > .fl > .textArea2 .titleArea{width: 100%;}
    


}
@media only screen and (max-width : 840px){
    .mainVideo video{width: 100%; aspect-ratio: 16/18; object-fit: cover;}
}
@media only screen and (max-width : 768px){


}
@media only screen and (max-width : 640px){
    #mProduct .swiper .swiper-slide{width: calc((100% - 3rem)/2);}
    #mProcess .fl > .textArea2{ aspect-ratio: 16/9;}

    /* #mBrand .fl > .bgArea:hover::after{transform: none;} */
    /* #mBrand .fl > .bgArea::after{background-size: initial; background-attachment: fixed; background-position: center;} */

}
@media only screen and (max-width : 480px){
    #mBrand .fl > .textArea{padding: 5rem 2rem;}
    #mProcess .fl > .half.textArea2{padding: 14rem 2rem; justify-content: center;}

    /* #mProcess .fl > .textArea2{justify-content: center;} */



    

}
@media only screen and (max-width : 400px){
    #mProduct .swiper .swiper-slide{width: 100%;}
    #mProduct .swiper .swiper-slide .imgArea{aspect-ratio: 1/1;}
}