@charset "UTF-8";

/* html { height: 100%; overflow: hidden; } */
body { height: 100%; overflow: hidden; } 


/*---------- common ----------*/
.flex {display: flex;justify-content: space-between;}
.section {position: relative;width: 100%;height: 100%;overflow: hidden;} 
.section .content_area {position: relative;max-width: 1400px;height: 100%;margin: 0 auto;}
.section .content_area .txt p {font-size: 20px;font-weight: 600;text-transform: uppercase;}
.section .content_area .txt h2 {font-size: 48px;margin: 15px auto 70px;font-weight: 300;}
/* aos */
[data-aos=fade-up] {transform: translate3d(0,50px,0)}
[data-aos=fade-down] {transform: translate3d(0,-50px,0)}
[data-aos^=fade][data-aos^=fade].aos-animate {transform: translateZ(0)}
/**/
.section .content_area .txt h2 span {font-weight: 100;}
.more {width: auto;height: 40px;transition: all .3s;}
.d_pro .more {text-align: center;height: auto;}
.d_pro .more > span {display: block;color: #9b9b9b;margin-bottom: 5px;}
.d_pro .more a {display: inline-flex;font-weight: 600;background: #21610b;color: #fff;border-radius: 5px;padding: 10px;}
.more a {padding: 10px 0;font-weight: 300;background: transparent;}
.more a i {padding-left: 20px;}
 /* hover */
.more a:hover {transition: width .2s;}
.d_pro .more a:hover {box-shadow: 0 0 3px #21610b;}
.more a:hover i {padding-left: 40px;transition: all .3s;animation: more_left ease-in-out .3s alternate;}
 /* ani */
@keyframes more_left {
0% {padding-left: 20px;} 
100% {padding-left: 40px;} 
}

/* .more a {padding: 14px 17px;font-weight: 300;background: transparent;border: 1px solid #e12c24;transition: all .2s;}
 hover
.more a:hover {color: #fff;background: #e12c24;box-shadow: 0px 10px 10px rgb(10 11 12 / 10%);transition: all .2s;} */


/* reset css */
html {width:100%;height:auto; min-height:100%;margin:0;padding:0;}
body {width:100%;height:100%;margin:0;padding:0;}
* {box-sizing: border-box;}
*:after,
*:before {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
cite, em, dfn {font-style:normal;}
sub {vertical-align:bottom;font-family:'dotum';}
sup {vertical-align:top;font-family:'dotum';}
hr {display:none;}
h1, h2, h3, h4, h5, h6 {margin:0;font-size:1em;}
address {font-style:normal;}
p  {margin:0;}
pre {margin:0;font-size:1em;font-family:verdana;}
table {border-spacing:0;border-collapse:collapse;font-family:inherit; width:100%;border:0;}
dd, dl, ol, ul {margin:0;padding:0;}
li {list-style-type:none;}
form {margin:0;}
fieldset {margin:0;padding:0;border:none;}
a {color:inherit; text-decoration:none;}

/** mainSlide **/
#mainSlide, #mainSlide .videoslide, #mainSlide .banner_video{min-height:600px;}
#mainSlide {position: relative;width: 100%;height: 100vh;  overflow: hidden;}
/* slide */
#mainSlide .videoslide {position: absolute;width: 100%;height: 100vh;}
#mainSlide .videoslide::after{content: '';display: block;width: 100%;height: 100%;background: #00000036;position: absolute;left: 0;top: 0;/* z-index: 99; */}
#mainSlide .banner_video {width: 100%;height: 100vh;object-fit: cover;}
#mainSlide .slide_txt {position: absolute;top: 300px;left: 0;right: 0;width: 100%;max-width: 1400px;margin: 0 auto;color: #fff;font-size: 65px;line-height: 1.2;opacity: 0;z-index: 999;}
#mainSlide .videoslide.slide_01 .slide_txt{top: calc(100% / 2 - 50px);}
#mainSlide .slide_txt h2 {text-align: center;}
#mainSlide .slide_txt h2 img {height: 65px;vertical-align: middle;margin-right: 1%;}
#mainSlide .slide_txt p {font-size: 40px;font-weight: 300;} 
/* on */
#mainSlide .videoslide.slide_01 .slide_txt.animate { animation: t_opacity 2000ms; transition: transform 2000ms ease-in-out, opacity 2000ms ease 0s; opacity: 1;} 
#mainSlide .videoslide.slide_02 .slide_txt.animate {animation: t_top 2000ms; transition: transform 2000ms ease-in-out, opacity 2000ms ease 0s; opacity: 1;} 
/* ani */
@keyframes zoom_in {
0% { transform: scale(1.2); } 
100% { transform: scale(1) rotate(0.003deg); } 
}
@keyframes t_top { 
0% {opacity: 0; transform: translateY(50px);} 
100% {opacity: 1; transform: translateY(0%);} 
}
@keyframes t_opacity { 
0% {opacity: 0; filter: blur(5px);} 
100% {opacity: 1; filter: blur(0);} 
}


@-webkit-keyframes LoadingBar {from { width:0px; } 
to { width:70px; } 
}
@keyframes LoadingBar {from { width:0px; } 
to { width:70px; } 
}

/* pagination */
#mainSlide .pagination_area.pagination1 {position: absolute;top: 0;left: 0;right: 0;margin: 0;width: 100%;height: 100%; z-index: 999;}
#mainSlide .pagination_area.pagination1 .main_btn{background: transparent;width: 100%;height: 100%;border: 0;cursor: default;}
/* #mainSlide .pagination_area.pagination1 .main_btn img {display: none;} */
#mainSlide .pagination_area.pagination1 .main_btn.btn_play {display: none;}
/**/
#mainSlide .pagination_area.pagination2 {position: absolute;bottom: 120px;left: 0;right: 0;margin: 0 auto;max-width: 1400px;z-index: 9998;}
#mainSlide .main_pagination {display: flex;width: 100%;bottom: 0;}
#mainSlide .main_pagination_bullet {position: relative;width: 160px;height: 2px;background: none;border-radius: 0;opacity: 1;cursor:pointer;border: 0;}
#mainSlide .main_pagination_bullet p{position: absolute;top: 15px;left: 0;right: 0;width: 100%;color: rgb(255 255 255 / 70%);white-space:nowrap;font-family: 'Play', sans-serif;font-weight: 600;line-height: 1;}
#mainSlide .main_pagination_bullet:after {content: '';position: absolute;bottom: 0;left: 0;width: 100%;height: 4px;background-color: rgba(255 255 255 / 40%);}
#mainSlide .main_pagination_bullet span {display: inline-block;position: absolute;left: 0;right: 0;bottom: 0;width: 0%;height: 4px;background: #fff;}
/* active */
#mainSlide .main_pagination_bullet.active span {width: 100%;}
#mainSlide .main_pagination_bullet.active p {color: #fff;}
/* 슬라이드 비디오 재생시간 */
/* #mainSlide .main_pagination_bullet.slide_01.active .progress {animation: progressBar 5s linear forwards;  }
#mainSlide .main_pagination_bullet.slide_02.active .progress {animation: progressBar 5s linear forwards;  }
#mainSlide .main_pagination_bullet.active.stop .progress{animation-play-state: paused !important;}
@keyframes progressBar {
  0% {  width: 0;}
  100% {  width:100%;}
} */




/*---------- section2 ----------*/
#section2.section .content_area {max-width: 100%;padding: 140px 0 120px;}
#section2.section .content_area:after {content:""; display: block; clear: both;}
#section2.section .content_area .txt {width: 100%;max-width: 1400px;height: 100%;color: #131313;margin: 0 auto;}
#section2.section  .content_area .img .box p {font-size: 24px;}
/**/
#section2.section  .content_area .img {float: right;max-width: 1650px;}
#section2.section  .content_area .img .clone {}
#section2.section  .content_area #img_m.img {display: none;}
#section2.section  .content_area .img .box {position: relative;width: 270px;height: 500px;transition: width .5s;}
#section2.section  .content_area .img .box img {display: block;width: 100%;height: 100%;object-fit: cover;}
#section2.section  .content_area .img .box > div {position: absolute;top: 0;left: 0;color: #fff;transition: opacity .3s;}
#section2.section  .content_area .img .box .txt {padding: 395px 0 0 40px;}
#section2.section  .content_area .img .box .txt span, #section2.section  .content_area .img .box .more {opacity: 0;}
#section2.section  .content_area .img .box .txt span {font-size: 18px;line-height: 1.6;font-weight: 100;}
#section2.section  .content_area .img .box .more {top: 400px;left: 65px;}
/* on */
#section2.section .content_area .img .box.on.off, #section2.section .content_area .img .box.on {width: 100%;}
#section2.section .content_area .img .box.on.off .txt, #section2.section .content_area .img .box.on .txt {padding: 245px 0 0 65px;}
#section2.section .content_area .img .box.on.off .txt span, #section2.section .content_area .img .box.on .txt span,
#section2.section .content_area .img .box.on.off .more, #section2.section .content_area .img .box.on .more {opacity: 1;}
#section2.section .content_area .img .box.on.off p, #section2.section .content_area .img .box.on p {font-size: 34px;margin-bottom: 15px;}


/*---------- section3 ----------*/
.section3-4.section .more {position: absolute;bottom: 0;left: 0;right: 0;margin: 0 auto;}
.section3-4.section .content_area .txt {text-align: center;}
/**/
#section3.section:before {content:"";display: block;position: absolute;top: 0;left: 0;background: url(../img/main3_bg.png) no-repeat center / cover;width: 100%;height: 100%;z-index: -1;}
#section3.section .content_area {padding: 120px 0 180px;}
#section3.section .more a {justify-content: center;}
/**/
#section3.section .content_area .img {margin: 0 -16px;}
#section3.section .content_area .img .box {position: relative;flex-basis: calc(100% / 4 - 32px);margin: 0 16px;border: 1px solid #ccc;background: #fff;overflow: hidden;}
#section3.section .content_area .img .box img {display: block;width: 100%;height: 260px;}
#section3.section .content_area .img .box:after {content:'';display:block;position:absolute;top:0;left: -90%;z-index: 1;width: 50%;height:100%;background:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);transform:skewX(-30deg);}
#section3.section .content_area .img .box:hover:after { animation: shine 1s; }
#section3.section .content_area .img .box p {font-weight: 600;text-align: center;padding: 20px 20px 50px;}
/* ani */
@keyframes shine {
 0% {
  left:-90%;
 } 
 100% {
  left:140%;
 } 
}


/*---------- section4 ----------*/
#section4.section {background: #f8f8f8;}
#section4.section .content_area {padding: 120px 0 210px;}
#section4.section .more {top: 230px;padding-left: 40px;}
#section4.section .content_area .img .box.box1 .more, #section4.section .content_area .img .box.box2 .more {padding-left: 65px;}
#section4.section .more a {justify-content: flex-start;}
/**/
#section4.section .content_area .txt {}
#section4.section .content_area .txt h2 {}
#section4.section .content_area .txt p {}
/**/
#section4.section .content_area .img {margin: 0 -20px;}
#section4.section .content_area .img .box {position: relative;flex-basis: 250px;height: 310px;background: #fff;padding: 60px 20px 0 40px;margin: 0 20px;transition: all .5s;}
#section4.section .content_area .img .box h3 {font-size: 20px;}
#section4.section .content_area .img .box.box3 h3, #section4.section .content_area .img .box.box4 h3 {color: #21610b;}
#section4.section .content_area .img .box p {font-weight: 100;margin: 20px auto 50px;}
#section4.section .content_area .img .box p br.pc_hidden {display: none;}
#section4.section .content_area .img .box.box1, #section4.section .content_area .img .box.box2 {flex-basis: 390px;height: 307px;padding: 60px 40px 0 65px;color: #fff;}
#section4.section .content_area .img .box.box1 {background: url(../img/main4.png) no-repeat center;}
#section4.section .content_area .img .box.box2 {background: url(../img/main4_1.png) no-repeat center;}
/* hover */
#section4.section .content_area .img .box:hover {box-shadow: 0px 6px 8px rgb(10 11 12 / 30%);transition: all .5s;}





/* respon */
@media all and (max-width: 1650px){
/* section1 */
#section1 .slide_bg {background-position: center right;}
}
@media all and (max-width: 1400px){ /* width */
.section .content_area, #mainSlide .slide_txt, #mainSlide .pagination_area.pagination2, #section2.section .content_area {max-width: 96%;}
 
/* section1 */
.mouse_wrap {top: 0;bottom: auto;right: calc(50% - 88px);}
.mouse_wrap span {writing-mode: unset;padding-bottom: 70px;}

/* section2 */
#section2.section  .content_area .img {float: unset;}
}
@media (max-width: 1380px){
/* section3 */
#section3.section .content_area .img .box p br {display: none;}
}
@media (max-width: 1300px){
/* section1 */
#mainSlide .slide_txt p {font-size: 35px;} 
}
@media (max-width: 1100px){
/* section2 */
#section2.section .content_area .img .box .txt span br {display: none;}
#section2.section  .content_area .img .box .txt {padding: 395px 10px 0 30px;}
#section2.section .content_area .img .box.on.off .txt, #section2.section .content_area .img .box.on .txt {padding: 245px 30px 0;}
#section2.section  .content_area .img .box .more {left: 30px;}

/* section4 */
#section4.section .content_area .img .box, #section4.section .content_area .img .box.box1, #section4.section .content_area .img .box.box2 {padding: 60px 30px 0;}
#section4.section .more {top: 260px;}
#section4.section .more, #section4.section .content_area .img .box.box1 .more, #section4.section .content_area .img .box.box2 .more {padding-left: 30px;}
}
@media (max-width: 1023px){
/* common */
.section .content_area .txt h2 {font-size: 40px;margin: 15px auto 50px;letter-spacing: -.5px;}
.section .content_area .txt p {font-size: 18px;}

/* section1 */
#mainSlide .slide_txt {top: 32%;bottom: auto;}
#mainSlide .slide_txt {font-size: 50px;line-height: 1.2;}
#mainSlide .slide_txt p {font-size: 25px;font-weight: 400;letter-spacing: -.5px;}
.mouse_wrap {bottom: 0;top: auto;right: 50%;}
.mouse_wrap span {display: none;}

/* section2 */
#section2.section .content_area {padding: 100px 0 80px;}
#section2.section .content_area .img .box {height: 400px;}
#section2.section  .content_area .img .box .txt {padding: 200px 20px 0;}
#section2.section .content_area .img .box:not(.on, .off) .txt {text-align: center;}
#section2.section .content_area .img .box.on.off .txt, #section2.section .content_area .img .box.on .txt {padding: 100px 30px 0;}
#section2.section  .content_area .img .box p {font-size: 20px;}
#section2.section .content_area .img .box.on.off p, #section2.section .content_area .img .box.on p {font-size: 30px;}
#section2.section  .content_area .img .box .more {top: 300px;}

/* section3 */
#section3.section:before {background-position: center right;}
#section3.section .content_area {padding: 80px 0 140px;}
#section3.section .content_area .img {margin: 0 -5px;}
#section3.section .content_area .img .box {flex-basis: calc(100% / 4 - 10px);margin: 0 5px;}
#section3.section .content_area .img .box:after {left: -110%;}
#section3.section .content_area .img .box img {height: 200px;}

/* section4 */
#section4.section .content_area {padding: 80px 0 170px;}
#section4.section .content_area .img {margin: 0 -5px;}
#section4.section .content_area .img .box, #section4.section .content_area .img .box.box1, #section4.section .content_area .img .box.box2 {flex-basis: calc(100% / 4 - 10px);padding: 60px 30px 0;margin: 0 5px;}
#section4.section .content_area .img .box h3 {font-size: 18px;}
}

@media (max-width: 767px){
/* common */
.section .content_area .txt h2 {font-size: 32px;margin: 15px auto 30px;}
.section .content_area .txt p {font-size: 16px;}
.more {width: 75px;}
.d_pro .more {width: auto;}
 
/* section1 */
#mainSlide .slide_txt {top: 26%;}
#mainSlide .slide_txt {font-size: 40px;}
#mainSlide .slide_txt h2 img {height: 55px;}
#mainSlide .slide_txt p {font-size: 20px;line-height: 1.8;}
#mainSlide .main_pagination_bullet p {font-size: 16px;}
 
/* section2 */
#section2.section .content_area {padding: 80px 0 60px;}
#section2.section .content_area .txt {text-align: center;}
#section2.section .content_area .img .clone {flex-wrap: wrap;}
#section2.section .content_area .img .box,
#section2.section .content_area .img .box.on.off, #section2.section .content_area .img .box.on {width: 100%;margin-bottom: 10px;}
#section2.section .content_area .img .box.on.off, #section2.section .content_area .img .box.on {height: 300px;}
#section2.section .content_area .img .box.box3 {margin-bottom: 0;}
#section2.section .content_area .img .box {height: 100px;}
#section2.section  .content_area .img .box .txt {padding: 40px 4% 0;}
#section2.section .content_area .img .box.on.off .txt, #section2.section .content_area .img .box.on .txt {padding: 80px 4% 0;}
#section2.section  .content_area .img .box p {font-size: 18px;}
#section2.section .content_area .img .box.on.off p, #section2.section .content_area .img .box.on p {font-size: 25px;margin-bottom: 15px;}
#section2.section .content_area .img .box .txt span {font-size: 16px;}
#section2.section .content_area .img .box .txt span br {display: block;}
#section2.section  .content_area .img .box .more {top: 200px;left: 0;right: 0;margin: 0 auto;}

/* section3 */
#section3.section .content_area {padding: 60px 0 120px;}
#section3.section .content_area .img {flex-wrap: wrap;}
#section3.section .content_area .img .box {flex-basis: calc(100% / 2 - 10px);margin: 0 5px 10px;}
#section3.section .content_area .img .box:after {left: -60%;}
#section3.section .content_area .img .box img {height: auto;}
#section3.section .content_area .img .box p {font-size: 16px;padding: 20px 4% 50px;}
/* hover */
#section3.section .content_area .img .box:hover:after {animation: shine 1.2s;}
  
/* section4 */
#section4.section .content_area {padding: 60px 0 150px;}
#section4.section .content_area .img {flex-wrap: wrap;}
#section4.section .content_area .img .box, #section4.section .content_area .img .box.box1, #section4.section .content_area .img .box.box2 {flex-basis: calc(100% / 2 - 10px);padding: 80px 4% 0;margin: 0 5px 10px;text-align: center;}
#section4.section .content_area .img .box p {font-size: 16px;}
#section4.section .content_area .img .box p br.pc_hidden {display: block;}
#section4.section .more, #section4.section .content_area .img .box.box1 .more, #section4.section .content_area .img .box.box2 .more {padding-left: 0;}
#section4.section .more {top: 230px;}
}
@media (max-width: 580px){
#section2.section .content_area .img .box .txt span br {display: none;}
}
@media (max-width: 510px){
/* section1 */
#mainSlide .slide_txt p br {display: none;}
}
@media (max-width: 479px){
/* common */
.section .content_area .txt h2 {font-size: 21px;}
.section .content_area .txt p {font-size: 14px;}
 
/* section1 */
#mainSlide .slide_txt {top: 26%;}
#mainSlide .slide_txt {font-size: 24px;line-height: 1.4;}
#mainSlide .slide_txt p {font-size: 18px;}
#mainSlide .main_pagination_bullet {width: 50%;}
#mainSlide .main_pagination_bullet p {font-size: 14px;}

/* section2 */
#section2.section .content_area .img .box.on.off, #section2.section .content_area .img .box.on {height: 250px;}
#section2.section .content_area .img .box {height: 70px;}
#section2.section  .content_area .img .box .txt {padding: 20px 4% 0;}
#section2.section .content_area .img .box.on.off .txt, #section2.section .content_area .img .box.on .txt {padding: 60px 4% 0;}
#section2.section  .content_area .img .box p {font-size: 18px;}
#section2.section .content_area .img .box.on.off p, #section2.section .content_area .img .box.on p {font-size: 20px;}
#section2.section  .content_area .img .box .more {top: 8%;left: auto;right: 8%;font-size: 14px;}

/* section3 */
#section3.section .content_area {padding: 20px 0 80px;}
#section3.section .content_area .img {margin: 0 auto;}
#section3.section .content_area .img .box {flex-basis: 100%;margin: 0 auto 10px;padding: 4% 0 4% 4%;}
#section3.section .content_area .img .box:last-child {margin-bottom: 0;}
#section3.section .content_area .img .box:after {content:""; display: block; clear: both;}
#section3.section .content_area .img .box img, #section3.section .content_area .img .box p, #section3.section .more {float: left; width: 50%;} 
#section3.section .content_area .img .box p {font-size: 16px;padding: 11% 4% 20px;}
.section3-4.section .more {margin: 0 auto;position: unset;}
  
/* section4 */
#section4.section .content_area {padding: 60px 0 150px;}
#section4.section .content_area .img {margin: 0 auto;}
#section4.section .content_area .img .box, #section4.section .content_area .img .box.box1, #section4.section .content_area .img .box.box2 {flex-basis: 100%;height: 200px;padding: 50px 4% 0;margin: 0 auto 10px;background-size: cover;}
#section4.section .content_area .img .box p {margin: 15px auto 20px;}
}
@media (max-width: 410px){
#section3.section .content_area .img .box img {height: 100%;}
}