@font-face {
    font-family: 'KCCMurukmuruk';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.0/KCCMurukmuruk.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}


/* ===== MAIN - VISUAL ===== */
.main-visual {position:relative; margin:0 auto;height:100vh; }
.main-visual .visual-slider {overflow:hidden;position:absolute;left:50%;top:50%;width:100%;height:100%;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);-o-transform:translate(-50%, -50%);transform:translate(-50%, -50%);}
.main-visual .visual-slider .swiper-slide {overflow:hidden;position:relative;height:100%;}
.main-visual .visual-slider .swiper-slide .vs-bg {position:absolute;left:0;top:0;width:100%;height:100%;background-repeat:no-repeat;background-position:center center;-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1);   transition-duration:3s;}
.main-visual .visual-slider .swiper-slide .vs-bg1{ background:url(../img/main/Visual01.jpg) no-repeat 50% 50%; background-size:cover;}
.main-visual .visual-slider .swiper-slide .vs-bg2{ background:url(../img/main/Visual02.jpg) no-repeat 50% 50%; background-size:cover;}
.main-visual .visual-slider .swiper-slide .vs-bg3{ background:url(../img/main/Visual03.jpg) no-repeat 50% 50%; background-size:cover;}
.main-visual .visual-slider .swiper-slide .vs-bg4{ background:url(../img/main/Visual04.jpg) no-repeat 50% 50%; background-size:cover;}
.main-visual .visual-slider .swiper-slide .vs-bg5{ background:url(../img/main/Visual05.jpg) no-repeat 50% 50%; background-size:cover;}
.main-visual .visual-slider .swiper-slide .vs-txt { position:absolute; bottom:400px; left:10%; z-index:1; }
.main-visual .visual-slider .swiper-slide .vs-txt h1{ font-size:77px; font-weight:700; padding-bottom:20px;}
.main-visual .visual-slider .swiper-slide .vs-txt p{ font-size:37px;}
.main-visual .visual-slider .swiper-slide .vs-txt h2, .main-visual .visual-slider .swiper-slide .vs-txt h1, .main-visual .visual-slider .swiper-slide .vs-txt p {opacity:0;color:#fff;-webkit-transform:translateY(40px);-moz-transform:translateY(40px);-ms-transform:translateY(40px);-o-transform:translateY(40px);transform:translateY(40px);  margin-top:20px;}


.main-visual .visual-slider .main-visual-btn{ position:absolute; bottom:200px; right:10%; width:255px;}
.main-visual .visual-slider .swiper-button-prev {position:absolute;left:0; top:auto; bottom:0;z-index:10;background:none;}
.main-visual .visual-slider .swiper-button-prev i, .main-visual .visual-slider .swiper-button-next i{ font-size:25px; color:#fff; text-align:center; line-height:70px; width:70px; border-radius:50%; display:block;  border:1px #fff solid;}
.main-visual .visual-slider .swiper-button-prev:after {display:none;}
.main-visual .visual-slider .swiper-button-next {position:absolute; left:170px;top:auto; bottom:0;z-index:10;margin-top:0; background:none;}
.main-visual .visual-slider .swiper-button-next:after {display:none;}

.main-visual .visual-slider .swiper-pagination {position:absolute;left:90px;bottom:0;z-index:10;margin-top:20px;width:70px;font-size:17px;color:#fff;letter-spacing:0.333em;font-style:italic;}
.main-visual .visual-slider .swiper-pagination span {font-style:normal;}
.main-visual .visual-slider .swiper-slide.swiper-slide-active .vs-bg {-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);-webkit-transition:transform 1.4s;-moz-transition:transform 1.4s;-ms-transition:transform 1.4s;-o-transition:transform 1.4s;transition:transform 1.4s;}
.main-visual .visual-slider .swiper-slide.swiper-slide-active .vs-bg1{}
.main-visual .visual-slider .swiper-slide.swiper-slide-active .vs-txt h2, .main-visual .visual-slider .swiper-slide.swiper-slide-active .vs-txt h1 {opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0);-webkit-transition:opacity 1s, transform 1.4s;-moz-transition:opacity 1s, transform 1.4s;-ms-transition:opacity 1s, transform 1.4s;-o-transition:opacity 1s, transform 1.4s;transition:opacity 1s, transform 1.4s;	}
.main-visual .visual-slider .swiper-slide.swiper-slide-active .vs-txt p {opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0);-webkit-transition:opacity 1s, transform 1.4s;-moz-transition:opacity 1s, transform 1.4s;-ms-transition:opacity 1s, transform 1.4s;-o-transition:opacity 1s, transform 1.4s;transition:opacity 1s, transform 1.4s;	-webkit-transition-delay:0.1s;-moz-transition-delay:0.1s;-ms-transition-delay:0.1s;-o-transition-delay:0.1s;transition-delay:0.1s;}
.hide {position: absolute;left: -9999%;font-size: 0;line-height: 0;text-indent: -9999px;}




.mainContents h1{ font-size:47px; font-weight:300; margin-bottom:50px; }
.mainContents h1 span{ font-weight:900;}


#sec01 h1{ position:relative; padding-top:210px;}
#sec01 h1:before{ content:'Sunchang Fermentation Theme Park'; position:absolute; top:0; left:0; font-size:150px; line-height:140px; font-weight:900; z-index:0; color:rgb(0,0,0,0.1) }

#sec01 .mobile{ display:none;}

.popupZone {width: 100%;height: 75vh;position: relative;}
.what .contents {width: 100%;height: 100%;}
.what .top { padding-top:150px;}
.what .top h2{ color:#777; padding-bottom:20px; font-weight:500;}
/*.what:before{ content:''; position:absolute; top:0; left:0; width:37%; height:100vh; background:#efefef;}*/

.what .itemBox {width: 100%; height: 57.45%;padding: 0 100px 0 0;position: absolute;}
.what .itemBox .imgBox {padding: 0 0 0 20px;}
.what .textBox,
.what ol,
.what .text {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}
.what .textBox {position: relative;margin:30px 0 0;}
.what .line {width: 100%;height: 1px;background: #dddddd;z-index: -1;position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
.what .line::before, .what .line::after {content: "";display: block;width: 5px;height: 5px;background: #cccccc;border-radius: 50%;position: absolute;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);}
.what .line::before {left: 0;}
.what .line::after {right: 0;}
.what .mobile {display: none;}
.what ol {width: 100%;-ms-flex-pack: distribute;    justify-content: space-around;}
.what ol li { width:calc(100% / 4); box-sizing:border-box;}
.what ol li a{ display:block; cursor:pointer !important;}
.what ol li+li{ margin-left:70px;}
.what ol li  img{ width:100%;}
.what .text {height: 100%;gap: 0 8px;background: #f7f6f1;border: 1px solid #077c34;border-radius: 25px;padding: 0 20px 0 5px;}
.what .text em {width: 34px;height: 34px;background: #077c34;border-radius: 50%;color: #ffffff;font-size: 1.4rem;font-weight: 500;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;    -ms-flex-align: center;        align-items: center;-webkit-box-pack: center;    -ms-flex-pack: center;        justify-content: center;}
.what .text span {color: #077c34;font-size: 1.8rem;font-weight: 500;}


#sec02{ background:#f7f7f7; padding:150px 0;}
#sec02 .inner{ display:flex;}
#sec02 .inner .area{ width:calc(100% / 2);}
#sec02 .inner .area+.area{ margin-left:100px; border-left:1px solid rgb(0,0,0,0.05); padding-left:100px;}
#sec02 .inner .area .q-btn{ display:flex; margin-top:70px; }
#sec02 .inner .area .q-btn a{ position:relative; width:calc(100% / 2); border-radius:17px; color:#fff; padding:50px; font-size:35px; display:flex; align-items: center;}
#sec02 .inner .area .q-btn a+a{ margin-left:20px;}
#sec02 .inner .area .q-btn a i{ position:absolute; top:50%; transform: translateY(-50%);right:50px;}
#sec02 .inner .area .q-btn a:nth-child(1){ background:#21409a}
#sec02 .inner .area .q-btn a:nth-child(2){ background:#565d72}
#sec02 .inner .area .q-btn a:before{ content:''; display:inline-block; width:50px; height:50px; margin-right:15px; background-position:left center; background-size:auto 100%; background-repeat:no-repeat;}
#sec02 .inner .area .q-btn a:nth-child(1):before{ background-image:url(../img/main/sec02-icon01.png);}
#sec02 .inner .area .q-btn a:nth-child(2):before{ background-image:url(../img/main/sec02-icon02.png);}

#sec03{ position:relative; padding:150px 0;}
#sec03:before{ content:''; position:absolute; top:0; left:0;background:url(../img/main/sec03-01.jpg) 50% 60%; width:100%; height:700px; background-size:cover; z-index:-1; }
#sec03 h2, #sec03 .ac span{font-family: 'KCCMurukmuruk'; font-size:70px; font-weight:normal;}
#sec03 .list-area{display: grid; grid-template-columns:repeat(2, 1fr);gap:35px;}

#sec03 .ac{ text-align:center; color:#fff; padding-bottom:50px;}
#sec03 .ac p{ font-size:25px;}
#sec03 .ac span:nth-child(1){ color:#6C0}
#sec03 .ac span:nth-child(2){ color:#3CF}

#sec04{ position:relative;  padding-bottom:332px;}
#sec04:before{ content:''; position:absolute; top:0; left:0; width:100%; height:100%; z-index:-3;background:#edf1f4;}
#sec04 .inner{ display:flex;}
#sec04 .inner .area:nth-child(1){ width:55%; padding:150px 100px 150px 0;}
#sec04 .inner .area:nth-child(2){ position:relative; width:45%; padding:150px 100px 200px 100px;}
#sec04 .inner .area:nth-child(2):before{ content:''; position:absolute; top:0; left:0; width:100%; height:100%; z-index:-2;background:#fff; z-index:-2;}
#sec04 .inner .area:nth-child(2) ul{ z-index:10; }
#sec04 .inner .area:nth-child(2) ul li{ position:relative; padding-left:100px; }
#sec04 .inner .area:nth-child(2) ul li:before{ content:''; position:absolute; top:30px; left:0; display:inline-block; width:60px; height:50px; margin-right:20px;background-position:left center; background-size:auto 100%; background-repeat:no-repeat;}
#sec04 .inner .area:nth-child(2) ul li:nth-child(1):before{background-image:url(../img/main/sec04-icon01.png); top:0;}
#sec04 .inner .area:nth-child(2) ul li:nth-child(2):before{background-image:url(../img/main/sec04-icon02.png);}
#sec04 .inner .area:nth-child(2) ul li:nth-child(3):before{background-image:url(../img/main/sec04-icon03.png);}
#sec04 .inner .area:nth-child(2) ul li:nth-child(4):before{background-image:url(../img/main/sec04-icon04.png);}
#sec04 .inner .area:nth-child(2) ul li+li{ border-top:1px dotted #cacfd4; padding-top:30px; margin-top:30px;}
#sec04 .inner .area:nth-child(2) ul li strong{ font-size:27px; font-weight:600; padding-bottom:10px; display:flex; justify-content: space-between;}
#sec04 .inner .area:nth-child(2) ul li p{ color:#777;}

.video_wrapper{position:relative;  width:100%; height:550px; margin:0 auto; background-color:#000;}
.video_wrapper_full{}
.videoIframe{position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; background-color:transparent;}
.videoPoster{position:absolute; opacity:1; overflow:hidden; top:0px; left:0px; width:100%; height:100%; background-size:100%; border:none; text-indent:-999em; transition:opacity 800ms, height 0s; -webkit-transition:opacity 800ms, height 0s; -moz-transition:opacity 800ms, height 0s; -webkit-transition-delay:0s, 0s; -moz-transition-delay:0s, 0s; transition-delay:0s, 0s;background:url(../img/main/maxresdefault.jpg) no-repeat 50% 50%; background-size:cover }
.videoPoster:hover{cursor:pointer;}
.videoPoster:before{content:''; position:absolute; top:50%; transform: translateY(-50%);left:50%; margin-left:-48px; z-index:2; width:96px; height:96px; background:url(../img/main/icon_play.png) no-repeat 50% 50%; background-size:cover; transition:border-color 300ms; border-radius:100%; -webkit-transition:border-color 300ms; -moz-transition:border-color 300ms;}
.videoPoster:after{content:''; position:absolute; opacity:0.2; top:0; left:0; z-index:1; width:100%; height:100%; background:#000; transition:all 0.4s ease-out 0s;}
.videoPoster:hover:after,
.videoPoster:focus:after{opacity:0.4;}
.videoPoster:hover:after,
.videoPoster:focus:after{border-left-color:#f00;}
.videoWrapperActive .videoPoster{opacity:0; height:0; -webkit-transition-delay:0s, 800ms; -moz-transition-delay:0s, 800ms; transition-delay:0s, 800ms;}

@media all and ( max-width: 1920px ){
	
	.mainContents h1{ font-size:35px;margin-bottom:37px;}
	
	.main-visual .visual-slider .swiper-slide .vs-txt{ bottom:200px;}
	.main-visual .visual-slider .swiper-slide .vs-txt h1{ font-size:70px;}
	.main-visual .visual-slider .swiper-slide .vs-txt p{ font-size:30px;}

	
	.what .top { padding-top:110px;}
	.what .itemBox {width:208%;}
	.what .textBox {margin:20px 0 0;}
	.what ol li+li{ margin-left:50px;}
	.popupZone {height: 100%;}
	#sec01{margin: 50px 0;}
	#sec01 h1{ padding-top:150px;}

	#sec01 h1:before{ font-size:110px; line-height:100px;}
	#sec02{ padding:100px 0;}
	#sec02 .inner .area+.area{ margin-left:70px;padding-left:70px;}
	#sec02 .inner .area .q-btn{ margin-top:50px; }
	#sec02 .inner .area .q-btn a{ font-size:23px;padding:35px 50px;}
	#sec02 .inner .area .q-btn a:before{ width:30px; height:30px;}
	
	#sec03:before{ height:600px;}
	#sec03 h2, #sec03 .ac span{font-size:55px;}
	
	
	#sec04{ padding-bottom:230px;}
	
	#sec04 .inner .area:nth-child(1){padding:100px 70px 100px 0;}
	#sec04 .inner .area:nth-child(2) ul li{ padding-left:77px}
	#sec04 .inner .area:nth-child(2) ul li+li{ padding-top:15px; margin-top:15px;}
	#sec04 .inner .area:nth-child(2){padding:100px 100px 200px 100px;}
	#sec04 .inner .area:nth-child(2) ul li strong{ font-size:22px; }
	#sec04 .inner .area:nth-child(2) ul li:before{ top:15px; width:50px; height:40px;}
	
	.video_wrapper{height:400px;}
	.videoPoster:before{ width:70px; height:70px;margin-left:-35px;}
	
	
}
@media all and ( max-width: 1680px ){

}

@media all and ( max-width: 1440px ){
	
	.main-visual{ height:700px;}
	.main-visual .visual-slider .swiper-slide .vs-txt h1{ font-size:60px;}
	.main-visual .visual-slider .swiper-slide .vs-txt p{ font-size:25px;}
	
}

@media all and ( max-width: 1280px ){
	
	.main-visual .visual-slider .main-visual-btn{ right:auto; left:10%; bottom:100px;}
	.main-visual .visual-slider .swiper-button-prev i, .main-visual .visual-slider .swiper-button-next i{ line-height:50px; width:50px;}
	.main-visual .visual-slider .swiper-pagination{ bottom:10px; margin:0; left:80px;}
}
@media all and ( max-width: 1024px ){
	
	#sec01 h1{ padding-top:0;}
	#sec01 h1:before{ display:none;}
	
	#sec02{ padding:70px 10px;}
	#sec02 .inner, #sec04 .inner, #sec03 .list-area{ display:block;}
	#sec02 .inner .area{ width:100%;}
	#sec02 .inner .area + .area{ margin:50px 0 0 0; padding:0; border:none;}
	
	#sec03{ padding:100px 10px 70px 10px;}
	#sec03 .list-area .area + .area{ margin:30px 0 0 0;}
	
	#sec04 .inner .area:nth-child(1), #sec04 .inner .area:nth-child(2){ box-sizing:border-box; width:100%; padding:70px 50px;}
	
	
	.what{ display:none;}
	#sec01 .mobile{ display:block;}

}

@media all and ( max-width: 800px ){
	
	#sec01{margin: 20px;}
	
	#sec04:before { background:none;}
	#sec04 .inner .area:nth-child(1), #sec04 .inner .area:nth-child(2){ background:#edf1f4}
}

@media all and ( max-width: 640px ){
	
	
	.main-visual .visual-slider .swiper-slide .vs-txt h1{ font-size:50px;}
	.main-visual .visual-slider .swiper-slide .vs-txt p{ font-size:22px;}
	
	#sec02 .inner .area .q-btn{ display:block;}
	
	#sec02 .inner .area .q-btn a{ width:100%; box-sizing:border-box;}
	#sec02 .inner .area .q-btn a:nth-child(2){ margin:10px 0 0 0;}
	
	.video_wrapper{ height:300px;}



	
	
}

@media all and ( max-width: 480px ){
	
	.main-visual .visual-slider .swiper-slide .vs-txt{ left:5%;}
	.main-visual .visual-slider .main-visual-btn{ left:5%;}
	.main-visual .visual-slider .swiper-slide .vs-txt h1{ font-size:40px;}
	.video_wrapper{ height:230px;}
	#sec04{ padding-bottom:150px;}
}

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

}