@charset "utf-8";
/* CSS Document */

/* 공통 */
.mainContent {}
.mainContent h1{ font-size:37px; margin-bottom:20px;} 

#sec01{}

.hid {position: absolute;margin: -1px; padding: 0; width: 1px; height: 1px;border: 0;clip: rect(0, 0, 0, 0);overflow: hidden;}
/* slick slide common */
.slick-slider {-webkit-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent;}
.slick-slide {display: none;min-height: 1px; vertical-align: middle;}
.slick-list {overflow: hidden;}
.slick-list.dragging {cursor: pointer;}
.slick-initialized .slick-slide {display: inline-block;}
.slick-arrow.slick-hidden {display: none;}
.slick-current {opacity: 1; display: block;}
.slick-track {position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto;}

/* slick arrow show */
.arwShow .slick-arrow.slick-hidden { display: inline-block; }


.control {  display: flex; align-items: center; z-index: 2;padding:15px 20px; font-size:25px; }
.control .page { margin-right:10px; }
.control .page span { position: relative; display: inline-block; padding-left:80px; margin-left: 0.4rem;  }
.control .page span::before { position: absolute; top: 50%; left:10px; width:50px; height:2px; background: #111; content: ""; }
.control a { padding: 0 0.1rem; }
.control a.play { display: none; }



.Minfo { position: relative; width:100%;z-index: 1; }
.Minfo .slider {  overflow: hidden;  isolation: isolate; }
.Minfo .slider,
.Minfo .slick-list,
.Minfo .slick-track { position: relative; z-index: 1; }
.Minfo .item img{ width:100%;}
.Minfo .Minfo-txt img{ width:100%;}
.Minfo .control { position: absolute; bottom: 0; right: 0;  background:#fff;  }


#sec01{ position:relative; }
#sec01 .inner{ display:flex; justify-content: space-between; padding-top:130px; }
#sec01 .s01{ position:relative; width:calc(100% - (100% / 3)); }
#sec01 .s01:before{ content:''; position:absolute; width:150px; height:150px; top:-130px; right:20%;background:url(../img/main/MVisual-01-01.png) no-repeat 50% 0%; background-size:100% auto; z-index:1;}
#sec01 .s01 .area{position:absolute; top:-130px; right:0; width:calc(100% + 315px); height:calc(100% + 130px); background:url(../img/main/MVisual-01.jpg) no-repeat 50% 100%; background-size:cover;}
#sec01 .s01 .area:before{ content:'';position:absolute; bottom:-160px; right:0; width:100%; height:200px; background:url(../img/main/MVisual-01-bg.jpg) no-repeat 50% 100%; background-size:cover;}
#sec01 .s01 .area .txt{ position:absolute; left:350px; top:70px;}
#sec01 .s01 .area .txt h2{font-family: 'HsBombaram21'; color:#f05131; font-size:35px; font-weight:normal;}
#sec01 .s01 .area .txt h2 b{ display:block; font-size:65px;font-weight:normal; margin-top:7px;}
#sec01 .s01 .area .txt p{ color:#555;}
#sec01 .s01 h1{ margin-bottom:30px;}
#sec01 .s02{ width:calc(100% / 3);}

#sec02 ul{display:flex;flex-wrap: wrap;}
#sec02 ul li{ width:calc(100% / 3);}
#sec02 ul li a{ position:relative; display:block; padding:70px; height:300px; background-repeat:no-repeat; background-size:cover; background-position:50% 50%; ;}
#sec02 ul li:nth-child(1) a{ background-image:url(../img/main/sec01-01.jpg);}
#sec02 ul li:nth-child(2) a{ background-image:url(../img/main/sec01-02.jpg);}
#sec02 ul li:nth-child(3) a{ background-image:url(../img/main/sec01-03.jpg);}
#sec02 ul li:nth-child(4) a{ background-image:url(../img/main/sec01-04.jpg)}
#sec02 ul li:nth-child(5) a{ background-image:url(../img/main/sec01-05.jpg)}
#sec02 ul li:nth-child(6) a{ background-image:url(../img/main/sec01-06.jpg)}
#sec02 ul li h2{ font-size:21px;}
#sec02 ul li h2 b{ display:block; font-size:40px;}
#sec02 ul li p{ opacity:0.7; margin-top:37px; line-height:27px;}
#sec02 ul li i{ position:absolute; font-size:35px;}
#sec02 ul li:nth-child(1) h2, #sec02 ul li:nth-child(1) i{color:#fff}
#sec02 ul li:nth-child(1) p, #sec02 ul li:nth-child(2) p, #sec02 ul li:nth-child(5) p{color:#fff}
#sec02 ul li:nth-child(2) h2, #sec02 ul li:nth-child(2) i{color:#be8b50}
#sec02 ul li:nth-child(3) h2{color:#b72e5c}
#sec02 ul li:nth-child(4) h2{color:#2a3a38}
#sec02 ul li:nth-child(5) h2{color:#abc390}
#sec02 ul li:nth-child(6) h2{color:#2a3a38}
#sec02 ul li:nth-child(1) i, #sec02 ul li:nth-child(2) i, #sec02 ul li:nth-child(3) i, #sec02 ul li:nth-child(5) i,#sec02 ul li:nth-child(6) i{ top:40px; right:40px;}
#sec02 ul li:nth-child(4) i{ bottom:40px; left:70px;}
#sec02 ul li:nth-child(5) i{ color:#4f4818;}

#sec03{ padding:var(--padding150);}
#sec03 ul{display: grid; grid-template-columns:repeat(2, 1fr); gap:50px 30px;}
#sec03 a{ display:block;transition: all .3s ease-in-out;}
#sec03 a:hover{ color:#F36}
#sec03 dl{display: grid; grid-template-columns:37% 1fr; gap:37px;}
#sec03 dl dt img{ width:100%;}
#sec03 dl dd b{ display:inline-block; padding:10px 20px; color:#fff; font-size:16px;}
#sec03 dl dd b.on{ background:#06F}
#sec03 dl dd b.off{ background:#777}
#sec03 dl dd h2{ margin:20px 0 10px 0; font-size:30px;}
#sec03 dl dd .txt p{ color:#777;display: grid; grid-template-columns:80px 1fr;gap:20px;}
#sec03 dl dd .txt p+p{ margin-top:5px;}
#sec03 dl dd .txt span{ position:relative;}
#sec03 dl dd .txt span:before{ content:''; position:absolute; top:50%;transform: translateY(-50%); right:0; width:1px; height:13px; border-left:1px #ddd solid;}

#sec04 .inner:before{ content:'';position:absolute; width:90px; height:90px; right:250px; top:15px;background:url(../img/main/sec04-01.png) no-repeat; background-size:cover;}
#sec04 .inner .area{background:url(../img/main/sec04-02.jpg) no-repeat; background-size:cover; color:#fff; padding:89px 370px;}
#sec04 .inner .area dl{ display:flex;justify-content: space-between;align-items: flex-end;}
#sec04 .inner .area dl dt h2{ font-size:37px;}
#sec04 .inner .area dl dt h2 b{ color:#fce41e;}
#sec04 .inner .area dl dt p{ opacity:0.7; margin-top:20px;}
#sec04 .inner .area dl dd a{ display:inline-block; border:1px solid rgb(255,255,255,0.3); border-radius:15px; color:#fff; padding:15px 30px;}
#sec04 .inner .area dl dd a i{ margin-left:30px;}


@media (max-width: 1980px) {
	
	.control {font-size:22px; }
	.control .page{font-size:16px;}
	.control .page span { padding-left:40px;}
	.control .page span::before {left:5px;width:30px;height:1px;}
	
	.mainContent h1{ font-size:30px;}
	
	#sec01 .s01 .area{width:calc(100% + 235px);}
	#sec01 .s01 .area:before{ bottom:-140px; right:0; width:100%; height:170px;}
	#sec01 .s01 .area .txt{left:270px;}
	#sec01 .s01 .area .txt h2{ font-size:30px;}
	#sec01 .s01 .area .txt h2 b{font-size:50px; margin:0;}
	
	#sec02 ul li h2 b{font-size:35px;}
	
	#sec03 dl dd h2{font-size:25px;}
	
	#sec04 .inner:before{width:70px; height:70px; }
	#sec04 .inner .area{ padding:60px 300px;}
	#sec04 .inner .area dl dt h2{ font-size:30px;}
}
@media (max-width: 1440px) {
	#sec03{ margin:0 10px;}
	
	#sec04 h1{ padding:0 10px}
	#sec04 .inner .area {padding: 60px 100px 60px 200px;}
	
}

@media (max-width: 1280px) {
	#sec02 ul li{ width:calc(100% / 2);}
	
	#sec03 ul{gap:37px 20px}
	#sec03 dl{gap:20px;}
	#sec03 dl dd h2{ font-size:20px; margin:10px 0;}
	#sec03 dl dd b{ padding:7px 13px; font-size:15px;}
	
	
}

@media (max-width: 1024px) {
	
	#sec01 .inner{ display:block; padding-top:0;}
	#sec01 .s01{ position:relative; width:100%;}
	#sec01 .s01:before{ top:0;}
	#sec01 .s01 .area{ position:relative; width:100%; height:500px; top:0;}
	#sec01 .s01 .area .txt{ left:10px;}
	#sec01 .s02{ width:100%;}
	
	#sec04 .inner .area dl{ display:block;}
	#sec04 .inner .area dl dd{ margin-top:20px;}
	#sec04 .inner .area {padding: 60px 0 60px 300px;}
	
}

@media (max-width: 800px) {
	
	#sec01 .s01 .area .txt h2{ font-size:25px;}
	#sec01 .s01 .area .txt h2 b{ font-size:35px;}
	#sec01 .s01 .area .txt p br{ display:none;}
	#sec01 .s01:before{ width:100px; right:10px;}
	
	#sec02 ul li a{ padding:50px 37px;}
	#sec02 ul li h2{ font-size:19px;}
	#sec02 ul li h2 b{ font-size:30px;}
	#sec02 ul li:nth-child(4) i{ left:37px;}
	
	#sec03 ul{ display:block;}
	#sec03 ul li+li{ margin-top:20px;}
	
	#sec04 .inner .area {padding: 60px 20px; background-size:auto 100%; background-position:50% 100%;}
	#sec04 .inner .area dl dt h2{ font-size:25px;}
	#sec04 .inner .area dl dt p{ margin-top:10px;}
	#sec04 .inner:before{ right:50px;}
	
}

@media (max-width: 640px) {
	#sec02 ul{ display:block;}
	#sec02 ul li{ width:100%;}
	
	#sec04 .inner .area dl dt h2 br{ display:none;}
}
@media (max-width: 480px) {
	#sec03 dl{ display:block;}
	#sec03 dl dd{ margin-top:15px;}
	
	#sec04 .inner .area dl dt h2{ font-size:23px;}
}