/*-- sub page css --*/

/*container*/
.sub-container{width: 94%;max-width: 1640px;margin: 0 auto;}
.sub-section{padding: 150px 0;}

@media screen and (max-width: 1480px){

	.sub-section{padding: 120px 0;}
}

@media screen and (max-width: 1080px){

	.sub-section{padding: 100px 0;}
}

@media screen and (max-width: 720px){
	
	.sub-container{width: 90%;}
	.sub-section{padding: 70px 0;}
}

/*footer*/
.footer-wrap{height: 780px;}

@media screen and (max-width: 1480px){

	.footer-wrap{height: 640px;}
}

/*parallax*/
.parallax-wrapper{overflow: hidden;}
.parallax, .parallax-vanilla{width: 100%;height: 100%;will-change: transform;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover; 
}

/*sub title*/
.sub-title{font-size: var(--fs-100);font-weight: var(--fw-8);color: var(--color-1);line-height: .8;margin-bottom: 150px;}

.sub-text p{font-size: var(--fs-22);font-weight: var(--fw-4);word-break: keep-all;line-height: 160%;}
.sub-text p + p{margin-top: 30px;}
.sub-text p strong{display: block;font-size: var(--fs-70);font-weight: var(--fw-8);word-break: keep-all;line-height: 120%;margin-bottom: 40px;}
.sub-text p b{font-weight: var(--fw-7);}

.sub-text a{display: block;width: 230px;margin-top: 50px;font-size: var(--fs-22);font-weight: var(--fw-5);text-align: center;background: var(--color-2);padding: 15px 0;border-radius: 56px;color: #000 !important;}

.key-point{border-radius: 20px;overflow: hidden;padding: 40px 48px;background: var(--color-3);margin-top: 60px;}
.key-point>h4{font-size: var(--fs-32);font-weight: var(--fw-7);line-height: 140%;margin-bottom: 15px;}
.key-point>ul>li{font-size: var(--fs-20);font-weight: var(--fw-4);line-height: 160%;padding-left: 20px;position: relative;}
.key-point>ul>li + li{margin-top: 10px;}
.key-point>ul>li::before{content: "";position: absolute;top: 14px;left: 0;width: 6px;height: 6px;border-radius: 6px;background: var(--color-1);}
.key-point>ul>li b{font-weight: var(--fw-6);color: var(--color-1);}

.marker-box-text{margin-top: 20px;}
.marker-box-text h4{display: flex;flex-wrap: wrap;align-items: center;gap: 5px;row-gap: 10px;}
.marker-box-text h4 b{display: block;width: 100%;font-size: var(--fs-32);font-weight: var(--fw-8);line-height: 160%;}
.marker-box-text h4 span{font-size: var(--fs-18);font-weight: var(--fw-4);line-height: 45px;padding: 0 25px;border-radius: 45px;border: 1px solid #ddd;white-space: nowrap;}
.marker-box-text h4 span.color{font-weight: var(--fw-6);background: var(--color-1);border-color: var(--color-1);color: #FFF;}
.marker-box-text p{font-size: var(--fs-22);font-weight: var(--fw-4);word-break: keep-all;line-height: 160%;margin-top: 30px;}
.marker-box-text p b{font-weight: var(--fw-7);}

@media screen and (max-width: 1480px){

	.sub-title{font-size: 80px;margin-bottom: 120px;}
	
	.sub-text p + p{margin-top: 30px;}
	.sub-text p strong{margin-bottom: 30px;}
	
	.key-point{padding: 35px 43px;margin-top: 50px;}
	.key-point>ul>li{padding-left: 18px;}
	.key-point>ul>li::before{top: 11px;}
	
	.marker-box-text h4 span{line-height: 42px;padding: 0 20px;}

	.marker-box-text{margin-top: 30px;}
	.marker-box-text p{margin-top: 25px;}
}

@media screen and (max-width: 1080px){

	.sub-title{font-size: 60px;margin-bottom: 100px;}
}

@media screen and (max-width: 720px){

	.sub-title{font-size: 30px;margin-bottom: 70px;}
	
	.sub-text p{font-size: 16px;}
	.sub-text p + p{margin-top: 25px;}
	.sub-text p strong{font-size: 32px;margin-bottom: 25px;}
	
	.sub-text a{font-size: 16px;width: 165px;margin-top: 40px;}
	
	.key-point{padding: 21px 23px;border-radius: 15px;margin-top: 35px;}
	.key-point>ul>li{padding-left: 15px;font-size: 16px;}
	.key-point>ul>li::before{top: 10px;width: 5px;height: 5px;border-radius: 5px;}
	
	.key-point>h4{margin-bottom: 10px;}
	.key-point>ul>li + li{margin-top: 13px;}
	
	.marker-box-text{margin-top: 25px;}
	.marker-box-text p{font-size: 15px;line-height: 170%;}
	
	.marker-box-text h4{gap: 3px;row-gap: 6px;}
	.marker-box-text h4 span{font-size: 15px;line-height: 40px;padding: 0 15px;}
}

/*motion*/
.sub-motion-1{transform: translateY(50px);opacity: 0;transition: transform 1s ease, opacity .6s ease;}
.sub-motion-2{opacity: 0;transition: opacity .6s ease;}
.sub-motion-3{position: relative;overflow: hidden;}
.sub-motion-3::after{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: var(--color-3);transition: height .6s ease;}

.sub-motion.on .sub-motion-1{transform: translateY(0);opacity: 1;}
.sub-motion.on .sub-motion-2{opacity: 1;}
.sub-motion.on .sub-motion-3::after{height: 0;}

.sub-motion-3.delay-1::after{transition-delay: .1s !important;}
.sub-motion-3.delay-2::after{transition-delay: .2s !important;}
.sub-motion-3.delay-3::after{transition-delay: .3s !important;}
.sub-motion-3.delay-4::after{transition-delay: .4s !important;}
.sub-motion-3.delay-5::after{transition-delay: .5s !important;}
.sub-motion-3.delay-6::after{transition-delay: .6s !important;}
.sub-motion-3.delay-7::after{transition-delay: .7s !important;}
.sub-motion-3.delay-8::after{transition-delay: .8s !important;}
.sub-motion-3.delay-9::after{transition-delay: .9s !important;}
.sub-motion-3.delay-10::after{transition-delay: 1s !important;}
.sub-motion-3.delay-11::after{transition-delay: 1.1s !important;}
.sub-motion-3.delay-12::after{transition-delay: 1.2s !important;}
.sub-motion-3.delay-13::after{transition-delay: 1.3s !important;}
.sub-motion-3.delay-14::after{transition-delay: 1.4s !important;}
.sub-motion-3.delay-15::after{transition-delay: 1.5s !important;}
.sub-motion-3.delay-16::after{transition-delay: 1.6s !important;}

/*img box*/
.img-box-1 figure{padding: 50px 0;border: 1px solid #e4e4e4;border-radius: 30px;overflow: hidden;}
.img-box-1 figure img, .img-box-2 figure img{display: block;margin: 0 auto;}

.img-box-2 figure{border: 1px solid #e4e4e4;border-radius: 30px;overflow: hidden;}
.img-box-2 figure img{width: 100%;}

@media screen and (max-width: 1480px){
	
	.img-box-1 figure, .img-box-2 figure{border-radius: 20px;}
	.img-box-1 figure img{width: 94%;}
}

@media screen and (max-width: 720px){
	
	.img-box-1 figure, .img-box-2 figure{border-radius: 15px;}
	.img-box-1 figure img{width: 90%;}
}

/*-- sub visual --*/
.subVisual{height: 100vh;background-color: #000;position: relative;}
.subVisual::after{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,.1);z-index: 1;}

.subVisual-title{position: absolute;bottom: 220px;left: 3%;width: 94%;z-index: 10;}
.subVisual-title h3, .subVisual-title p{color: #FFF;word-break: keep-all;}
.subVisual-title h3{font-size: var(--fs-100);font-weight: var(--fw-6);line-height: 1.2;margin-bottom: 25px;}
.subVisual-title p{font-size: var(--fs-24);font-weight: var(--fw-4);line-height: 1.5;}

.subNavi{position: absolute;bottom: 80px;left: 3%;width: 94%;z-index: 10;}
.subNavi>ul>li{display: none;}
.subNavi>ul>li>a{display: none;}
.subNavi>ul>li>ul{display: flex;align-items: center;gap: 10px;}
.subNavi>ul>li>ul>li>a{display: block;width: 100%;height: 100%;font-size: var(--fs-20);color: #fff;padding: 15px 30px;border-radius: 54px;backdrop-filter: blur(10px);background: rgba(255, 255, 255, 0.2);white-space: nowrap;}
.subNavi>ul>li>ul>li.on>a{font-weight: var(--fw-5);background: #000;}

#sv-1 figure{background-image: url(/img/sub/sv_1.jpg);}
#sv-2 figure{background-image: url(/img/sub/sv_2.jpg);}
#sv-3 figure{background-image: url(/img/sub/sv_3.jpg);}
#sv-4 figure{background-image: url(/img/sub/sv_4.jpg);}
#sv-5 figure{background-image: url(/img/sub/sv_5.jpg);}

#subNavi-1>ul>li:nth-child(1){display: block;}
#subNavi-2>ul>li:nth-child(2){display: block;}
#subNavi-3>ul>li:nth-child(3){display: block;}
#subNavi-4>ul>li:nth-child(4){display: block;}
#subNavi-5>ul>li:nth-child(5){display: block;}

@media screen and (max-width: 1480px){

	.subVisual-title{bottom: 200px;}
	.subVisual-title h3{font-size: 80px;}
	.subVisual-title p{font-size: 20px;}
	
	.subNavi>ul>li>ul{gap: 8px;}
}

@media screen and (max-width: 1080px){
	
	.subNavi{width: 97%;}
	.subNavi>ul>li{overflow-x: scroll;
		-ms-overflow-style: none;
		scrollbar-width: none;
	}
	.subNavi>ul>li::-webkit-scrollbar{display: none;}
	.subNavi>ul>li>ul>li:last-child{padding-right: 3%;}
}

@media screen and (max-width: 960px){
	
	.subNavi>ul>li>ul>li>a{padding: 13px 24px;}
}

@media screen and (max-width: 720px){
	
	.subVisual-title{bottom: 160px;}
	.subVisual-title h3{font-size: 50px;margin-bottom: 20px;}
	.subVisual-title p{font-size: 17px;}
	
	.subNavi{bottom: 60px;}
	.subNavi>ul>li>ul>li>a{font-size: 16px;padding: 14px 25px;}
}

/*-- about --*/
#sub-0101{position: relative;padding-bottom: 600px;}
#sub-0101::before, #sub-0101::after{content: "";position: absolute;bottom: 0;left: 0;width: 100%;height: 40%;}
#sub-0101::before{z-index: 1;
	background-image: url(/img/sub/about_1.jpg);
	background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
#sub-0101::after{z-index: 5;background: linear-gradient(to top, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 1) 60%);}
#sub-0101 .sub-container{position: relative;z-index: 10;}

.about-text{position: absolute;bottom: -360px;left: 50%;transform: translateX(-50%);font-weight: var(--fw-6);color: #FFF;z-index: 1;white-space: nowrap;}

.about-parallax{height: 400px;border-radius: 20px;margin-top: 65px;margin-bottom: 65px;box-shadow: 20px 20px 35px rgba(0, 0, 0, .15);}
.about-parallax figure{background-image: url(/img/sub/about_2.jpg);
	background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

@media screen and (max-width: 1480px){

	#sub-0101{padding-bottom: 500px;}
	#sub-0101::after{background: linear-gradient(to top, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 1) 50%);}
	
	.about-text{bottom: -310px;}

	.about-parallax{height: 350px;margin-top: 60px;margin-bottom: 60px;}
}

@media screen and (max-width: 1080px){

	#sub-0101{padding-bottom: 400px;}
	#sub-0101::after{background: linear-gradient(to top, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 1) 45%);}
	
	.about-text{bottom: -260px;}
}

@media screen and (max-width: 720px){ 
	
	#sub-0101{padding-bottom: 280px;}
	#sub-0101::after{background: linear-gradient(to top, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 1) 28%);}
	
	.about-text{bottom: -160px;}

	.about-parallax{height: 280px;margin-top: 40px;margin-bottom: 40px;}
}

/*-- mission --*/
.ms-card{display: flex;flex-wrap: wrap;align-items: flex-start;gap: 30px;margin-top: 70px;}
.ms-card li{display: flex;flex-direction: column;justify-content: flex-end;width: calc( ( 100% - 30px ) / 2 );height: 360px;padding: 50px;border-radius: 15px;position: relative;overflow: hidden;}

.ms-card li figure{position: absolute;top: 0;left: 0;width: 100%;height: 100%;transition: transform .6s ease;
	background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.ms-card li figure::after{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 100%);
}

.ms-card li>span{position: absolute;top: 30px;left: 30px;font-size: var(--fs-70);font-weight: var(--fw-5);line-height: .75;letter-spacing: -0.06em;color: #FFF;z-index: 10;}

.ms-text{color: #FFF;position: relative;z-index: 10;}
.ms-text h4{font-size: var(--fs-40);font-weight: var(--fw-6);word-break: keep-all;line-height: 140%;margin-bottom: 15px;}
.ms-text p{font-size: var(--fs-20);font-weight: var(--fw-4);word-break: keep-all;line-height: 160%;}

.ms-1 figure{background-image: url(/img/sub/ms_1.jpg);}
.ms-2 figure{background-image: url(/img/sub/ms_2.jpg);}
.ms-3 figure{background-image: url(/img/sub/ms_3.jpg);}
.ms-4 figure{background-image: url(/img/sub/ms_4.jpg);}

/*hover*/
.ms-card li:hover figure{transform: scale(1.1);}

/*slide*/
#mission-slide{margin-top: 70px;overflow: visible;}
#mission-slide figure{height: 650px;
	background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
#mission-slide figure::after{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .5) 100%);}
.mission-slide-1 figure{background-image: url(/img/sub/ms_5.jpg);}
.mission-slide-2 figure{background-image: url(/img/sub/ms_6.jpg);}
.mission-slide-3 figure{background-image: url(/img/sub/ms_7.jpg);}
.mission-slide-4 figure{background-image: url(/img/sub/ms_8.jpg);}

#mission-slide .swiper-slide{position: relative;border-radius: 25px;overflow: hidden;}
#mission-slide .swiper-slide span{position: absolute;bottom: 60px;left: 55px;font-size: var(--fs-60);font-weight: var(--fw-6);word-break: keep-all;line-height: 120%;color: #FFF;z-index: 1;}

.slide-arrow{display: flex;align-items: center;gap: 25px;position: absolute;top: -140px;right: 0;z-index: 10;}
.slide-arrow button{display: flex;align-items: center;justify-content: center;width: 60px;height: 60px;border-radius: 60px;border: 1px solid #000;transition: all .25s ease;}
.slide-arrow button i{font-size: 24px;}
.slide-arrow button:first-child{padding-right: 2px;}
.slide-arrow button:last-child{padding-left: 2px;}
.slide-arrow button:hover{background-color: var(--color-1);color: #FFF;border-color: var(--color-1);}

.slide-page{display: flex;justify-content: center;gap: 13px;margin-top: 30px;}
.slide-page span{width: 6px;height: 6px;margin: 0 !important;opacity: 1 !important;background-color: #ddd;}
.slide-page span.swiper-pagination-bullet-active{background-color: var(--color-1);}

@media screen and (max-width: 1480px){

	.ms-card{gap: 25px;margin-top: 50px;}
	.ms-card li{width: calc( ( 100% - 25px ) / 2 );height: 300px;padding: 40px;}
	
	.ms-text h4{margin-bottom: 10px;}

	#mission-slide{margin-top: 50px;}
	#mission-slide figure{height: 550px;}
	
	.slide-arrow{top: -118px;}
}

@media screen and (max-width: 1080px){

	.ms-card{gap: 20px;}
	.ms-card li{width: calc( ( 100% - 20px ) / 2 );padding: 30px;}
	
	.ms-text h4{margin-bottom: 5px;}
	
	#mission-slide figure{height: 500px;}
	#mission-slide .swiper-slide span{bottom: 40px;left: 40px;}
	
	.slide-arrow{gap: 20px;top: 40px;right: 40px;}
	.slide-arrow button{width: 50px;height: 50px;border-radius: 50px;border: 1px solid #FFF;}
	.slide-arrow button i{font-size: 22px;color: #FFF;}
}

@media screen and (max-width: 960px){

	.ms-card li{height: 400px;}
	
	#mission-slide .swiper-slide span{bottom: 30px;left: 30px;}
	
	.slide-arrow{top: 30px;right: 30px;}
}

@media screen and (max-width: 720px){

	.ms-card{display: block;margin-top: 35px;}
	.ms-card li{width: 100%;height: 300px;}
	.ms-card li + li{margin-top: 20px;}
	
	#mission-slide{margin-top: 35px;}
	#mission-slide .swiper-slide{border-radius: 15px;}
	#mission-slide .swiper-slide span{width: calc( 100% - 60px );font-size: var(--fs-40);font-weight: var(--fw-6);word-break: keep-all;line-height: 140%;}
	#mission-slide figure{height: 450px;}
	
	.slide-arrow{gap: 15px;top: 30px;right: 30px;}
	.slide-arrow button{width: 40px;height: 40px;border-radius: 40px;}
	.slide-arrow button i{font-size: 20px;}
	
	.slide-page{margin-top: 25px;}
}

/*-- history --*/
.history-box{margin-top: 65px;}
.history-box.history-2{margin-top: 150px;}

.history-box>.parallax-wrapper{height: 400px;position: relative;}
.history-box>.parallax-wrapper h3{position: absolute;top: 50%;left: 0;transform: translateY(-50%);width: 100%;z-index: 1;
	font-size: var(--fs-100);font-weight: var(--fw-7);text-align: center;color: rgba(255,255,255,.9);
}
.history-1 figure{display: block;width: 100%;background-image: url(/img/sub/history_1.jpg);}
.history-2 figure{display: block;width: 100%;background-image: url(/img/sub/history_2.jpg);}

.history-flex{display: flex;margin-top: 100px;}
.history-flex>div, .history-flex>ul{width: 50%;}

.history-year{position: relative;}
.history-year h3{position: sticky;top: 15vh;font-size: var(--fs-120);font-weight: var(--fw-8);line-height: 100%;}

.history-list{border-top: 1px solid #e4e4e4;}
.history-list>li{padding: 50px 0;border-bottom: 1px solid #e4e4e4;}
.history-list>li>h4{font-size: var(--fs-60);font-weight: var(--fw-8);line-height: .9;margin-bottom: 25px;}

.history-detail>li + li{margin-top: 25px;}
.history-detail>li b, .history-detail>li span{display: block;word-break: keep-all;line-height: 160%;padding-left: 20px;}
.history-detail>li b{font-size: var(--fs-22);font-weight: var(--fw-5);position: relative;}
.history-detail>li b::before{content: "";position: absolute;top: 13px;left: 0;width: 8px;height: 8px;border-radius: 8px;background: var(--color-1);}
.history-detail>li span{font-size: var(--fs-20);font-weight: var(--fw-4);color: #565656;margin-top: 13px;}

@media screen and (max-width: 1480px){

	.history-box{margin-top: 50px;}
	.history-box.history-2{margin-top: 120px;}
	.history-box>.parallax-wrapper{height: 380px;}
	
	.history-flex{margin-top: 80px;}
	
	.history-list>li{padding: 40px 0;}
	.history-list>li>h4{margin-bottom: 20px;}
	
	.history-detail>li + li{margin-top: 20px;}
	.history-detail>li b::before{top: 11px;width: 7px;height: 7px;border-radius: 7px;}
	.history-detail>li span{margin-top: 10px;}
}

@media screen and (max-width: 1080px){

	.history-box.history-2{margin-top: 100px;}
	.history-box>.parallax-wrapper{height: 320px;}
	
	.history-flex{display: block;margin-top: 60px;}
	.history-flex>div, .history-flex>ul{width: 100%;}
	.history-flex>div{margin-bottom: 30px;}
	
	.history-list>li{padding: 30px 0;}
	.history-detail>li + li{margin-top: 13px;}
	
	.history-detail>li span{margin-top: 8px;}
}

@media screen and (max-width: 720px){

	.history-box{margin-top: 35px;}
	.history-box.history-2{margin-top: 70px;}
	.history-box>.parallax-wrapper{height: 180px;}
	.history-box>.parallax-wrapper h3{font-size: 40px;}
	
	.history-flex{margin-top: 35px;}
	.history-flex>div{margin-bottom: 25px;}
	
	.history-year h3{font-size: 32px;}
	
	.history-list>li{padding: 25px 0;}
	.history-list>li>h4{font-size: 30px;}
	
	.history-detail>li + li{margin-top: 10px;}
	.history-detail>li b, .history-detail>li span{padding-left: 15px;line-height: 170%;}
	.history-detail>li b{font-size: 18px;}
	.history-detail>li b::before{top: 10px;width: 6px;height: 6px;border-radius: 6px;}
	.history-detail>li span{font-size: 16px;margin-top: 6px;}
}

/*-- Agriculture --*/
.ag-video-wrap{display: block;width: 100%;height: 950px;position: relative;}

.ag-video{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;}
.ag-video::after{content: "";position: absolute;top: 0;left: 0;right: auto;width: 100%;height: 100%;background: #FFF;z-index: 1;transition: all 1s cubic-bezier(0.65, 0, 0.076, 1);
	transition-delay: 1s !important;
}
.ag-video>video{width: 100%;height: 100%;pointer-events: none;object-fit: cover;}

.ag-text{position: absolute;top: 0;left: 50%;display: flex;flex-direction: column;justify-content: flex-end;width: 50%;height: 100%;padding-left: 3%;padding-right: 3%;z-index: 10;
	backdrop-filter: blur(.375rem);
	transition: all .4s cubic-bezier(0.65, 0, 0.076, 1);
}
.ag-text h4{font-size: var(--fs-130);font-weight: var(--fw-7);line-height: .9;margin-bottom: 70px;}
.ag-text p{font-size: var(--fs-22);font-weight: var(--fw-4);line-height: 1.5;margin-bottom: 50px;word-break: keep-all;}
.ag-text a{width: 230px;font-size: var(--fs-22);font-weight: var(--fw-5);text-align: center;background: var(--color-2);padding: 15px 0;border-radius: 56px;color: #000 !important;}

.marker-box{display: flex;align-items: flex-start;gap: 60px;}
.marker-box>div{width: calc( ( 100% - 60px ) / 2 );}

.marker-box figure{display: flex;align-items: center;justify-content: center;border: 1px solid #e4e4e4;border-radius: 30px;overflow: hidden;}
.marker-box figure.border-none{border: none !important;}
.marker-box figure img{display: block;width: 100%;}

/*on*/
.ag-video-wrap.on .ag-video::after{width: 0;left: auto;right: 0;}
.ag-video-wrap.on .ag-text{color: #FFF;}

@media screen and (max-width: 1820px){

	.ag-text p br{display: none !important;}
}

@media screen and (max-width: 1480px){

	.ag-video-wrap{height: 100vh;}
	
	.ag-text{padding: 70px;}
	.ag-text h4{font-size: var(--fs-100);line-height: 1;margin-bottom: 50px;}
	.ag-text p{margin-bottom: 40px;}
	.ag-text a{width: 200px;}
}

@media screen and (max-width: 1080px){

	.ag-video-wrap{height: 768px;}

	.ag-text{left: 30%;width: 70%;padding: 60px;}
	
	.marker-box{gap: 45px;}
	.marker-box>div{width: calc( ( 100% - 45px ) / 2 );}
}

@media screen and (max-width: 860px){

	.marker-box{display: block;}
	.marker-box>div{width: 100%;}
	.marker-box>div + div{margin-top: 30px;}
}

@media screen and (max-width: 720px){
	
	.ag-video-wrap{height: 500px;}
	
	.ag-text{justify-content: flex-start;left: 0;width: 100%;padding: 70px 5%;backdrop-filter: blur(.4rem);}
	.ag-text h4{font-size: 50px;font-weight: var(--fw-6);line-height: 1.2;margin-bottom: 20px;}
	.ag-text p{font-size: 16px;}
	.ag-text a{font-size: 16px;width: 165px;}
	
	.marker-box>div + div{margin-top: 25px;}
	.marker-box figure{border-radius: 15px;}
}

/*-- research list --*/
.research-list{margin-top: 40px;}
.research-list ul li{background: var(--color-3);padding: 40px 48px;border-radius: 30px;overflow: hidden;}
.research-list ul li + li{margin-top: 20px;}
.research-list ul li span, .research-list ul li i{display: block;font-weight: var(--fw-4);line-height: 160%;padding-left: 20px;}
.research-list ul li span{font-size: var(--fs-24);font-weight: var(--fw-7);position: relative;}
.research-list ul li span::before{content: "";position: absolute;top: 16px;left: 0;width: 6px;height: 6px;border-radius: 6px;background: var(--color-1);}
.research-list ul li i{font-size: var(--fs-20);color: var(--color-4);margin-top: 5px;}

.research-img{padding-left: 20px;margin-top: 15px;}
.research-img figure{display: flex;align-items: flex-start;gap: 15px;}
.research-img figure img{display: block;width: calc( ( 100% - 75px ) / 6 );}
.research-img figure.research-img-auto img{width: auto;}
.research-img figure.research-img-4 img{width: calc( ( 100% - 45px ) / 4 );}
.research-img h5{font-size: var(--fs-20);font-weight: var(--fw-4);background: var(--color-2);display: inline-block;vertical-align: top;padding: 8px 20px;border-radius: 30px;margin-top: 15px;}

.research-img-solo{padding-left: 0;margin-top: 50px;}
.research-img-solo h5{font-size: var(--fs-20);padding: 10px 25px;border-radius: 44px;margin-top: 20px;}

@media screen and (max-width: 1480px){
	
	.research-list{margin-top: 30px;}
	.research-list ul li{padding: 35px 43px;}
	.research-list ul li span, .research-list ul li i{padding-left: 18px;}
	.research-list ul li span::before{top: 14px;}

	.research-img{padding-left: 18px;margin-top: 13px;}
	.research-img h5{margin-top: 13px;}
	
	.research-img-solo{padding-left: 0;margin-top: 40px;}
}

@media screen and (max-width: 1280px){
	
	.research-img figure.research-img-auto img{width: 100%;}
}

@media screen and (max-width: 1080px){
	
	.research-img figure{flex-wrap: wrap;}
	.research-img figure img{width: calc( ( 100% - 45px ) / 4 );}
	.research-img figure.research-img-4 img{width: calc( ( 100% - 45px ) / 4 );}
}

@media screen and (max-width: 720px){
	
	.research-list{margin-top: 25px;}
	.research-list ul li{padding: 21px 23px;border-radius: 15px;}
	.research-list ul li + li{margin-top: 15px;}
	.research-list ul li span, .research-list ul li i{padding-left: 15px;}
	.research-list ul li span{margin-bottom: 3px;}
	.research-list ul li span::before{top: 11.5px;width: 5px;height: 5px;border-radius: 5px;}
	.research-list ul li i{font-size: 15px;}
	
	.research-img{padding-left: 15px;}
	.research-img h5{font-size: 15px;line-height: 160%;border-radius: 5px;padding: 8px 16px;}
	.research-img figure{gap: 10px;}
	.research-img figure img{width: calc( ( 100% - 10px ) / 2 );}
	.research-img figure.research-img-auto img{width: 100%;}
	.research-img figure.research-img-4 img{width: 100%;}
	
	.research-img-solo{padding-left: 0;margin-top: 33px;}
	.research-img-solo h5{font-size: 14px;padding: 5px 15px;border-radius: 5px;margin-top: 13px;}
}

/*-- future -- */
#sub-0104{position: relative;}
#sub-0104::before{content: "";position: absolute;bottom: 0;left: 0;width: 100%;height: 30%;z-index: 1;
	background-image: url(/img/sub/fu_1.jpg);
	background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
#sub-0104 .sub-container{position: relative;z-index: 10;}

.future-box{display: flex;align-items: center;gap: 120px;margin-top: 70px;}
.future-box>figure, .future-box>.sub-text{width: calc( ( 100% - 120px ) / 2 );}

.future-box>figure{height: 760px;border-radius: 25px;box-shadow: 20px 20px 35px rgba(0, 0, 0, .15);position: relative;
	background-image: url(/img/sub/fu_2.jpg);
	background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.future-box>figure span{position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;font-size: var(--fs-70);font-weight: var(--fw-8);color: #FFF;}

@media screen and (max-width: 1480px){
	
	.future-box{gap: 100px;margin-top: 50px;}
	.future-box>figure, .future-box>.sub-text{width: calc( ( 100% - 100px ) / 2 );}
	
	.future-box>figure{height: 630px;}
}

@media screen and (max-width: 1280px){
	
	.future-box{gap: 80px;}
	.future-box>figure, .future-box>.sub-text{width: calc( ( 100% - 80px ) / 2 );}
	
	.future-box>figure{height: 630px;}
	.future-box>figure span{font-size: var(--fs-60);}
}

@media screen and (max-width: 1080px){
	
	#sub-0104::before{height: 50%;opacity: .2;}
	
	.future-box{display: block;}
	.future-box>figure, .future-box>.sub-text{width: 100%;}
	
	.future-box>figure{height: 400px;margin-bottom: 50px;}
}

@media screen and (max-width: 1080px){
	
	#sub-0104::before{height: 50%;opacity: .2;}

	.future-box>figure{height: 350px;margin-bottom: 50px;}
}

@media screen and (max-width: 720px){
	
	.future-box{margin-top: 35px;}
	.future-box>figure{height: 250px;margin-bottom: 35px;border-radius: 15px;}
	.future-box>figure span{font-size: 32px;}
}

/*-- Environment --*/
.three-box-wrap{margin-top: 70px;}
.three-box{display: flex;align-items: center;gap: 40px;}
.three-box>li{width: calc( ( 100% - 80px ) / 3 );position: relative;}

.three-box>li::after{position: absolute;top: calc( ( 50% - 35px ) - 30px );left: calc( 100% - 30px );width: 70px;height: 70px;display: flex;align-items: center;justify-content: center;font-family: xeicon !important;font-size: var(--fs-32);font-weight: var(--fw-8);color: #FFF;background: var(--color-1);border-radius: 10px 0 0 10px;z-index: 100;}
.three-box>li:nth-child(1)::after{content: "\e913";}
.three-box>li:nth-child(2)::after{content: "=";}
.three-box>li:nth-child(3)::after{display: none;}

.three-box>li figure{border-radius: 30px;overflow: hidden;}
.three-box>li figure img{display: block;}
.three-box>li h5{font-size: var(--fs-32);font-weight: var(--fw-8);line-height: 160%;margin-top: 15px;}

.half-img{display: flex;margin-top: 70px;}
.half-img figure{width: 50%;}
.half-img figure:nth-child(2){margin-top: 70px;}
.half-img figure img{display: block;width: 100%;}

.grid-wrap{margin-top: 70px;}
.grid-box li{display: flex;align-items: center;}
.grid-box li figure{width: 50%;}
.grid-box li figure img{display: block;}

.grid-text{width: 50%;padding-left: 100px;}

.grid-box li:nth-child(2n){flex-direction: row-reverse;}
.grid-box li:nth-child(2n) .grid-text{padding-left: 0;padding-right: 100px;}

@media screen and (max-width: 1840px){
	
	.three-box>li figure img{width: 100%;}
}

@media screen and (max-width: 1480px){
	
	.three-box-wrap{margin-top: 50px;}
	.three-box{gap: 30px;}
	.three-box>li{width: calc( ( 100% - 60px ) / 3 );}
	
	.three-box>li::after{width: 60px;height: 60px;}
	
	.half-img{margin-top: 50px;}
	.half-img figure:nth-child(2){margin-top: 50px;}
	
	.grid-wrap{margin-top: 50px;}
	.grid-box li figure img{width: 100%;}
	.grid-text{padding-left: 70px;}
}

@media screen and (max-width: 1080px){
	
	.three-box>li h5{font-size: var(--fs-30);}
	
	.half-img{flex-direction: column;}
	.half-img figure{width: 90%;}
	.half-img figure:nth-child(2){margin-top: -100px;margin-left: 10%;}

	.grid-box li{flex-direction: column !important;}
	.grid-box li figure, .grid-text{width: 100%;}
	.grid-box li figure{height: 300px;}
	.grid-text{padding-left: 0;margin: 50px 0;}
	
	.grid-box li:nth-child(2n) .grid-text{padding-right: 0;text-align: right;margin-bottom: 0 !important;}
	.grid-box li:nth-child(2n) .grid-text a{float: right;}
}

@media screen and (max-width: 960px){
	
	.three-box{flex-direction: column;}
	.three-box>li{width: 100%;}
	
	.three-box>li figure{height: 300px;border-radius: 25px;}
	
	.three-box>li::after{top: auto;bottom: 57px;left: calc( 50% - 30px );border-radius: 10px 10px 0 0;}
}

@media screen and (max-width: 720px){
	
	.three-box-wrap{margin-top: 35px;}
	.three-box{gap: 20px;}

	.three-box>li figure{height: 200px;border-radius: 15px;}
	
	.three-box>li::after{top: auto;bottom: -20px;left: calc( 50% - 25px );width: 50px;height: 50px;border-radius: 5px 5px 0 0;}
	
	.three-box>li h5{font-size: 22px;margin-top: 10px;}
	
	.half-img{margin-top: 35px;}
	.half-img figure{width: 85%;}
	.half-img figure:nth-child(2){margin-top: -70px;margin-left: 15%;}
	
	.grid-wrap{margin-top: 35px;}
	.grid-box li figure{height: 200px;}
	.grid-text{margin: 35px 0;}
	.grid-box li .grid-text a{width: 160px;margin-top: 25px;}
}

/*-- contact us --*/
.contact-list{display: flex;gap: 40px;margin-top: 65px;margin-bottom: 50px;}
.contact-list>li{display: flex;flex-direction: column;align-items: center;justify-content: center;width: calc( ( 100% - 80px ) / 3 );background: #f8f8f8;border-radius: 30px;overflow: hidden;padding: 50px;text-align: center;}

.contact-list>li h4{font-size: var(--fs-20);font-weight: var(--fw-6);margin-bottom: 45px;color: #999;}
.contact-list>li span{font-size: var(--fs-32);font-weight: var(--fw-7);margin-bottom: 23px;}
.contact-list>li a{font-size: var(--fs-22);font-weight: var(--fw-4);background: var(--color-2);color: #FFF;line-height: 50px;border-radius: 50px;padding: 0 25px;}

.contact-list-2{margin-top: 0;margin-bottom: 0;}
.contact-list-2>li{padding: 0;background: none;border-radius: 0;}
.contact-list-2>li>a{display: block;width: 100%;background: none;padding: 0;line-height: inherit;border-radius: 0;}
.contact-list-2>li figure{width: 100%;height: 280px;background: #f9f9f9;border-radius: 30px;overflow: hidden;position: relative;}
.contact-list-2>li figure.instagram-bg{background: linear-gradient(45deg, #FFD600 0%, #FF7A00 25%, #FF0069 50%, #D300C5 75%, #7638FA 100%);}
.contact-list-2>li figure img{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 1;}
.contact-list-2>li h3{display: flex;align-items: center;justify-content: space-between;color: #000;margin-top: 30px;transition: color .25s ease;}
.contact-list-2>li h3 span{margin-bottom: 0;}
.contact-list-2>li h3 i{font-size: var(--fs-30);font-weight: var(--fw-7);}

.contact-list-2>li:nth-child(1) figure{background: #0763f7;}
.contact-list-2>li:nth-child(2) figure{background: #ff0033;}
.contact-list-2>li:nth-child(3) figure{background: #0a66c2;}

.contact-list-2>li:nth-child(1):hover h3{color: #0763f7;}
.contact-list-2>li:nth-child(2):hover h3{color: #ff0033;}
.contact-list-2>li:nth-child(3):hover h3{color: #0a66c2;}

.contact-box{margin-top: 65px;border-radius: 30px;overflow: hidden;}
.contact-box iframe{display: block;width: 100%;height: 450px;}

@media screen and (max-width: 1480px){

	.contact-list{gap: 35px;margin-top: 50px;margin-bottom: 40px;}
	.contact-list>li{width: calc( ( 100% - 70px ) / 3 );}
	
	.contact-list>li h4{margin-bottom: 40px;}
	
	.contact-list-2{margin-top: 0;margin-bottom: 0;}
	
	.contact-box{margin-top: 50px;}
}

@media screen and (max-width: 1280px){

	.contact-list{gap: 25px;}
	.contact-list>li{width: calc( ( 100% - 50px ) / 3 );padding: 40px;}
	
	.contact-list-2>li{padding: 0;}
	.contact-list-2>li figure{height: 240px;}
	.contact-list-2>li h3{margin-top: 25px;}
	
	.contact-box iframe{height: 420px;}
}

@media screen and (max-width: 1080px){

	.contact-list{flex-direction: column;}
	.contact-list>li{width: 100%;}
	
	.contact-list-2>li figure img{max-width: 100px;}
}

@media screen and (max-width: 720px){

	.contact-list{gap: 20px;margin-top: 35px;margin-bottom: 35px;}
	.contact-list>li{border-radius: 15px;padding: 30px;}
	
	.contact-list>li h4{font-size: 17px;margin-bottom: 25px;}
	.contact-list>li span{margin-bottom: 20px;}
	.contact-list>li a{font-size: 16px;line-height: 45px;padding: 0 20px;}
	
	.contact-list-2{flex-wrap: wrap;flex-direction: row;margin-top: 24px;margin-bottom: 0;}
	.contact-list-2>li{width: calc( ( 100% - 20px ) / 2 );padding: 0;background: none;border-radius: 0;}
	.contact-list-2>li>a{padding: 0;line-height: inherit;}
	.contact-list-2>li figure{height: 180px;border-radius: 15px;}
	.contact-list-2>li h3{margin-top: 15px;}
	.contact-list-2>li h3 span{font-size: 20px;}
	
	.contact-box{margin-top: 35px;border-radius: 15px;}
	.contact-box iframe{height: 300px;}
	.contact-list-2>li figure img{max-width: 80px;}
}

/*-- carrier --*/
.job-list{display: flex;align-items: center;margin-top: 40px;}
.job-list li{font-size: var(--fs-22);font-weight: var(--fw-4);line-height: 60px;padding: 0 30px;border-radius: 60px;border: 1px solid #ddd;white-space: nowrap;}
.job-list li:nth-child(1){background: #f8f8f8;color: #999;font-weight: var(--fw-7);}

.career-box{margin-top: 65px;}
.career-box figure{border: 1px solid #e4e4e4;border-radius: 30px;overflow: hidden;}
.career-box img{display: block;margin: 0 auto;}

@media screen and (max-width: 1480px){

	.job-list{margin-top: 30px;}
	.job-list li{line-height: 55px;padding: 0 25px;border-radius: 55px;}
	
	.career-box{margin-top: 50px;}
}

@media screen and (max-width: 1280px){

	.job-list{flex-wrap: wrap;gap: 10px;row-gap: 15px;}
}

@media screen and (max-width: 960px){

	.career-box img{width: 100%;}
}

@media screen and (max-width: 720px){

	.job-list{margin-top: 25px;gap: 8px;}
	.job-list li{width: 100%;font-size: 16px;line-height: 50px;padding: 0;border-radius: 50px;text-align: center;}

	.career-box{margin-top: 35px;}
	.career-box figure{border-radius: 15px;}
}

/*-- livestock --*/
.lt-box{display: flex;align-items: center;gap: 120px;margin-top: 150px;}
.lt-box-1{margin-top: 0 !important;}
.lt-box>figure, .lt-box>.sub-text{width: calc( ( 100% - 120px ) / 2 );}

.lt-box>figure{height: 0;padding-bottom: 46.4%;border-radius: 20px;position: relative;background-repeat: no-repeat;background-size: cover;background-position: center center;overflow: hidden;
	box-shadow: 20px 20px 40px rgba(0, 0, 0, .15);
}
.lt-box>figure span{position: absolute;left: 55px;bottom: 50px;font-size: var(--fs-60);font-weight: var(--fw-7);line-height: 1.2;color: #fff;z-index: 2;}

.lt-box-1>figure{background-image: url(/img/sub/lt_3.jpg);}
.lt-box-2>figure{background-image: url(/img/sub/lt_4.jpg);}
.lt-box-3>figure{background-image: url(/img/sub/lt_5.jpg);}

.lt-num{display: block;font-size: var(--fs-70);font-weight: var(--fw-8);color: var(--color-1);margin-bottom: 70px;}

@media screen and (max-width: 1480px){
	
	.lt-box{gap: 100px;margin-top: 120px;}
	
	.lt-num{margin-bottom: 50px;}
}

@media screen and (max-width: 1280px){
	
	.lt-box{gap: 80px;margin-top: 120px;}
	
	.lt-num{margin-bottom: 50px;}
}

@media screen and (max-width: 1080px){
	
	.lt-box{flex-direction: column !important;gap: 50px;margin-top: 100px;}
	.lt-box>figure, .lt-box>.sub-text{width: 100%;}
	.lt-box>figure{padding-bottom: 40%;background-position: center 70%;}
	.lt-box>figure span{left: 45px;bottom: 35px;}
	
	.lt-num{margin-bottom: 30px;}
}

@media screen and (max-width: 720px){
	
	.lt-box{gap: 35px;margin-top: 70px;}
	.lt-box>figure{height: 350px;padding-bottom: 0;border-radius: 15px;}
	
	.lt-box>figure span{left: 30px;bottom: 23px;font-size: 32px;}
	
	.lt-num{font-size: 32px;line-height: 1;margin-bottom: 20px;}
}

/*-- cosmetics --*/
.cosmetic-flow-grid{display: grid;grid-template-columns: .9fr 1.08fr 1.08fr 1.08fr 1.08fr .9fr;gap: 20px;align-items: start;width: 100%;border-top: 1px solid #000;}
.cosmetic-flow-item{position: relative;overflow: hidden;background: #000;}
.cosmetic-flow-img>div{position: absolute;inset: 0;background-size: cover;background-position: center;}

.cosmetic-flow-text{background: #000;color: #fff;padding: 32px 28px;display: flex;flex-direction: column;justify-content: space-between;}
.cosmetic-flow-text span{display: block;line-height: 160%;color: rgba(255,255,255,.58);font-weight: 400;}
.cosmetic-flow-text strong{display:block;font-size: var(--fs-40);line-height: 120%;font-weight: 600;}

.cosmetic-flow-card-1{height: 366px;}
.cosmetic-flow-card-2{height: 470px;background: var(--color-2);}
.cosmetic-flow-card-3{height: 310px;}
.cosmetic-flow-card-4{height: 366px;}
.cosmetic-flow-card-5{height: 470px;}
.cosmetic-flow-card-6{height: 310px;}

@media screen and (max-width: 1480px){
	
	.cosmetic-flow-grid{grid-template-columns: repeat(3, 1fr);gap: 10px;}
	.cosmetic-flow-card-1, .cosmetic-flow-card-2, .cosmetic-flow-card-3, .cosmetic-flow-card-4, .cosmetic-flow-card-5, .cosmetic-flow-card-6{height: 360px;}
}

@media screen and (max-width: 860px){
	
	.cosmetic-flow-grid{grid-template-columns: 1fr 1fr;padding-left: 10px;padding-right: 10px;}
	.cosmetic-flow-card-1, .cosmetic-flow-card-2, .cosmetic-flow-card-3, .cosmetic-flow-card-4, .cosmetic-flow-card-5, .cosmetic-flow-card-6{height: 300px;}
	.cosmetic-flow-text{padding: 20px 18px;}
	
	.cosmetic-flow-text span{font-size: 19px;}
	.cosmetic-flow-text strong{font-size: 34px;}
}

@media screen and (max-width: 720px){

	.cosmetic-flow-text span{font-size: 14px;}
	.cosmetic-flow-text strong{font-size: 24px;}
}

.cosmetic-mosaic-grid{display: grid;grid-template-columns: repeat(4, 1fr);grid-template-rows: repeat(6, 1fr);gap: 10px;width: 100%;height: 100vh;margin-bottom: 50px;position: relative;}
.cosmetic-mosaic-item{position: relative;overflow: hidden;background: #000;}
.cosmetic-mosaic-item>div{position: absolute;inset: 0;background-size: cover;background-position: center;}

.cosmetic-mosaic-item-1{grid-column: 1 / 2;grid-row: 1 / 4;}
.cosmetic-mosaic-item-2{grid-column: 1 / 2;grid-row: 4 / 7;}
.cosmetic-mosaic-item-3{grid-column: 2 / 3;grid-row: 1 / 3;}
.cosmetic-mosaic-item-4{grid-column: 2 / 3;grid-row: 3 / 7;}
.cosmetic-mosaic-item-5{grid-column: 3 / 4;grid-row: 1 / 4;}
.cosmetic-mosaic-item-6{grid-column: 3 / 4;grid-row: 4 / 7;}
.cosmetic-mosaic-item-7{grid-column: 4 / 5;grid-row: 1 / 5;}
.cosmetic-mosaic-item-8{grid-column: 4 / 5;grid-row: 5 / 7;}

/*pop*/
.cosmetic-mosaic-text{position: absolute;bottom: 0;width: calc( 50% - 5px );height: 100%;padding: 70px;color: #fff;z-index: 10;overflow: hidden;
	display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-end;
}
.cosmetic-mosaic-text::before{content: "";position: absolute;inset: 0;z-index: -1;background: linear-gradient(180deg, transparent 25%, rgba(0,0,0,.8) 100%);opacity: 0;transition: opacity .4s ease;}

.cosmetic-mosaic-text>h4, .cosmetic-mosaic-text>p, .cosmetic-mosaic-text>a{opacity: 0;transform: translateY(25px);transition: opacity .4s ease, transform .4s ease;}
.cosmetic-mosaic-text>h4{font-size: var(--fs-130);font-weight: var(--fw-6);line-height: .9;color: #fff;margin-bottom: 50px;}
.cosmetic-mosaic-text>p{font-size: var(--fs-22);font-weight: var(--fw-4);line-height: 1.5;margin-bottom: 50px;}

.cosmetic-mosaic-text>a{width: 230px;font-size: var(--fs-22);font-weight: var(--fw-5);text-align: center;background: var(--color-2);padding: 15px 0;border-radius: 56px;color: #000 !important;}

.cos-text-1{left: 0;}
.cos-text-2{right: 0;}

.cosmetic-mosaic-text:hover::before{opacity:1;}
.cosmetic-mosaic-text:hover>span, .cosmetic-mosaic-text:hover>h4, .cosmetic-mosaic-text:hover>p, .cosmetic-mosaic-text:hover>a{opacity: 1;transform: translateY(0);}
.cosmetic-mosaic-text:hover>span{transition-delay: .05s;}
.cosmetic-mosaic-text:hover>h4{transition-delay: .1s;}
.cosmetic-mosaic-text:hover>p{transition-delay: .15s;}
.cosmetic-mosaic-text:hover>a{transition-delay: .2s;}

@media screen and (max-width: 1480px){

	.cosmetic-mosaic-text{padding: 50px;}
	.cosmetic-mosaic-text>h4{font-size: 100px;margin-bottom: 40px;}
	.cosmetic-mosaic-text>p{font-size: 20px;margin-bottom: 40px;}
	.cosmetic-mosaic-text>a{width: 200px;}
}

@media screen and (max-width: 1280px){

	.cosmetic-mosaic-text>h4{font-size: 80px;margin-bottom: 30px;}
	.cosmetic-mosaic-text>p{font-size: 18px;margin-bottom: 30px;}
}

@media screen and (max-width: 960px){

	.cosmetic-mosaic-text::before{opacity: 1;}
	.cosmetic-mosaic-text>h4, .cosmetic-mosaic-text>p, .cosmetic-mosaic-text>a{opacity: 1;transform: translateY(0);}
	.cosmetic-mosaic-text>h4{font-size: 60px;}
}

@media screen and (max-width: 860px){

	.cosmetic-mosaic-text>h4{font-size: 40px;}
	.cosmetic-mosaic-text>p{font-size: 18px;}
	.cosmetic-mosaic-text>p br{display: none;}
}

@media screen and (max-width: 720px){

	.cosmetic-mosaic-grid{display: grid;grid-template-columns: repeat(2, 1fr);grid-template-rows: repeat(8, 110px);gap: 10px;height: auto;}

	.cosmetic-mosaic-item-1{grid-column:1 / 2;grid-row:1 / 3;}
	.cosmetic-mosaic-item-2{grid-column:2 / 3;grid-row:1 / 3;}
	.cosmetic-mosaic-item-3{grid-column:1 / 2;grid-row:3 / 5;}
	.cosmetic-mosaic-item-4{grid-column:2 / 3;grid-row:3 / 5;}

	.cosmetic-mosaic-item-5{grid-column:1 / 2;grid-row:5 / 7;}
	.cosmetic-mosaic-item-6{grid-column:2 / 3;grid-row:5 / 7;}
	.cosmetic-mosaic-item-7{grid-column:1 / 2;grid-row:7 / 9;}
	.cosmetic-mosaic-item-8{grid-column:2 / 3;grid-row:7 / 9;}

	.cosmetic-mosaic-item{height:auto;}

	.cosmetic-mosaic-text{position: absolute;left: 0;right: 0;width: 100%;height: calc( 50% - 5px );padding: 28px;justify-content: flex-end;}

	.cos-text-1{top: 0;bottom:auto;}
	.cos-text-2{top: calc( 50% + 5px );bottom:auto;}

	.cosmetic-mosaic-text::before{opacity:1;}
	.cosmetic-mosaic-text>h4, .cosmetic-mosaic-text>p, .cosmetic-mosaic-text>a{opacity:1; transform:translateY(0);}

	.cosmetic-mosaic-text>h4{font-size: 50px;line-height: 1.2;margin-bottom: 20px;}
	.cosmetic-mosaic-text>p{font-size: 16px;margin-bottom: 40px;word-break: keep-all;}
	.cosmetic-mosaic-text>a{width: 145px;font-size: 16px;}

	.cosmetic-mosaic-text .br-d{display:none;}

}

/*-- drink --*/
.dr-box-1 figure{background-image: url(/img/sub/drink_1.jpg);}

/*-- brand - 1 --*/
.brand-box-1 figure{background-image: url(/img/sub/brand_1.jpg);}
.brand-box-2 figure{background-image: url(/img/sub/brand_11.jpg);}
.brand-box-3 figure{background-image: url(/img/sub/brand_23.jpg);}
.brand-box-4 figure{background-image: url(/img/sub/brand_24.jpg);}
.brand-box-5 figure{background-image: url(/img/sub/brand_26.jpg);}
.brand-box-6 figure{background-image: url(/img/sub/brand_35.jpg);}

.list-card{display: flex;flex-wrap: wrap;gap: 60px;}
.list-card li{width: calc( ( 100% - 120px ) / 3 );padding: 40px;background-color: var(--color-3);border-radius: 20px;position: relative;}

.list-card li figure{margin-bottom: 25px;}
.list-card li img{display: block;margin: 0 auto;}

.list-card-text{padding-right: 80px;}
.list-card-text h4{font-size: var(--fs-24);font-weight: var(--fw-7);word-break: keep-all;line-height: 160%;margin-bottom: 3px;}
.list-card-text p{font-size: var(--fs-20);font-weight: var(--fw-4);word-break: keep-all;line-height: 160%;}

.list-card-deco{display: flex;justify-content: flex-end;align-items: flex-end;position: absolute;bottom: 0;right: 0;z-index: 1;background: #FFF;padding: 15px 0 0 15px;border-radius: 40px 0 0 0;}
.list-card-deco span{display: flex;justify-content: center;align-items: center;width: 65px;height: 65px;border-radius: 65px;
	font-size: var(--fs-30);font-weight: var(--fw-5);color: #FFF;background-color: var(--color-1);
}

.list-card-deco::before, .list-card-deco::after{content: "";position: absolute;width: 40px;height: 40px;border-radius: 50%;box-shadow: 20px 20px 0 0 #fff;}
.list-card-deco::before{left: -40px;bottom: 0;}
.list-card-deco::after{right: 0;top: -40px;}

.brand-flex{display: flex;gap: 60px;}
.brand-flex figure, .brand-flex .key-point{width: calc( ( 100% - 60px ) / 2 );}
.brand-flex figure{padding: 0;padding-bottom: 10px;}
.brand-flex figure img{width: 100%;}
.brand-flex .key-point{margin-top: 0;border-radius: 30px;}

@media screen and (max-width: 1480px){

	.list-card{gap: 45px;}
	.list-card li{width: calc( ( 100% - 90px ) / 3 );padding: 30px;}
	
	.list-card li img{width: 100%;}
	
	.list-card-text{padding-right: 70px;}
	
	.list-card-deco{padding: 13px 0 0 13px;}
	.list-card-deco span{width: 60px;height: 60px;border-radius: 60px;}
	
	.brand-flex .key-point{padding: 35px 43px;}
}

@media screen and (max-width: 1080px){

	.list-card{gap: 45px;}
	.list-card li{width: calc( ( 100% - 45px ) / 2 );}
	
	.list-card li figure{margin-bottom: 20px;}
	
	.brand-flex{gap: 45px;}
	.brand-flex figure, .brand-flex .key-point{width: calc( ( 100% - 45px ) / 2 );}
}

@media screen and (max-width: 860px){

	.list-card{gap: 30px;}
	.list-card li{width: calc( ( 100% - 30px ) / 2 );}	
	
	.brand-flex{display: block;}
	.brand-flex figure, .brand-flex .key-point{width: 100%;}
	.brand-flex .key-point{margin-top: 40px;border-radius: 20px;}
}

@media screen and (max-width: 720px){

	.list-card{display: block;}
	.list-card li{width: 100%;padding: 25px;border-radius: 15px;}
	.list-card li + li{margin-top: 15px;}
	
	.list-card-text h4{font-size: 20px;line-height: 160%;margin-bottom: 3px;}
	.list-card-text p{font-size: 16px;line-height: 160%;}
	
	.brand-flex{margin-top: 35px !important;}
	.brand-flex figure{padding-bottom: 5px;}
	
	.brand-flex .key-point{padding: 21px 23px;border-radius: 15px;margin-top: 20px;}
}

/*-- brand - 2 --*/
.round-card{display: flex;gap: 50px;}
.round-card li{width: calc( ( 100% - 150px ) / 4 );position: relative;}

.round-card li figure{width: 280px;height: 280px;margin: 0 auto;border-radius: 50%;overflow: hidden;}
.round-card li img{display: block;height: 280px;margin: 0 auto;}

.round-card-text{padding: 35px 40px;padding-top: 180px;border-radius: 20px;border: 1px solid #e9e9e9;margin-top: -150px;box-shadow: 0 15px 40px rgba(0,0,0,.1);}
.round-card-text h4{font-size: var(--fs-24);font-weight: var(--fw-7);word-break: keep-all;line-height: 160%;margin-bottom: 5px;}
.round-card-text p{font-size: var(--fs-20);font-weight: var(--fw-4);word-break: keep-all;line-height: 160%;min-height: 96px;}

@media screen and (max-width: 1480px){

	.round-card{gap: 30px;}
	.round-card li{width: calc( ( 100% - 90px ) / 4 );}

	.round-card li figure{width: 220px;height: 220px;}
	.round-card li img{height: 220px;}
	
	.round-card-text{padding: 25px 30px;padding-top: 170px;margin-top: -150px;}
	.round-card-text p{min-height: 84px;}
}

@media screen and (max-width: 1280px){

	.round-card{flex-wrap: wrap;gap: 50px;}
	.round-card li{width: calc( ( 100% - 50px ) / 2 );}
	
	.round-card-text p{min-height: 56px;}
}

@media screen and (max-width: 860px){

	.round-card{gap: 30px;}
	.round-card li{width: calc( ( 100% - 30px ) / 2 );}
}

@media screen and (max-width: 720px){

	.round-card{display: block;}
	.round-card li{width: 100%;}
	.round-card li + li{margin-top: 25px;}
	
	.round-card-text{padding-top: 120px;margin-top: -100px;}
	.round-card-text h4{font-size: 20px;}
	.round-card-text p{font-size: 16px;min-height: 52px;}
}

/*-- brand - 3 --*/
.list-card-2 li{padding: 0;overflow: hidden;}
.list-card-2 li img{width: 100%;}

.list-card-2 .list-card-text{padding: 40px;padding-top: 5px;padding-right: 120px;}

.round-card-2{flex-direction: column;gap: 25px;}
.round-card-2 li{width: 100%;}
.round-card-2 .round-card-text{padding-top: 35px;margin-top: 0;}
.round-card-2 .round-card-text p{min-height: auto;}

@media screen and (max-width: 1480px){

	.list-card-2 .list-card-text{padding: 30px;padding-top: 0;padding-right: 100px;}
	
	.round-card-2{gap: 20px;}
	.round-card-2 .round-card-text{padding-top: 25px;}
}

@media screen and (max-width: 1080px){

	.brand-box-4{flex-direction: column-reverse !important;}
}

@media screen and (max-width: 720px){

	.list-card-2 .list-card-text{padding: 25px;padding-top: 0;padding-right: 95px;}
	
	.round-card-2 li + li{margin-top: 20px;}
}

/*-- brand - 4 --*/
.round-card-3{flex-wrap: wrap;}
.round-card-3 .round-card-text{padding-bottom: 25px;}
.round-card-3 .round-card-text h4{text-align: center;margin-bottom: 0;}

@media screen and (max-width: 1080px){

	.brand-box-6{flex-direction: column-reverse !important;}
}

@media screen and (max-width: 720px){

	.round-card-3{display: flex;gap: 10px;}
	.round-card-3 li{width: calc( ( 100% - 10px ) / 2 );}
	.round-card-3 li + li{margin-top: 0;}
	
	.round-card-3 li figure{width: 130px;height: 130px;}
	.round-card-3 li img{height: 130px;}
	
	.round-card-3 .round-card-text{padding-left: 0;padding-right: 0;padding-bottom: 20px;border-radius: 15px;}
	.round-card-3 .round-card-text h4{font-size: 18px;}
}