@charset "utf-8";
/* *******************************************************
 * filename : main.css
 * description : 메인 레이아웃 및 컨텐츠 CSS
******************************************************** */

/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:800px; position:relative;}	/* 비주얼높이값 이미지에맞게 수정 */
#mainVisual.full-height,
#fullpage #mainVisual{height:1000px;}

.main-slider-wrapper {position: relative;width: 100%;height: 100vh;}
.main-slider-item {overflow: hidden;position: relative;height:100% !important;}
.main-slider-item .slide-inner {position: absolute;width: 100%;height: 100%;left: 0;top: 0;}

/* 메인 비주얼 :: 이미지 */
.main-visual-img-con, .main-visual-img-con-m{position:relative; height:100%; width:100%; background-size:100%; background-repeat:no-repeat; background-position:70% 50%;}
.slider-item1 .main-visual-img-con{ background-image:url(../../images/main_visual_01.jpg);}
.slider-item2 .main-visual-img-con{ background-image:url(../../images/main_visual_02.jpg);}
.slider-item3 .main-visual-img-con{ background-image:url(../../images/main_visual_03.jpg);}
.main-visual-img-con-m img{ width:100%;}
.main-visual-prd-item{position:absolute; bottom:0px; left:0px; width:21.56%}
.main-visual-prd-item.right{left:auto; right:0; text-align:right;}
.main-visual-prd-item img{max-width:100%;}
.main-visual-img-con-m{display:none;}


/* 메인 비주얼 :: 텍스트 */
#mainVisual .main-visual-txt-con{position:absolute;bottom:250px; top:20%; left:13%; width:100%; z-index:1000}
#mainVisual .main-visual-txt-con .main-visual-txt1{display:block; font-size:110px; font-weight:800; color:#222; margin-bottom:8px; padding-bottom:5px; text-shadow: 3px 3px 3px rgba(0,0,0,0.5);}
#mainVisual .main-visual-txt-con .main-visual-txt2{font-size:24px; letter-spacing:-0.75px;  color:#222; font-weight: 400;line-height: 1.6}
#mainVisual .main-visual-txt-con .main-visual-txt2 b {display:block; font-size: 30px;  margin-bottom:15px; }
#mainVisual .main-visual-txt-con .main-visual-txt2 b br.m_only{ display:none}
#mainVisual .main-visual-txt-con .main-visual-txt3{font-size:18px; line-height:1.85em; letter-spacing:-0.25px; color:rgba(255,255,255,0.6); }

/* 메인비주얼 페이지네이션 */
#mainVisual .swiper-pagination {bottom: 310px; text-align: left; left: 13%;}
#mainVisual .swiper-pagination-bullet {width: 120px; height: 3px; border-radius: 0; display: inline-block; margin: 3px; background: #ddd; opacity: 1;}
#mainVisual .swiper-pagination-bullet-active {background: #1e7023;}
#mainVisual .swiper-container-vertical > .swiper-pagination-bullets {left: 0; bottom:0}
/*국문 css*/
body.lang_kor #mainVisual .main-visual-txt-con .main-visual-txt2 b{font-size: 73px;line-height: 1.5;}


/* VIEW MORE 버튼 */
.main-more-btn{ opacity:0}
.main-more-btn,
.main-more-btn span{-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}
.main-more-btn{position:relative; overflow:hidden; display:inline-block; vertical-align:middle; width:153px; height:55px;  line-height:55px; border:1px solid rgba(255,255,255,0.75); font-weight:700; font-size:12px; letter-spacing:0; color:#e0e0e0; text-align:center; transition:all 0.3s; border-radius:50px; margin-top:50px}
.main-more-btn:before{
    display:block; position:absolute; left:-130%; bottom:0; content:""; width:120%; height:150%; background:#c71c22; /* opacity:0;filter:Alpha(opacity=0); */
    transform:skew(-20deg); 
    -webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;-ms-transition:all 0.5s;transition:all 0.5s
}
.main-more-btn span{position:relative; left:0px; z-index:1; display:block; }
.main-more-btn span i{vertical-align: middle;display: inline-block; margin-left: 10px;}
.main-more-btn:hover{border-color:#c71c22}
.main-more-btn:hover span{color:#fff; left:3px;}
.main-more-btn:hover:before{left:-10%; opacity:1.0;filter:Alpha(opacity=100);}



/* 메인 비주얼 :: 컨트롤 */
.main-visual-control-box{position:absolute; bottom:0; left:0; right:0; z-index:11; margin-bottom:4.5%}

/* Arrow */
.main-visual-arrow{display:inline-block}
.main-visual-arrow > div{position:relative; right:0; left:0; display:inline-block; height:10px; margin:0; border:0; outline:0}
.main-visual-arrow .swiper-button-prev{margin-left:40px}
.main-visual-arrow .swiper-button-prev:after, .main-visual-arrow .swiper-button-next:after{content:""; width:21px; height:10px; background:url("../../img/main_arrow_icon.png"); display:inline-block; background-size:cover !important}
.main-visual-arrow .swiper-button-prev:after{transform:rotate(180deg)}
.main-visual-arrow .swiper-button-prev:before{position:absolute; display:inline-block; content:""; width:1px; height:11px; background:rgba(255,255,255,0.5); left:-23px; top:0}

/* bar */
.main-visual-num{position:relative; font-size:0; display:inline-block; width:245px; margin-left:30px; bottom:4px}
.main-visual-num .main-visual-conuter span{position:absolute; display:inline-block; font-size:14px; font-weight:400; color:#fff; padding-left:8px; top:0}
.main-visual-num .main-visual-conuter span.cur-num{left:0}
.main-visual-num .main-visual-conuter span.total-num{right:0}
.main-visual-loading-bar{width:186px; height:3px; display:inline-block; background:rgba(255,255,255,0.3); margin:6px 0 0 33px}
.main-visual-loading-bar span{display:block; width:0; height:3px; background-color: #fff}

/* 메인 비주얼 :: active효과 */
.main-visual-txt-con .main-visual-txt2 > span,  .main-visual-txt-con .main-visual-txt3 span{opacity:0;filter:Alpha(opacity=0); transition:all 0.4s; transition-delay:1s }

.main-slider-item.swiper-slide-active .main-visual-txt-con .title-line span{animation: text-up 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
.main-slider-item.swiper-slide-active .main-visual-txt-con .main-visual-txt2 > span, .main-slider-item.swiper-slide-active .main-visual-txt-con .main-visual-txt3 span{opacity:1;filter:Alpha(opacity=100); }
.main-slider-item.swiper-slide-active .main-more-btn{-webkit-animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;-webkit-animation-delay: 1.1s;animation-delay: 1.1s;}
@keyframes text-up {
  from {
    transform: translate3d(0, 150%, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateY(50px); 
		transform: translateY(50px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateY(0); 
		transform: translateY(0); 
	}
}
@keyframes text-fade-out {
	from {
		opacity:1.0;filter:Alpha(opacity=100);
	}
	to {
		opacity:0;filter:Alpha(opacity=0);
	}
}

/* 메인 비주얼 :: 스크롤아이콘 */
.main-scroll-icon{position:absolute; bottom:55px; left:50%; margin-left:-6.5px; text-align:center; z-index:9}	/* width값에 맞게 margin-left수정 */
.main-scroll-icon span{display:block; text-align:center;}

@media all and (max-width: 1400px){
    #mainVisual .main-visual-txt-con{left:3%;}
    #mainVisual .swiper-pagination {left: 5%;}
}


/* 메인 공통 */
.tit1 {font-family: 'Lato'; font-weight: 700; display: block; font-size: 20px; margin-bottom: 21px; color: #1e7023; text-transform: uppercase;}


/* mainCont01 */
#mainCont01 {position: relative; padding-bottom: 4.6%;}
#mainCont01:before {content:''; position: absolute; top: 0; left: 50%; width: 1px; height: 72px; background: #000;}
#mainCont01 .main_title {text-align: center; padding: 7% 0 4.5%;}
#mainCont01 .main_title .tit1 {margin-bottom: 0;}
#mainCont01 .main_title strong {font-size: 35px; letter-spacing: -2px; font-weight: 700; color: #111;}
.mainProduct {overflow: hidden;}
.mainProduct .page_wrap {position: relative; width: 360px; margin: 20px auto 20px;}
.mainProduct .swiper-pagination {position: static}
.mainProduct .swiper-pagination-clickable .swiper-pagination-bullet {margin: 0 9px; position: relative;}
.mainProduct .swiper-pagination-bullet-active:before {content:''; position: absolute; top: 50%; left:50%; transform: translate(-50%,-50%); width: 28px; height: 28px; background: #f5f5f5; z-index: -1; border-radius: 50%;}
.swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after, .mainProduct .swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after {font-size: 15px; color: #111;}

/* mainCont02 */
#mainCont02{position:relative; overflow:hidden; padding-bottom: 10%;}
#mainCont02:before {content:''; position: absolute; top: 0; left: 50%; width: 1px; height: 153px; background: #000;}
#mainCont02 .bg{position: absolute;width: 100%; height: 100%; top: 0;left: 0;z-index: -1;background:url(../../images/mainCont02_bg.png) no-repeat;background-size: cover;}
#mainCont02.aos-animate .bg{animation: left 1s ;}
@keyframes bg-active {
	0% {
		transform: scale(1.09);
		opacity: 0.9;
	}
	 100% {
		transform: scale(1);
		opacity: 1; 
	} 
}
@keyframes left {
	0% {
		transform: translateX(100%);
		opacity: 0.9;
	}
	 100% {
		transform: translateX(0);
		opacity: 1; 
	} 
}
#mainCont02 .img_box  {float: left; width: 36%; margin-right: 5%;}
#mainCont02 .img_box img {max-width: 100%;}
#mainCont02 .text_box {float: right; margin-top: 20%; width: 51%;}
#mainCont02 .text_box dl dt{font-size: 44px; color: #111; font-weight: bold; line-height: 1.3;}
#mainCont02 .text_box dl dt p {letter-spacing: -2px;}
#mainCont02 .text_box dl dt p.tit1 {letter-spacing: 0px !important;}
#mainCont02 .text_box dl dt p span {color: #1e7023}
#mainCont02 .text_box dl dd{line-height: 1.6;font-size: 20px;margin-top: 27px; color: #111111;}
#mainCont02 .text_box dl dd p {word-break: keep-all;}
#mainCont02 .text_box .link_box{ width:80%; margin-top:50px}
#mainCont02 .text_box .link_box a{ height:55px; }
#mainCont02 .text_box .link_box a strong, #custom_pro .text_box .link_box a i{color:#444; font-size:15px;line-height:52px; }
#mainCont02 .text_box .link_box a:hover strong {color:#444}


/* mainCont03 */
#mainCont03 .cm-fl {position: relative; width: 50%; background: url(../../images/main-buttonBg1.png)no-repeat center center; background-size: cover; height: 408px;}
#mainCont03 .cm-fr {position: relative; width: 50%; background: url(../../images/main-buttonBg2.png)no-repeat center center; background-size: cover; height: 408px;}
#mainCont03 .cm-fl .text_area {position: absolute; top: 50%; left: 0; transform: translate(0,-50%); margin-left: 26.5%;}
#mainCont03 .cm-fr .text_area {position: absolute; top: 50%; left: 0; transform: translate(0,-50%); margin-left: 16%;}
#mainCont03 .text_area dl dt {font-size: 28px; font-weight:600; margin-bottom:20px}
#mainCont03 .text_area dl dd {font-size: 16px; font-weight:300; line-height:1.6}
#mainCont03 .text_area > div, #link_box .text_area >div > div { height:100%;}
#mainCont03 .text_area dl {color: #fff;}
#mainCont03 .text_area .link_box{width:180px; height:45px; margin-top:30px;}
#mainCont03 .text_area .link_box strong, #link_box .inner .text_area .link_box i{ font-size:15px; line-height:42px}




/* *******************************************************
 * 미디어쿼리 시작
******************************************************** */
@media all and (max-width: 1400px){
    #mainCont02 .text_box dl dt{font-size: 40px;}
}
@media all and (max-width: 1200px){
     #mainVisual .main-visual-txt-con {left: 5%;}
}
@media all and (max-width: 1024px ){
    .main-visual-img-con, .main-visual-img-con-m {background-size: cover;}
    .main-visual-img-con {display:none}
    .main-visual-img-con-m {display:block;}
    .slider-item1 .main-visual-img-con-m{ background-image:url(../../images/main_visual_01_m.jpg);}
    .slider-item2 .main-visual-img-con-m{ background-image:url(../../images/main_visual_02_m.jpg);}
    .slider-item3 .main-visual-img-con-m{ background-image:url(../../images/main_visual_03_m.jpg);}
    
    #mainVisual .main-visual-txt-con .main-visual-txt1 {font-size:80px; margin-bottom:14px}
    #mainVisual .main-visual-txt-con .main-visual-txt2 {font-size: 28px;}
    #mainVisual .main-visual-txt-con .main-visual-txt2 b {font-size: 38px;}
    #mainVisual .swiper-pagination {left: 7%;} 
}

@media all and (max-width:800px){
    #mainCont02:before {height: 72px;}
    #mainVisual .main-visual-txt-con {left: 0;}
    #mainVisual .main-visual-txt-con .main-visual-txt2 {font-size: 24px;}
    #mainVisual .swiper-pagination {left: 4%; bottom: 140px;}
}

@media all and (max-width: 541px){
     #mainCont02:before {height: 47px;}
    #mainVisual .main-visual-txt-con .main-visual-txt1 {font-size: 55px; margin-bottom: 0;}
    #mainVisual .main-visual-txt-con .main-visual-txt2 b {font-size: 25px;}
    #mainVisual .main-visual-txt-con .main-visual-txt2 {font-size: 17px;}
    #mainVisual .swiper-pagination-bullet {width: 95px;}
}
@media all and (max-width:480px){
    #mainVisual .main-visual-txt-con .main-visual-txt1 {font-size: 48px; margin-bottom: 0;}
    #mainVisual .main-visual-txt-con .main-visual-txt2 b {font-size: 22px;}
    #mainVisual .main-visual-txt-con .main-visual-txt2 {font-size: 13px;}
    #mainVisual .swiper-pagination-bullet {width: 50px;}
}


/* ****************** 메인공통 ********************** */
@media all and (max-width:800px) {
    .tit1 {font-size: 18px;}
}
@media all and (max-width:600px) {
    .tit1 {font-size: 16px;}
}
@media all and (max-width:480px) {
    .tit1 {font-size: 14px;}
}



/* ****************** mainCont01 ********************** */
@media all and (max-width:1024px){
    #mainCont01 .main_title {padding: 11% 0 3.5%;}
}
@media all and (max-width:800px){
    #mainCont01 {margin-top: 10%;}
    #mainCont01 .main_title strong {font-size: 30px;}
}
@media all and (max-width:600px){
    #mainCont01:before {height: 47px}
    .mainProduct .page_wrap {margin: 20px auto 20px;}
}
@media all and (max-width:480px){
    #mainCont01 .main_title {padding: 16% 0 3.5%;}
    #mainCont01 .main_title strong {font-size: 27px;}
    .mainProduct .page_wrap {width: 100%!important; margin: 20px auto 20px!important;}
   
}


/* ****************** mainCont02 ********************** */
@media all and (max-width:1200px){
    #mainCont02 .text_box dl dt {font-size: 37px;}
    #mainCont02 .text_box {width: 55%;}
}
@media all and (max-width:1127px){
    #mainCont02 .text_box {width: 60%;}
}
@media all and (max-width:1024px){
    #mainCont02 {padding-bottom: 10%;}
    #mainCont02 .img_box {display:none;}
    #mainCont02 .text_box {position: relative; float: none; width: 100%; text-align: center;}
    #mainCont02 .text_box:before {content:''; position: absolute; top: 0; left: 0; background: url(/img/mainCont02_img.png)no-repeat center center; background-size: contain; opacity: 0.15; width: 100%; height: 100%;}
    #mainCont02 .text_box .link_box {width: 100%; }
}
@media all and (max-width:800px){
    #mainCont02 .text_box dl dt {font-size: 30px;}
}
@media all and (max-width:600px){
    #mainCont02 .text_box dl dt {font-size: 26px;}
    #mainCont02 .text_box dl dd {font-size: 15px; margin-top: 23px;}
    #mainCont02 .text_box .link_box {margin-top: 25px;}
    .type2 .cm-button-style04 {width: calc(50% - 15px)}
    #mainCont02 .text_box .link_box a {height: 45px;}
    #mainCont02 .text_box .link_box a strong,  .cm-button-style04 i  {line-height: 42px; font-size: 13px;}
}
@media all and (max-width:480px) {
    #mainCont02 .text_box .link_box a {margin-bottom: 8px;}
    #mainCont02 .text_box dl dt {font-size: 22px;}
    #mainCont02 .text_box dl dd {font-size: 14px;}
    #mainCont02 .text_box dl dd br {display: none;}
    .type2 .cm-button-style04 {width: 80%;}
    .type2 .cm-button-style04:last-child {margin-left: 0;}
}



/* ****************** mainCont03 ********************** */
@media all and (max-width:1400px){
    #mainCont03 .cm-fl .text_area {margin-left: 12%;}
    #mainCont03 .cm-fr .text_area {margin-left: 12%;}
}
@media all and (max-width:1200px){
    #mainCont03 .text_area {margin-left: 7%;}
}
@media all and (max-width:1024px){
    #mainCont03 .cm-fl, 
    #mainCont03 .cm-fr {float: none; width: 100%; height: 300px;}
    #mainCont03 .cm-fl .text_area {margin-left: 5%;}
    #mainCont03 .cm-fr .text_area {margin-left: 5%;}
}
@media all and (max-width:800px){
    #mainCont03 .text_area {padding: 10px 20px; }
}
@media all and (max-width:600px){
    #mainCont03 .cm-fl .text_area {margin-left: 3%;}
    #mainCont03 .cm-fr .text_area {margin-left: 3%;}
    #mainCont03 .text_area dl dt {font-size: 24px;}
    #mainCont03 .text_area dl dd {font-size: 14px; word-break: keep-all}
    #mainCont03 .text_area .link_box strong, #link_box .text_area .link_box i {font-size: 13px;}
}
@media all and (max-width:480px) {
    #mainCont03 .cm-fl, #mainCont03 .cm-fr {height: 250px;}
    #mainCont03 .text_area {padding: 0 15px; margin-left: 0;}
    #mainCont03 .text_area dl dt {font-size: 20px; margin-bottom: 10px;}
    #mainCont03 .text_area dl dd {font-size: 13px;}
    #mainCont03 .text_area dl dd br {display: none;}
    #mainCont03 .text_area .link_box {margin-top: 16px;}
}