.inr {width: 1200px;margin: 0 auto}

section {padding: 131px 0 140px;box-sizing: border-box}
section h3 {font-size: 40px;letter-spacing: -1px;text-align: center;color: #222;font-family:'GmarketSansB','san-serif';}
section .cont {margin-top: 82px;}


/* 버튼, 서브 페이지에서 사용한다면 common.css로 이전 */
a.btn_more {display: inline-block;position: relative;width: 146px;height: 46px;line-height: 46px;background: 0 0;text-align: center;color: #fff;font-size: 15px;font-weight: 400;letter-spacing: -.25px;transition: .3s;box-sizing: border-box;overflow: hidden}
.btn_more:hover {color: #2d2727;border-color: transparent}
.btn_more:before {content: '';display: inline-block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;border: 1px solid #fff;box-sizing: border-box;z-index: -2}
.btn_more:after {content: '';display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: #83ccb8;background: -webkit-linear-gradient(145deg,#499ec5 6%,#9ce1b3 45%);background: -moz-linear-gradient(145deg,#499ec5 6%,#9ce1b3 45%);background: linear-gradient(145deg,#499ec5 6%,#9ce1b3 45%);transition: .3s;border: 1px solid transparent;z-index: -1;opacity: 0}
.btn_more:hover:after {opacity: 1;}


/* visual */
.area_visual {position: relative;width: 100%;height: 700px;background-size: cover;background-position: 50%;}
.area_visual .swiper-container ul li {width: 100%;height: 700px;background-size: cover!important;background-repeat: no-repeat;background-position: center center}
.area_visual .wrap{ position: absolute; top: 0; width:100%; margin:0 auto; }
.area_visual .wrap .inr {position: relative;top: 150px;color: #fff;z-index: 1;}
.area_visual .inr h2 {font-size: 40px;color: #fff;word-break: keep-all;line-height: 1.1;}
.area_visual .inr h2 span { display: block; margin-bottom: 20px;}
.area_visual .inr .btn_more {margin-top: 105px;}

/* 스와이퍼 버튼 */
.visual_arrow {position: absolute;top: 0;right: 0;width: 50px;}
.area_visual .swiper-button-next,
.area_visual .swiper-button-prev {position: relative;display: inline-block;margin-top: 0;width: 50px;height: 50px;top: 0;left: 0;opacity: .7;border-radius: 100%;border: 1px solid #fff;background: center no-repeat;box-sizing: border-box}
.area_visual .swiper-button-prev {background-image: url(/images/main/arrow_l.png);}
.area_visual .swiper-button-next {background-image: url(/images/main/arrow_r.png);margin-top: 20px;}
.area_visual .swiper-button-next:hover,
.area_visual .swiper-button-prev:hover {opacity: 1;}
.area_visual .sc_down {z-index: 10;position: absolute;left: 50%;bottom: 28px;opacity: .7;text-align: center;transform: translateX(-50%);}
.area_visual .sc_down .scroll{ }
.area_visual .sc_down .scroll .mousey{width: 22px; height: 36px; border-radius: 40px; border: 2px solid #e6e7e7; display: inline-block;}
.area_visual .sc_down .scroll .mousey .scroller{width:3px; height: 9px; border-radius:1.5px; background-color: #e6e7e7; margin: 0 auto; animation:scroll 2.2s cubic-bezier(.15,.41,.69,.94) infinite;}
@keyframes scroll {
    0%{
        transform: translateY(7px);
        opacity: 0;
    }
    10%{
        opacity: 1;
    }
    100%{
        transform: translateY(10px);
        opacity: 0;
    }
}
.area_visual .sc_down span{display: block; font-size: 12px; color: #fff; font-family: 'Noto Sans CJK KR'}

/*business*/
section.area_biz {background: url(/images/main/bg_biz.jpg) center/cover no-repeat}
section.area_biz .cont {min-height: 490px;}
.area_biz .cont ul {margin: 0 auto;display: flex;align-items: center}
.area_biz .cont *, .area_biz .cont *:before, .area_biz .cont *:after  {transition: .4s}
.area_biz .cont ul li {position: relative;width: 100%;max-width: 600px;height: 490px;text-align: center;background: center/cover no-repeat;box-shadow: 4px 4px 18.75px 6.25px transparent;transform: scale(1);}
.area_biz .cont ul li:hover {transform: scale(1.05);z-index: 1;box-shadow: 4px 4px 18.75px 6.25px rgba(0,0,0,.15);}
.area_biz .cont ul li .line {position: absolute;width: calc(100% - 80px);height: calc(100% - 80px);top: 50%;left: 50%;transform: translate(-50%,-50%);border: 1px solid #fff;opacity: 0;z-index: -1;}
.area_biz .cont ul li:hover .line,
.area_biz .cont ul li:hover::after {opacity: 1;}
.area_biz .cont ul li:before {content: '';display: block;position: absolute;width: 100%;height: 100%;background: rgba(0,0,0,.7);}
.area_biz .cont ul li:hover:before{background: rgba(0,0,255,.3);}
.area_biz .cont ul li.eq{ background-image: url(/images/main/biz_left.jpg);}
.area_biz .cont ul li.new{ background-image: url(/images/main/biz_right.jpg);}
.area_biz .cont ul li .txt{ color: #fff; position: absolute; top:52.87%; left: 50%; transform: translate(-50%, -50%); width: 100%; }
.area_biz .cont ul li h4{font-size: 24px; letter-spacing: -.5px; position: relative;}
.area_biz .cont ul li h4::before {content: '';display: block;width: 76px;height: 4px;background: #fff;opacity: .8;text-align: center;margin: 0 auto 20px;}
.area_biz .cont ul li h4::after {content: '';position: absolute;display: block;top: 0;left: 50%;transform: translateX(-50%);width: 76px;height: 4px;background: #83ccb8;opacity: .8;text-align: center;margin: 0 auto 20px;background: -webkit-linear-gradient(145deg, #499ec5 6%, #9ce1b3 45%); background: -moz-linear-gradient(145deg,#499ec5 6%,#9ce1b3 45%);background: linear-gradient(145deg,#499ec5 6%,#9ce1b3 45%);z-index: 1;opacity: 0}
.area_biz .cont ul li:hover h4:after {opacity: 1;}
.area_biz .cont ul li h4 i {display: block;font-size: 18px;}
.area_biz .cont ul li p {font-weight: 400;font-size: 14px;line-height: 1.3;padding: 20px 0 40px;}

/*about us*/
.area_about{background: url(/images/main/bg_about.jpg)no-repeat center center / cover; min-height: 654px; width: 100%;}
section.area_about h3{color: #fff;}
section.area_about .cont ul{display: flex;justify-content: space-between; flex-wrap: wrap; margin: 0 auto; width: 1200px; justify-content: center; }
section.area_about .cont ul li a {position: relative;text-align: center;display: flex;flex-direction: column;justify-content: center;align-items: center;width: 200px;height: 200px;transition: .5s;background: rgba(255,255,255,0);box-shadow: 2px 3px 8.4px 1.6px rgba(255,255,255,0);color: #fff;font-size: 20px;font-weight: 500;letter-spacing: -.08em}
section.area_about .cont ul li a:hover {color:#7ec8b9; background: rgba(255,255,255,.2);box-shadow: 2px 3px 8.4px 1.6px rgba(255,255,255,.2);}
section.area_about .cont ul li a:hover div:before{ opacity: 1;}
section.area_about .cont ul li a div{ position: relative; width: 65px; height: 65px; transition: .5s; margin-bottom: 14px; background: no-repeat center / contain; }
section.area_about .cont ul li a div::before{position: absolute;; display: block; content: '';width:65px; height:65px;background: no-repeat; transition: .5s; margin-bottom: 14px; opacity: 0;}
section.area_about .cont ul li.about01 div{background-image:url(/images/main/icon_about01.png);}
section.area_about .cont ul li.about02 div{background-image:url(/images/main/icon_about02.png);}
section.area_about .cont ul li.about03 div{background-image:url(/images/main/icon_about03.png);}
section.area_about .cont ul li.about04 div{background-image:url(/images/main/icon_about04.png);}
section.area_about .cont ul li.about05 div{background-image:url(/images/main/icon_about05.png);}
section.area_about .cont ul li.about06 div{background-image:url(/images/main/icon_about06.png);}
section.area_about .cont ul li.about01 a div:before{background-image:url(/images/main/icon_about01_gd.png);}
section.area_about .cont ul li.about02 a div:before{background-image:url(/images/main/icon_about02_gd.png);}
section.area_about .cont ul li.about03 a div:before{background-image:url(/images/main/icon_about03_gd.png);}
section.area_about .cont ul li.about04 a div:before{background-image:url(/images/main/icon_about04_gd.png);}
section.area_about .cont ul li.about05 a div:before{background-image:url(/images/main/icon_about05_gd.png);}
section.area_about .cont ul li.about06 a div:before{background-image:url(/images/main/icon_about06_gd.png);}

/*customer companies*/
.area_companies{background: #ebebeb}
.area_companies .cont{}
.area_companies .cont ul{overflow: hidden; text-align: center;display: flex;flex-wrap: wrap;}
.area_companies .cont ul li{float: left;width: 25%;margin-bottom: 60px;}
.area_companies .cont ul li:last-child{margin-bottom: 0;}
.area_companies .cont ul li a{display: block; height: 100%;}

@media all and (max-width:1280px){
  .inr {width: 96%;margin: 0 auto}

  .area_visual .inr ul {bottom: 5%;right: auto;left: 50%;transform: translateX(-50%);}
  .area_visual .inr ul li {background: #08495d}
  .area_visual .inr h2 {top: 30%;width: 73%;}
  .area_visual .swiper-button-next{ margin-left: 4px; }
  .area_visual .inr .btn_more{ margin-top: 28px; }
  .visual_arrow {position: relative;width: 100%;margin-top: 18px;}

  section.area_about .cont ul{ width: 600px; }
}

@media all and (max-width: 1024px){
  .area_companies .cont ul li{ width: 33%; }
}

@media all and (max-width: 900px) {
  .area_visual .inr h2{font-size:34px;}
  .area_visual .inr h2 p{ font-size: 28px;}

  .area_biz .cont ul{ flex-direction: column; }
}

@media all and (max-width:767px){
  section { padding: 65px 0 70px; }
  section .cont{ margin-top: 60px; }
  section h3{ font-size: 32px; }
  section.area_about .cont{ margin-top: 40px; }

	.area_visual .inr h2{font-size:28px;}
  .area_visual .inr h2 p{ font-size: 24px;}
	.area_visual .inr ul{width:90%;}
	.area_visual .inr ul li{width:50%; margin-right:50%;}
	.area_visual .inr ul li:last-child{margin-left:50%;}

  section.area_biz .inr{ width: 100%; }

  section.area_about .cont ul li a{ font-size: 16px; }

  .area_companies .cont ul li{ margin-bottom: 50px; }
  .area_companies .cont ul li a img{ width: 70%; }

  .area_biz .cont ul li h4{ font-size: 20px; }
  .area_biz .cont ul li h4 i{ font-size: 16px; }
}

@media all and (max-width:640px){
  section.area_about .cont ul{ width: 100%; }

  section.area_about .cont ul li:nth-child(n+3){margin-top: 25px;}
  section.area_about .cont ul li a{ width: 40vw; height: 40vw; }
}

@media all and (max-width:600px){
	.area_visual .inr ul li{width:100%; height:auto; margin-right:0;}
	.area_visual .inr ul li:last-child{margin-left:0;}
	.area_visual .inr ul li a h3{font-size:18px;}
	.area_visual .inr ul li a i{bottom:auto; top:25px;}
	.area_visual .inr ul li:first-child img{height:25px;}
}


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

  section .cont{ margin-top: 50px; }

  section h3{ font-size: 24px; }

	.area_visual .inr h2{font-size:22px; word-break:keep-all;}
	.area_visual .inr ul li a h3{font-size:16px;}

  .area_companies .cont ul li{ width: 50%; }
}

@media all and (max-width:420px){
	.area_visual .inr ul li a{padding:20px;}
	.area_visual .inr ul li a i{top:20px; right:20px;}
	.area_visual .inr ul li a i img{height:25px;}
}