@charset "UTF-8";
/*-------------------------------------------------------------------
    파일정의 : main.css / 국문 메인 페이지
    작성날짜 : 2021-04-05 황준기
-------------------------------------------------------------------*/
*[tabindex]:focus {
  outline: 2px #000 solid;
}

.main_wrap {
  position: relative;
  padding-bottom: 0 !important;
}

.main_section {
  position: relative;
  width: 100%;
  max-width: 1720px;
  margin: 0 auto;
}

.main_full {
  width: 100%;
}

.visual_wrap {
  position: relative;
  max-width: 1720px;
  margin: 0 auto;
}

.main_wrap .media_box {
  height: 440px;
  margin-top: 10px;
}

.main_wrap .media_box video,
.main_wrap .media_box img {
  position: absolute;
  left: 50%;
  min-width: 1720px;
  margin-left: -860px;
  height: 440px;
}

.main_wrap .mov_visual.fixed .media_box video,
.main_wrap .mov_visual.fixed .media_box img {
  position: absolute;
  left: 0;
  min-width: 1720px;
  margin-left: -860px;
  height: 440px;
}

.main_wrap .btn_detail {
  position: absolute;
  right: 40px;
  bottom: 40px;
  height: 56px;
  padding: 0 46px 0 24px;
  background: rgba(0, 0, 0, 0.7) url(../../images/ko/solution/bg_link_arrow.png) right 24px center no-repeat;
  -webkit-background-size: 9px 9px;
     -moz-background-size: 9px;
          background-size: 9px;
  line-height: 56px;
  font-size: 16px;
  color: #fff;
  z-index: 1;
}

.mov_visual.fixed {
  margin-bottom: 1000px;
}

.mov_visual.fixed .btn_detail {
  opacity: 0;
}

.mov_visual.fixed .slick-track {
  -webkit-transform: unset !important;
     -moz-transform: unset !important;
      -ms-transform: unset !important;
          transform: unset !important;
}

.main_wrap .mov_visual.fixed .case_card .desc {
  display: none;
}

.mov_visual.fixed .media_box {
  position: fixed;
  top: 0;
  left: 50%; /* right: 0; */
  min-width: 1720px;
  width: auto;
  height: 440px;
  margin-left: -860px;
  margin-top: 0;
  -webkit-transition: ease-out height 0.5s;
  -o-transition: ease-out height 0.5s;
  -moz-transition: ease-out height 0.5s;
  transition: ease-out height 0.5s;
}

.mov_visual.fixed .slick-active .media_box video,
.mov_visual.fixed .slick-active .media_box img {
  min-width: 100%;
  height: 100%;
  margin-left: 0;
}

.mov_visual.fixed .case_card.slick-active {
  position: absolute !important;
  z-index: 201 !important;
}

.main_wrap .case_card .desc {
  width: 1280px;
  min-height: 170px;
  margin: 0 auto;
  font-size: 50px;
  font-weight: 700;
  line-height: 56px;
}

.main_slide .slick-button-box {
  position: absolute;
  top: 100px;
  right: 0;
  width: 1280px;
  margin: 0 auto;
  text-align: right;
  z-index: 101;
}

.main_slide .slick-num {
  position: absolute;
  top: 94px;
  left: 0;
  right: 0;
  width: 1280px;
  margin: 0 auto;
  font-size: 0px;
  text-align: right;
}

.main_slide .slick-num .slick-active:after {
  content: "";
  display: inline-block;
  width: 22px;
  border-bottom: 1px solid #000;
  -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
  margin: 0 -17px 15px 0;
}

.main_slide .slick-num li {
  position: absolute;
  top: -10px;
  right: 100px;
}

.main_slide .slick-num .slick-active {
  font-size: 16px;
}

.main_slide .num_total {
  position: absolute;
  right: 65px;
  top: 10px;
  font-size: 16px;
  opacity: 0.5;
}

.main_wrap .thumb_list {
  position: absolute;
  top: 240px;
  left: 0;
  right: 0;
  width: 1280px;
  margin: 0 auto;
  z-index: 101;
}

.main_wrap .thumb_list .main_thumb {
  position: absolute;
  right: 0;
  bottom: 35px;
  z-index: 101;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
     -moz-box-pack: end;
          justify-content: flex-end;
  -ms-flex-pack: end;
}

.main_wrap .thumb_list li.slick-slide {
  width: 79px !important;
  margin-left: 25px;
  background: #fff;
  cursor: pointer;
}

.main_wrap .thumb_list .main_thumb .slick-track li button:focus {
  border: 3px solid #000;
}

.main_wrap .thumb_list li.slick-slide img {
  width: 79px;
  height: 40px;
  mix-blend-mode: luminosity;
}

.main_wrap .thumb_list li.slick-slide.slick-current img {
  mix-blend-mode: normal;
}

.main_wrap .thumb_list ul li.slick-current:before {
  content: "";
  display: block;
  position: absolute;
  width: 79px;
  height: 40px;
  border: 3px solid #0072ce;
  z-index: 9;
}

.main_wrap .thumb_list .slick-track {
  width: auto !important;
  min-width: 100%;
}

.slick_wrap.main_slide {
  padding-top: 36px;
}

/*.main_slick_slide {
    height: 440px;
}*/
.main_wrap .case_card {
  opacity: 0;
}

.main_wrap .case_card:first-child,
.main_wrap .case_card.slick-active {
  opacity: 1;
}

.main_slide .slick-prev,
.main_slide .slick-next {
  position: relative;
  width: 20px;
  height: 20px;
  -webkit-box-shadow: none;
     -moz-box-shadow: none;
          box-shadow: none;
  border: 0;
  background-color: transparent;
}

.main_slide .slick-next {
  margin-left: 135px;
}

.main_slide .slick-prev i,
.main_slide .slick-next i {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}

.main_slide .slick-next i:after {
  left: 0;
  top: 4px;
}

.main_slide .slick-prev i:after {
  right: 0;
  top: 4px;
}

.main_slide .slick-prev.opacity,
.main_slide .slick-next.opacity {
  background: rgba(0, 0, 0, 0.5);
  border: 0;
}

.main_slide .slick-next.opacity i:after,
.main_slide .slick-prev.opacity i:after {
  border-color: #fff;
}

.main_slide .txt_box {
  position: absolute;
  top: 140px;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0 auto;
  color: #fff;
}

.main_slide .txt_box .tit {
  margin-bottom: 30px;
  font-size: 60px;
  font-weight: 700;
}

.main_slide .txt_box img {
  width: 100%;
}

.btn_control {
  position: absolute;
  right: 196px;
  top: 6px;
  width: 38px;
  height: 38px;
  text-indent: -999px;
  font-size: 0;
  cursor: pointer;
}

.btn_control:after {
  content: "";
  display: block;
  width: 38px;
  height: 38px;
  background: url(../../images/ko/common/btn_slick_stop.png) 0 0 no-repeat;
}

.btn_control.paused:after {
  background: url(../../images/ko/common/btn_slick_play.png) 0 0 no-repeat;
}

.btn_control .txt_play {
  display: none;
}

.btn_control.paused .txt_paused {
  display: none;
}

.custom_wrap {
  position: relative;
  margin-top: 0;
}

.custom_wrap:after {
  content: "";
  position: absolute;
  left: 0;
  top: -75px;
  display: inline-block;
  width: 220px;
  height: 150px;
  background: #0072ce;
}

.custom_wrap .cs_dep {
  position: absolute;
  top: -75px;
  left: 0;
  width: -webkit-calc(50% - 10px);
  width: -moz-calc(50% - 10px);
  width: calc(50% - 10px);
  height: 150px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
     -moz-box-pack: end;
          justify-content: flex-end;
  -ms-flex-pack: end;
  padding: 30px 0;
  background: #0072ce url("../../images/ko/main/ico_bn.png") right 40px bottom 42px no-repeat;
  -webkit-background-size: auto auto;
     -moz-background-size: auto;
          background-size: auto;
  z-index: 199;
}

.mov_visual.fixed .custom_wrap .cs_dep {
  z-index: 9;
}

.custom_wrap .cs_dep li {
  position: relative;
  color: #fff;
  line-height: 1em;
}

.custom_wrap .cs_dep li > a {
  display: block;
}

.custom_wrap .cs_dep .l_con {
  min-width: 260px;
  padding: 8px 0 0 0;
  cursor: pointer;
}

.custom_wrap .cs_dep .l_con:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  display: inline-block;
  width: 1px;
  height: 100%;
  background: #fff;
  opacity: 0.3;
}

.custom_wrap .cs_dep .l_con div {
  font-size: 16px;
}

.custom_wrap .cs_dep .l_con p {
  margin-top: 20px;
  font-size: 38px;
  font-weight: 700;
  line-height: 1em;
}

.custom_wrap .cs_dep .r_con {
  width: 370px;
  padding: 8px 0 0 50px;
  cursor: pointer;
}

.custom_wrap .cs_dep .r_con div {
  padding-left: 4px;
  font-size: 16px;
}

.custom_wrap .cs_dep .r_con p {
  margin-top: 20px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.33;
}

.custom_wrap .file {
  position: absolute;
  top: 20px;
  left: 42%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  width: 39.32%;
  padding-left: 0;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
     -moz-box-pack: start;
          justify-content: flex-start;
  -ms-flex-pack: start;
  margin-left: 177px;
}

.custom_wrap .file li {
  margin-right: 0;
  font-size: 16px;
  line-height: 30px;
  font-weight: 700;
  text-align: center;
  width: 100%;
  margin: 0 auto;
}

.custom_wrap .file li a p {
  line-height: 26px;
}

.custom_wrap .file li:last-child {
  margin-right: 0;
}

.custom_wrap .msg_scroll {
  padding-top: 80px;
  font-size: 11px;
  line-height: 30px;
  text-align: center;
}

.custom_wrap .msg_scroll i {
  display: inline-block;
  width: 27px;
  height: 27px;
  margin: 0 3px;
  background: url("../../images/ko/main/ico_scroll_down.png") 0 0 no-repeat;
  -webkit-animation: 1.5s pop infinite;
     -moz-animation: 1.5s pop infinite;
          animation: 1.5s pop infinite;
  vertical-align: middle;
}

@-webkit-keyframes pop {
  0% {
    -webkit-transform: translateY(5px);
            transform: translateY(5px);
  }
  50% {
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
  }
  100% {
    -webkit-transform: translateY(5px);
            transform: translateY(5px);
  }
}

@-moz-keyframes pop {
  0% {
    -moz-transform: translateY(5px);
         transform: translateY(5px);
  }
  50% {
    -moz-transform: translateY(-5px);
         transform: translateY(-5px);
  }
  100% {
    -moz-transform: translateY(5px);
         transform: translateY(5px);
  }
}

@keyframes pop {
  0% {
    -webkit-transform: translateY(5px);
       -moz-transform: translateY(5px);
            transform: translateY(5px);
  }
  50% {
    -webkit-transform: translateY(-5px);
       -moz-transform: translateY(-5px);
            transform: translateY(-5px);
  }
  100% {
    -webkit-transform: translateY(5px);
       -moz-transform: translateY(5px);
            transform: translateY(5px);
  }
}
/* .members {margin-top: 400px;} */
.members dl {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
     -moz-box-pack: justify;
          justify-content: space-between;
  -ms-flex-pack: justify;
  width: 1280px;
  margin: 90px auto 0;
}

.members dt > strong {
  display: block;
  font-size: 50px;
  line-height: 56px;
  font-weight: 700;
}

.members dt > span {
  display: block;
  width: 540px;
  margin-top: 38px;
  font-size: 14px;
  color: #333;
  text-indent: -15px;
  padding-left: 15px;
}

.members dd {
  margin-right: 45px;
}

.members dd > p {
  font-size: 18px;
  font-weight: 700;
}

.members ul {
  margin-top: 34px;
}

.members li {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  place-items: center;
  margin-bottom: 25px;
  line-height: 1em;
}

.members li p {
  font-size: 15px;
  opacity: 0.5;
  vertical-align: middle;
}

.members li p strong {
  padding-left: 13px;
  font-size: 16px;
  font-weight: 700;
}

.members li.chart01 p {
  font-size: 18px;
  opacity: 1;
}

.members li.chart01 p strong {
  padding-left: 13px;
  font-size: 30px;
}

.members li .bar {
  display: inline-block;
  height: 15px;
  margin-right: 22px;
  background: #b7b7b7;
}

.members li.chart01 .bar {
  height: 29px;
  background: #0072ce;
  -webkit-box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.33);
     -moz-box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.33);
          box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.33);
}

.members dd > span {
  display: block;
  font-size: 14px;
  color: #333;
}

.quick_svc {
  margin-top: 80px;
  background: #ef3737;
  -webkit-box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.3);
     -moz-box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.3);
          box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.3);
  color: #fff;
}

.quick_svc dl {
  width: 1280px;
  height: 180px;
  margin: 0 auto;
  padding-top: 58px;
  background: url("../../images/ko/main/img_my_service.png") right 60px top 0 no-repeat;
  cursor: pointer;
}

.quick_svc dt {
  margin-bottom: 10px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1em;
}

.quick_svc dd {
  font-size: 16px;
}

.quick_svc dd a {
  font-weight: 700;
  text-decoration: underline;
}

.hr_service {
  position: relative;
  margin-top: 130px;
}

.hr_service .stt {
  position: absolute;
  left: 0;
  top: 157px;
  font-size: 52px;
  color: #fff;
  font-weight: 700;
  line-height: 58px;
  z-index: 9;
  white-space: nowrap;
}

.hr_service .img_vis {
  position: relative;
  min-height: 480px;
  overflow: hidden;
}

.hr_service .img_vis img {
  position: absolute;
  left: 50%;
  min-width: 1720px;
  margin-left: -860px;
}

.hr_service .box_tab_menu {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 1280px;
  min-height: 480px;
  margin: 0 auto;
  z-index: 99;
}

.hr_service .box_tab_menu .tab_menu {
  position: absolute;
  left: 0;
  bottom: 45px;
  -webkit-box-align: unset;
     -moz-box-align: unset;
          align-items: unset;
  -webkit-align-items: unset;
  -ms-flex-align: unset;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
     -moz-box-pack: end;
          justify-content: flex-end;
  -ms-flex-pack: end;
}

.hr_service .box_tab_menu.service .tab {
  position: relative;
}

.hr_service .box_tab_menu.service .tab + .tab {
  margin-left: 64px;
}

.hr_service .box_tab_menu.service .tab.on:after {
  content: "";
  display: block;
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 125px;
  height: 3px;
  background: #ff312c;
}

.hr_service .box_tab_menu.service .tab button {
  position: relative;
  padding: 0 6px 5px 40px;
  font-weight: 700;
  font-size: 20px;
  color: #fff;
  opacity: 0.6;
}

.hr_service .box_tab_menu.service .tab button:before {
  content: "";
  position: absolute;
  left: -11px;
  top: -7px;
  display: block;
  width: 56px;
  height: 50px;
  background: red;
}

.hr_service .box_tab_menu.service .tab.on button {
  opacity: 1;
}

.hr_service .box_tab_menu.service .tab .tab01:before {
  background: url("../../images/ko/main/ico_tab_svc01.png") 0 0 no-repeat;
}

.hr_service .box_tab_menu.service .tab .tab02:before {
  background: url("../../images/ko/main/ico_tab_svc02.png") 0 0 no-repeat;
}

.hr_service .box_tab_menu.service .tab .tab03:before {
  background: url("../../images/ko/main/ico_tab_svc03.png") 0 0 no-repeat;
}

.hr_service .box_tab_menu.service .tab.on .tab01:before {
  background: url("../../images/ko/main/ico_tab_svc01_ov.png") 0 0 no-repeat;
}

.hr_service .box_tab_menu.service .tab.on .tab02:before {
  background: url("../../images/ko/main/ico_tab_svc02_ov.png") 0 0 no-repeat;
}

.hr_service .box_tab_menu.service .tab.on .tab03:before {
  background: url("../../images/ko/main/ico_tab_svc03_ov.png") 0 0 no-repeat;
}

.hr_service .tab_container {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding-top: 80px;
}

.hr_service .tab_container .btn_more {
  position: absolute;
  top: -78px;
  right: 20px;
  z-index: 100;
  font-size: 16px;
  color: #fff;
  font-weight: 700;
  padding-right: 32px;
}

.hr_service .tab_container .btn_more:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 25px;
  height: 25px;
  background: url("../../images/ko/main/ico_bn.png") 0 100% no-repeat;
}

.hr_service .tab_container ul {
  display: -webkit-box;
  display: -moz-box;
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-box-align: center;
     -moz-box-align: center;
          align-items: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
          justify-content: center;
  -ms-flex-pack: center;
}

.hr_service .tab_container li {
  margin: 0 15px;
}

.hr_service .tab_container li dd .tit {
  margin-top: 20px;
  font-size: 24px;
  line-height: 1em;
  font-weight: 700;
}

.hr_service .tab_container li .desc {
  margin: 15px 0 20px;
  font-size: 16px;
  line-height: 1em;
  color: #696969;
}

.hr_service .tab_container li dd > a {
  display: inline-block;
  font-size: 12px;
  color: #696969;
}

.hr_service .tab_container li dd > a:after {
  content: "";
  display: block;
  border-bottom: 1px solid #000;
  opacity: 0.4;
}

.comp_banner {
  display: -webkit-box;
  display: -moz-box;
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-justify-content: center;
     -moz-box-pack: center;
          justify-content: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  margin-top: 200px;
}

.comp_banner li {
  position: relative;
  width: 625px;
  margin: 0 15px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  background: #cbcbcb;
}

.comp_banner li a {
  display: block;
  width: 625px;
  height: 300px;
  padding: 45px 0 0 74px;
}

.comp_banner li.cont01 {
  background: #cbcbcb url("../../images/ko/main/img_main_banner01.png") 100% 0 no-repeat;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

.comp_banner li.cont02 {
  background: #cbcbcb url("../../images/ko/main/img_main_banner02.png") 0 0 no-repeat;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

.comp_banner li.cont02 a {
  padding: 45px 0 0 330px;
}

.comp_banner li.cont01:hover {
  background: #2278e7 url("../../images/ko/main/img_main_banner01_ov.png") 100% 0 no-repeat;
  -webkit-transform: translateY(-10px);
     -moz-transform: translateY(-10px);
      -ms-transform: translateY(-10px);
          transform: translateY(-10px);
  -webkit-transition-timing-function: ease-in-out;
     -moz-transition-timing-function: ease-in-out;
       -o-transition-timing-function: ease-in-out;
          transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
     -moz-transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
       -o-transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
          transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-box-shadow: 0 15px 10px 0 rgba(0, 0, 0, 0.19);
     -moz-box-shadow: 0 15px 10px 0 rgba(0, 0, 0, 0.19);
          box-shadow: 0 15px 10px 0 rgba(0, 0, 0, 0.19);
}

.comp_banner li.cont02:hover {
  background: #2278e7 url("../../images/ko/main/img_main_banner02_ov.png") 0 0 no-repeat;
  -webkit-transform: translateY(-10px);
     -moz-transform: translateY(-10px);
      -ms-transform: translateY(-10px);
          transform: translateY(-10px);
  -webkit-transition-timing-function: ease-in-out;
     -moz-transition-timing-function: ease-in-out;
       -o-transition-timing-function: ease-in-out;
          transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
     -moz-transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
       -o-transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
          transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-box-shadow: 0 15px 10px 0 rgba(0, 0, 0, 0.19);
     -moz-box-shadow: 0 15px 10px 0 rgba(0, 0, 0, 0.19);
          box-shadow: 0 15px 10px 0 rgba(0, 0, 0, 0.19);
}

.comp_banner li p {
  margin-bottom: 30px;
  font-size: 36px;
  line-height: 42px;
  font-weight: 700;
  color: #000;
}

.comp_banner li span {
  padding-bottom: 77px;
  font-size: 16px;
  line-height: 24px;
  color: #000;
  background: url("../../images/ko/main/ico_bn.png") 0 100% no-repeat;
  -webkit-transition: ease-out 0.1s;
  -o-transition: ease-out 0.1s;
  -moz-transition: ease-out 0.1s;
  transition: ease-out 0.1s;
}

.comp_banner li:hover span {
  background: url("../../images/ko/main/ico_bn_on.png") 0 100% no-repeat;
  -webkit-transition: ease-in 0.1s;
  -o-transition: ease-in 0.1s;
  -moz-transition: ease-in 0.1s;
  transition: ease-in 0.1s;
}

.portfolio {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: flex-end;
     -moz-box-pack: end;
          justify-content: flex-end;
  -webkit-box-pack: justify;
  -ms-flex-pack: end;
  max-width: auto;
  margin-top: 150px;
  padding-left: 100px;
  /* 컨텐츠 3개 margin / 4개는 주석 */
  margin-bottom: 300px;
}

.portfolio dl {
  width: 340px;
  margin-top: 30px;
}

.portfolio dt {
  font-size: 50px;
  font-weight: 700;
  line-height: 56px;
}

.portfolio dd p {
  margin: 40px 0;
  font-size: 18px;
  line-height: 26px;
  color: #333;
}

.portfolio .link {
  display: inline-block;
  font-size: 14px;
  color: #696969;
}

.portfolio .link:after {
  content: "";
  display: block;
  border-bottom: 1px solid #000;
  opacity: 0.4;
}

.port_view {
  position: relative;
  width: 1160px;
}

.port_view .list {
  position: relative;
}

.port_view li {
  padding-left: 95px;
}

.port_view li img {
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
}

.port_view figcaption {
  position: relative;
  margin: 10px 0 10px 0;
  padding: 30px 0 40px 60px;
  width: 500px;
  z-index: 2;
  /* background-color: #fff; */
  cursor: pointer;
}

.port_view figcaption:first-child {
  margin-top: 0;
}

.port_view figcaption i {
  visibility: hidden;
  position: absolute;
  right: 62px;
  top: 50%;
  width: 43px;
  height: 1px;
  background-color: #000;
}

.port_view figcaption i:before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%) rotate(-45deg);
     -moz-transform: translateY(-50%) rotate(-45deg);
      -ms-transform: translateY(-50%) rotate(-45deg);
          transform: translateY(-50%) rotate(-45deg);
}

.port_view figcaption i:after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border: 1px solid #000;
  right: 0;
  top: 50%;
  -webkit-transform: translate(35%, -50%) rotate(-45deg);
     -moz-transform: translate(35%, -50%) rotate(-45deg);
      -ms-transform: translate(35%, -50%) rotate(-45deg);
          transform: translate(35%, -50%) rotate(-45deg);
}

.port_view figcaption > * {
  display: block;
  color: #959595;
}

.port_view figcaption span {
  font-size: 14px;
  font-weight: 700;
}

.port_view figcaption strong {
  font-size: 24px;
  margin: 10px 0 20px;
  font-weight: 700;
}

.port_view figcaption em {
  font-size: 14px;
}

.port_view li.active {
  z-index: 3;
}

.port_view li.active img {
  opacity: 2;
  -webkit-transform: translateY(-10px);
     -moz-transform: translateY(-10px);
      -ms-transform: translateY(-10px);
          transform: translateY(-10px);
  -webkit-transition-timing-function: ease-in-out;
     -moz-transition-timing-function: ease-in-out;
       -o-transition-timing-function: ease-in-out;
          transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
     -moz-transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
       -o-transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
          transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

.port_view li.active figcaption {
  border: 1px solid #000;
  width: 610px;
  background: #fff;
  -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
     -moz-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
          box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
  z-index: 3;
}

.port_view li.active figcaption i {
  visibility: visible;
}

.port_view li.active figcaption > * {
  color: #000;
}

.port_view .util_area {
  position: absolute;
  left: 0;
  bottom: 0px;
  height: 125px;
}

.port_view .navigator button {
  position: absolute;
  width: 100%;
  height: 30px;
  border: 0;
  font-size: 0;
  background: none;
  cursor: pointer;
}

.port_view .navigator button:before {
  content: "";
  position: absolute;
  left: 22px;
  width: 12px;
  height: 12px;
  border-top: 2px solid #000;
  border-left: 2px solid #000;
}

.port_view .navigator .prev {
  top: 0;
}

.port_view .navigator .prev:before {
  top: 2px;
  -moz-transform: rotate(45deg);
       transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
}

.port_view .navigator .next {
  bottom: 0;
}

.port_view .navigator .next:before {
  bottom: 2px;
  -moz-transform: rotate(-135deg);
       transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
}

.port_view .count {
  padding: 50px 0;
  font-size: 0;
}

.port_view .count span {
  display: inline-block;
  position: relative;
  font-weight: 700;
  font-size: 16px;
}

.port_view .count span.current {
  top: -13px;
}

.port_view .count span.current:after {
  content: "";
  display: inline-block;
  position: relative;
  vertical-align: middle;
  width: 30px;
  height: 1px;
  background-color: #000;
  -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
  top: 11px;
  margin: 0 -10px;
}

.port_view .count span.total {
  color: #666;
  top: 10px;
}

.benefit_card {
  width: 100%;
  height: 380px;
  margin: 150px 0;
}

.benefit_card .slick_wrap {
  margin: 0 auto;
}

.benefit_card .case_card {
  position: relative;
  min-height: 380px;
}

.benefit_card .case_card > a {
  display: block;
  width: 1280px;
  margin: 0 auto;
}

.benefit_card .case_card .txt_box {
  position: relative;
  width: 1280px;
  margin: 0 auto;
  padding: 90px 128px 0 78px;
  z-index: 1;
}

.benefit_card .case_card .txt_box .tit {
  margin-bottom: 85px;
  font-size: 46px;
  line-height: 1.3;
}

.benefit_card .case_card .txt_box .tit strong {
  font-weight: 700;
}

.benefit_card .case_card .txt_box span {
  font-size: 18px;
}

.benefit_card .case_card .img_box img {
  position: absolute;
  top: 0;
  left: 50%;
  min-width: 1720px;
  margin-left: -860px;
  height: 380px;
}

.benefit_card .slick_wrap {
  padding-top: 0;
}

/* slide button */
.benefit_card .slick-button-box {
  position: absolute;
  width: 1240px;
  height: 200px;
  top: 90px;
  margin: 0 auto;
}

.benefit_card .slick-slide {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
}

.benefit_card .slick_wrap .slick-prev,
.benefit_card .slick_wrap .slick-next {
  left: -webkit-calc(100% - 40px);
  left: -moz-calc(100% - 40px);
  left: calc(100% - 40px);
  width: 40px;
  height: 40px;
  -webkit-box-shadow: none;
     -moz-box-shadow: none;
          box-shadow: none;
  border: 0;
  background-color: transparent;
  z-index: 100;
}

.benefit_card .slick-button-box button.slick-prev {
  top: 0;
  -moz-transform: rotate(90deg);
   -ms-transform: rotate(90deg);
       transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}

.benefit_card .slick-button-box button.slick-next {
  top: -webkit-calc(100% - 40px);
  top: -moz-calc(100% - 40px);
  top: calc(100% - 40px);
  -moz-transform: rotate(90deg);
   -ms-transform: rotate(90deg);
       transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}

.benefit_card .slick-prev i,
.benefit_card .slick-next i {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}

.benefit_card .slick-next i:after {
  left: 10px;
  top: 12px;
}

.benefit_card .slick-prev i:after {
  right: 10px;
  top: 12px;
}

.benefit_card .slick-prev.opacity,
.benefit_card .slick-next.opacity {
  background: rgba(0, 0, 0, 0.5);
  border: 0;
}

.benefit_card .slick-next.opacity i:after,
.benefit_card .slick-prev.opacity i:after {
  border-color: #fff;
}

.benefit_card .num_total {
  position: absolute;
  right: -7px;
  top: 100px;
  font-size: 16px;
  opacity: 0.5;
  z-index: 100;
}

.benefit_card .slick-num {
  position: absolute;
  top: 160px;
  left: 0;
  right: 0;
  width: 1280px;
  margin: 0 auto;
  padding-right: 45px;
  font-size: 0px;
  z-index: 100;
  text-align: right;
}

.benefit_card .slick-num:after {
  content: "";
  display: inline-block;
  width: 22px;
  border-bottom: 1px solid #000;
  -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
  margin-right: -18px;
}

.benefit_card .slick-num .slick-active {
  font-size: 16px;
}

.media_con {
  position: relative;
  margin-bottom: 150px;
}

.media_con .inner {
  width: 1280px;
  margin: 150px auto 0;
}

.media_con .inner:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100px;
  display: block;
  width: 100%;
  height: 997px;
  background: #f1f1f1;
  z-index: -1;
}

.media_con .btt {
  position: relative;
  margin-bottom: 40px;
  text-align: center;
}

.media_con .btt strong {
  font-weight: 700;
  font-size: 52px;
}

.media_con .go_link {
  position: absolute;
  bottom: 18px;
  right: 0;
  font-size: 14px;
  color: #696969;
}

.media_con .go_link:after {
  content: "";
  display: block;
  border-bottom: 1px solid #000;
  opacity: 0.4;
}

.media_con .now {
  display: -webkit-box;
  display: -moz-box;
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
     -moz-box-pack: justify;
          justify-content: space-between;
  -ms-flex-pack: justify;
}

.media_con .now li {
  position: relative;
  height: 406px;
  color: #fff;
  cursor: pointer;
}

.media_con .now li:hover:after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 149px;
  display: block;
  background-color: #0072ce;
  -webkit-animation: 0.3s bg;
     -moz-animation: 0.3s bg;
          animation: 0.3s bg;
}

@-webkit-keyframes bg {
  0% {
    height: 0;
    opacity: 0;
  }
  100% {
    height: 149px;
    opacity: 1;
  }
}

@-moz-keyframes bg {
  0% {
    height: 0;
    opacity: 0;
  }
  100% {
    height: 149px;
    opacity: 1;
  }
}

@keyframes bg {
  0% {
    height: 0;
    opacity: 0;
  }
  100% {
    height: 149px;
    opacity: 1;
  }
}
.media_con .now li a {
  position: relative;
  display: block;
  width: 406px;
  height: 406px;
  overflow: hidden;
  -webkit-box-shadow: 0 2px 35px 0 rgba(0, 0, 0, 0.08);
     -moz-box-shadow: 0 2px 35px 0 rgba(0, 0, 0, 0.08);
          box-shadow: 0 2px 35px 0 rgba(0, 0, 0, 0.08);
}

.media_con .now li a div:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
}

.media_con .now li a div img {
  width: 100%;
  height: 100%;
}

.media_con .now li a p {
  position: absolute;
  top: 234px;
  padding: 0 30px 0 26px;
  font-size: 24px;
  font-weight: 700;
  z-index: 5;
}

.media_con .now li a span {
  position: absolute;
  padding-left: 26px;
  bottom: 40px;
  font-size: 16px;
  font-weight: 700;
  z-index: 5;
}

.media_con .mov_tag {
  position: absolute;
  left: 58px;
  bottom: 10px;
  font-size: 20px;
  -webkit-transform: rotate(-90deg);
     -moz-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
          transform: rotate(-90deg);
  -webkit-transform-origin: left bottom;
     -moz-transform-origin: left bottom;
      -ms-transform-origin: left bottom;
          transform-origin: left bottom;
  text-align: left;
  white-space: nowrap;
}

.media_con .mov_tag span {
  display: inline-block;
  margin-right: 15px;
  font-weight: 700;
}

.media_con .tab_container {
  position: relative;
  text-align: center;
}

.media_con .tab_menu {
  display: -webkit-box;
  display: -moz-box;
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
     -moz-box-pack: justify;
          justify-content: space-between;
  -ms-flex-pack: justify;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
     -moz-box-align: start;
          align-items: flex-start;
  -ms-flex-align: start;
  margin-top: 70px;
}

.media_con .tab_menu button {
  text-align: left;
}

.media_con .tab_menu button img {
  width: 297px;
  height: 175px;
}

.box_tab_menu.text .tab + .tab:before {
  content: "";
  display: none;
}

.media_con .tab_menu li {
  width: 297px;
}

.media_con .tab_menu dl {
  position: relative;
  padding: 16px 0 0 10px;
}

.media_con .tab_menu dt {
  padding-right: 55px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  white-space: normal;
}

.media_con .tab_menu dd {
  margin-top: 6px;
  font-size: 14px;
  color: #333;
}

.media_con .sns_link:before {
  content: "";
  position: absolute;
  right: 0;
  top: 19px;
  margin-right: 15px;
  vertical-align: middle;
}

.media_con .sns_link.youtube:before {
  width: 30px;
  height: 21px;
  background: url("../../images/ko/main/ico_youtube.png") 0 0 no-repeat;
}

.media_con .sns_link.facebook:before {
  width: 20px;
  height: 20px;
  background: url("../../images/ko/main/ico_facebook.png") 0 0 no-repeat;
}

.media_con .sns_link.blog:before {
  width: 18px;
  height: 18px;
  background: url("../../images/ko/main/ico_blog.png") 0 0 no-repeat;
}

.qr_cs {
  width: 1280px;
  height: 573px;
  margin: 0 auto;
  padding-top: 50px;
  background: url("../../images/ko/main/img_bg_app.png") 669px 100% no-repeat;
}

.qr_cs dt {
  font-size: 24px;
}

.qr_cs dd {
  margin-top: 19px;
  font-size: 42px;
  font-weight: 700;
  line-height: 50px;
}

.qr_cs .qrcode {
  display: -webkit-box;
  display: -moz-box;
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
  margin-top: 84px;
}

.qr_cs .qrcode p {
  width: 250px;
  height: 80px;
  margin-right: 18px;
  padding: 10px 13px 12px 19px;
  -moz-border-radius: 4px;
       border-radius: 4px;
  border: solid 1px #d0d0d0;
  text-align: right;
}

.qr_cs .qrcode p.google {
  background: url("../../images/ko/main/ico_google.png") 19px 50% no-repeat;
}

.qr_cs .qrcode p.appstore {
  background: url("../../images/ko/main/ico_appstore.png") 19px 50% no-repeat;
}

.modal_inner.main_pop {
  width: 480px;
  padding-bottom: 0;
}

.modal_inner.main_pop .modal_cont .scroll_area {
  /* max-height: 310px; */
}

.modal_inner.main_pop .modal_cont {
  padding: 0;
}

.modal_inner.main_pop .edit_wrap img {
  margin-bottom: 15px;
}

.modal_cont .noti_tit {
  display: -webkit-box;
  margin-bottom: 20px;
  font-size: 24px;
  line-height: 1.33;
  color: #000;
  font-weight: 700;
  -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
  white-space: normal;
  word-wrap: break-word;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.modal_cont .edit_wrap {
  font-size: 16px;
  color: #666;
}

.modal_inner .btm_wrap {
  margin-top: 30px;
  height: 60px;
  border-top: 1px solid #ddd;
  text-align: right;
  font-size: 16px;
  line-height: 60px;
}

.modal_inner .btm_wrap .close_today {
  position: absolute;
  left: 30px;
  color: #666;
  vertical-align: middle;
}

.modal_inner .btm_wrap .btn_pop_close {
  margin: 0 40px 0 30px;
  color: #666;
  line-height: 1;
}

#layerNotice .main_pop .edit_wrap img {
  margin: 0;
}

#layerNotice .main_pop .btn_area {
  margin: 10px auto;
  width: 417px;
}

#layerNotice .main_pop .btm_wrap {
  margin: 0;
}

/* 전체화면 버튼 */
video::-webkit-media-controls-fullscreen-button {
  display: none !important;
}

video::-moz-media-controls-fullscreen-button {
  display: none !important;
}

video::-ms-media-controls-fullscreen-button {
  display: none !important;
}

video::-o-media-controls-fullscreen-button {
  display: none !important;
}

/* 일시정지, 재생 버튼 */
video::-webkit-media-controls-play-button {
  display: none !important;
}

video::-moz-media-controls-play-button {
  display: none !important;
}

video::-ms-media-controls-play-button {
  display: none !important;
}

video::-o-media-controls-play-button {
  display: none !important;
}

/* 재생 슬라이드..? */
video::-webkit-media-controls-timeline {
  display: none !important;
}

video::-moz-media-controls-timeline {
  display: none !important;
}

video::-ms-media-controls-timeline {
  display: none !important;
}

video::-o-media-controls-timeline {
  display: none !important;
}

/* 현재 진행 시간 */
video::-webkit-media-controls-current-time-display {
  display: none !important;
}

video::-moz-media-controls-current-time-display {
  display: none !important;
}

video::-ms-media-controls-current-time-display {
  display: none !important;
}

video::-o-media-controls-current-time-display {
  display: none !important;
}

/* 전체 시간 */
video::-webkit-media-controls-time-remaining-display {
  display: none !important;
}

video::-moz-media-controls-time-remaining-display {
  display: none !important;
}

video::-ms-media-controls-time-remaining-display {
  display: none !important;
}

video::-o-media-controls-time-remaining-display {
  display: none !important;
}

/* 음소거 버튼 */
video::-webkit-media-controls-mute-button {
  display: none !important;
}

video::-moz-media-controls-mute-button {
  display: none !important;
}

video::-ms-media-controls-mute-button {
  display: none !important;
}

video::-o-media-controls-mute-button {
  display: none !important;
}

/* 볼륨 조절 슬라이드 */
video::-webkit-media-controls-volume-slider {
  display: none !important;
}

video::-moz-media-controls-volume-slider {
  display: none !important;
}

video::-ms-media-controls-volume-slider {
  display: none !important;
}

video::-o-media-controls-volume-slider {
  display: none !important;
}

video::-webkit-media-controls-toggle-closed-captions-button {
  display: none !important;
}

video::-moz-media-controls-toggle-closed-captions-button {
  display: none !important;
}

video::-ms-media-controls-toggle-closed-captions-button {
  display: none !important;
}

video::-o-media-controls-toggle-closed-captions-button {
  display: none !important;
}

/* video::-webkit-internal-media-controls-download-button {display: none !important;}
video::-webkit-media-controls-enclosure {overflow: hidden;}
video::-webkit-media-controls-panel {width: calc(100% + <%=nMoveDownloadButton%>px);}    */
@media (max-width: 1450px) {
  .portfolio {
    padding-left: 60px;
  }
  .port_view {
    width: 1060px;
  }
}
@media (max-width: 1340px) {
  .visual_wrap,
.hr_service .img_vis,
.media_con {
    margin: 0 20px;
  }
  .media_con {
    margin-bottom: 150px;
  }
  .mov_visual.fixed .media_box video,
.mov_visual.fixed .media_box img {
    height: 340px;
  }
  .quick_svc {
    margin: 80px 20px 0;
  }
  .portfolio {
    width: 1280px;
    margin: 150px auto 0;
    padding-left: 0;
  }
  .port_view {
    width: 990px;
  }
  .benefit_card {
    width: 1280px;
    margin: 150px auto;
  }
}
/* s: 20220302 팝업 추가 */
.Pstyle {
  opacity: 1;
  position: fixed;
  width: auto;
  z-index: 200;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 25%;
}

.Pstyle img {
  width: 100%;
}

.Pbtn {
  position: absolute;
  left: 50%;
  bottom: 4.5vw;
  display: inline-block;
  cursor: pointer;
  -webkit-transform: translateX(-50%);
     -moz-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 19.5vw;
}

.Pclose {
  position: absolute;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  left: 50%;
  bottom: 2vw;
  cursor: pointer;
  -webkit-transform: translateX(-50%);
     -moz-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 10vw;
}

.Pclose a {
  display: inline-block;
}

/* e: 20220302 팝업 추가 */
/* s: 20231011 new 팝업 추가 */
#layerPopup1 {
  display: none;
}

#layerPopup1.on {
  display: block;
}

.new_popup .modal_inner.main_pop {
  width: auto;
}

.new_popup .modal_inner.main_pop .modal_cont {
  padding: 20px 20px 0 20px;
}

.new_popup .modal_inner.main_pop .modal_cont img {
  width: 100%;
}

.new_popup .modal_inner .modal_cont + .btn_area {
  margin-top: 20px;
}

.new_popup .modal_cont + .btn_area button {
  margin: 0 auto;
  width: 50%;
}

.new_popup .btm_wrap .close_today {
  left: 20px;
}

.new_popup .close_today label {
  cursor: pointer;
}

.new_popup .close_today span {
  display: inline-block;
  margin-left: 10px;
}

/* e: 20231011 new 팝업 추가 */
/*# sourceMappingURL=../maps/ko/main.css.map */