@import url('https://fonts.googleapis.com/css2?family=Didact+Gothic&display=swap');
html,body{
	font-family: 'Didact Gothic',微軟正黑體 !important;
}
*{
	color: #fff;
}
ul,li{
	list-style: none;
	padding: 0;
	margin: 0;
}
img{
	width: 100%;
}

/*navbar*/
	.container-xxl{
		max-width:1200px;
		background-color: #fff;
	}
	.navbar-collapse{
		flex-grow:0 !important;
	}
	.nav-link{
		color:#004501 !important;
	}

	.carousel-item img:nth-child(2){
		display:none !important;
	}

	.carousel-caption{
		bottom:25% !important;
		background-color: rgba(51,51,51,0.5); 
	}
	nav .breadcrumb{
		padding-left:3rem;
		margin-top: 1rem;
	}
	a.navbar-brand{
		padding:1rem 0 ;
	}
section{
	background-image: url(./assets/1_底圖02.webp);
	background-size: 100%;
	background-color: #191009;
	padding-bottom: 5%;
}
.topicBanner{
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	background-image: url(./assets/1_底圖01.webp);
	background-size: cover;
	background-repeat: no-repeat;
	padding: 5%;
}

/*Slick*/
	.owl-carousel .item h4 {
		color: #fff;
		font-weight: 400;
		font-size: 1.4375rem;
		margin-top: 0rem;
	}
	.owl-nav{
		display: none;
	}
/*主標大圖*/
	.featureList{
		padding: 0 15%;
	}
	.featureList .row{
		margin-top:5%;
	}
	.featureList li,.feature-des-img li{
		padding: 0 5%;
		z-index: 1;
	}
	.featureList li h6{
		color: #FFF;
		font-size: 1.8rem;
		margin-top: 0.6rem;
		text-align: center;
	}

/*特色敘述*/
	.feature-des{ 
		position: relative; 
		padding: 5% 10%; 
		color: #fff; 
		margin-top: 200px; 
	}
	.topicBanner:after{ 
		content: ""; 
		position: absolute;
		width:100%; 
		height: 200px; 
		bottom: -200px;
		left: 0;
		background: linear-gradient(0deg, rgba(33, 20, 13, 1)60%, rgba(33, 20, 13, 0.8)40%);
	 }
	.feature-des h2{
		display: inline-block;
		font-size: 3rem;
		letter-spacing: 0.2rem;
		font-weight: 900;
		border-bottom: solid 2px #fff;
		padding-bottom: 0.3rem;
	}
	.feature-des h2 span{
		color: #f9ca60;
	}

	.feature-des h2:before{
		content: "";
		position: absolute;
		background-image: url(./assets/1_準備開動囉.png);
		background-size: cover;
		width: 50vw;
		height: 450px;
		top: -250px;
		right: 5%;
	}

	.feature-des h5{
		font-size: 2rem;
		padding: 2rem 0;
		font-weight: 300;
		line-height: 3rem;
	}

/*獲利關鍵*/
	.profit .subtitle{
		position: relative;
		margin:5% 0;
	}
	.profit .subtitle:before{
		content:"";
		position: absolute;
		left: 0;
		width: 70%;
		height: 100%;
		background-color: #11627f;
		clip-path: polygon(0% 0%, 85% 0, 100% 50%, 85% 100%, 0% 100%);
	}
	.profit .subtitle:after{
		content:"";
		background-image: url(./assets/A_打造便當獲利關鍵icon.svg);
		position: absolute;
		background-repeat: no-repeat;
		width: 15%;
		height: 100%;
		margin:10px 0 -10px 0;
	}

	.profit .subtitle img{
		position: relative;
		width: 60%;
		z-index: 1;
		padding: 15px 20px 15px 130px;
	}
	.profit-des{
		position: relative;
		margin-top: 10%;
	}
	.profit-des h3,.profit-des h5{
		position: absolute;
		top: 0;
		color: #fff;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
	}
	.profit-des h3{
		font-size: 6.5rem;
		padding: 25% 0;
	}
	.profit-des h3 span{
		color: #fdcf84;
	}
	.profit-des h5{
		font-size: 3rem;
		padding: 40% 5% 10% 5%;
	}

/*價格制訂*/
	.priceset{
		margin-top: 10%;
		overflow: hidden;
	}
	.pricetitle{
		position: relative;
		margin-bottom: 5%;
	}
	.pricetitle picture img{
		width: 50%;
	}
	.pricetitle picture:before,.pricetitle picture:after{
		content: "";
		position: absolute;
		background-size: contain;
		background-repeat: no-repeat;
	}
	.pricetitle picture:before{
		background-image: url(./assets/B_樹葉.png);
		width: 5%;
		height: 14%;
		left: 10%;
		bottom: 25%;
	}
	.pricetitle picture:after{
		background-image: url(./assets/B_番茄.png);
		width: 10%;
		height: 50%;
		right: -2%;
		top: 0;
	}
	.pricetitle p{
		font-size: 2.2rem;
		padding: 0 10%;
		letter-spacing: 0.2rem;
	}
	.costarea{
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		width: 80%;
		background-image: url(./assets/B_底圖.jpg);
		background-size: 100%;
		background-repeat: repeat-y;
	}
	.lessonone,.lessontwo{
		padding: 5% 0;
	}
	.lessonone hr{
		position: relative;
		border-bottom:solid 5px #999;
		width: 90%;
		left: 50%;
		transform: translateX(-50%);
	}
	.lessonTitle{
		position: relative;
		margin: 0 5% 0 12%;
	}
	.lessonTitle p{
		color: #4b270d;
		font-size: 4rem;
		font-weight: 900;
	}
	.lessonone .lessonTitle p:before{
		content: "1";
		font-size: 9rem;
		color: #cf6112;
		position: absolute;
		bottom: -50%;
		left:-8% ;
	}
	.lessonone .lessonTitle p:after{
		content: "Lesson One";
		font-size: 2.5rem;
		color: #8b7f69;
		position: absolute;
		left: 0;
		bottom: -15%;
	}
	.lessontwo .lessonTitle p:before{
		content: "2";
		font-size: 9rem;
		color: #cf6112;
		position: absolute;
		bottom: -50%;
		left:-8% ;
	}
	.lessontwo .lessonTitle p:after{
		content: "Lesson Two";
		font-size: 2.5rem;
		color: #8b7f69;
		position: absolute;
		left: 0;
		bottom: -15%;
	}
	.lessonTitle text{
		color: #4b270d;
		font-size: 1.8rem;
		font-weight: 900;
		position: absolute;
		right: 0;
		bottom: 0;
	}
	.bento-area{
		padding: 0 5%;
		position: relative;
		margin-top: 5%;
	}
	.progress{
		position: relative;
		margin: 2% 0 2% 5%;
		width: 65%;
		height: 30px !important;
		border-radius: 20px !important;
		background-color: #fff !important;
	}
	.progress p,.progress-bar{
		font-size: 1.2rem;
		font-weight: 900;
		padding-left:3%;
	}
	.progress p{
		color:#d35f16;
	}
	.progress-bar{
		background-color: #d35f16 !important;
		border-radius: 20px !important;
	}

	.bentoicon{
		position: relative;
		padding: 0;
		display: flex;
		align-items:center ;
	}
	.bentoicon:before{
		content: "";
		position: absolute;
		width: 40px;
		height: 40px;
		left: 0;
		background-size: 100%;
		background-repeat: no-repeat;
	}
	.mainmeal:before{
		background-image: url(./assets/B_icon主餐.svg);
	}
	.silddish:before{
		background-image: url(./assets/B_icon配菜.svg);
	}
	.pickle:before{
		background-image: url(./assets/B_icon醃菜.svg);
	}
	.rice:before{
		background-image: url(./assets/B_icon米飯.svg);
	}
	.box:before{
		background-image: url(./assets/B_icon紙盒.svg);
	}
	.logoarea{
		margin-left:-20% ;
		width: 90%;
		background-color: rgba(239,191,106,0.8);
	}
	.logoarea p{
		position: relative;
		color: #3f1a00;
		margin-left: 55%;
		font-size: 2.2rem;
		font-weight: 900;
		line-height: 2.4rem;
		padding: 1rem 0;
	}
	.logoarea p span{
		color: #3f1a00;
		font-size: 1.5rem;
		font-weight: 700;
	}
	.bento-a-area .logoarea p:before{
		content: "";
		background-image: url(./assets/logo_里民廚房.webp);
		background-size: contain;
		background-repeat: no-repeat;
		position: absolute;
		left: -70%;
		width: 200px;
		height: 70%;
	}
	.bento-a-area:after{
		content: "";
		position: absolute;
		top: 20px;
		right: 0;
		width: 50%;
		height: 100%;
		background-image: url(./assets/B_拆解成本-醬味雞腿.webp);
		background-size: contain;
		background-repeat: no-repeat;
		transform: rotate(-12deg);
	}
	.bento-b-area .logoarea p:before{
		content: "";
		background-image: url(./assets/logo_蛋白盒子.webp);
		background-size: contain;
		background-repeat: no-repeat;
		position: absolute;
		left: -15%;
		width: 5vw;
		height: 90%;
	}
	.bento-b-area:after{
		content: "";
		position: absolute;
		top: 20px;
		right: 0;
		width: 50%;
		height: 100%;
		background-image: url(./assets/B_拆解成本-四川麻辣雞胸.webp);
		background-size: contain;
		background-repeat: no-repeat;
	}
	#carouselIndicators2{
		padding: 5% 10%;
	}
	.lessontwo .carousel-indicators button{
		background-color: #999;
	}

/*便當風味*/
	.flavor{
		padding-top: 30%;
		overflow: hidden;
	}
	.flavor .row{
		margin: 0;
		position: relative;
	}
	.bgimg:before,.bgimg:after{
		content: "";
		position: absolute;
		background-size: contain;
		background-repeat: no-repeat;
	}
	.bgimg:before{
		background-image: url(./assets/便當頁_甘藍菜.webp);
		width: 15vw;
		height: 15vw;
		left: -2%;
		top: -30%;
	}
	.bgimg:after{
		background-image: url(./assets/便當頁_筷子手.webp);
		width: 40vw;
		height: 40vw;
		right: -2%;
		top: -35%;
		transform: rotate(20deg);
	}
	.businessbento{
		background-color: #9aa81f;
		margin-right: 8.3%;
		margin-top: 10%!important;
		padding-top: 30%;
	}
	.healthbox {
		position: relative;
		background-color: #c98011;
		margin-left: 8.3%;
		margin-bottom: 10% !important;
		padding-bottom: 30%;
	}
	.businessbento img,.healthbox img{
		position: relative;
		width: 50%;
	}
	.businessbento img{
		margin:0 0 5% 40%;
	}
	.healthbox img{
		margin: 5% 0 0 2%;
	}
	.businessbento:before,.businessbento:after,.healthbox:before,.healthbox:after{
		content: "";
		position: absolute;
		background-size: contain;
		background-repeat: no-repeat;
	}
	.businessbento:before{
		background-image: url(./assets/便當頁_商業便當.webp);
		width: 70vw;
		height: 40vw;
		margin-left: 10%;
		top: 0;
	}
	.businessbento:after{
		background-image: url(./assets/便當頁_甜椒.png);
		width: 12vw;
		height: 12vw;
		margin-left:0;
		bottom: 5%;
	}
	.healthbox:before{
		background-image: url(./assets/便當頁_健康餐盒.webp);
		width: 60vw;
		height: 40vw;
		margin-left: -20%;
		top: 40%;
	}
	.healthbox:after{
		background-image: url(./assets/便當頁_洋菇.webp);
		width: 8vw;
		height: 10vw;
		margin-left: 20%;
		top: 40%;
	}
	.flavorTitle{
		position: relative;
		margin: 10% 0;
	}
	.flavor-bento-area{
		position: relative;
		z-index: 1;
		margin-bottom: 10%;
	}
	.flavor-bento-area:before{
		content: "";
		background-color: rgba(255,255,255,0.2);
		position: absolute;
		top: 5%;
		width: 100vw;
		height: 100%;
	}
	.bento-des-card{
		padding: 0 10%;
	}
	.card{
		background: none!important;
		border: none!important;
	}
	.bento-des-card-imgdes{
		position: relative;
	}
	.bento-des-card-imgdes p{
		position: absolute;
		font-size: 1.5rem;
		line-height: 1.8rem;
		background-color: #ae5930;
		width: 65%;
		height: 65%;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		text-align: center;
		padding: 1.8rem 0;
	}

/*便當風味秘密*/
	.flavorsecret{
		padding: 5% 0 10% 0;
	}
	.flavorsecretTitle{
		position: relative;
		padding:0 10%;
	}
	.flavorsecretTitle img{
		padding: 0 5%;
	}
	.flavorsecretTitle-txt{
		font-size: 2rem;
		margin: 5% 0;
	}

	.flavorsecretTitle-txt:after{
		content: "";
		background-image: url(./assets/D_堅果.webp);
		position: absolute;
		background-size: contain;
		background-repeat: no-repeat;
		width: 10vw;
		height: 20%;
		right: 10%;
		margin-bottom: -10%;
	}
	.flavorsecret-bento{
		position: relative;
	}
	.flavorsecret-bento img{
		padding: 0 10%;
		margin-top: 2%;
	}
	.bentoName{
		font-size: 2.5rem;
		line-height: 2.8rem;
		padding: 2% 0 2% 25%;
		margin: 0;
	}
	.bentoPart{
		font-size: 5rem;
		font-weight: 900;
		color: #126d30;
		line-height: 5rem;
		padding: 2%;
		margin: 0;
	}

	.bentoTitle{
		position: relative;
		background: #a1ad1b;
		width: 50%;
		margin-top: 5%;
	}
	.bgOrange{
		background: #ce8011;
	}
	.bentoTitle:after{
		content: "";
		position: absolute;
		background-size: contain;
		background-repeat: no-repeat;
		width: 20vw;
		height: 200%;
		margin-left: 80%;
	}
	.orange{
		color: #3c1c1f;
	}
	.drumstick .bentoTitle:after{
		background-image: url(./assets/D_商-雞腿.webp);
	}
	.porkchop .bentoTitle:after{
		background-image: url(./assets/D_商-排骨.webp);
	}
	.stewedpork .bentoTitle:after{
		background-image: url(./assets/D_商-爌肉.webp);
	}
	.vegetable .bentoTitle:after{
		background-image: url(./assets/D_商-蔬菜.webp);
	}
	.braise .bentoTitle:after{
		background-image: url(./assets/D_商-滷料.webp);
	}
	.sliddish .bentoTitle:after{
		background-image: url(./assets/D_商-涼拌.webp);
	}
	.chickenbreast .bentoTitle:after{
		background-image: url(./assets/D_健-雞胸.webp);
	}
	.beefflank .bentoTitle:after{
		background-image: url(./assets/D_健-牛五花.webp);
	}
	.beefshank .bentoTitle:after{
		background-image: url(./assets/D_健-牛腱.webp);
	}
	.salmon .bentoTitle:after{
		background-image: url(./assets/D_健-鮭魚.webp);
	}
	.mackerel .bentoTitle:after{
		background-image: url(./assets/D_健-鯖魚.webp);
	}
	.vegetableHealth .bentoTitle:after{
		background-image: url(./assets/D_健-蔬菜.webp);
	}
	.braiseHealth .bentoTitle:after{
		background-image: url(./assets/D_健-滷料.webp);
	}
	.stewed-list,.fried-list,.steamScalding-list,.sliddish-list,.sousvide-list,.fry-list,.sauce-list,.scalding-list,.barbecue-list{
		position: relative;
		margin-top: 10%;
	}
	.stewed-list:after,.fried-list:after,.steamScalding-list:after,.sliddish-list:after,.sousvide-list:after,.fry-list:after,.sauce-list:after,.scalding-list:after,.barbecue-list:after{
		content: "";
		position: absolute;
		background-size: contain;
		background-repeat: no-repeat;
		width: 20vw;
		height: 60%;
		right: 0;
		top: -35%;
	}
	.stewed-list:after{
		background-image: url(./assets/D_icon-滷.svg);
	}
	.fried-list:after{
		background-image: url(./assets/D_icon-炸.svg);
	}
	.steamScalding-list:after{
		background-image: url(./assets/D_icon-蒸燙炒.svg);
	}
	.sliddish-list:after{
		background-image: url(./assets/D_icon-醃.svg);
	}
	.sousvide-list:after{
		background-image: url(./assets/D_icon-舒肥.svg);
	}
	.fry-list:after{
		background-image: url(./assets/D_icon-煎.svg);
	}
	.sauce-list:after{
		background-image: url(./assets/D_icon-醬燒.svg);
	}
	.scalding-list:after{
		background-image: url(./assets/D_icon-燙炒.svg);
	}
	.barbecue-list:after{
		background-image: url(./assets/D_icon-烤.svg);
	}

/*合作廠商*/
	.corporation h3,.platform h3{
		position: relative;
		margin-bottom:5%;
		margin-left: 10%;
		font-size: 3rem;
		padding: 0 5%;
	}
	.corporation h3:before,.corporation h3:after,.platform h3:before,.platform h3:after{
		content: "";
		position: absolute;
	}
	.corporation h3:before,.platform h3:before{
		background-image: url(./assets/合作廠商.服務平台.webp);
		background-size: contain;
		background-repeat: no-repeat;
		left: 0;
		top: 0;
		width: 10vw;
		height: 100%;
	}
	.corporation h3:after{
		border-bottom: solid 1px #fff;
		top: 50%;
		width: 50%;
	}
	.corporation,.platform{
		overflow: hidden;
	}
	.platform h3:after{
		border-bottom: solid 1px #fff;
		top: 50%;
		width: 40%;
	}
	.corporation .row,.platform .row{
		padding: 0 10%;
	}
	.corporation .col:nth-child(1) img{
		background-color: #fff;
		padding: 2%;
	}
	.corporation .col img,.platform .col img{
		position: relative;
		left: 50%;
		transform: translateX(-50%);
	}
	.platform .col:nth-child(1) img{
		width: 40%;
	}
	.platform .col:nth-child(2) img{
		background: #fff;
		padding: 5%;
	}
.toparrow{
	position: fixed;
	bottom: 5%;
	right: 1%;
	background-color: #fff;
	color: #004501;
	font-size: 1.2rem;
	font-weight: 900;
	border-radius: 999px;
	padding: 0.7% 0.5%;
}

@media screen and (max-width:576px) {
	*{
		font-size: 15px;
	}
	.toparrow{
		display: none;
	}
/*narbar*/
	.navbar-brand{
		padding:1rem 0 ;
	}
	.navbar-brand img{
		width:70%;
	}
	a.navbar-brand{
		margin-right: 0;
	}
	nav .breadcrumb{
		padding-left:0.5rem;
		margin-top: 1rem;
	}
/*topicBanner*/
	.topicBanner img{
		width: 100%;
	}
	.featureList li{
		padding: 0;
	}
	.featureList img{
		padding: 0 10%;
	}
	.featureList li h6{
		font-size: 0.8rem;
	}
/*feature-des*/
	.feature-des{
		margin-top: 100px;
	}
	.feature-des h2{
		font-size: 1.3rem;
		z-index: 1;
	}
	.feature-des h2:before{
		width: 60vw;
		height: 20%;
		top: -10%;
		margin-right: 4%;
	}

	.feature-des h2:after{
		width: 70vw;
		height: 150px;
		right: 0;
		top: -80px;
	}
	.feature-des h5{
		font-size: 1.2rem;
		line-height: 1.8rem;
		padding: 0.5rem 0;
	}
	.feature-des-img .row{
		--bs-gutter-y: 2rem !important;
	}
/*profit-des*/
	.profit .subtitle img{
		padding: 0;
		padding: 2% 5%;
		padding-left: 10%;
	}
	.profit .subtitle:after{
		margin-top: 5px;
	}
	.profit-des h3,.profit-des h3 span{
		font-size: 2rem;
		padding: 5% 0;
	}
	.profit-des h5{
		font-size: 1.2rem;
		padding-top: 20%;
	}
/*priceset*/
	.pricetitle picture img{
		width: 100%;
		padding: 10%;
	}
	.pricetitle picture:before{
		width: 8vw;
		height: 10%;
		left: 0%;
		top: 35%;
	}
	.pricetitle picture:after{
		width: 20vw;
	    height: 30%;
	    right: -9%;
	    top:0%;
	}
	.pricetitle p {
		font-size: 1.2rem;
		letter-spacing: 0;
		margin-top: 0!important;
	}
	.lessonTitle{
		margin-left: 15%;
	}
	.lessonTitle p{
		font-size: 1.5rem;
	}
	.lessonone .lessonTitle p:before,.lessontwo .lessonTitle p:before{
		font-size: 3.5rem;
		bottom: -20%;
		left: -12%;
	}
	.lessonone .lessonTitle p:after,.lessontwo .lessonTitle p:after{
		font-size: 1rem;
		bottom: 5%;
	}
	.lessonTitle text {
	font-size: 0.8rem;
	}
	.lessonone hr{
		height: 0.5px!important;
		margin: 0.5rem 0;
	}
	.bentoicon:before{
		width: 25px;
    	height: 25px;

	}
	.progress{
		height: 25px!important;
		width: 90%;
		margin-left: 10%;

	}
	.progress p, .progress-bar{
		font-size: 1.1rem;
	}
	
	.logoarea p{
		font-size: 1.2rem;
		line-height: 1.4rem;
	}
	.logoarea p span{
		font-size: 0.8rem;
	}
	.bento-a-area .logoarea p:before{
		width: 100px;
    	height: 45%;
    	left: -100%;
	}
	.bento-a-area .logoarea{
		margin-left: 20%;
		width: 100%;
		margin-top: 70%;
	}
	.bento-a-area:after{
		top: 40%;
		width: 95%;
		height: 55%;
		transform: rotate(-5deg);
	}
	
	.bento-b-area:after{
		top: 30%;
		width: 90%;
		height: 60%;
		right: -15%;
	}
	.bento-b-area .logoarea{
		margin-left: -35%;
		width: 90%;
		margin-top: 60%;
	}
	.bento-b-area .logoarea p{
		padding-top: 40%;
		left: -20%;
	}
	.bento-b-area .logoarea p:before {
		top: 0;
		width:65%;
		left: 10%;
	}
/*flavor*/
	.businessbento{
		padding: 0;
		margin-left: 30%; 
	}
	.businessbento img,.healthbox img{
		width: 45%;
		padding: 3%;
		margin-bottom: 0;
	}
	.businessbento img{
		margin-left: 15%;
	}
	.businessbento:before{
		height: 100%;
		width: 55vw;
		margin-left: -30%;
		top: 5%;
	}
	.businessbento:after{
		width: 15vw;
		height: 15vw;
		margin-left: -5%;
		bottom: 50%;
	}
	.bgimg:before{
		width: 20vw;
		height: 25vw;
		left: -3%;
    	top: 35%;
	}
	.bgimg:after{
		top: -23%;
		width: 90%;
		right: -55%;
		transform: rotate(0deg);
	}
	.healthbox{
		padding: 0;
		margin-left: -30%;
		margin-top: 20%!important;
	}
	.healthbox img{
		margin-left: 35%;
		margin-top: 0;
	}
	.healthbox:before{
		width: 100%;
		height: 120%;
		margin-left: 75%;
		top: -10%;
	}
	.healthbox:after{
		width: 15vw;
		height: 15vw;
		top: 110%;
		margin-left: 30%;
	}
	.flavorTitle{
		padding: 0 5%;
	}
	.bento-des-card-imgdes{
		width: 50%!important;
		left: 50%;
		transform: translateX(-50%);
	}
	.flavor-bento-area{
		margin-top: 20%;
	}
/*flavorsecret*/
	.flavorsecretTitle-txt{
		font-size: 1.2rem;
	}
	.flavorsecretTitle-txt:after{
		width: 15vw;
		height: 30%;
		margin-bottom: 0;
		top: 95%;
	}
	.flavorsecret-bento img{
		margin-top: 5%;
	}
	.bentoTitle{
		width: 70%;
	}
	.bentoName{
		font-size: 1.5rem;
		line-height: 1.6rem;
		padding: 0;
		padding-left: 20%;
	}
	.bentoPart{
		font-size: 3rem;
		padding: 0 2%;
	}
	.bentoTitle:after{
		height: 150%;
		width: 40vw;
		margin-left: 80%;
	}
	.stewed-list:after, .fried-list:after, .steamScalding-list:after, .sliddish-list:after, .sousvide-list:after, .fry-list:after, .sauce-list:after, .scalding-list:after, .barbecue-list:after{
		height: 20%;
		left: 5%;
		top: 0%;
	}
	.beefflank .bentoTitle:after{
		margin-left: 90%;
		height: 125%;
    	width: 35vw;
	}
	.salmon .bentoTitle:after{
		top: 2%;
	}
/*corproation*/
	.corporation h3, .platform h3{
		font-size: 1.2rem;
		margin-left: 12%;
	}
	.corporation h3:before, .platform h3:before{
		left: -2%;
	}
	.corporation h3:after,.platform h3:after{
		width: 100%;
	}
	.platform{
		padding-bottom: 30%;
	}
}


@media screen and (min-width: 768px) and (max-width:992px) {

	*{
		font-size: 16px;
	}
	.toparrow{
		display: none;
	}
/*feature-des*/
	.feature-des{
		padding: 5%;
	}
	.feature-des h2:before{
		width: 65vw;
   		height: 50%;
   		top: -20%;
   		right: 0;
	}
	.feature-des h2 span{
		font-size: 3rem;
	}
	.feature-des h5{
		padding: 1rem 0;
		font-size: 1.8rem;
		line-height: 2.5rem;
	}
/*profit*/
	.profit .subtitle img{
		padding-left: 10%;
	}
	.profit-des h3,.profit-des h3 span{
		font-size: 4rem;
		padding: 15% 0 10% 0;
	}
	.profit-des h5{
		font-size: 2rem;
		height: 3rem;
		padding-top: 30%;
	}
/*priceset*/
	.costarea{
		width: 90%;
	}
	.pricetitle picture:before, .pricetitle picture:after{
		background-size: contain;
	}
	.pricetitle picture:before{
		width: 10%;
		height: 15%;
		bottom: 55%;
	}
	.pricetitle picture:after{
		width: 15%;
		height: 30%;
		right: -6%;
	}
	.lessonTitle {
		margin-left: 16%;
	}
	.lessonTitle p{
		font-size: 3rem;
	}
	.lessonone .lessonTitle p:before,.lessontwo .lessonTitle p:before{
		font-size: 7.5rem;
		left: -12%;
	}
	.lessonone .lessonTitle p:after,.lessontwo .lessonTitle p:after{
		font-size: 2.2rem;
	}
	.lessonTitle text{
		font-size: 1.2rem;
	}
	.bento-a-area .logoarea p:before{
		left: -85%;
	}
	.bento-b-area .logoarea p{
		margin-left: 40%;
	}
/*flavor*/
	.flavor{
		padding-top: 10%;
	}
	.businessbento{
		padding: 0;
		margin-left: 30%; 
	}
	.businessbento img,.healthbox img{
		width: 45%;
		padding: 3%;
		margin-bottom: 0;
	}
	.businessbento img{
		margin-left: 15%;
	}
	.businessbento:before{
		height: 100%;
		width: 55vw;
		margin-left: -30%;
		top: 5%;
	}
	.businessbento:after{
		width: 15vw;
		height: 15vw;
		margin-left: -5%;
		bottom: 50%;
	}
	.bgimg:before{
		width: 20vw;
		height: 25vw;
		left: -3%;
    	top: 35%;
	}
	.bgimg:after{
		top: -10%;
		width: 45%;
		right: -20%;
		transform: rotate(0deg);
	}
	.healthbox{
		padding: 0;
		margin-left: -30%;
		margin-top: 20%!important;
	}
	.healthbox img{
		margin-left: 35%;
		margin-top: 0;
	}
	.healthbox:before{
		width: 100%;
		height: 120%;
		margin-left: 75%;
		top: -10%;
	}
	.healthbox:after{
		width: 15vw;
		height: 15vw;
		top: 110%;
		margin-left: 30%;
	}
	.flavorTitle{
		margin: 5% 0;
	}
	.flavor-bento-area{
		margin-top: 10%;
	}
	.bento-des-card-imgdes p{
		padding: 1.5rem 0;
		line-height: 1.5rem;
	}
	.flavor-bento-area:before{
		top: 2%;
	}
/*flavorsecret*/
	.bentoTitle{
		width: 60%
	}
	.bentoTitle:after {
		width: 25vw;
		height: 140%;
		margin-left: 90%;
	}
	.platform{
		padding-bottom: 40%;
	}
}