@charset "utf-8";


* html .clearfix{height:1%;}
.clearfix{display:block;}
.clearfix:after{display:block;visibility:hidden;clear:both;content:".";overflow:hidden;width:0;height:0;font-size:0;line-height:0;}
.clear{clear:both;}
.hide{display:none;}
.skip, .blind{position:absolute;width:1px;height:1px;margin:0;padding:0;background:none;font-size:3px;color:transparent;line-height:0;}
.hidden_txt{overflow:hidden;position:absolute;width:0;height:0;background:transparent;font-size:0;line-height:0;text-indent:-9999px;border:none !important;background:transparent !important;}
button{display:inline-block;background:transparent;font-size:inherit;font-weight:normal;font-family:inherit;color:inherit;cursor:pointer;}


/*text*/
[class*="con_h"]{word-break: keep-all; }
.con_h1{font-size:var(--h1-size); font-family:'GmarketSans'; font-weight: 700; text-transform:uppercase; letter-spacing: -2px;}
.con_h2{font-size:var(--h2-size); font-family:'GmarketSans'; font-weight: 700; text-transform:uppercase; letter-spacing: -2px;}
.con_h3{font-size:var(--h3-size); font-family:'GmarketSans'; font-weight: 700;}
.con_h4{font-size:var(--h4-size);}
.con_h5{font-size:var(--h5-size); font-family:'GmarketSans'; font-weight: 700;}


/* Dots */
#main_slide{position:relative;}
.slick-dotted.slick-slider{padding-bottom:50px;}
.slick-dots{/* position:absolute;*/bottom:0px;display:block;padding:0;margin:0;list-style:none;/* text-align:left;*/;}
.slick-dots li{position:relative;display:inline-block;margin:0 5px;padding:0;cursor:pointer;}
.slick-dots li button{font-size:0;line-height:0;display:block;width:50px;height:5px;background:#cfcfcf;opacity:0.5;cursor:pointer;color:transparent;border:0;}
.slick-dots li.slick-active button{width:50px;opacity:0.4;background:#00afd5;}
.main01sec-1{font-weight:600;font-size:clamp(1.5rem, 4vw, 1.8rem);color:#fff;height:40px;line-height:40px;text-align:center;padding:0 20px;text-align:center;margin-bottom:15px;}
.main01sec-1 span{font-weight:300;}
.main01sec-2{font-size:clamp(3.5rem, 4vw, 4rem);font-weight:300;line-height:122%;letter-spacing: -3px;text-align:center; font-family: 'GmarketSans';}
.main01sec-3{color:rgba(255,255,255,0.9);line-height:140%;text-align:center;padding-top:20px; padding-bottom: 20px}
.mainsmore a{border: 1px solid rgba(255,255,255,0.5); display: block; font-size: 14px; width: 130px;text-align: center; color: rgba(255,255,255,1.00); margin: 0 auto}
.main01sec{text-shadow: 0 0 10px rgba(0, 0, 0, 0.1); float:left;  text-align:left;}
.main01secw{overflow:hidden;/* height:225px;*/position:relative;text-align:center;}
.maintop{ margin:0 auto;padding:0;/*height:100%;*/ width:100%;text-align:center;z-index: 100;/* display: none; */top: 46%; position: absolute;}
.maintop .mainimg{margin:0 auto;width:1400px;text-align:left;overflow:hidden;height: 690px;position:relative;}
.maintop .text{ color:#ffffff;font-size:32px;line-height:36px;text-align:center;margin:0 auto;z-index: 0;}
.maintop .text strong{font-size:52px;display:block;padding:0 0 25px 0;}
.maintop .mainban{width: 1340px;left: 50%;margin-left: -670px;background: rgb(255 255 255);/* background: linear-gradient(90deg, rgba(0,151,182,1) 0%, rgba(157,180,74,0.8) 100%); */position: absolute;bottom: 0;padding: 20px 0 20px 20px;/* display: table; */box-sizing: border-box;}
.Mainbg{max-height:950px; aspect-ratio: 1/0.9;}
.Mainbg .page:before{content:""; display: inline-block; width:100%; height: 100%; background:#00000030; position: absolute; left:0; top: 0; z-index: 1; }
@media only all and (max-width:720px){
	.Mainbg{height:500px;}
	.maintop{top:45%;}
	.main01sec-2{font-size:clamp(2rem, 4vw, 2.5rem );}
}


/*sec01_수확차이의 원인*/
section[id*="sec"] p{font-size:17px; opacity: 0.8;}
#sec01{margin-top:60px;}
#sec01 .tit{padding:30px;
	& h4{margin:-10px 0 15px;}
}
#sec01 ul[class*="caus_grid"]{ display:grid; grid-template-columns: repeat(4, 1fr); gap:2%; width:100%; margin-bottom:2%;}
#sec01 ul li{border-radius: 10px; overflow: hidden;}
#sec01 ul li:not(.column){display: flex; align-items: center; justify-content: center; text-align: center; position:relative; min-height:310px;;
	& .txt h5{color:#fff; font-size:1.2rem;}
	& .img{position:absolute; z-index: -1; width:100%; height:100%;
		& img{ transition:all 0.3s ease; width: 100%; height: 100%; object-fit: cover;}
	}	
}
#sec01 ul li:hover .img img{transform:scale(1.2);}
#sec01 ul.caus_grid .column{grid-column: 1/3;}
#sec01 ul.caus_grid2 .column2{grid-column: 3/5; }
#sec01 ul.caus_grid2 .logo{background:#fff; box-shadow:0 0 30px 2px rgba(0, 0, 0, 0.06); }
#sec01 ul.caus_grid2 .logo img{transition:all 0.3s ease;}
#sec01 ul.caus_grid2 .logo:hover img{transition:all 0.3s ease; transform:scale(1.1);}
@media only all and (max-width:720px){
	#sec01{margin-top:0;}
	#sec01 ul[class*="caus_grid"]{grid-template-columns:repeat(2, 1fr);}
	#sec01 ul.caus_grid .column{text-align: center;}
	#sec01 ul.caus_grid2 .column2{grid-column: 1/3;}
	#sec01 ul li:not(.column){min-height:200px;}
	#sec01 ul.caus_grid2 .logo{border:1px solid #f2f2f2;}
}


/*sec02_제품소개*/
#sec02{background:#e8edee; display: grid; grid-template-columns: 50% 50%; align-items: center;  min-height:750px; margin-top:100px;}
.prod_left{ display: grid; grid-template-columns: auto 660px; height:100%; background:url("../img/main/sub02_bg.jpg") no-repeat center  / cover; padding:40px; position: relative;}
.prod_left .tit{color:#fff; align-self: center; display: flex; flex-flow:column wrap; justify-content:space-between; align-items:flex-start; height:60%;
	& h1{font: bold  clamp(2.5rem, 4vw, 3rem)'GmarketSans'; text-transform: uppercase;}
	& h4{margin:-10px 0 10px 0; }
	& p{opacity: 0.8; }
	& a{display: inline-block; font-weight:bold; padding:10px 35px; min-width:180px; border-radius:30px; color:#368174; background:#fff url(../img/main/btn_half_arrow.png) no-repeat 75% center;}
}
.prod_right{position:relative; z-index:10; left:-20%; width:120%;}
.prod_right .proSwiper{width:100%; overflow: hidden;}
.swiper-button-next:after,
.swiper-button-prev:after{content:"";}
.proSwiper_btn{position:relative; left:0; top:-15%; display: flex; justify-content:space-between; width:105px; 
	& .swiper-button-next, .swiper-button-prev{width:25px; position:relative; display: flex; justify-content: center; align-items: center;}
	& .swiper-button-next:before, .swiper-button-prev:before{transition:all 0.2s ease; position:absolute; content:""; z-index: -1; opacity: 0.3; display: inline-block; width:50px; aspect-ratio: 1/1; border:1px solid #fff; border-radius: 50%;}
	& .swiper-button-next svg path, .swiper-button-prev svg path{fill:#fff;}
	& .swiper-button-next:hover:before, .swiper-button-prev:hover:before{background:#fff; opacity: 1;}
	& .swiper-button-next:hover svg path, .swiper-button-prev:hover svg path{fill:#368174;}
}
.proSwiper .swiper-wrapper{padding:20px; align-items: center;}
.proSwiper .swiper-slide{text-align: center; background:#fff; padding:20px 40px; border-radius: 20px; transform:scale(0.95); box-sizing:border-box;}
.proSwiper .swiper-slide.swiper-slide-active{background:#0e5b51 url(../img/main/sec02_prod_bg.png) no-repeat center -15%; transform:scale(1.02); padding:30px  40px; box-shadow:0 0 10px rgba(0, 0, 0, 0.3);}
.proSwiper .swiper-slide .txt sub{color:#b0bc00;}
.proSwiper .swiper-slide .txt h5{font-size:var(--l-size);}
.proSwiper .swiper-slide .txt p{display: none;}
.proSwiper .swiper-slide.swiper-slide-active{
	& .txt{color:#fff;
		& sub{color:#d5e221;}
		& h5{font-size:var(--h5-size);}
		& p{display: block;}
	}
} 
@media only all and (max-width:720px){
	#sec02{display: flex; flex-flow:column wrap; align-items: flex-start;}
	.prod_left{grid-template-columns:repeat(1, 1fr); width: 100%;}
	.prod_left>div.space{display: none;}
	.prod_left .tit{display: block; height:auto; text-align: center;
		& h1{font-size:var(--h2-size);}
		& a{background:#fff; margin-top:10px;}
	}
	.proSwiper_btn{display: none;}
	.proSwiper .swiper-slide, .proSwiper .swiper-slide.swiper-slide-active{padding:10px;}
	.proSwiper .swiper-slide.swiper-slide-active{transform:scale(0.95); box-shadow:none;}
	.prod_right{left:-10%; width:110%;}
	
}

/*sec03_솔루션*/
#sec03{overflow:hidden;position:relative;}
#sec03 .titArea{text-align:center;}
#sec03 .txt1{padding-bottom:10px;font-size:22px;color:#fff;letter-spacing:1px;}
#sec03 .txt2{padding-top:30px;font-family:HDHarmonyL;font-size:21px;color:#fff;line-height:32px;}
#sec03 .txt2 .mobileBlock{display:none;}
#sec03 .pleasureList{overflow:hidden;height:100%;}
#sec03 .pleasureList > ul{height:100%;}
#sec03 .pleasureList > ul > li{float:left;position:relative;width:25%;height:100%;}
#sec03 .pleasureList > ul >li:after{content:'';display:block;padding-bottom:167%;}
#sec03 .pleasureList > ul > li > a{display:block;overflow:hidden;position:absolute;top:0;left:50%;z-index:0;width:100%;height:100%;transform:translateX(-50%);transition:width .5s ease-in-out;}
#sec03 .pleasureList li:first-child a{border-left-width:0;}
#sec03 .pleasureList .textArea{display:block;position:absolute;z-index: 2; top:50%;left:0;text-align:center;vertical-align:middle;width:100%;color:#fff;line-height:1;transform:translateY(-17%);transition:all .3s linear;}
#sec03 .pleasureList .plsTit{font-size:var(--h4-size);font-weight:600; font-family: 'GmarketSans'; line-height:1.2;}
#sec03 .pleasureList .plsTit span{font-size:16px; font-weight:500;}
/*#sec03 .pleasureList .plsTit:after{width: 55px; height: 1px; background: #fff; position: relative; display: block;margin: 17px auto 0; content: ''; }*/
#sec03 .pleasureList .plsimg{padding-bottom:20px;}
#sec03 .pleasureList .plsText{opacity:1; margin-top:40px;color:rgba(255,255,255,0.57);font-size:18px;line-height:1.5;}
#sec03 .pleasureList .plsTits{font-size:16px;color:rgba(255,255,255,0.9);padding-top:25px;line-height:160%; opacity: 0; transform:translateY(-1%); transition:all 0.2s ease;}
#sec03 .pleasureList .plsText .mobileBlock{display:none;}
#sec03 .pleasureList .more{margin-top:40px;width:100%;text-align:center;}
#sec03 .pleasureList li:hover .textArea{transform:translateY(-50%);}
#sec03 .pleasureList li:hover .plsTits{opacity: 1; transform:translateY(0%);}

#sec03 .plsText ul{width:220px;margin:0px auto;}
#sec03 .plsText li{float:none;text-align:left;}
#sec03 .plsText li{border-bottom:1px solid rgba(255,255,255,0.3);display:block;color:#39bd23;font-size:16px;background:url("../img/main/aca_c.png") no-repeat 95% center;padding:15px 0;}
#sec03 .plsText li:hover{color:#ffffff;}

#sec03 .btnMore{display:inline-block;width:200px;height:45px;box-sizing:border-box;border:1px solid rgba(255,255,255,1);font-size:18px;color:rgba(255,255,255,1);line-height:45px;text-align:center; border-radius: 30px}
#sec03 .pleasureList .imgArea{width:100%;height:100%; overflow: hidden; transition:all 0.2s ease; position: relative; isolation: isolate;}
#sec03 .pleasureList li:nth-child(1) .imgArea{background:url(../img/main/sec03_bg01.jpg) center no-repeat; transition:background-size 0.5s ease; background-size:100%; }
#sec03 .pleasureList li:nth-child(2) .imgArea{background:url(../img/main/sec03_bg02.jpg) center no-repeat; transition:background-size 0.5s ease; background-size:100%; }
#sec03 .pleasureList li:nth-child(3) .imgArea{background:url(../img/main/sec03_bg03.jpg) center no-repeat; transition:background-size 0.5s ease; background-size:100%; }
#sec03 .pleasureList li:nth-child(4) .imgArea{background:url(../img/main/sec03_bg04.jpg) center no-repeat; transition:background-size 0.5s ease; background-size:100%; }
#sec03 .pleasureList .imgArea:after{position:absolute; z-index: -1; top:0; left:0; opacity: 1; width:100%; height:100%; display:inline-block; content:""; background:#00000099;  transition:all 0.5s ease;}
#sec03 .pleasureList li:hover .imgArea{background-size:110%; }
#sec03 .pleasureList li:hover .imgArea:after{opacity: 0.4;}
#sec03 .pleasureList .mobileClick{display:none;}
#sec03 .bgLine .line{position:absolute;top:0;width:40px;height:100%;background-color:rgba(67, 67, 67, .15);}
#sec03 .bgLine .line.line1{left:calc(50% - 375px);}
#sec03 .bgLine .line.line2{left:50%;}
#sec03 .bgLine .line.line3{left:calc(50% + 375px);}
#sec03 .bgLine .line .innerLine{display:block;position:absolute;top:-100%;left:0;width:1px;height:60%;background:linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .15) 25%, rgba(255, 255, 255, .15) 76%, rgba(255, 255, 255, .01) 99%, rgba(255, 255, 255, 0) 100%);}
@media only all and (min-width:1025px) and (max-width:1440px){
	#sec03 .txt1{font-size:1.5vw;}
	#sec03 .txt2{font-size:1.4vw;line-height:1.5;}
	#sec03 .pleasureList .plsText{padding:0 2%;font-size:1.2vw;}
	#sec03 .pleasureList li:not(:first-child) .plsText br{display:none;}
}
@media only all and (min-width:1025px){
	#sec03 .tit, #sec03 .txt1, #sec03 .txt2{position:relative;top:100px;opacity:0;}
	#sec03 .pleasureList .plsText{overflow:hidden;position:relative;top:100px;margin-top:0;line-height:0;opacity:0;transition:all .3s ease-in-out;}
	#sec03 .pleasureList .more{overflow:hidden;position:relative;top:100px;margin-top:0;opacity:0;transition:all .3s ease-in-out;transition-delay:.1s;}
	#sec03 .pleasureList a:focus .imgArea .offImg, #sec03 .pleasureList a:hover .imgArea .offImg{opacity:0;}
	#sec03 .pleasureList a:focus .plsText, #sec03 .pleasureList a:hover .plsText{top:0;margin-top:40px;line-height:1.5;opacity:1;}
	#sec03 .pleasureList a:focus .more, #sec03 .pleasureList a:hover .more{top:0;margin-top:40px;height:47px;opacity:1;}
}
@media only all and (max-width:720px){
   #sec03 .pleasureList > ul{display:grid; grid-template-columns: repeat(2, 1fr);}
   #sec03 .pleasureList > ul > li{float: none; width:100%;}
   #sec03 .pleasureList .plsTits{display: none;}
   #sec03 .pleasureList > ul{display:grid; grid-template-columns: repeat(2, 1fr);}
	 #sec03 .pleasureList > ul > li{width: 100%;}
	
   #sec03{overflow:hidden;position:relative;padding:0;}
	#sec03 .pleasureList .plsTits{padding-top:10px; font-size: 14px}
	#sec03 .pleasureList .plsTit{font-size:18px;}
	#sec03 .txt1{font-size:16px;}
	#sec03 .txt2{padding-top:17px;font-size:15px;line-height:21px;}
	#sec03 .txt2 .mobileBlock{display:inline;}
	#sec03 .pleasureList{padding:0 0px;/*max-width:640px;*/}
	#sec03 .pleasureList > ul> li{float:none;position:relative;width:100%;height:220px;transition:all .3s linear;}
	#sec03 .pleasureList > ul> li:first-child{margin-top:0;}
	#sec03 .pleasureList > ul> li.active{height:340px;}
	#sec03 .pleasureList > ul> li .imgArea{background-position:center center;}
	#sec03 .pleasureList > ul> li.active .imgArea .offImg{opacity:0;}
	#sec03 .pleasureList > ul> li:before{content:'';display:block;position:absolute;top:calc(50% - 5px);right:17px;z-index:10;width:14px;height:9px;background:url(https://drivingexperience.hyundai.co.kr/kr/common/images/pleasure-icon-m.png) 0 -11px/14px 20px no-repeat;}
	#sec03 .pleasureList > ul> li.active:before{background-position:0 0;}
	#sec03 .pleasureList .plsText{font-size:14px;line-height:20px;}
	#sec03 .pleasureList .plsText .mobileBlock{display:inline;}
	#sec03 .pleasureList .more, #sec03 .pleasureList .plsText{display:none;}
	#sec03 .pleasureList li.active .more, #sec03 .pleasureList li.active .plsText{display:block;}
	#sec03 .pleasureList li.active .plsText{margin-top:5px;padding:0;}
	#sec03 .pleasureList li.active .plsText br:not(.mobileBlock){display:none;}
	#sec03 .pleasureList li.active .more{margin-top:20px;}
	#sec03 .pleasureList .mobileClick{display:block;position:absolute;top:0;left:0;z-index:10;width:100%;height:100%;}
	#sec03 .pleasureList li.active .mobileClick{top:calc(50% - 4px);right:17px;left:auto;width:14px;height:9px;}
	#sec03 button{background:none;border:none;padding:0;margin:0;cursor:pointer;overflow:visible;white-space:nowrap;}
	#sec03 .pleasureList li.active .mobileClick:before{content:'';display:block;position:absolute;top:50%;left:50%;width:30px;height:30px;transform:translate(-50%, -50%);}
	#sec03 .bgLine{display:block;}#sec03 .bgLine .line{width:20px;}
	#sec03 .bgLine .line.line1{left:calc(50% - 80px);}
	#sec03 .bgLine .line.line3{left:calc(50% + 80px);}
	#sec03 .plsimg img{width: 40px}
	#sec03 .pleasureList .plsimg{padding-bottom: 5px}
}


/*sec04_부농비결 TV 및 퀵메뉴*/
#sec04{margin:80px auto 100px;}
#sec04 .tit{display: flex; align-items: center; margin-bottom:20px; position: relative; width: 100%;}
#sec04 .tit h3{margin-right:10px;}
#sec04 .youtSwiper {overflow: hidden; padding:19px 17px; margin:-19px -17px;}
#sec04 .swiper_btn{position: absolute; right:0; display: flex; flex-flow:row nowrap; }
#sec04 .swiper_btn .swiper-button-next,
#sec04 .swiper_btn .swiper-button-prev{opacity: 0.3; margin-right:5px; transition:all 0.2s ease; position:static;}
#sec04 .swiper_btn .swiper-button-next:hover,
#sec04 .swiper_btn .swiper-button-prev:hover{opacity:0.8;}
.youtSwiper .swiper-slide{ overflow: visible;}
.youtSwiper .swiper-slide:hover a{ box-shadow:0 0px 20px 5px rgba(0,0,0,0.1); }
.youtSwiper .swiper-slide a{ border-radius: 15px; overflow: hidden; background:#fff; box-shadow:0 1px 10px 1px rgba(0,0,0,0.1); display:inline-block; transition:all 0.2s ease;}
.youtSwiper .swiper-slide a .img{display: flex; position: relative; justify-content: center; align-items: center;}
.youtSwiper .swiper-slide a .img .icon{position: absolute; z-index: 1;}
.youtSwiper .swiper-slide a .txt{padding:40px 55px; } 
.youtSwiper .swiper-slide a .txt h5{ font-size:var(--l-size); word-break: keep-all;} 
#sec04 .quick{display: flex; flex-flow:row nowrap; justify-content: space-between; column-gap:1.5%; margin-top:30px;}
#sec04 .quick li{flex:1;}
#sec04 .quick li:nth-of-type(odd) a{color:#fff;}
#sec04 .quick li a{ display: flex;  position: relative; align-items:center; justify-content: center;}
#sec04 .quick li a .txt{position: absolute; z-index: 1; width:100%; height:100%; padding:12%; display: flex;  justify-content: space-between;}
#sec04 .quick li a .txt h5{font-weight:500;}
#sec04 .quick li a .txt .btn{align-self:flex-end;}
#sec04 .quick li a .bg{position:relative; border-radius: 15px; overflow: hidden;}
#sec04 .quick li a .bg img{transition:all 0.2s ease;}
#sec04 .quick li a:hover .bg img{transform: scale(1.1);}
#sec04 .quick:after{display:none;}
@media only all and (max-width:720px){
	#sec04 .tit{flex-flow: column wrap; justify-content: center; align-items: center;
		& h3{margin-right:0; margin-bottom:10px; font-size: var(--h2-size);}
	}
	.youtSwiper .swiper-slide a .txt{padding:20px 30px;}
	#sec04 .quick{flex-flow:column wrap;}
	#sec04 .quick li{overflow: hidden; height:100%; border-radius: 15px;}
	#sec04 .quick li a{align-items: flex-start;}
	#sec04 .quick li a .txt{ padding:5%; height:auto;}
	#sec04 .quick li a .bg{width:100%;}
	#sec04 .quick li a .bg img{width:100%; object-fit: cover;}
	#sec04 .swiper_btn{display: none;}
}

/*sec05_작물별 재배력*/
#sec05{ background:url(../img/main/sec05_bg.jpg) no-repeat center / cover ; padding:120px 0;}
.crops{display: grid; grid-template-columns:40% 60%; align-items: center; color:#fff;}
.crops .list{display: grid; grid-template-columns: repeat(4, calc((100% - 6%) / 4 )); column-gap: 2%; }
.crops .list a{transition:all 0.2s ease; position:relative; background:#ffffff40; border:1px solid #ffffff80; border-radius: 10px; backdrop-filter: blur(5px); display: flex; flex-flow:column wrap; justify-content: center; align-items: center; aspect-ratio:1 / 1;}
.crops .list a:hover{background:#ffffff70; backdrop-filter: blur(20px); box-shadow: 0 0 20px rgba(0,0,0,0.2);}
.crops .list a p{font-family: 'GmarketSans';  margin-top:15px;}
@media only all and (max-width:1024px){
	.crops .list{grid-template-columns: repeat(2, 1fr);width:95%; }
	.crops .list li{margin-top:10px;}
	.crops .list a{aspect-ratio: 1/0.7;}
}
@media only all and (max-width:720px){
	#sec05{padding:60px 0;}
	.crops{display: flex; flex-flow:column wrap; justify-content: center;}
	.crops .tit{text-align: center;
		& h3 { font-size: var(--h2-size); }
	}
	.crops .list{grid-template-columns: repeat(2, 1fr);width:95%; }
	.crops .list li{margin-top:10px;}
}



@media only all and (max-width:1520px){
	
}

@media only all and (max-width:1400px){
	
}

@media only all and (max-width:1024px){
	
}

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

}