@charset "UTF-8";

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

/*---------- fullpage ----------*/
div#fullpage { height: 100%; position: relative; } 

div#fullpage > div { width: 100%; height: 100%; overflow: hidden; position: relative; } 


/* fullpage nav */
body #fp-nav.left {left: calc(45px + 10px); z-index: -1;} 
body #fp-nav ul li { width: 20px; height: 20px; margin: 0 0 20px 0; } 
body #fp-nav ul li:not(:last-child) { margin-bottom: 20px; } 
body #fp-nav ul li:first-child, body .fp-slidesNav ul li:first-child { display: none; } 
#fp-nav ul li a:before,
.fp-slidesNav ul li a:before { content:""; display: none; position: absolute; top: 0; left: 0; width: 20px; height: 20px; border: 1px solid #0161b2; border-radius: 50%; } 
body #fp-nav ul li a span, body .fp-slidesNav ul li a span { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #d9d9d9; } 
    /* active */
body #fp-nav ul li a.active span, body .fp-slidesNav ul li a.active span { background: #0161b2; } 
body #fp-nav ul li a.active span, body .fp-slidesNav ul li a.active span,
body #fp-nav ul li:hover a.active span, body .fp-slidesNav ul li:hover a.active span { height: 6px; width: 6px; margin: -3px 0 0 -3px; } 
body #fp-nav ul li a.active:before,
body .fp-slidesNav ul li a.active:before, body #fp-nav ul li:hover a.active:before, body .fp-slidesNav ul li:hover a.active:before {display: block; } 

/*---------- fullpage ----------*/
/* 각 영역에 따른 변형 */
body.fp-viewing-0 #fp-nav { display: none; } 
body.fp-viewing-3 #fp-nav.left {z-index: 1;}


/*---------- common ----------*/
.flex {display: flex;justify-content: space-between;}
.section .content_area, footer .content_area {position: relative;max-width: 1700px;margin: 0 auto;}
.section .content_area .txt > p {font-size: 20px;font-weight: 300;letter-spacing: -.5px;}
.more {width: 200px;height: 55px; transition: all .2s;}
.more a {padding: 19px 40px;font-size: 16px;font-weight: 600;background: transparent; border: 1px solid #111; transition: all .2s;}
 /* hover */
.more:hover {color: #fff; transition: all .2s;}
.more:hover a {background: #0161b2; border: 1px solid #0161b2; transition: all .2s;}
.pro_btn {text-align: left;}
.pro_btn button {border: none;background: transparent;color: #fff;transition: all .3s;}
.pro_btn button.pro_prev {margin-right: 10px;}
.pro_btn button p {display: inline-block;position: relative;width: 58px;height: 58px;border-radius: 50%;background: rgb(255 255 255 / 20%); transition: all .3s;}
.pro_btn button p i {vertical-align: -webkit-baseline-middle;font-size: 24px;line-height: 58px; transition: all .3s;}
    /* hover */
.pro_btn button:hover p {background: #fff; transition: all .3s;}
.pro_btn button:hover p i {color: #0161b2; transition: all .3s;}


/*---------- swiper ----------*/
.swiper {width: 100%;height: 100%;overflow-y: scroll !important;-ms-overflow-style: none;touch-action: pan-y;} 

/* 스크롤 안 보이게 */
.swiper::-webkit-scrollbar { display: none; width: 0 !important; } 

.swiper-slide { font-size: 18px; /* Center slide text vertically */
 display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; /* display: flex; */
 display: block; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } 

.mySwiper .swiper-slide { overflow: hidden; position: relative; } 

.mySwiper .slide_bg { /* 모바일의 height를 위함 */
 width: 100%;
 height: 100%;
 } 


/*---------- fullpage : scroll event ----------*/
/* fade out -> in */
.o_in.s_event { opacity: 0; transform: translateY(0%); transition: 2s; } 
.o_in.active { opacity: 1; transform: translateX(0%); transition: 2s; } 

/* down -> up */
.d_up.s_event { opacity: 0; transform: translateY(30%); transition: 0.5s; } 
.d_up.active { opacity: 1; transform: translateX(0%); transition: 0.5s; } 
/* -------------- */
#section3 .content_area > div .top h2.d_up.s_event, #section3 .content_area > div .top p.d_up.s_event { opacity: 0; transform: translateY(70%); transition: 0.5s; } 
#section3 .content_area > div .top p.d_up.s_event { transition-delay: .3s; } 
#section3 .content_area > div .top h2.d_up.s_event, #section3 .content_area > div .top p.d_up.active { opacity: 1; transform: translateX(0%); transition: 0.5s; } 
#section4 .content_area > div .top p.d_up.active { transition-delay: .4s; } 
#section4 .content_area > div .bottom p.d_up.active { transition-delay: .5s; } 


/* left -> right */
.l_right.s_event { opacity: 0; transform: translateX(-70%); transition: 0.7s; } 
.l_right.s_event.active { opacity: 1; transform: translateX(0%); transition: 0.7s; } 



/*---------- section1 ----------*/
/* section1 */
#section1 { } 
#section1 .mySwiper .swiper-slide { } 
#section1 .mySwiper .swiper-slide .slide_bg {height: 910px;overflow: hidden;background-repeat: no-repeat;background-size: cover;background-position: 50% 50%;} 
#section1 .mySwiper .swiper-slide .visual_wrap {position: absolute;=: 300px;top: 33%;left: 0;right: 0;width: 100%;max-width: 1700px;margin: 0 auto;} 
#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box { text-align: center; } 
#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box { font-family: 'Oxanium', sans-serif; color: #fff; } 
#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box span {display: inline-block;font-size: 20px;font-weight: 600;padding-bottom: 40px;line-height: 1.4;} 
#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box span br {display: none;}
#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h2 {font-size: 72px;letter-spacing: -4px;} 
#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h2 span { display: block; font-size: 142px; } 
#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h2 span:not(.white) { text-indent: 130px; } 
#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h2 span.white { position: relative; color: rgb(255 255 255 / 70%); } 
#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h2 span.white:before { content:""; display: block; position: absolute; top: -80px; left: 6px; background: url(../../img/main1_1.png) no-repeat; background-size: contain; width: 100%; max-width: 310px; height: 232px; } 
#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h2 span.transparent { -webkit-text-stroke: 1px #fff; font-weight: 500; color: transparent; font-size: 110px; } 
#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .visual_info {padding-top: 45px;} 
#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .visual_info p {font-size: 28px;font-weight: 300;color: #fff;line-height: 1.4;letter-spacing: -1px;} 

#section1 .mySwiper .swiper-slide .slider_1 { background-image: url(../../img/main_visual1.jpg); } 
#section1 .mySwiper .swiper-slide .slider_2 { background-image: url(../../img/main_visual2.jpg); } 
#section1 .mySwiper .swiper-slide .slider_3 { background-image: url(../../img/main_visual3.jpg); } 
#section1 .mySwiper .swiper-slide.swiper-slide-active .slide_bg { animation: zoom_in 5000ms; transition: transform 5000ms ease-in-out, opacity 1000ms ease 0s; } 
#section1 .mySwiper .swiper-slide.swiper-slide-active .visual_wrap .visual_txt_box .title_box h2 { animation: t_in 1000ms; } 
#section1 .mySwiper .swiper-slide.swiper-slide-active .visual_wrap .visual_txt_box .visual_info {animation: t_left 1000ms;animation-delay: 0.7s;} 
@keyframes zoom_in {
0% { transform: scale(1.2); } 
100% { transform: scale(1) rotate(0.003deg); } 
}
@keyframes t_in {
0% { opacity: 0; filter: Alpha(opacity=0); transform: translateY(0%); transition: opacity 2s, transform 2s; } 
100% { opacity: 1.0; filter: Alpha(opacity=100); transform: translateX(0%); transition: opacity 2s, transform 2s;} 
}
@keyframes t_left {
0% { opacity: 0; filter: Alpha(opacity=0); transform: translateX(-70px); transition: opacity 1s, transform 1s; } 
100% { opacity: 1.0; filter: Alpha(opacity=100); transform: translateX(0px); transition: opacity 1s, transform 1s; } 
}
@keyframes u_down {
0% { opacity: 0; filter: Alpha(opacity=0); transform: translateY(-50%); transition: opacity 1s, transform 1s; } 
100% { opacity: 1.0; filter: Alpha(opacity=100); transform: translateY(0px); transition: opacity 1s, transform 1s; } 
}


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

/* pagnation */
.control_wrap {position: absolute;top: auto;bottom: 260px;left: 0;right: 0;width: 100%;max-width: 1700px;height: 26px;z-index: 1;margin: 0 auto;} 
.control_wrap .pagination_wrap { display: flex; flex-wrap: wrap; justify-content: space-between; } 
.control_wrap .pagination_wrap {position: absolute;top: 0;left: 0;right: 0;width: 100%;max-width: 240px;height: 100%;margin: 0 auto;} 
.control_wrap .pagination_wrap .swiper-pagination {width: 100%;} 
.control_wrap .swiper-pagination-bullet {font-family: "Ubuntu", sans-serif;color: #fff;transition: all 1s;position: absolute;opacity: 0;left: 20px;height: 100%;text-align: right;top: calc(100% / 2 - 10px);font-weight: 600;} 
.control_wrap .swiper-pagination-bullet.swiper-pagination-bullet-active {opacity: 1;} 
.control_wrap .swiper-pagination-bullet::before {content:"";display: block;width: 130px;height: 2px;background-color: #f7f7f78f;left: 30px;top: 6px;opacity: 1;position: absolute;} 
.control_wrap .swiper-pagination-bullet::after {content:"";display: block;width: 130px;height: 2px;background-color: #f7f7f78f;left: 30px;top: 6px;opacity: 1;position: absolute;} 
.control_wrap .swiper-pagination-bullet.swiper-pagination-bullet-active::after {animation:LoadingBar 5s both;animation-delay: 0.3s;left: 30px;top: 6px;height: 2px;background: rgb(255 255 255 / 70%);position: absolute;} 
#section1 .mySwiper .control_wrap .swiper-pagination::after {display:block;font-family: "Ubuntu", sans-serif;content:'03';position:absolute;color: #fff;right: 25px;top: calc(100% / 2 - 10px);font-weight: 600;} 

/* arrow_box */
.control_wrap .arrow_box{position:absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 11 !important;-ms-transform:translateX(-50%);-moz-transform:translateX(-50%);-o-transform:translateX(-50%);text-align:left;font-size:0;}
.control_wrap .arrow_box div{position:relative;display:inline-block;top: calc(100% / 2 - 8px);width: 50%;box-sizing:border-box;margin-top:0;--swiper-navigation-size: 16px;}
.control_wrap .arrow_box div:after {font-size: 16px;color: #fff;}
.control_wrap .arrow_box .mv-button-prev{left: 0;}
.control_wrap .arrow_box .mv-button-next{right: 0;z-index: 14;text-align: right;}


/* swiper-button */
.swiper-button {position:absolute;width: 26px;height: 26px;cursor: pointer;z-index: 100;right: -45px;top: 0;background: transparent;border: 1px solid #fff;border-radius: 50%;} 
.swiper-button span {position: relative;display: none;top: calc(50% - 8px);left: calc(50% - 8px);} 
.swiper-button span.on { display: inline-block; } 
.swiper-button i {color: #fff;font-size: 16px;} 

/* mouse wheel */
.mouse_wrap {position: absolute;bottom: 50px;left: 50%;right: auto;z-index: 2; animation: mouse_ani 1.2s ease-in-out infinite;} 
.mouse_wrap a {display: block;width: 100%;height: 100%;} 
.mouse_wrap a button {position: relative;background: transparent;border: none;padding-bottom: 50px;} 
.mouse_wrap i {display: block;color:#fff;font-size: 18px;vertical-align: bottom;writing-mode: vertical-rl;} 
.mouse_wrap i.xi-mouse {margin-bottom: 10px; font-size: 30px;}
/* ani */
@keyframes mouse_ani {
0% {bottom: 62px;}
50% {bottom: 50px;}
100% {bottom: 62px;}
}



/*---------- section2 ----------*/
#section2.section, #section3.section {position: relative;}
#section2.section:before {content:"";display: block;position: absolute;top: 0;right: 0;background: url(../../img/main2.png) no-repeat;background-size: contain;width: 100%;max-width: 1920px;height: 1080px;z-index: -1;}
#section2.section .content_area {max-width: 100%;padding: 180px 0 80px;}
#section2.section .content_area .txt {width: 49%;max-width: 930px;margin-top: 20px;animation: u_down 1500ms;transition: transform 1000ms linear, opacity 1000ms ease 0s;}
#section2.section .content_area .txt .top {padding-left: 25.3%;margin-bottom: 50px;}
#section2.section .content_area .txt .top span {display: block;font-family: 'Oxanium', sans-serif;font-weight: 600;font-size: 24px;color: #0161b2;margin-bottom: 20px;}
#section2.section .content_area .txt .top h2 {font-size: 60px;}
#section2.section .content_area .txt .bottom {position: relative;height: 420px;padding: 60px 0 0 25.3%;}
#section2.section .content_area .txt .bottom:before {content:"";display: block;position: absolute;top: 0;left: 0;width: 100%;max-width: 930px;height: 100%;background: #0161b2;z-index: -1;}
#section2.section .content_area .txt .bottom > p {color: #fff;margin-bottom: 40px;letter-spacing: -.5px;}
/**/
.pro_txt {display: flex !important;flex-direction: row-reverse;position: relative;left: 0;right: auto;width: 100%;max-width: calc(420px + 100px);height: 100%;padding-top: 35px;margin-right: 6%;}
.pro_txt .slick-list {padding-left: 100px;}
.pro_txt .slick-slide{float: left;width: 420px !important;}
.pro_txt h2 {}
.pro_txt p {margin-top: 55px;}
.pro_txt .slick-dots li:not(.slick-active) {display: none;}
.pro_txt .slick-dots {position: absolute;top: 35px;left: 0;}
.pro_txt .slick-dots:before {content:"PRODUCT";display: block;font-family: 'Oxanium', sans-serif;font-size: 16px;color: #0161b2;writing-mode: tb-rl;letter-spacing: 1px;font-weight: 500;}
.pro_txt .slick-dots li {position: relative;left: -16px; /* PRODUCT 가로 길이만큼 왼쪽으로 이동 */width: 50px;height: 50px;border-radius: 50%;border: 1px solid #bdbdbd;margin-top: 50px;}
.pro_txt .slick-dots li a {display: block;width: 100%;height: 100%;font-size: 14px;line-height: 47px;font-weight: 300;text-align: center;}
.pro_wrap {position: absolute;top: 180px;left: 40%;right: 0;}
.pro_slide {position:relative;width: 100%;max-width: 1150px;height: 100%;z-index: 1;}
.pro_slide .pro_list {width: auto;height: 100%;margin:0 auto;z-index:10;overflow: hidden;left: 0;padding-bottom: 30px;}
.pro_slide .pro_list button.slick-prev {display: none !important;}
.pro_slide .pro_list div {position:relative;}
.pro_slide .pro_list div div:after {content:"";display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgb(255 255 255 / 80%);opacity: 1;transition: all .3s;}
.pro_slide .pro_list div div.slick-slide.slick-current.slick-active {}
.pro_slide .pro_list div div.slick-slide.slick-current.slick-active:after {opacity: 0;}
.pro_slide .pro_list div div a {position: relative;display: block;width: 100%;height: 100%;}
.pro_slide .pro_list div div a:after {content:"";display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: #ffffffc4;opacity: 0;transition: all .3s;}
.pro_slide .pro_list div div a .after {display: inline-block;position: absolute;top: 0;bottom: 0;left: 0;right: 0;width: auto;height: auto;text-align: center;opacity: 0;z-index: 1;padding: 56% 30px 0;}
.pro_slide .pro_list div div a .after span {display: block;margin-bottom: 30px;line-height: 1.4;}
.pro_slide .pro_list div div a .after img {border-radius: 50%;border: 1px solid #000;padding: 15px 5px;}
.pro_slide .slick-slide{width: 400px !important;margin: 0 15px;background: #fff;box-shadow: 15px 15px 20px rgb(0 0 0 / 20%);}
.pro_slide .slick-slide img {width: 100%;max-width: 370px;object-fit: cover;}
.pro_slide .slick-slide p {f;font-weight: 600;font-size: 28px;color: #222;text-align: center;margin-top: 60px;}
.pro_slide .pro_list .slick-slide a {padding: 20px 20px 60px;}
.pro_slide .pro_list .slick-slide.slick-active a {z-index: 1;}


/* slick orgin */
.slick-slider{position: relative;display: block; 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-list{display: block;margin:0;padding:0;width:100%;height: 100%;}
.slick-slide{float: left;}
.slick-initialized .slick-slide{display: block;}



/*---------- section3 ----------*/
#section3.section .content_area {max-width: 100%;padding: 80px 0 260px;height: 1080px;}
#section3.section:before {content:"";display: block;position: absolute;top: 0;right: 0;background: url(../../img/main3.png) no-repeat;width: 100%;max-width: 1920px;height: 1080px;z-index: -1;}
/**/
#section3.section .content_area .img {position: relative;margin-left: 12.3%;}
#section3.section .content_area .img img {display: block;width: 100%;max-width: 1684px;height: 740px;object-fit: cover;}
#section3.section .content_area .img h2 {position: absolute;top: 26.5%;bottom: auto;left: 10.8%;right: auto;font-family: 'Oxanium', sans-serif;font-size: 72px;line-height: 1.2;color: #fff;}
#section3.section .content_area .txt {position: absolute;top: 565px;bottom: auto;left: 0;right: auto;width: 100%;max-width: 1410px;box-shadow: 15px 15px 20px rgb(0 0 0 / 20%);}
#section3.section .content_area .txt ul {}
#section3.section .content_area .txt ul li {width: calc(100% / 3);height: 370px;padding: 40px 50px 50px;font-size: 18px;}
#section3.section .content_area .txt ul li.one, #section3.section .content_area .txt ul li.three {color: #fff;}
#section3.section .content_area .txt ul li.one {background: #0161b2;}
#section3.section .content_area .txt ul li.two {background: #f7f7f7;}
#section3.section .content_area .txt ul li.two .top span, #section3.section .content_area .txt ul li.three .top span {color: #0161b2;}
#section3.section .content_area .txt ul li.three {background: #313131;}
#section3.section .content_area .txt ul li .top {align-items: center;margin-bottom: 80px;}
#section3.section .content_area .txt ul li .top span {font-family: 'Oxanium', sans-serif;font-weight: 600;}
#section3.section .content_area .txt ul li .top a {display: block;width: 70px;height: 70px;background: #fff;border-radius: 50%; opacity: 0; transition: opacity .3s;}
#section3.section .content_area .txt ul li .top a i {width: 100%;line-height: 70px;transform: rotate(45deg);font-size: 23px;text-align: center;}
#section3.section .content_area .txt ul li.one .top a i {color: #0161b2;}
#section3.section .content_area .txt ul li.two .top a {background: #111;}
#section3.section .content_area .txt ul li.two .top a i {color: #f7f7f7;}
#section3.section .content_area .txt ul li.three .top a {background: #fff;}
#section3.section .content_area .txt ul li.three .top a i {color: #313131;}
#section3.section .content_area .txt ul li .bottom {}
#section3.section .content_area .txt ul li .bottom h3 {font-size: 30px; margin-bottom: 30px;}
/* hover */
#section3.section .content_area .txt ul li:hover .top a {opacity: 1; transition: opacity .3s;}



/*---------- section4 ----------*/
#section4.section:before {content:"";display: block;position: absolute;top: 0;right: 0;background: url(../../img/main4.png) no-repeat;background-size: cover;width: 100%;max-width: 100%;height: 100%;z-index: -1;}
#section4.section .content_area {height: 100%;padding-top: calc(300px + 85px);}
#section4.section .content_area .txt {text-align: center;color: #fff;}
#section4.section .content_area .txt > p {margin: 40px 0;}
#section4.section .content_area .more {margin: 0 auto;}
#section4.section .content_area .more a {border: 1px solid #fff;}
 /* hover */
#section4.section .content_area .more:hover a {border: 1px solid #0161b2;}




/* respon */
@media all and (max-width: 1700px){ /* width */

/* section1 */
#section1 .mySwiper .swiper-slide .visual_wrap, .control_wrap,
#section2.section .content_area,
#section3.section .content_area {width: 96%;}
 
/* section2 */
.pro_wrap {right: -4.4%}
#section2.section .content_area,
#section3.section .content_area, #section3.section .content_area .img img  {max-width: 1700px;}
#section2.section .content_area .txt .top {padding-left: 0;}
 #section2.section .content_area .txt .bottom {padding: 60px 0 0 0;}
#section2.section .content_area .txt .bottom:before {left: -4.4%;}

/* section3 */
#section3.section .content_area .img {position: relative;margin: 0 -2% 0 0;}
#section3.section .content_area .img h2 {font-size: 60px;}
#section3.section .content_area .img h2 br {display: none;}
#section3.section .content_area .txt ul {margin-left: -2.5%;}
}
@media (max-width: 1450px){
#section3.section .content_area .txt ul li .bottom p br {display: none;}
}
@media (max-width: 1400px){
#section3.section .content_area .txt ul li {height: auto;}
}
@media (max-width: 1300px){
/* section1 */
#section1 .mySwiper .swiper-slide .visual_wrap {top: 30%;}
 
 /* section2 */
.pro_wrap {left: 43%;}
 .pro_slide .slick-slide{width: 350px !important;height: 470px;}

  /* section3 */
#section3.section .content_area {height: 980px;}
#section3.section .content_area .img img {height: 640px;}
#section3.section .content_area .txt {top: 500px;}
#section3.section .content_area .txt ul li .top {margin-bottom: 50px;}
  #section3.section .content_area .txt p br {display: none;}
 
}
@media (max-width: 1200px){
 /* section2 */
.pro_wrap {left: 50%;}
}
@media (max-width: 1023px){
  /* section1 */ 
  #section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h2 {font-size: 50px;}
 #section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .visual_info p {font-size: 24px;}
  #section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .visual_info p br {display: none;}

 /* section2 */
#section2.section .content_area {padding: 130px 0 65px;}
#section2.section .content_area .txt {margin-top: 0;}
#section2.section .content_area .txt .top span {font-size: 20px;}
#section2.section .content_area .txt .top h2, #section3.section .content_area .img h2 {font-size: 50px;}
#section2.section .content_area .txt .bottom:before {width: calc(100% + 8.7%);}
#section2.section .content_area .txt .bottom > p br {display: none;}
.pro_wrap {top: 36%;left: 55%;}
 .pro_slide .slick-slide{height: auto;}
.pro_slide .pro_list .slick-slide a {padding: 20px 20px 40px;}
.pro_slide .slick-slide p {font-size: 24px;margin-top: 40px;}

  /* section3 */
#section3.section .content_area {height: 880px;padding: 65px 0 260px;}
#section3.section .content_area .img img {height: 540px;}
#section3.section .content_area .img h2 {top: 20%;left: 4%;}
#section3.section .content_area .txt {top: 400px;}
#section3.section .content_area .txt ul li {padding: 30px 2% 40px;}
#section3.section .content_area .txt ul li .bottom h3 {font-size: 26px;}
#section3.section .content_area .txt ul li .top a {width: 58px;height: 58px;}
#section3.section .content_area .txt ul li .top a i {line-height: 58px;}

   /* section4 */
 #section4.section .content_area {padding: 230px 0;}
}

@media all and (max-width: 767px){
 /* common */
 .more {width: 150px;height: 50px;}
.more a {padding: 16px 20px;}
 
  /* section1 */ 
#section1 .mySwiper .swiper-slide .slide_bg {height: 710px;}
#section1 .mySwiper .swiper-slide .visual_wrap {top: 26%;}
#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box span {font-size: 18px;padding-bottom: 30px;}
 #section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box span br {display: block;}
  #section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h2 {font-size: 40px;letter-spacing: -2px;}
#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .visual_info {padding: 35px 2% 0;}
 #section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .visual_info p {font-size: 20px;}
.control_wrap {bottom: 28%;}
.mouse_wrap {bottom: 20px;}
/* ani */
@keyframes mouse_ani {
0% {bottom: 32px;}
50% {bottom: 20px;}
100% {bottom: 32px;}
}

  /* section2 */
#section2.section .content_area {padding: 80px 0 40px;}
#section2.section .content_area .txt {width: 100%;max-width: 100%;}
#section2.section .content_area .txt .top {margin-bottom: 30px;}
#section2.section .content_area .txt .top span {font-size: 18px;margin-bottom: 10px;}
#section2.section .content_area .txt .top h2, #section3.section .content_area .img h2 {font-size: 40px;}
#section2.section .content_area .txt .bottom {height: auto;padding: 30px 0;}
#section2.section .content_area .txt .bottom > p {font-size: 16px;margin-bottom: 0;}
#section2.section .content_area .txt .bottom > p br {display: block;}
.pro_btn {position: absolute;top: 108%;right: 0;width: 100%;text-align: right;}
.pro_btn button p {width: 48px;height: 48px;border: 1px solid #0161b2;}
.pro_btn button p i {font-size: 22px;line-height: 48px;color: #0161b2;}
.pro_wrap {position: unset;margin-top: 80px;}
 .pro_slide .slick-slide{width: 300px !important;margin: 0 10px;}
.pro_slide .slick-slide p {font-size: 20px;margin-top: 20px;}
    /* hover */
.pro_btn button:hover p {background: #0161b2;}
.pro_btn button:hover p i {color: #ffff;}

  /* section3 */
#section3.section .content_area {height: auto;padding: 40px 0 80px;}
#section3.section .content_area .img {margin: 0 -2%;}
#section3.section .content_area .img img {height: 285px;}
#section3.section .content_area .img h2 {top: 35%;left: 2%;right: 2%;}
#section3.section .content_area .txt {position: unset;max-width: 100%;margin: 0 auto;box-shadow: none;}
#section3.section .content_area .txt ul {flex-wrap: wrap;margin: 0 -2%;}
#section3.section .content_area .txt ul li {width: calc(100% / 2);}
#section3.section .content_area .txt ul li.three {width: 100%;}
#section3.section .content_area .txt ul li .top {margin-bottom: 30px;}
#section3.section .content_area .txt ul li .top span, #section3.section .content_area .txt ul li .bottom p {font-size: 16px;}
#section3.section .content_area .txt ul li .bottom h3 {font-size: 22px;}
#section3.section .content_area .txt ul li .top a {width: 48px;height: 48px;}
#section3.section .content_area .txt ul li .top a i {line-height: 48px;}


    /* section4 */
 #section4.section .content_area {width: 96%;padding: 170px 0;}
 #section4.section .content_area .txt > p {margin: 30px 0 20px;}
}

@media all and (max-width: 479px){
  /* section1 */ 
#section1 .mySwiper .swiper-slide .slide_bg {height: 100vh;}
#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box span {font-size: 16px;padding-bottom: 20px;}
#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .visual_info {padding: 25px 0 0;}
 #section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .visual_info p {font-size: 18px;}
.control_wrap {display: none;}
 
  /* section2 */
#section2.section .content_area .txt .top span {font-size: 16px;}
#section2.section .content_area .txt .top h2, #section3.section .content_area .img h2 {font-size: 30px;}
#section2.section .content_area .txt .bottom > p br {display: none;}
 .pro_slide .slick-slide{width: 260px !important;}
.pro_slide .slick-slide p {font-size: 18px;}

/* section3 */
#section3.section .content_area .img img {height: 220px;}
#section3.section .content_area .img h2 {top: 40%;left: 2%;right: 2%;}
#section3.section .content_area .txt ul li {width: 100%;}
#section3.section .content_area .txt ul li .top {position: absolute;top: 30px;right: 2%;margin-bottom: 0;}
#section3.section .content_area .txt ul li .top span {display: none;}
#section3.section .content_area .txt ul li .bottom h3 {font-size: 20px;margin-bottom: 20px;transition: all .3s;}
/* hover */
#section3.section .content_area .txt ul li:hover .bottom h3 {margin-bottom: 50px;transition: all .3s;}

    /* section4 */
 #section4.section .content_area .txt > p br {display: none;}
}
@media all and (max-width: 410px){
  /* section2 */
.pro_txt {margin-bottom: 10%;}
 .pro_txt p {display: none;}
 .pro_txt .slick-slide {max-width: 300px;}
}