@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; } 

div#fullpage > div#section5 { overflow: unset; } 

/* 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 #b80000; 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: #b80000; } 

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 ----------*/
strong { font-weight: 700; } 

.grid { display: grid; justify-content: space-between; } 

.more { display: inline-block; border-radius: 5px; overflow: hidden; transition: all .3s; } 

.more a { align-items: center; } 

.more span { display: block; margin-right: 35px; } 

.more .i_wrap { display: block; width: 30px; height: 30px; border-radius: 5px; border: 2px solid var(--main-color); overflow: hidden; transition: all .3s; } 

.more .i_wrap i { display: block; width: 100%; height: 100%; font-size: 22px; text-align: center; transform: rotate(45deg); color: #333; } 

.more2 .i_wrap i { display: block; width: 100%; height: 100%; font-size: 48px; transform: rotate(45deg); color: #fff; } 

.section .content_area, footer .content_area { position: relative; max-width: 1600px; height: 100%; margin: 0 auto; } 

.section .content_area .tit strong {display: block;font-size: 42px;letter-spacing: -1px;line-height: 1.3;} 

.section .content_area .tit h2 { font-size: 90px; line-height: 1.4; letter-spacing: -2px; color: var(--main-color); } 

.right_btn { width: 100%; max-width: 1380px; position: absolute; top: 80px; left: 0; right: 0; margin: 0 auto; z-index: 100; text-align: right; } 

.right_btn button { border: none; background: transparent; color: #fff; padding: 10px 0 10px 10px; transition: all .3s; } 

.right_btn button span { display: inline-block; position: relative; right: 0; vertical-align: -webkit-baseline-middle; font-family: 'Oxanium', sans-serif; font-weight: 300; letter-spacing: 3px; z-index: 10; transition: all .3s; } 

.right_btn button p { display: inline-block; position: relative; width: 50px; height: 50px; border: 1px solid #fff; border-radius: 50%; } 

.right_btn button p i { vertical-align: -webkit-baseline-middle; } 

/* hover */
#section2.section .content_area .img ul li a:hover .more .i_wrap, #section3.section .content_area .top .right .more:hover .i_wrap { background: var(--main-color); transition: all .3s; } 

#section2.section .content_area .img ul li a:hover .more .i_wrap i, #section3.section .content_area .top .right .more:hover .i_wrap i { color: #fff; animation-name: btn_more1, btn_more2; animation-duration: .5s, .5s; animation-delay: 0s, .35s; } 

/* ani */
@keyframes btn_more1 { 
 0% { transform: translateY(50%) rotate(45deg); } 

 100% { transform: translateY(-100%) rotate(45deg); } 
 }

@keyframes btn_more2 { 
 0% { transform: translateY(50%) rotate(45deg); } 

 100% { transform: translateY(0%) rotate(45deg); } 
 }

.right_btn button:hover span { right: 10px; } 

.right_btn button:hover p { background: #fff; } 

.right_btn button:hover p i { color: #b80000; font-weight: 600; } 

/*---------- 스크롤 이벤트 ----------*/
/* fade out -> in */
#section1 .content_area .top p.left.s_event { opacity: 0; transform: translateY(0%); transition: 2s; } 

#section1 .content_area .top p.left.s_event.active { opacity: 1; transform: translateX(0%); transition: 2s; transition-delay: 0.3s; } 

/*---------- swiper ----------*/
.swiper { width: 100%; height: 100%; -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: 100vh; } 

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

.o_in.active { opacity: 1; transform: translateX(0%); transition-duration: 2s; } 

/* down -> up */
.u_down.s_event { opacity: 0; transform: translateY(-15%); transition-duration: 1s; } 

.u_down.active { opacity: 1; transform: translateX(0); transition-duration: 1s; } 

/* up -> down */
.d_up.s_event { opacity: 0; transform: translateY(15%); transition-duration: 1s; } 

.d_up.active { opacity: 1; transform: translateX(0%); transition-duration: 1s; } 

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

.l_right.s_event.active { opacity: 1; transform: translateX(0%); transition-duration: 1s; } 

/* right -> left */
.r_left.s_event { opacity: 0; transform: translateX(15%); transition-duration: 1s; } 

.r_left.s_event.active { opacity: 1; transform: translateX(0%); transition-duration: 1s; } 

/* ----------------- */
.td_100 { transition-delay: 100ms; } 

.td_200 { transition-delay: 200ms; } 

.td_300 { transition-delay: 300ms; } 

.td_400 { transition-delay: 400ms; } 

.td_500 { transition-delay: 500ms; } 

.td_600 { transition-delay: 600ms; } 

.td_700 { transition-delay: 700ms; } 

/*---------- section1 ----------*/
/* section1 */
#section1 .mySwiper .swiper-slide .slide_bg { height: 100vh; overflow: hidden; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; filter: brightness(0.8); } 

#section1 .mySwiper .swiper-slide .visual_wrap {position: absolute;top: 48vh;left: 0;right: 0;width: 100%;max-width: 1600px;margin: 0 auto;overflow: hidden;} 

#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box { color: #fff; } 

#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box { font-family: 'Play', sans-serif; font-weight: 600; } 

#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box span { display: inline-block; font-size: 36px; padding-bottom: 20px; } 

#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: 90px; font-weight: 600; } 

#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box p { font-size: 36px; padding-top: 50px; } 

#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box p span { font-size: 72px; font-weight: 600; letter-spacing: -2px}

#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .visual_info { padding-top: 40px; } 

#section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .visual_info p { font-size: 24px; font-weight: 500; line-height: 1.4; } 

#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 4500ms; transition: transform 4500ms ease-in-out, opacity 1500ms ease 0s; } 

#section1 .mySwiper .swiper-slide.swiper-slide-active .visual_wrap .visual_txt_box .title_box h2 { animation: t_opacity 2000ms; transition: transform 2000ms ease-in-out, opacity 2000ms ease 0s; animation-delay: 0s}

#section1 .mySwiper .swiper-slide.swiper-slide-active .visual_wrap .visual_txt_box .title_box p { animation: t_top 1500ms; transition: transform 1500ms ease-in-out, opacity 1500ms ease 0s; animation-delay: 0.4s}

#section1 .mySwiper .swiper-slide.swiper-slide-active .visual_wrap .visual_txt_box .visual_info { animation: t_top 1500ms; transition: transform 1500ms ease-in-out, opacity 1500ms ease 0s; animation-delay: 0.4s}

/* video */
/* #section1 .mySwiper .swiper-slide.slide1 .slide_bg:after { content: ''; display: block; width: 100%; height: 100%; background: #00000036; position: absolute; left: 0; top: 0; } 
#section1 .mySwiper .swiper-slide.slide1 .slide_bg video { width: 100%; height: 100vh; object-fit: cover; } */
@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: 80px; } 
 }

@keyframes LoadingBar { 
 from { background: rgb(255 255 255 / 50%); } 

 to { background: #fff; } 
 }

/* pagnation */
.control_wrap { position: absolute; bottom: 0; left: 0; right: 0; max-width: 1600px; width: 100%; z-index: 1; margin: 0 auto; } 

.control_wrap .pagination_wrap { margin-bottom: 19vh; } 

.control_wrap .swiper-pagination { text-align: left; position: relative; top: 0; } 

.control_wrap .swiper-pagination-bullet { position: relative; width: 84px; font-size: 0; opacity: 1; margin-left: 1% !important; } 

.control_wrap .swiper-pagination-bullet:first-child { margin-left: 0 !important; } 

.control_wrap .swiper-pagination-bullet:before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: rgb(255 255 255 / 50%); } 

.control_wrap .swiper-pagination-bullet::after { content: ""; display: block; width: 84px; height: 5px; opacity: 1; position: absolute; left: 0; top: 0; } 

.control_wrap .swiper-pagination-bullet { background: var(--swiper-pagination-bullet-inactive-color,none) !important; } 

.control_wrap .swiper-pagination-bullet.swiper-pagination-bullet-active { color: #fff; } 

.control_wrap .swiper-pagination-bullet.swiper-pagination-bullet-active:after { animation: LoadingBar1 4.5s both; animation-delay: 0s; background: #fff; } 

/* ani */
@-webkit-keyframes LoadingBar1 { 
 from { width: 0px; } 

 to { width: 100%; } 
 }

@keyframes LoadingBar1 { 
 from { width: 0px; } 

 to { width: 100%; } 
 }

/*---------- section2 ----------*/
#section2.section .content_area { padding: calc(100px + 90px) 0 75px; } 

#section2.section .content_area .img ul { margin: 0 -21px; } 

#section2.section .content_area .img ul li { width: calc(100% / 3 - 42px); max-width: 506px; margin: 0 21px; } 

#section2.section .content_area .img ul li a { flex-direction: column; transition: all .3s; } 

#section2.section .content_area .img ul li:nth-child(2) a { flex-direction: column-reverse; } 

#section2.section .content_area .img ul li a div.top { border-radius: 20px; overflow: hidden; border: 1px solid #2222; } 

#section2.section .content_area .img ul li a div.top img { display: block; width: 100%; max-width: 506px; height: 550px; object-fit: cover; transition: all .5s; } 

#section2.section .content_area .img ul li a div.bottom { align-items: end; margin-top: 30px; } 

#section2.section .content_area .img ul li:nth-child(2) a div.bottom { margin: 0 0 30px; } 

#section2.section .content_area .img ul li a div.bottom h3 { font-size: 36px; color: #000011; } 

/* hover */
#section2.section .content_area .img ul li a:hover img { transform: scale(1.1); transition: all .5s; } 

/*---------- section3 ----------*/
#section3.section .content_area { flex-direction: column; padding: calc(100px + 145px) 0 20px; max-width: 100%; } 

#section3.section .content_area .top { width: 100%; max-width: 1600px; margin: 0 auto 45px; } 

#section3.section .content_area .top .right { width: 60%; max-width: 900px; margin-left: 50px; } 

#section3.section .content_area .top .right ul { margin-bottom: 45px; } 

#section3.section .content_area .top .right ul li { font-size: 20px; font-weight: 300; color: #666; line-height: 1.8; margin-bottom: 35px; } 

#section3.section .content_area .top .right ul li:last-child { margin-bottom: 0; } 

#section3.section .content_area .bottom { width: 100%; } 

#section3.section .content_area .bottom:before { content: ""; display: block; width: 100%; max-width: 100%; height: 280px; background: url('/img/main3_1.png') no-repeat top center / cover; /* background-size: 100% 100%; */
 transition: 0.7s 0.3s; } 

/* width 100 -> width auto */
#section3.section .content_area .bottom.w_auto { max-width: 1600px; transition: 0.7s; } 

#section3.section .content_area .bottom.w_auto.active { max-width: 1890px; margin: 0 auto; transition: 0.7s 0.3s; } 

#section3.section .content_area .bottom.w_auto.active:before { border-radius: 25px; transition: 0.7s 0.3s; } 

/*---------- section4 ----------*/
#section4.section .content_area .tit h2 {font-size: 60px;color: inherit;} 

#section4.section .more2 { opacity: 0; transition: all .3s; } 

#section4.section .content_area .top .txt ul li:first-child .more2 { opacity: 1; } 

#section4.section .content_area .top .txt ul li .more2 .i_wrap img { filter: brightness(0); } 

#section4.section .content_area .top .txt ul li:first-child .more2 .i_wrap img { filter: brightness(1); } 

/**/
#section4.section .content_area { flex-direction: column; padding: calc(100px + 15px) 0 0; max-width: 100%; } 

#section4.section .content_area .top { height: 615px; flex-direction: column; position: relative; padding: 115px 0 50px; } 

#section4.section .content_area .top:before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; max-width: 100%; height: 615px; background: url('/img/main4_1.png') no-repeat top center / cover; border-radius: 25px; transition: 0.7s 0.3s; z-index: -1; } 

#section4.section .content_area .top > div { width: 100%; max-width: 1600px; margin: 0 auto; } 

#section4.section .content_area .top .txt ul { justify-content: flex-end; margin: 0 -20px; } 

#section4.section .content_area .top .txt ul li {width: calc(100% / 2 - 40px);max-width: 520px;height: 295px;margin: 0 20px;border-radius: 25px;background: #fff;} 

#section4.section .content_area .top .txt ul li:first-child { background: var(--main-color); } 

#section4.section .content_area .top .txt ul li > a { height: 100%; padding: 40px; } 

#section4.section .content_area .top .txt ul li > a .left { align-self: flex-end; } 

#section4.section .content_area .top .txt ul li > a .left h3 { font-size: 36px; } 

#section4.section .content_area .top .txt ul li:first-child > a .left h3 { color: #fff; } 

#section4.section .content_area .bottom .flow-container { width: 150%; margin: 0 auto; } 

#section4.section .content_area .bottom .flow-wrap { animation-duration: 40s}

#section4.section .content_area .bottom .flow-text { display: flex; white-space: nowrap; overflow: hidden; transition: 0.3s; font-size: 138px; font-weight: 700; } 

#section4.section .content_area .bottom .flow-wrap { animation: textLoop 30s linear infinite; padding-right: 1.4881vw; padding-right: 5.4881vw; cursor: default; background: linear-gradient(180deg, #0f529d47, #fff); background-clip: text; color: transparent; } 

/* width 100 -> width auto */
#section4.section .content_area.w_auto { max-width: 1600px; transition: 0.7s; } 

#section4.section .content_area.w_auto.active { max-width: 1890px; margin: 0 auto; transition: 0.7s 0.3s; } 

#section4.section .content_area.w_auto.active .top:before { border-radius: 25px; transition: 0.7s 0.3s; } 

#section4.section .content_area .top .txt ul li:hover .more2 { opacity: 1; transition: all .3s; } 

@keyframes textLoop { 
 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 

 100% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 
 }

/*---------- foot_sec ----------*/
.foot_sec { position: relative; z-index: 1; } 

.foot_sec .content_area { max-width: 100%; } 






/* respon */
@media (min-width: 1601px) and (max-width: 1890px) {
 #section3.section .content_area .bottom.w_auto.active { width: 98%; } 
 }

@media (max-width: 1600px){
 .section .content_area, footer .content_area, #section1 .mySwiper .swiper-slide .visual_wrap, .control_wrap { width: 96%; } 
 #section4.section .content_area .top > div { width: 96%; } 
 }

@media (max-width: 767px), (min-width: 1024px) and (max-width: 1600px){
 #section3.section .content_area .top .right ul li br {display: none; } 
 }

@media (max-width: 1023px){
 #section5 { display: none; } 

 body.fp-viewing-4 #mainFooterCon, body.fp-viewing-4 #mainFooterCon .fp-tableCell { display: block; } 

 div#fullpage > div, .fp-tableCell { height: auto !important; } 


 .section .content_area .tit strong {font-size: 30px;} 
 .section .content_area .tit h2 {font-size: 60px;} 

 
 #section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h2 { font-size: 70px; } 

 #section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .visual_info p { font-size: 20px; } 

 #section2.section .content_area {padding: 180px 0 0;} 
#section2.section .content_area .img ul { flex-wrap: wrap; } 
 #section2.section .content_area .img ul li { width: calc(100% / 2 - 42px); max-width: 100%; margin: 0 21px 42px; } 
 #section2.section .content_area .img ul li:last-child { width: 100%; margin: 0 21px;} 
 #section2.section .content_area .img ul li a { flex-direction: column-reverse; } 
 #section2.section .content_area .img ul li a div.bottom h3 { font-size: 30px; } 
 #section2.section .content_area .img ul li a div.top img { max-width: 100%; height: 350px; } 
 #section2.section .content_area .img ul li a div.bottom { margin: 0 0 30px; } 

 #section3.section .content_area {padding: 130px 0;} 
   #section3.section .content_area .top {flex-direction: column;margin: 0 auto 45px;} 
 #section3.section .content_area .top .right ul li {font-size: 18px;margin-bottom: 20px;} 
 #section3.section .content_area .top .right {width: 100%;max-width: 100%;margin: 20px 0 0 0;} 

 #section4.section .content_area {padding: 0;}
 #section4.section .content_area .top {padding: 115px 0 90px;} 
 #section4.section .content_area .top:before {background-position: 45% center;} 
 #section4.section .content_area .top .txt {margin: 25px auto 0;} 
 #section4.section .content_area .top, #section4.section .content_area .top:before {height: 100%;} 
 #section4.section .content_area .top .txt ul { flex-wrap: wrap; } 
#section4.section .content_area .top .txt ul li {width: calc(100% / 2 - 40px);max-width: 100%;margin: 0 20px 20px;} 
  #section4.section .content_area .top .txt ul li > a .left h3 { font-size: 30px; }
 #section4.section .content_area .top .txt ul li .more2 { opacity: 1; } 
 }

@media all and (max-width: 767px){
 .more span {font-size: 16px;margin-right: 25px;} 
 .more .i_wrap {width: 25px;height: 25px;}
  .section .content_area .tit strong {font-size: 25px;} 
 .section .content_area .tit h2, #section4.section .content_area .tit h2 {font-size: 40px;} 

 
 #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 { padding-top: 20px; } 

 #section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .visual_info p { font-size: 18px; } 

 .control_wrap .swiper-pagination-bullet:not(.swiper-pagination-bullet-active), .control_wrap .swiper-pagination-bullet:not(.swiper-pagination-bullet-active)::after { width: 30px; } 

 .control_wrap .pagination_wrap { margin-bottom: 25vh; } 

  #section2.section .content_area {padding-top: 130px;} 
 #section2.section .content_area .img ul { margin: 0 -15px; } 
 #section2.section .content_area .img ul li { width: calc(100% / 2 - 30px); margin: 0 15px 30px; border-radius: 20px;} 
  #section2.section .content_area .img ul li:last-child { margin: 0 15px;} 
 #section2.section .content_area .img ul li a div.bottom h3 { font-size: 25px; } 
 #section2.section .content_area .img ul li a div.top img { height: 250px; } 
 #section2.section .content_area .img ul li a div.bottom, #section2.section .content_area .img ul li:nth-child(2) a div.bottom { margin-bottom: 15px; }

  #section3.section .content_area {padding: 100px 0;} 
    #section3.section .content_area .top {margin: 0 auto 25px;} 
 #section3.section .content_area .top .right ul { margin-bottom: 35px; } 
 #section3.section .content_area .top .right ul li {font-size: 16px;margin-bottom: 10px;} 
 #section3.section .content_area .bottom.w_auto.active:before { border-radius: 20px;} 

  #section4.section .content_area .top {padding: 80px 0 60px;} 
 #section4.section .content_area.w_auto.active .top:before {border-radius: 20px;}
 #section4.section .content_area .top .txt ul {margin: 0 -15px;} 
#section4.section .content_area .top .txt ul li {width: calc(100% / 2 - 30px);height: 200px;margin: 0 15px 30px; border-radius: 20px;} 
#section4.section .content_area .top .txt ul li > a { padding: 25px; } 
  #section4.section .content_area .top .txt ul li > a .left h3 { font-size: 25px; } 
 #section4.section .content_area .top .txt ul li .more2 .i_wrap img {width: 45px;} 
  #section4.section .content_area .bottom .flow-container {margin: 20px auto 10px;}
 #section4.section .content_area .bottom .flow-text { font-size: 18vw;}
 }

@media (max-width: 479px){
  .section .content_area .tit strong {font-size: 20px;} 
 .section .content_area .tit h2, #section4.section .content_area .tit h2 {font-size: 35px;} 
 
 #section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .title_box h2 { font-size: 35px; } 

 #section1 .mySwiper .swiper-slide .visual_wrap .visual_txt_box .visual_info p { font-size: 16px; } 

 #section2.section .content_area .img ul { margin: 0 auto; } 
 #section2.section .content_area .img ul li { width: 100%; margin: 0 auto 30px; } 
   #section2.section .content_area .img ul li:last-child { margin: 0 auto;} 
 #section2.section .content_area .img ul li a div.bottom h3 { font-size: 20px; } 
 #section2.section .content_area .img ul li a div.top img {height: 150px;} 

  #section3.section .content_area .top .right {margin-top: 15px;} 
 #section3.section .content_area .top .right ul li {font-size: 14px;} 
 #section3.section .content_area .bottom:before {height: 150px;} 

  #section4.section .content_area .top .txt ul {margin: 0 auto;} 
#section4.section .content_area .top .txt ul li {width: 100%;height: 100px;margin: 0 auto 15px;}  
 #section4.section .content_area .top .txt ul li > a { padding: 25px 20px; } 
 #section4.section .content_area .top .txt ul li .more2 .i_wrap img {width: 45px;} 
   #section4.section .content_area .top .txt ul li > a .left h3 { font-size: 20px; } 
 #section4.section .content_area .top .txt ul li .more2 .i_wrap img {width: 30px;} 
 #section4.section .content_area .bottom .flow-text { font-size: 20vw;}
 }