/*---------------------------------

  00.공통
    00-01. subVisual
    00-02. subNav
    00-03. subWrap
    00-04. formStyle
    00-05. table

  01.통합검색
    01-01.통합검색-Product
    01-02.통합검색-Recruit
    01-03.통합검색-News
    01-04.통합검색-Contact
    01-05.통합검색-검색결과 없음

  02.기업소개
    02-01.Hyundai Gloville
    02-02.CEO 인사말
    02-03.연혁

  03.사업소개
    03-01.사업분야
    03-02.업무현황
    03-03.주요해외파트너
    03-04.주요거래처
    03-05.협력업체

  04.지속가능경영
    04-01.윤리경영
    04-02.규범 및 실천지침
    04-03.비윤리 신고

  05.고객지원
    05-01.CONTACT US(KOREA)
    05-02.NEWS-리스트
    05-03.NEWS-상세

  06.채용정보
    06-01.인사제도
    06-02.복리후생
    06-03.채용공고-리스트
    06-04.채용공고-상세

  07.FOOTER 항목
   07-01.사이트맵
   07-02.법적고지
   07-03.개인정보처리방침
   07-04.개인정보취급방침


-------------------------------*/
/*-- 00.공통--------------------*/
/*00-01. subVisual*/
.subVisual {
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right center;
  height: 350px;
  transition: height .2s;
  -webkit-transition: height .2s;
  -ms-transition: height .2s;
  -moz-transition: height .2s;
  -o-transition: height .2s;
  position: relative;
  position: fixed;
  left: 0;
  top: 0;
}

.subVisual .visualText {
  position: absolute;
  bottom: 45px;
}

.subVisual .visualText p {
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  font-family: "NunitoSans", sans-serif;
  text-transform: uppercase;
}

.subVisual .visualText h3 {
  font-size: 60px;
  font-weight: 800;
  color: #fff;
}

/*00-02. subNav*/
.subNavWrap {
  max-width: 1920px;
  margin: auto;
}

.subNav {
  position: relative;
  z-index: 1000;
  display: inline-block;
  width: 50%;
  max-width: 460px;
}

.subNav+.subNav {
  margin-left: -5px;
}

.subNav+.subNav p:before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 26px;
  background-color: #e5e5e5;
  position: absolute;
  left: -1px;
  top: 50%;
  margin-top: -13px;
}

.subNav p {
  height: 60px;
  line-height: 60px;
  padding-left: 30px;
  position: relative;
  font-size: 20px;
  font-weight: 800;
  border: 1px solid #fff;
}

.subNav p:after {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  border-top: 2px solid #000;
  border-right: 2px solid #000;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  position: absolute;
  top: 50%;
  right: 20px;
  margin-top: -5.5px;
  transition: transform .2s;
  -webkit-transition: transform .2s;
  -ms-transition: transform .2s;
  -moz-transition: transform .2s;
  -o-transition: transform .2s;
}

.subNav ul {
  position: absolute;
  top: 60px;
  background-color: #fff;
  border-bottom: 1px solid #000;
  display: none;
  width: 100%;
  max-width: 460px;
  padding-left: 30px;
}

.subNav ul li a {
  display: block;
  font-size: 20px;
  font-weight: 800;
  color: #000;
  padding: 10px 0 10px 0;
}

.subNav.open p {
  border-left: 1px solid #e5e5e5;
  border-right: 1px solid #e5e5e5;
}

.subNav.open ul {
  border-left: 1px solid #e5e5e5;
  border-right: 1px solid #e5e5e5;
  border-top: 1px solid #e5e5e5;
}

.subNavWrap.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  transition: top .2s;
  -webkit-transition: top .2s;
  -ms-transition: top .2s;
  -moz-transition: top .2s;
  -o-transition: top .2s;
  z-index: 20;
}

.subNavWrap.fixed.fixed2 {
  top: 49px;
}

/*00-03. subWrap*/
.subWrap {
  position: relative;
  z-index: 100;
  background-color: #fff;
  margin-top: 350px;
  transition: margin-top .2s;
  -webkit-transition: margin-top .2s;
  -ms-transition: margin-top .2s;
  -moz-transition: margin-top .2s;
  -o-transition: margin-top .2s;
  overflow-x: hidden;
}

.subContent {
  padding-top: 50px;
  padding-bottom: 200px;
}

.conPd {
  padding-left: 25%;
  padding-right: 3.4%;
}

.subTitleArea {
  margin-bottom: 70px;
  transition: all .2s;
  -webkit-transition: all .2s;
  -ms-transition: all .2s;
  -moz-transition: all .2s;
  -o-transition: all .2s;
}

/*00-04 formStyle*/
.tabSliderWrap {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  margin: 30px 0;
  position: relative;
  /* padding: 0 60px; */
}

.tabSliderWrap .swiper-wrapper{
  flex-wrap: wrap;
  transform:inherit !important;
}

.tabSliderWrap .swiper-button-next,
.tabSliderWrap .swiper-button-prev {
  display:none;
  top: 0 !important;
  height: 100% !important;
  margin-top: 0 !important;
  width: 60px;
  outline: none;
}

.tabSliderWrap .swiper-button-next {
  right: 0 !important;
}

.tabSliderWrap .swiper-button-prev {
  left: 0 !important;
}

.tabSliderWrap .swiper-button-next:before,
.tabSliderWrap .swiper-button-prev:before {
  display: none;
}

.tabSliderWrap .swiper-button-next:after,
.tabSliderWrap .swiper-button-prev:after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2px solid #171c5a;
  border-right: 2px solid #171c5a;
  position: absolute;
  top: 50%;
  right: 25px;
  margin-top: -5.5px;
}

.tabSliderWrap .swiper-button-prev:after {
  -webkit-transform: rotate(-136deg);
  transform: rotate(-136deg);
}

.tabSliderWrap .swiper-button-next:after {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.tabSliderWrap .swiper-slide {
  width: auto !important;
}

.tabSliderWrap .swiper-slide a {
  display: block;
  padding: 0 50px;
  text-align: center;
  font-size: 30px;
  font-weight: 800;
  height: 100px;
  line-height: 100px;
  color: #000;
}

.tabSliderWrap .swiper-slide.on a {
  background-color: #171c5a;
  color: #fff;
}

.searchTab02Wrap {
  padding: 20px 0 10px;
}

.searchTab02Wrap + .searchTab02Wrap{
  border-top:1px solid #ebebeb;
}

.searchTab02Wrap+.searchTab02Wrap {
  padding: 5px 0;
  /* border-top: 1px solid #ebebeb; */
}

.searchTab02Wrap .swiper-slide {
  width: auto;
}

.searchTab02 .swiper-wrapper,
.searchTab04 .swiper-wrapper{
  flex-wrap:wrap !important;
  transform:inherit !important;
}

.checkBtn {
  /* margin-right: 20px; */
  /* margin: 10px; */
}

.checkBtn>span {
  display: inline-block;
  border: 1px solid #ccc;
  height: 40px;
  line-height: 38px;
  border-radius: 30px;
  padding: 0 30px;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  margin:5px;
}

.checkBtn input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0
}

.checkBtn input[type="checkbox"]:checked+span {
  background-color: #151d86;
  color: #fff;
  border: 1px solid #151d86;
}

/* 00-05 table*/
.tableHeader {
  border-top: 1px solid #000;
  margin-top: 20px;
}

.tableHeader.brdrBottom {
  border-bottom: 1px solid #ccc;
}

.tableHeader th {
  padding-left: 5px;
  padding-right: 5px;
}

.tableHeader tr:first-child th {
  padding-top: 15px;
  padding-bottom: 15px;
  color: #999;
  border-bottom: 1px solid #ccc;
}

.tableHeader tr+tr th {
  color: #000;
  padding: 24px 0;
}

.tableStyle1 ul li {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.tableStyle1 ul li>div {
  display: table-cell;
  vertical-align: baseline;
  padding-bottom: 15px;
  font-size: 20px;
  padding-left: 5px;
  padding-right: 5px;
}

.tableStyle1 ul li>div+div {
  padding-top: 15px;
}

.tableStyle1 ul li a {
  color: #000;
  vertical-align: bottom;
}

.tableStyle1 ul li:hover {
  background-color: #f7f7fa;
  color: #484b73;
}

.tableStyle1 ul li:hover a {
  border-bottom: 1px solid #484b73;
  color: #484b73;
}

.mTit {
  color: #999;
  font-size: 14px;
  display: none;
}

.tableStyle1 ul li b {
  font-weight: 400;
}

.tableList .downloadBtn {
  color: #151d86;
  font-size: 13px;
}

.tableList .downloadBtn .ico {
  margin-left: 10px;
  margin-top: -5px;
}

.tableStyle1 ul li:hover a.btn {
  border: 1px solid #151d86;
}

.tableList .downloadBtn:hover {
  background-color: #151d86;
  color: #fff;
}

.tableList .downloadBtn:hover .ico-downloadBlue {
  background-image: url(../img/common/ico_download.png);
}

.tabSliderWrap+.tableStyle1 .tableHeader {
  border-top: none;
}

.tableScrollWrap {
  width: 100%;
  /* overflow-y:auto; */
  padding-bottom: 20px;
}

.tableScroll {
  min-width: ;
  table-layout: fixed;
}

.tableStyle2 {
  border-top: 1px solid #000;
}

.tableStyle2 thead tr th {
  border-bottom: 1px solid #000;
  border-right: 1px solid #ccc;
  padding: 15px 5px;
  font-size: 20px;
}

.tableStyle2 thead tr:first-child th {
  border-bottom: 1px solid #ccc;
  color: #999;
}

.tableStyle2 thead th:last-child {
  border-right: none;
}

.tableStyle2 tbody td {
  border-bottom: 1px solid #f1f1f1;
  border-right: 1px solid #ccc;
  padding: 15px;
  font-size: 20px;
}

.tableStyle2 tbody tr:last-child td {
  border-bottom: 1px solid #000;
}

.tableStyle2 tbody td:last-child {
  border-right: none;
}

.pagerWrap {
  margin-top: 100px;
  text-align: center;
}

.pagerWrap ul {
  display: inline-block;
  border: 1px solid #171c5a;
  border-radius: 50px;
  padding: 0 25px;
}

.pagerWrap li {
  display: inline-block;
  vertical-align: middle;
  height: 68px;
  padding: 20px 0;
}

.pagerWrap li a {
  display: inline-block;
  margin: 0 15px;
  font-size: 20px;
  font-family: "NunitoSans", sans-serif;
  font-weight: 100;
  color: #171c5a;
}

.pagerWrap li.on a {
  border-bottom: 1px solid #171c5a;
  font-weight: 800;
}

.pagerWrap li a:hover {
  font-weight: 800;
}

.ico-prev,
.ico-next {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border-top: 2px solid #171c5a;
  border-right: 2px solid #171c5a;
}

.ico-prev {
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
  margin-top: 9px;
}

.ico-next {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  margin-top: 6px;
}

.titrow{
  display: flex;
  flex-wrap: wrap;
}

.titrow .circle{
  width: 60px;
  height: 60px;
  margin-right: 20px;
}

/*--01.통합검색----------*/
.visualSearch.subVisual {
  background-color: #141731;
  position: absolute;
  padding: 0 3.4%;
  height: 400px;
}

.visualSearchWrap {
  width: 100%;
  padding: 0 3.4%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-20%);
}

.visualSearchWrap .subSearchBox {
  margin-bottom: 0;
}

.subSearchBox {
  width: 100%;
  max-width: 800px;
  margin: 0 auto 30px;
  position: relative;
}

.subSearchBox button {
  display: inline-block;
  width: 90px;
  height: 90px;
  line-height: 90px;
  position: absolute;
  right: 0;
  top: 0;
}

.subSearchBox button .ico-search {
  background-position: bottom;
}

.ico-search {
  background-image: url(../img/common/ico_search.png);
  width: 25px;
  height: 25px;
}

.subSearchBox input[type="text"] {
  padding-left: 30px;
  width: 100%;
  border: 1px solid #ccc;
  height: 90px;
  padding-left: 30px;
  padding-right: 120px;
  color: #000;
  font-size: 24px;
  font-weight: 500;
}


.searchTab01Wrap {
  border-bottom: 1px solid #000;
}

.searchTab01Wrap .swiper-slide {
  width: auto;
}

.searchTab01Wrap .swiper-slide a {
  display: block;
  color: #000;
  font-size: 24px;
  font-weight: 800;
  padding: 20px 40px 20px 0;
}
.searchTab01Wrap .swiper-slide a sup{
  font-size: 12px;
}

.searchTab01Wrap .swiper-slide.on a {
  color: #f92eb4;
}

/* 01-01.통합검색-Product*/
.searchContentProduct {
  margin-top: 30px;
}

.searchContentProWrap+.searchContentProWrap {
  border-top: 1px solid #ccc;
  margin-top: 30px;
  padding-top: 30px;
}

.searchContentProWrap h5 {
  margin-bottom: 30px;
}

.searchContentProWrap .cellWrap {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.searchContentProWrap .cellWrap .left {
  display: table-cell;
  vertical-align: top;
  width: 350px;
}

.searchContentProImg {
  width: 100%;
  height: 300px;
  background-color: #f7f7fa;
  background-repeat: no-repeat;
  background-size: 80%;
  background-position: center;
}

.searchStick {
  background-image: url(../img/content/product_weldStick.png);
}

.searchFlux {
  background-image: url(../img/content/product_weldFlux.png);
}

.searchSolid {
  background-image: url(../img/content/product_weldSolid.png);
}

.searchTig {
  background-image: url(../img/content/product_weldTig.png);
  background-position: right;
}

.searchFluxCored {
  background-image: url(../img/content/product_weldFluxCored.png);
}

.searchSeamless {
  background-image: url(../img/content/product_weldSeamless.png);
}

.searchNickel {
  background-image: url(../img/content/product_weldNickel.png);
}

.searchContentProWrap .cellWrap .right {
  display: table-cell;
  /* width: calc(100% - 350px);
  width: -webkit-calc(100% - 350px);
  width: -moz-calc(100% - 350px); */
  vertical-align: top;
  padding-left: 50px;
}

.searchContentProWrap .cellWrap .right>p {
  font-size: 20px;
  color: #999;
  padding-left: 35px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ccc;
}

.searchContentProWrap li a {
  position: relative;
  display: block;
  width: 100%;
  font-size: 20px;
  color: #999;
  padding-left: 250px;
  padding-top: 20px;
  padding-bottom: 20px;
  transition: all .2s;
  -webkit-transition: all .2s;
  -ms-transition: all .2s;
  -moz-transition: all .2s;
  -o-transition: all .2s;
}

.proName {
  display: inline-block;
  color: #67a4ff;
  position: absolute;
  left: 35px;
}

.searchContentProWrap li a ul li {
  display: inline-block;
  margin-right: 10px;
}

.searchContentProWrap li a ul li>span {
  color: #000;
  font-weight: 800;
  display: inline-block;
  margin-right: 10px;
}

.searchContentProWrap li:hover a {
  background-color: #f7f7fa;
}

.searchContentProWrap li:hover a .proName {
  border-bottom: 1px solid #67a4ff;
}

@media (max-width: 1300px) {
  .searchContentProWrap li a {
    padding-left: 165px;
  }

  .searchContentProWrap .cellWrap .left {
    width: 200px;
  }

  .searchContentProImg {
    height: 150px;
  }

  .searchContentProWrap .cellWrap .right {
    /* width: calc(100% - 200px);
    width: -webkit-calc(100% - 200px);
    width: -moz-calc(100% - 200px); */
  }

  .searchContentProWrap .cellWrap .right {
    padding-left: 30px;
  }

  .searchContentProWrap .cellWrap .right>p {
    padding-left: 10px;
  }

  .proName {
    left: 10px;
  }

  .searchContentProWrap li a {
    font-size: 16px;
  }

  .searchContentProWrap li a {
    padding-left: 117px;
  }
}

/*01-02.통합검색-Recruit*/
.searchContentTable {
  margin-top: 100px;
}

.searchContentTable .titStyle5 {
  margin-bottom: 0px;
}

.searchContentTable+.searchContentTable {
  padding-top: 100px;
  /* border-top: 1px solid #ccc; */
}

.searchContentTable .tableStyle1 ul li>div {
  text-align: center;
}

.searchContentRecruit .tableStyle1 ul li>div:first-child {
  width: 15%;
}

.searchContentRecruit .tableStyle1 ul li>div:nth-child(2) {
  width: 10%;
}

.searchContentRecruit .tableStyle1 ul li>div:nth-child(3) {
  width: 15%;
}

.searchContentRecruit .tableStyle1 ul li>div:nth-child(4) {
  width: 30%;
}

.searchContentRecruit .tableStyle1 ul li>div:nth-child(5) {
  width: 20%;
}

.searchContentRecruit .tableStyle1 ul li>div:last-child {
  width: 10%;
  color: #d93131;
}

/*01-03.통합검색-News*/
/*01-04.통합검색-Contact*/
.searchContentLocation .tableStyle1 ul li>div{
  text-align: left;
}

.searchContentLocation .tableStyle1 ul li>div:first-child {
  width: 25%;
}

.searchContentLocation .tableStyle1 ul li>div:nth-child(2) {
  width: 25%;
}

.searchContentLocation .tableStyle1 ul li>div:last-child {
  width: 25%;
}

/*01-05.통합검색-검색결과 없음*/
.noResult {
  color: #999;
  text-align: center;
  padding: 240px 0;
  font-size: 30px;
}

/*--
02.기업소개----------*/
.visualAbout {
  background-image: url(../img/content/visual_about.jpg);
}

/*   02-01.HWBC*/
.leftFloating {
  position: absolute;
  left: 3.4%;
}

.leftFloating.fixed {
  position: fixed;
  top: 80px;
}

.leftFloating.fixed.fixed2 {
  position: fixed;
  top: 150px;
}

.leftFloating li+li {
  margin-top: 15px;
}

.leftFloating li.on a {
  border-bottom: 1px solid #ccc;
}

.leftFloating a {
  font-size: 16px;
  color: #ccc;
  font-family: "NunitoSans", sans-serif;
  font-weight: 800;
}

.aboutHwbcImg01 {
  width: 401px;
  height: 401px;
  background: url(../img/content/hwbc_img01.png) no-repeat center;
  background-size: 100%;
  position: relative;
  margin-top: 60px
}

.aboutHwbcImg01:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url(../img/content/hwbc_img01_circle.png) no-repeat center;
  background-size: 100%;
}

.aboutHwbcImgCircle {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(../img/content/hwbc_img01_circle.png) no-repeat center;
  background-size: 100%;
  left: 0;
  top: 0;
  z-index: -1;
}

.aboutHwbcImgCircle.active {
  z-index: 10;
}

.aboutHwbcImgCircle01 {
  transform: rotate(0deg);
}

.aboutHwbcImgCircle02 {
  transform: rotate(90deg);
}

.aboutHwbcImgCircle03 {
  transform: rotate(180deg);
}

.aboutHwbcImgCircle04 {
  transform: rotate(270deg);
}

.aboutHwbc+.aboutHwbc {
  padding-top: 160px;
}

.aboutHwbcImg02 {
  margin-top: 60px;
  width: 440px;
  height: 404px;
  position: relative;
  background: url(../img/content/hwbc_img02_01.png) no-repeat center;
  background-size: 100%;
  position: relative;
}

.aboutHwbc03 {
  padding-bottom: 160px;
}

.aboutHwbc03Circle {
  position: relative;
  display: inline-block;
  margin-top: 60px;
}

.aboutHwbc03Circle .dot {
  display: inline-block;
  width: 28px;
  height: 28px;
  position: absolute;
  left: 50%;
  margin-left: -14px;
  border-radius: 100px;
  z-index: 10;
  opacity: 0;
  transition: opacity .2s;
  -webkit-transition: opacity .2s;
  -ms-transition: opacity .2s;
  -moz-transition: opacity .2s;
  -o-transition: opacity .2s;
  transition-delay: 1s;
  -webkit-transition-delay: 1s;
  -ms-transition-delay: 1s;
  -moz-transition-delay: 1s;
  -o-transition-delay: 1s;
}

.aboutHwbc03Circle .dot01 {
  background-color: #111aa1;
  border: 2px solid #fff;
  top: 87px;
}

.aboutHwbc03Circle .dot02 {
  top: 276px;
  background-color: #fff;
  border: 2px solid #111aa1;
}

.aboutHwbc03Circle:after {
  content: "";
  display: block;
  clear: both;
}

.aboutHwbc03Circle01,
.aboutHwbc03Circle02 {
  width: 400px;
  height: 400px;
  border: 2px solid #111aa1;
  border-radius: 100%;
  text-align: center;
  float: left;
  position: relative;
  padding-top: 78px;
}

.aboutHwbc03Circle02 {
  margin-left: 20px;
  transition: margin-left .5s;
  -webkit-transition: margin-left .5s;
  -ms-transition: margin-left .5s;
  -moz-transition: margin-left .5s;
  -o-transition: margin-left .5s;
}

.aboutHwbc03Circle02:after {
  content: "";
  display: block;
  width: 500px;
  height: 500px;
  position: absolute;
  left: 50%;
  margin-left: -250px;
  top: 50%;
  margin-top: -250px;
  border: 1px solid #dbdbf8;
  border-radius: 100%;
  opacity: 0.6;
  transform: scale(0);
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  -moz-transform: scale(0);
  -o-transform: scale(0);
  transition: transform .5s;
  -webkit-transition: transform .5s;
  -ms-transition: transform .5s;
  -moz-transition: transform .5s;
  -o- transition: transform .5s;
  transition-delay: .5s;
  -webkit-transition-delay: .5s;
  -ms-transition-delay: .5s;
  -moz-transition-delay: .5s;
  -o-transition-delay: .5s;
  z-index: -1;
}

.aboutHwbc03Circle h5 {
  font-size: 40px;
  color: #111aa1;
  font-family: "NunitoSans", sans-serif;
  margin-bottom: 60px;
}

.aboutHwbc03Circle p {
  font-size: 18px;
  line-height: 1.5em;
}

.aboutHwbc03Circle.move .aboutHwbc03Circle02 {
  margin-left: -50px;
}

.aboutHwbc03Circle.move .dot {
  opacity: 1;
}

.aboutHwbc03Circle.move .aboutHwbc03Circle02:after {
  transform: scale(1);
}

.aboutHwbc04_bg {
  background-color: #171c5a;
  padding-top: 130px;
}

.aboutHwbc04Con {
  position: relative;
  padding: 90px 0;
}

.aboutHwbc04Con:after {
  content: "";
  display: block;
  clear: both;
}

.aboutHwbc04-left {
  width: calc(100% - 700px);
  width: -webkit-calc(100% - 700px);
  width: -moz-calc(100% - 700px);
}

.aboutHwbc04-leftContent {
  position: absolute;
  top: 0;
}

.aboutHwbc04-left h4 {
  color: #fff;
  font-size: 60px;
  line-height: 1.2em;
  font-family: "NunitoSans", sans-serif;
  margin-bottom: 20px;
}

.aboutHwbc04-left p {
  font-size: 30px;
  line-height: 1.2em;
  color: #fff;
}

.aboutHwbc04-right {
  float: right;
  width: 700px;
  height: 700px;
  position: relative;
}

.circle01 {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -350px;
  margin-left: -350px;
  width: 700px;
  height: 700px;
  border: 1px solid #515583;
  border-radius: 100%;
  transform: scale(0);
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  -moz-transform: scale(0);
  -o-transform: scale(0);
  transition: transform .5s;
  -webkit-transition: transform .5s;
  -ms-transition: transform .5s;
  -moz-transition: transform .5s;
  -o-transition: transform .5s;
  z-index: 1;
}

.circle02 {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -250px;
  margin-left: -250px;
  width: 500px;
  height: 500px;
  background: url(../img/content/hwbc_img04.png) no-repeat center;
  background-size: 100%;
  text-align: right;
  font-size: 20px;
  color: #fff;
  transform: scale(0);
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  -moz-transform: scale(0);
  -o-transform: scale(0);
  transition: transform .5s;
  -webkit-transition: transform .5s;
  -ms-transition: transform .5s;
  -moz-transition: transform .5s;
  -o-transition: transform .5s;
  transition-delay: .5s;
  -webkit-transition-delay: .5s;
  -ms-transition-delay: .5s;
  -moz-transition-delay: .5s;
  -o-transition-delay: .5s;
}

.circle02 p {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateX(0) translateY(-50%);
  -webkit-transform: translateX(0) translateY(-50%);
  -ms-transform: translateX(0) translateY(-50%);
  -moz-transform: translateX(0) translateY(-50%);
  -o-transform: translateX(0) translateY(-50%);
}

.circle03 {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -150px;
  margin-left: -150px;
  width: 300px;
  height: 300px;
  border: 2px dashed #515583;
  border-radius: 100%;
  text-align: right;
  font-size: 20px;
  font-family: "NunitoSans", sans-serif;
  color: #fff;
  transform: scale(0);
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  -moz-transform: scale(0);
  -o-transform: scale(0);
  transition: transform .5s;
  -webkit-transition: transform .5s;
  -ms-transition: transform .5s;
  -moz-transition: transform .5s;
  -o-transition: transform .5s;
  transition-delay: 1s;
  -webkit-transition-delay: 1s;
  -ms-transition-delay: 1s;
  -moz-transition-delay: 1s;
  -o-transition-delay: 1s;
}

.circle03 p {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateX(0) translateY(-50%);
  -webkit-transform: translateX(0) translateY(-50%);
  -ms-transform: translateX(0) translateY(-50%);
  -moz-transform: translateX(0) translateY(-50%);
  -o-transform: translateX(0) translateY(-50%);
}

.circle04 {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -50px;
  margin-left: -50px;
  width: 100px;
  height: 100px;
  background-color: #fff;
  border-radius: 100%;
  text-align: center;
  font-size: 20px;
  color: #171c5a;
  font-weight: 800;
  transform: scale(0);
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  -moz-transform: scale(0);
  -o-transform: scale(0);
  transition: transform .5s;
  -webkit-transition: transform .5s;
  -ms-transition: transform .5s;
  -moz-transition: transform .5s;
  -o-transition: transform .5s;
  transition-delay: 1.5s;
  -webkit-transition-delay: 1.5s;
  -ms-transition-delay: 1.5s;
  -moz-transition-delay: 1.5s;
  -o-transition-delay: 1.5s;
}

.circle04 p {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  width: 100%;
  text-align: center;
}

.circle05 {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -60px;
  margin-left: -60px;
  /* margin-top: 35px;
  margin-left: 35px; */
  width: 120px;
  height: 120px;
  background-color: #171c5a;
  border: 2px solid #fff;
  border-radius: 100%;
  text-align: center;
  font-size: 20px;
  color: #fff;
  font-weight: 800;
  transform: scale(0);
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  -moz-transform: scale(0);
  -o-transform: scale(0);
  transition: all .5s;
  -webkit-transition: all .5s;
  -ms-transition: all .5s;
  -moz-transition: all .5s;
  -o-transition: all .5s;
  transition-delay: 2s;
  -webkit-transition-delay: 2s;
  -ms-transition-delay: 2s;
  -moz-transition-delay: 2s;
  -o-transition-delay: 2s;
}

.circle05 p {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  width: 100%;
  text-align: center;
}

.circle06 {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -60px;
  margin-left: -60px;
  /* margin-top: 130px;
  margin-left: 130px; */
  width: 120px;
  height: 120px;
  background-color: #171c5a;
  border: 2px solid #fff;
  border-radius: 100%;
  text-align: center;
  font-size: 20px;
  color: #fff;
  font-weight: 800;
  transform: scale(0);
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  -moz-transform: scale(0);
  -o-transform: scale(0);
  transition: all .5s;
  -webkit-transition: all .5s;
  -ms-transition: all .5s;
  -moz-transition: all .5s;
  -o-transition: all .5s;
  transition-delay: 2s;
  -webkit- transition-delay: 2s;
  -ms-transition-delay: 2s;
  -moz-transition-delay: 2s;
  -o-transition-delay: 2s;
  z-index: 6;
}

.circle06 p {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  width: 100%;
  text-align: center;
}

.aboutHwbc04-right.move .circle01,
.aboutHwbc04-right.move .circle02,
.aboutHwbc04-right.move .circle03,
.aboutHwbc04-right.move .circle04 {
  transform: scale(1);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
}

.aboutHwbc04-right.move .circle05 {
  transform: scale(1);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  margin-top: 35px;
  margin-left: 35px;
}

.aboutHwbc04-right.move .circle06 {
  transform: scale(1);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  margin-top: 130px;
  margin-left: 130px;
}

@media (max-width: 1150px) {
  .aboutHwbc+.aboutHwbc {
    padding-top: 80px;
  }

  .aboutHwbcCon p {
    font-size: 16px;
  }

  .aboutHwbcImg01 {
    width: 300px;
    height: 300px;
  }

  .aboutHwbcImg02 {
    width: 300px;
    height: 276px;
  }

  .aboutHwbc03Circle01,
  .aboutHwbc03Circle02 {
    width: 300px;
    height: 300px;
  }

  .aboutHwbc03Circle h5 {
    font-size: 28px;
    margin-bottom: 24px;
  }

  .aboutHwbc03Circle.move .aboutHwbc03Circle02 {
    margin-left: -40px;
  }

  .aboutHwbc03 {
    padding-bottom: 60px;
  }

  .aboutHwbc03Circle .dot {
    width: 20px;
    height: 20px;
    margin-left: -10px;
  }

  .aboutHwbc03Circle .dot01 {
    top: 63px;
  }

  .aboutHwbc03Circle .dot02 {
    top: 225px;
  }

  .aboutHwbc03Circle02:after {
    width: 350px;
    height: 350px;
    position: absolute;
    margin-left: -175px;
    margin-top: -175px;
  }

  .aboutHwbc04-left h4 {
    font-size: 45px;
    background-color: #171c5a;
    position: relative;
    z-index: 10;
  }

  .aboutHwbc04-left p {
    font-size: 30px;
    background-color: #171c5a;
    position: relative;
    z-index: 10;
  }

  .aboutHwbc04-right {
    overflow: hidden;
  }
}

/*   02-02.CEO 인사말*/
/*   02-03.연혁*/
.historyContent {
  margin-top: 150px;
}
.historyContent .swiper-container{
  overflow: visible !important;
}
.historyContent .swiper-wrapper{
  flex-wrap:wrap;
   transform:inherit !important;
}
.historySlider .swiper-slide {
  width: 100%;
  position:relative;
}

.historySlider .swiper-slide:after{
  content:"";
  display:block;
  width:30px;
  height:30px;
  background:#fff;
  border:1px solid #afb1c2;
  position:absolute;
  left:-15px;
  top:12px;
  border-radius:100%;
}

.historySlider .swiper-slide:before{
  content:"";
  display:block;
  width:13px;
  height:13px;
  background:#171c5a;
  position:absolute;
  left:-6px;
  top:21px;
  border-radius:100%;
  z-index:5;
}

/*
.historySlider .swiper-slide + .swiper-slide .historyWrap{
  padding-top:20px;
}
*/
.historyWrap {
  border-left: 1px solid #ccc;
  padding-bottom: 50px;
  /* min-height: 500px; */
  padding-left: 50px;
}

.historyYear {
  font-size: 40px;
  font-weight: 800;
  font-family: "NunitoSans", sans-serif;
  margin-bottom: 55px;
}

.historyWrap ul li {
  position: relative;
  padding-left: 80px;
  font-size: 16px;
}

.historyWrap ul li+li {
  margin-top: 10px;
}

.historyWrap ul li>span {
  font-family: "NunitoSans", sans-serif;
  font-weight: 800;
  font-size: 16px;
  position: absolute;
  left: 0;
}

/*--03.사업소개----------*/
.visualProduct {
  background-image: url(../img/content/visual_product.jpg);
}

/*03-01.사업분야*/
.businessGloville .titStyle5{
  margin-bottom: 100px;
}

.businessGlovilleWrap {
  padding-top: 30px;
  border-top: 1px solid #ccc;
  display: table;
  width: 100%;
}

.businessGlovilleWrap.brdr-b {
  border-top: 1px solid #000;
}

.businessGlovilleWrap+.businessGlovilleWrap {
  margin-top: 30px;
}

.businessGlovilleWrap>div {
  display: table-cell;
  vertical-align: top;
}

.businessGlovilleWrap>div:first-child {
  width: 30%;
  padding: 50px 0
}

.businessGlovilleWrap img {
  float: right;
}

.businessGlovilleWrap>div:last-child {
  padding-top: 15px;
  font-size: 20px;
  line-height: 1.7em;
}
.businessGlovilleWrap .titStyle3{
  margin-bottom: 30px;
}

/*03-02.업무현황*/
.businessWorkWrap {
}

.businessWorkWrap:after {
  content: "";
  display: block;
  clear: both;
  position: relative;
}

.businessWorkWrap {
  border: 1px solid #171c5a;
  position: relative;
  overflow: hidden;
  padding: 50px;
  margin-bottom: 30px;
  transition: all .2s;
  -webkit-transition: all .2s;
  -ms-transition: all .2s;
  -moz-transition: all .2s;
  -o- transition: all .2s;
  border-radius: 20px;
  display: flex;
  flex-wrap: wrap;
}

.businessWorkWrap .titStyle5{
  color: #171c5a;
  font-weight: 800;
}

.businessWorkWrap .list{
  flex: 1;
}

.businessWorkWrap div:last-child{
  flex: 2;
  padding-top: 40px;
}

.businessWorkWrap .list:after {
  font-size: 200px;
  color: #171c5a;
  opacity: 0.1;
  position: absolute;
  right: 3%;
  bottom: 0;
  font-weight: 800;
  font-family: "NunitoSans", sans-serif;
  line-height: 0.65em;
  -webkit-transition: all .2s;
  -ms-transition: all .2s;
  -moz-transition: all .2s;
  -o- transition: all .2s;
}

.businessWorkWrap:nth-child(1) .list:after {
  content: "1";
}

.businessWorkWrap:nth-child(2) .list:after {
  content: "2";
}

.businessWorkWrap:nth-child(3) .list:after {
  content: "3";
}

.businessWorkWrap:nth-child(4) .list:after {
  content: "4";
}


/* 03-03.주요해외파트너 */
.globalPartner .tableStyle1{
  margin-bottom: 100px;
}

.globalPartner .titStyle3 {
  margin-top: 20px;
  display: inline-block;
  background: #f7f7f7;
  padding: 10px;
  border-radius: 5px;
  color: #999;
}

/* 03-04.주요거래처 */
.businessClientList{
  margin-bottom: 50px;
}

.businessClientList:after {
  content: "";
  display: block;
  clear: both;
}

.businessClientList li {
  float: left;
  padding: 15px;
  width: 25%;
}

.businessClientList li div {
  display: block;
  width: 100%;
  border: 1px solid #ccc;
  position: relative;
  transition: height .5s;
  -webkit-transition: height .5s;
  -ms-transition: height .5s;
  -moz-transition: height .5s;
  -o-transition: height .5s;
}

.businessClientList li div>span {
  display: block;
  text-align: center;
  padding-bottom: 10px;
  color: #000;
  line-height: 30px;
}

.businessClientList li div:after {
  top: 0;
  left: 0;
  position: absolute;
  opacity: 0;
  filter: alpha(opacity=40);
  z-index: 5;
  content: "";
  width: 100%;
  height: 100%;
  background-color: #fff;
  transition: opacity .5s;
  -webkit-transition: opacity .5s;
  -ms-transition: opacity .5s;
  -moz-transition: opacity .5s;
  -o-transition: opacity .5s;
}

.businessClientList li div img{
  margin: auto;
  display: block;
}

/* 03-04.소재/원료 */
.smrmCommonList {display:flex;flex-flow:row wrap;}
.smrmCommonList > li {border-top:1px solid #ccc;padding-top:5%;margin-top:5%;width:100%;}
.smrmCommonList > li:first-child {border-top:0;margin-top:0;padding-top:0;padding-left:0;}
.smrmCommonList > li h2 {font-size:2rem;font-weight:900;margin-bottom:2rem;color:#141731;}
.smrmCommonList > li h2 span {display:block;font-size:1.250rem;font-weight:400;color:#000;}
.smrmCommonList > li:not(.full_li) .img_box {margin-bottom:2rem;}
.smrmCommonList > li .img_box img {border:1px solid #eee;}
.smrmCommonList > li .img_box span {display:block;margin-top:10px;font-size:0.875rem;color:#999;}
.smrmCommonList > li .txt_box p {font-size:1.250rem;}
.smrmCommonList > li .txt_box p b {display:block;font-size:1.500rem;margin-bottom:10px;}
.smrmCommonList .full_li {width:100%;display:flex;justify-content:space-between;align-items:center;}
.smrmCommonList .full_li .txt_box {width:45%;}
.smrmCommonList .full_li .img_box {width:50%;}

.smrm_ul {}
.smrm_ul > li {width:50%;}
.smrm_ul > li:nth-child(2n) {padding-right:2.5%;}
.smrm_ul > li:nth-child(odd) {padding-left:2.5%;}
.smrm_ul > li .txt_box li {margin-bottom:2rem;}
.smrm_ul > li .txt_box li:last-child {margin-bottom:0;}
.smrm_ul > li .txt_box a {display:inline-block;padding:5px 20px 3px 20px;background:#141731;color:#fff;font-weight:700;}

.ms_ul > li:not(:first-child) .img_box {display:flex;align-items:center;justify-content:space-between;}
.ms_ul > li:not(:first-child) .img_box img {width:47.5%;}

.ms_table {border-collapse:collapse;border-bottom:1px solid #141731;margin:10% 0;}
.ms_table th {border:1px solid #fff;background:#141731;color:#fff;padding:10px 0;text-align:center;font-size:1.125rem;}
.ms_table td {border-bottom:1px solid #d6d6d6;padding:15px 0;text-align:center;}

.nfm_ul > li:nth-child(2) ol {display:flex;flex-flow:row wrap;}
.nfm_ul > li:nth-child(2) ol li {width:15%;margin-right:2%;}
.nfm_ul > li:nth-child(2) ol li:last-child {margin-right:0;}
.nfm_ul > li:nth-child(2) ol li p {margin-top:10px;}
.nfm_ul > li:nth-child(3) ol {display:flex;flex-flow:row wrap;}
.nfm_ul > li:nth-child(3) ol li {position:relative;padding-bottom:7.416667%;width:7.416667%;margin-bottom:1%;margin-right:1%;color:#fff;font-size:0.875rem;text-align:center;}
.nfm_ul > li:nth-child(3) ol li p {position:absolute;top:50%;left:50%;width:100%;
	-webkit-transform:translate(-50%,-50%);
	-ms-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
}
.nfm_ul > li:nth-child(3) ol li:nth-child(12n) {margin-right:0;}
.nfm_ul > li:nth-child(3) ol li:nth-child(odd) {background:#141731;}
.nfm_ul > li:nth-child(3) ol li:nth-child(even) {background:#43455a;}
.nfm_ul > li:nth-child(4) {display:flex;flex-flow:row wrap;justify-content:space-between;}
.nfm_ul > li:nth-child(4) h2 {width:100%;}
.nfm_ul > li:nth-child(4) .img_box {width:47.5%;}
.nfm_ul > li:nth-child(4) .img_box span {color:#4c4c4c;}

.gt_ul li:nth-child(2) .img_box {display:flex;flex-flow:row wrap;justify-content:space-between;}
.gt_ul li:nth-child(2) .img_box span {width:100%;color:#4c4c4c;}
.gt_ul li:nth-child(2) .img_grid_3 img {width:32%;margin-right:2%;}
.gt_ul li:nth-child(2) .img_grid_3 img:nth-last-of-type(1) {margin-right:0;}
.gt_ul li:nth-child(2) .img_grid_2 div {width:47.5%;}
.gt_ul li:nth-child(2) .img_grid_2 img {width:100%;}

@media(max-width:960px){
	.nfm_ul > li:nth-child(3) ol li {padding-bottom:9.1%;width:9.1%;}
	.nfm_ul > li:nth-child(3) ol li:nth-child(12n) {margin-right:1%;}
	.nfm_ul > li:nth-child(3) ol li:nth-child(10n) {margin-right:0;}
}

@media(max-width:720px){
	.smrmCommonList > li {border-top:0;width:100%;padding-top:10%;margin-top:10%;}
	.smrmCommonList .full_li {flex-flow:row wrap;border-bottom:1px solid #ccc;}
	.smrmCommonList .full_li .txt_box {width:100%;margin-bottom:5%;}
	.smrmCommonList .full_li .img_box {width:100%;}

	.smrm_ul > li:nth-child(2n) {padding-right:0;}
	.smrm_ul > li:nth-child(odd) {padding-left:0;}

	.ms_ul > li:not(:first-child) .img_box {flex-flow:row wrap;}
	.ms_ul > li:not(:first-child) .img_box img {width:100%;}
	.ms_ul > li:not(:first-child) .img_box img:first-child {margin-bottom:5%;}

	.nfm_ul > li:nth-child(2) ol li {width:32%;margin-top:5%;}
	.nfm_ul > li:nth-child(2) ol li:nth-child(1),
	.nfm_ul > li:nth-child(2) ol li:nth-child(2),
	.nfm_ul > li:nth-child(2) ol li:nth-child(3) {margin-top:0;}
	.nfm_ul > li:nth-child(2) ol li:nth-child(3n) {margin-right:0;}

	.nfm_ul > li:nth-child(3) ol li {padding-bottom:13.42857142857143%;width:13.42857142857143%;}
	.nfm_ul > li:nth-child(3) ol li:nth-child(12n) {margin-right:1%;}
	.nfm_ul > li:nth-child(3) ol li:nth-child(10n) {margin-right:1%;}
	.nfm_ul > li:nth-child(3) ol li:nth-child(7n) {margin-right:0;}
	.nfm_ul > li:nth-child(4) .img_box {width:100%;}

	.gt_ul li:nth-child(2) .img_grid_3 img {width:100%;margin-right:0;margin-bottom:5%;}
	.gt_ul li:nth-child(2) .img_grid_2 div {width:100%;}
	.gt_ul li:nth-child(2) .img_grid_2 img {width:100%;}
}

@media(max-width:480px){
	.nfm_ul > li:nth-child(3) ol li {padding-bottom:24.25%;width:24.25%;}
	.nfm_ul > li:nth-child(3) ol li:nth-child(12n) {margin-right:1%;}
	.nfm_ul > li:nth-child(3) ol li:nth-child(10n) {margin-right:1%;}
	.nfm_ul > li:nth-child(3) ol li:nth-child(7n) {margin-right:1%;}
	.nfm_ul > li:nth-child(3) ol li:nth-child(4n) {margin-right:0;}
}

/*03-05.협력업체*/

/*--04.지속가능경영---------*/
.visualSus {
  background-image: url(../img/content/visual_sus.jpg);
}

/*04-01.윤리경영*/
.susAboutContent {
  margin-top: 150px;
  position: relative;
}

.susAboutContent:after {
  content: "";
  display: block;
  clear: both;
}

.susAboutContent .left,
.susAboutContent .right {
  float: left;
}

.susAboutContent .left {
  padding-top: 107px;
}

.circieBlue {
  width: 250px;
  height: 250px;
  font-weight: bold;
  font-size: 30px;
  text-align: center;
  background-color: #111aa1;
  color: #fff;
  border-radius: 100%;
  display: inline-block;
  padding-top: 90px;
  line-height: 1.3em;
}

.circieBlue+.circieBlue {
  margin-left: -60px;
  position: relative;
  z-index: 10;
}

.susAboutContent .right {
  padding-left: 75px;
}

.circleBlueLine {
  width: 450px;
  height: 450px;
  border: 1px solid #111aa1;
  border-radius: 100%;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  padding-top: 190px;
  line-height: 1.3em;
  position: relative;
}

.circleBlueLine:after {
  content: "";
  width: 650px;
  height: 650px;
  border: 1px solid #dfdff8;
  border-radius: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -325px;
  margin-left: -325px;
}

.susAboutContent .bar {
  width: 49px;
  height: 3px;
  background-color: #111aa1;
  position: absolute;
  top: 50%;
  left: 456px;
  z-index: 27;
}

.susAboutContent .bar:before {
  content: "";
  display: inline-block;
  width: 25px;
  height: 25px;
  border-radius: 100%;
  background-color: #fff;
  border: 2px solid #111aa1;
  position: absolute;
  left: -28px;
  top: -13px;
}

.susAboutContent .bar:after {
  content: "";
  display: inline-block;
  width: 25px;
  height: 25px;
  border-radius: 100%;
  background-color: #111aa1;
  border: 2px solid #fff;
  position: absolute;
  right: -28px;
  top: -13px;
}

.susCharterContent {
  margin-bottom: 100px;
}

.susCharterContent .left,
.susCharterContent .right {
  display: inline-block;
  vertical-align: middle;
}

.susCharterContent .left {
  position: relative;
  z-index: 10;
}

.susCharterContent .right {
  margin-left: -74px;
}

.susCharterContent .left .circle {
  border: 1px solid #111aa1;
  font-size: 50px;
  color: #111aa1;
  text-align: center;
  padding-top: 145px;
  width: 360px;
  height: 360px;
  border-radius: 100%;
  font-weight: 900;
  background-color: #fff;
  transition: all .2s;
  -webkit-transition: all .2s;
  -ms-transition: all .2s;
  -moz-transition: all .2s;
  -o-transition: all .2s;
}

.susCharterContent .right .circle {
  border: 1px solid #dbdbf7;
  width: 450px;
  height: 450px;
  border-radius: 100%;
  padding-left: 100px;
  padding-top: 200px;
  transition: all .2s;
  -webkit-transition: all .2s;
  -ms-transition: all .2s;
  -moz-transition: all .2s;
  -o-transition: all .2s;
}

.susCharterContent .right .circle h6 {
  font-size: 30px;
  font-weight: 900;
  margin-bottom: 15px;
}

.susCharterContent .right .circle h6>span {
  color: #111aa1;
}

.susCharterContent .right .circle p {
  font-size: 30px;
  font-weight: bold;
  line-height: 1.2em;
}

.susCharterText {
  margin-top: 40px;
}

.susOperate02,
.susOperate03 {
  display: none;
}

.susOperate01 .susOperate01-list {
  max-width: 800px;
  margin-top:100px;
}

.susOperate01-list {
  margin-top: 100px;
  text-align: center;
}

.susOperate01-list li {
  position: relative;
  margin-bottom: 10px;
  padding-bottom: 70px;
}

.susOperate01-list .bedge {
  display: inline-block;
  width: 289px;
  height: 100px;
  line-height: 96px;
  border-radius: 50px;
  border: 2px solid #171c5a;
  font-size: 24px;
  color: #111aa1;
  font-weight: 900;
  background-color: #fff;
  position: relative;
  z-index: 10;
}

.susOperate01-list li:last-child:after {
  padding-bottom: 0;
  display: none;
}

.susOperate01-list li:last-child:before {
  display: none;
}

.susOperate01-list li:after {
  content: "";
  display: block;
  width: 3px;
  height: calc(100% - 10px);
  background-color: #171c5a;
  position: absolute;
  left: 50%;
  margin-left: -1.5px;
  top: 0;
}

.susOperate01-list li:before {
  content: "";
  display: block;
  width: 11px;
  height: 11px;
  border-top: 2px solid #171c5a;
  border-right: 2px solid #171c5a;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  position: absolute;
  bottom: 10px;
  left: 50%;
  margin-left: -6.5px;
}

.susOperate01-list .cellWrap {
  display: table;
  width: 100%;
  table-layout: fixed;
  margin-top: 75px;
}

.susOperate01-list .cell {
  display: table-cell;
  vertical-align: middle;
  font-size: 24px;
}

.susOperate01-list .arrow {
  position: relative;
  width: 100%;
  max-width: 289px;
  height: 1px;
  background-color: #171c5a;
  position: relative;
}

.susOperate01-list .arrow:before,
.susOperate01-list .arrow:after {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  border-top: 2px solid #171c5a;
  border-right: 2px solid #171c5a;
  position: absolute;
  top: 50%;
  margin-top: -5.6px;
}

.susOperate01-list .arrow:before {
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
  left: 0;
}

.susOperate01-list .arrow:after {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  right: 0;
}

.susOperate02List:after {
  content: "";
  display: block;
  clear: both;
}

.susOperate02List {
  margin-top: 100px;
}

.susOperate02List li {
  float: left;
  width: 25%;
  padding: 15px;
}

.susOperate02List li>div {
  border: 1px solid #ccc;
  height: 450px;
  padding: 50px;
  position: relative;
}

.susOperate02List li>div h6 {
  font-size: 30px;
  font-weight: 900
}

.susOperate02List li>div p {
  font-size: 16px;
  position: absolute;
  top: 250px;
  padding-right: 50px;
}

.susOperate03Box {
  border: 1px solid #ccc;
  padding: 70px 60px;
  margin-top: 100px;
}

.susOperate03Box h6 {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 30px;
}

.susOperate03List {
  font-size: 20px;
  margin-top: 60px;
}

.susOperate03List li+li {
  margin-top: 10px;
}

.susOperate03List span {
  display: inline-block;
  width: 120px;
  font-weight: 900;
}

/*04-02.규범 및 실천지침*/
.susNormBtn {
  margin-bottom: 10px;
}

.susNormBtn .ico {
  width: 18px;
}

.susTab:after {
  content: "";
  display: block;
  clear: both;
}

.susTab li {
  float: left;
  width: 25%;
  height: 113px;
  padding-top: 25px;
  padding-left: 45px;
  border: 1px solid #ccc;
  margin-left: -1px;
  margin-top: -1px;
  cursor: pointer;
  font-size: 24px;
  font-weight: 800
}

.susTab li>span {
  display: block;
  font-size: 16px;
}

.susTab li.on {
  background-color: #171c5a;
  color: #fff;
}

.susNormsCon {
  padding: 50px;
}

.susNormsCon:nth-child(n+2) {
  display: none;
}

.susNormsCon h5 {
  font-size: 30px;
  font-weight: 800;
  margin-bottom: 30px;
}

.susNormsCon>div+div {
  margin-top: 25px;
}

.susNormsCon h6 {
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 10px;
}

.susNormsCon>div p {
  font-size: 16px !important;
  line-height: 1.7em;
}

.susNormsCon .num-text>span {
  top: 0;
}

.susNormsCon .num-text+.num-text {
  margin-top: 0;
}

/*04-03.비윤리 신고*/
.unethicalMain {
  background: url(../img/content/unethical_bg.jpg) no-repeat center;
  background-size: cover;
}

.unethicalTit {
  margin-top: 70px;
  margin-bottom: 150px;
  color: #fff;
}

.unethicalTit h3 {
  font-size: 70px;
  font-weight: 800;
  line-height: 1.1em;
  margin-bottom: 20px;
}

.unethicalList:after {
  content: "";
  display: block;
  clear: both;
}

.unethicalList li {
  float: left;
  width: 25%;
  padding: 10px;
}

.unethicalList li>a {
  display: block;
  width: 100%;
  height: 400px;
  padding: 35px 40px;
  position: relative;
  border: 1px solid #beb6b4;
  color: #fff;
}

.unethicalList li>a:after {
  content: "";
  display: block;
  width: 13px;
  height: 13px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  position: absolute;
  left: 35px;
  bottom: 50px;
  z-index: 10;
}

.unethicalList li>a .tit {
  display: block;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.2em;
  margin-bottom: 50px;
}

.unethicalList li>a .tit>span {
  display: block;
}

.unethicalList li>a .text {
  font-size: 20px;
}

.unethicalList li>a:hover {
  background-color: #171c5a;
  border: 1px solid #171c5a;
}

.unethicalReport .num-text+.num-text {
  margin-top: 0;
}

.unethicalReportBox {
  border: 1px solid #ccc;
  margin-top: 50px;
  margin-bottom: 70px;
  padding: 50px 30px;
}

.unethicalReportBox .num-text {
  font-size: 18px;
}

.radioWrap {
  margin-top: 53px;
}

.check {
  position: relative;
  padding-left: 38px;
}

.check+.check {
  margin-left: 20px;
}

.checkMark {
  position: relative;
}

.radioStyle1+.checkMark {
  width: 30px;
  height: 30px;
  border-radius: 100%;
  border: 1px solid #ccc;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -15px;
}

.radioStyle1:checked+.checkMark {
  border: 1px solid #171c5a;
}

.radioStyle1:checked+.checkMark:after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background-color: #171c5a;
  border-radius: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -7px;
  margin-top: -7px;
}

.unethicalReportForm {
  padding: 0 45px;
}

.unethicalReportForm>ul {
  margin-top: 50px;
}

.unethicalReportForm>ul>li {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.unethicalReportForm li+li {
  margin-top: 10px;
}

.unethicalReportForm>ul>li:after {
  content: "";
  display: block;
  clear: both;
}

.unethicalReportForm>ul>li .label {
  display: table-cell;
  width: 25%;
  vertical-align: middle;
  font-size: 20px;
  font-weight: 800;
}

.unethicalReportForm .tel {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.unethicalReportForm .tel>div {
  display: table-cell;
}

.unethicalReportForm .tel>div:first-child {
  width: 33.3333%;
  padding-right: 10px;
}

.unethicalReportForm .mail {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.unethicalReportForm .mail>div {
  display: table-cell;
  vertical-align: middle;
}

.unethicalReportForm .mail>div+div {
  padding-left: 10px;
}

.unethicalReportForm .mail .at {
  width: 25px;
  font-size: 20px;
  font-weight: 800;
}

.filebox {
  width: calc(100% - 50px);
  float: left;
  padding-right: 10px;
}

.filebox input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.filebox label {
  display: inline-block;
  width: 50px;
  border: 1px solid #ccc;
  height: 50px;
  line-height: 50px;
  text-align: center;
}

.unethicalReportForm button {
  display: inline-block;
  width: 50px;
  border: 1px solid #ccc;
  height: 50px;
  line-height: 50px;
}

.filebox .upload-name {
  width: calc(100% - 60px);
  border: 1px solid #ccc;
  height: 50px;
  padding: 0 15px;
  margin-right: 10px;
  float: left;
  background-color: #fff;
}

.unethicalReportForm .c-gray {
  margin-top: 10px;
}

.unethicalReportBt {
  border-top: 1px solid #ccc;
  margin-top: 50px;
  padding-top: 50px;
}

.unethicalReportBt p {
  color: #171c5a;
}

.unethicalReportBt button,
.unethicalReportBt a {
  width: 200px;
  margin-top: 100px;
  vertical-align: middle;
}

.unethicalReportBt a+a,
.unethicalReportBt a+button,
.unethicalReportBt button+a,
.unethicalReportBt button+button {
  margin-left: 15px;
}

#layer_report .pop-layer {
  max-height: 60%;
}

.unethicalResult .box {
  border: 1px solid #ccc;
  padding: 100px 45px 45px;
  margin-bottom: 70px;
}

.unethicalResult .cellWrap {
  display: table;
  width: 100%;
  table-layout: fixed;
  margin-bottom: 50px;
}

.unethicalResult .cell {
  display: table-cell;
  width: 25%;
  vertical-align: baseline;
  font-weight: 800;
  position: relative;
  padding-right: 30px;
}

.unethicalResult .cell:after {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  border-top: 2px solid #171c5a;
  border-right: 2px solid #171c5a;
  position: absolute;
  top: 50%;
  margin-top: -5.6px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  right: 30px;
}

.unethicalResult .cell:last-child:after {
  display: none;
}

.unethicalResultForm {
  padding: 0 45px;
}

.unethicalResultForm ul {
  margin-top: 50px;
}

.unethicalResultForm li {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.unethicalResultForm li+li {
  margin-top: 20px;
}

.unethicalResultForm li .label {
  display: table-cell;
  width: 200px;
  font-weight: 800;
  vertical-align: middle;
  font-size: 20px;
}

.unethicalResultForm input {
  max-width: 800px;
}

.unethicalResultForm button,
.unethicalResultForm a {
  width: 200px;
  margin-top: 100px;
}

.unethicalResultDetailTable {
  border-top: 1px solid #000;
}

.unethicalResultDetailTable .th,
.unethicalResultDetailTable .tbody,
.unethicalResultDetailTable .step {
  border-bottom: 1px solid #ccc;
}

.unethicalResultDetailTable .th {
  padding: 20px 30px;
}

.unethicalResultDetailTable .th th,
.unethicalResultDetailTable .th td {
  padding: 5px 0;
  font-size: 20px;
}

.unethicalResultDetailTable .th td>span {
  margin-right: 15px;
}

.unethicalResultDetailTable .tbody {
  padding: 50px 30px;
}

.unethicalResultDetailTable .tbody h5 {
  margin-bottom: 40px;
  font-weight: 800;
}

.unethicalResultDetailTable .step {
  padding: 25px 25px 50px;
}

.unethicalResultDetailTable .step li {
  display: inline-block;
  width: 150px;
  height: 70px;
  line-height: 70px;
  border-radius: 50px;
  position: relative;
  font-size: 16px;
  color: #999;
  border: 2px solid #ccc;
  margin-right: 20px;
  text-align: center;
}

.unethicalResultDetailTable .step ul {
  margin-top: 15px;
}

.unethicalResultDetailTable .step li.on {
  border: 2px solid #171c5a;
  color: #171c5a;
}

.unethicalResultDetailTable .step li.on:after {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  background: url(../img/common/ico_check.png) #171c5a no-repeat center;
  position: absolute;
  right: -5px;
  top: -5px;
  background-size: 13px;
}

.tfooter {
  padding-top: 50px;
  text-align: center;
}

.tfooter a,
.tfooter button {
  width: 200px;
}

/*신고대상*/
.unethicalTargetList:after {
  content: "";
  display: block;
  clear: both;
}

.unethicalTargetList li {
  float: left;
  width: 25%;
  padding: 0 15px;
}

.unethicalTargetList li a {
  display: block;
  height: 510px;
  position: relative;
  padding: 40px;
  color: #000;
  border: 1px solid #ccc;
}

.unethicalTargetList li a:after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2px solid #000;
  border-right: 2px solid #000;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  left: 40px;
  bottom: 40px;
}

.unethicalTargetList li a>span {
  display: block;
}

.unethicalTargetList .titStyle7 {
  margin-bottom: 60px;
}

.unethicalTargetList .text-style2+.text-style2 {
  margin-top: 30px;
}

.unethicalTargetList li a:hover {
  border: 1px solid #1d2260;
}

/*신고대상 detail*/
.backBtn {
  font-size: 20px;
  font-weight: 800;
  font-family: "NunitoSans", sans-serif;
  color: #000;
  margin-bottom: 40px;
  display: inline-block;
}

.backBtn:hover {
  color: #171c5a;
}

.backBtn:hover:before {
  border-top: 2px solid #171c5a;
  border-right: 2px solid #171c5a;
}

.backBtn:before,
.backBtn:before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-top: 2px solid #000;
  border-right: 2px solid #000;
  -webkit-transform: rotate(-136deg);
  transform: rotate(-136deg);
  vertical-align: middle;
  margin-right: 19px;
  margin-top: -3px;
}
.unethicalTargetDetail .backBtn {
  margin-bottom: 25px;
}

.unethicalTargetDetail .subTitleArea .titStyle5 {
  margin-bottom: 40px;
}

.unethicalTargetDetail .subTitleArea .bar-text {
  padding-left: 15px;
}

.unethicalTargetDetail .subTitleArea .bar-text:before {
  top: 10px;
}

.unethicalTargetDetailCon .tableStyle1 ul li:hover{
  background:transparent;
  color:#000;
}

.unethicalTargetDetailCon .tableStyle1 ul li>div {
  vertical-align: middle;
  padding-bottom: 0;
  padding: 10px 0;
}

.unethicalTargetDetailCon .tableStyle1 ul li>div+div {
  padding-top: 10px;
}

.unethicalTargetDetailCon .tableStyle1 ul li>div:first-child {
  width: 80%;
}

.unethicalTargetDetailCon+.unethicalTargetDetailCon {
  margin-top: 50px;
}

.unethicalTargetDetailCon>p {
  font-size: 20px;
}

.unethicalTargetDetailCon .tableHeader th {
  color: #000 !important;
}

/*신고방법*/
.unethicalWay li {
  border: 1px solid #ccc;
  padding: 50px;
  margin-bottom: 20px;
}

.unethicalWay li h6 {
  margin-bottom: 30px;
}

.unethicalWay li th,
.unethicalWay li td {
  font-size: 16px;
  padding: 5px 0;
}

.unethicalWay li td {
  padding-left: 50px;
}

.unethicalWay li .num-text {
  font-size: 16px;
}

/*신고처리 순서*/
.unethicalSequenceList:after {
  content: "";
  display: block;
  clear: both;
}

.unethicalSequenceList li {
  float: left;
  width: 33.333%;
  margin-bottom: 30px;
  padding: 0 15px
}

.unethicalSequenceList li>div {
  border: 1px solid #ccc;
  padding: 50px;
  min-height:570px;
  transition: all .2s;
  -webkit-transition: all .2s;
  -ms-transition: all .2s;
  -moz-transition: all .2s;
  -o-transition: all .2s;
  position: relative;
  box-sizing:border-box;
}

.unethicalSequenceList li>div:after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2px solid #000;
  border-right: 2px solid #000;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: -19px;
  margin-top: -5.5px;
  transition: transform .2s;
  -webkit-transition: transform .2s;
  -ms-transition: transform .2s;
  -moz-transition: transform .2s;
  -o-transition: transform .2s;
}

.unethicalSequenceList li:last-child>div:after {
  display: none;
}

.unethicalSequenceList h6 {
  font-weight: 900;
}

.unethicalSequenceList h4 {
  margin-bottom:40px;
}

.unethicalSequenceList .bar-text {
  padding-left: 15px;
  line-height: 1.7em;
  font-size: 16px;
}

.unethicalSequenceList .bar-text:before {
  top: 12px;
}

/*신고보상*/
.unethicalRewardList li {
  border: 1px solid #ccc;
  padding: 50px;
}

.unethicalRewardList li+li {
  margin-top: 20px;
}

.unethicalRewardList li h4 {
  margin-bottom: 40px;
}

.unethicalRewardList li h4,
.unethicalRewardList p {
  font-size: 16px;
}

/*--05.고객지원---------*/
.visualCustomer {
  background-image: url(../img/content/visual_customer.jpg);
}

/*05-01.CONTACT US*/
.customerContactWrap+.customerContactWrap {
  margin-top: 50px;
}

.customerContactWrap ul {
  padding-top: 50px;
  margin-top: 30px;
}

.customerContactWrap li {
  position: relative;
  width: 100%;
}

.customerContactWrap li+li {
  margin-top: 50px;
}

.customerContactWrap li:after {
  content: "";
  display: block;
  clear: both;
}

.customerContactWrap li:before {
  content: "";
  display: block;
  position: absolute;
  width: 1px;
  height: 100%;
  background-color: #ccc;
  left: 50%;
}

.customerContactWrap li>div {
  float: left;
  width: 50%;
  padding-left: 50px;
  padding-bottom: 50px;
}

.conArea {
  color: #999;
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 100px;
}

.conAd {
  color: #000;
  font-size: 40px;
  font-weight: 800;
  margin-bottom: 20px;
  letter-spacing: -.2px;
  line-height: 1.2em;
}

.conMobile,
.conTel {
  font-size: 30px;
  letter-spacing: -.2px;
  position: relative;
}

.conMobile>span,
.conTel>span {
}

.conMail {
  font-size: 20px;
  font-family: "NunitoSans", sans-serif;
  min-height: 30px;
  margin-bottom: 40px;
  margin-top: 30px;
}

.conbtnArea a {
  display: inline-block;
  height: 50px;
  line-height: 50px;
}

.conbtnArea a+a {
  margin-left: 20px;
}

.conbtnArea .ico-map {
  background-position: bottom;
  margin-top: -3px;
}

@media (max-width: 1300px) {
  .ico-arrow {
    width: 20px;
    height: 17px;
  }

  .conAd {
    font-size: 25px;
  }

  .conMobile, .conTel {
    font-size: 20px;
  }

  .conMail {
    font-size: 15px;
  }

  .susOperate02List li {
    width: 33.3333%;
  }

  .susTab li {
    width: 33.3333%;
  }

  .unethicalList li>a .tit {
    font-size: 25px;
  }

  .unethicalList li>a .text {
    font-size: 16px;
  }

  .unethicalSequenceList li>div {
    padding: 30px 20px;
  }
}

/*05-02.NEWS-리스트*/
.supportList {
  border-top: 1px solid #000;
  padding-top: 30px;
}

.supportList ul:after {
  content: "";
  display: block;
  clear: both;
}

.supportList li {
  float: left;
  padding: 0 15px 30px;
  width: 25%;
}

.supportList li a {
  position: relative;
  display: block;
  width: 100%;
  height: 500px;
  background-color: #fff;
  transition: all .2s;
  border: 1px solid #ccc;
}

.noticeBg {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all .2s;
  background-size: cover;
  background-position: center;
}

.noticeText {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding: 35px;
}

.noticeTit {
  font-size: 30px;
  line-height: 1.2em;
  font-weight: 800;
  color: #000;
  height: 3.6em;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  display: -webkit-box !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
}

.noticeDate {
  position: absolute;
  bottom: 35px;
  left: 35px;
  font-size: 18px;
  font-family: "NunitoSans", sans-serif;
  font-weight: 800;
  line-height: 1.2em;
  color: #000;
}

.noticeText .moreBtn {
  position: absolute;
  bottom: 35px;
  right: 35px;
}

.supportList li a:hover {
  background-color: #000;
}

.supportList li a:hover .noticeBg {
  opacity: 0.5;
}

.supportList li a:hover .noticeTit,
.supportList li a:hover .noticeDate {
  color: #fff;
}

@media (max-width: 1400px) {

  /*04.지속가능경영*/
  /*04-01.윤리경영*/
  .susAboutContent {
    margin-top: 70px;
  }

  .susAboutContent .left {
    padding-top: 68px;
  }

  .circieBlue {
    width: 200px;
    height: 200px;
    padding-top: 69px;
    font-size: 25px;
  }

  .susAboutContent .right {
    padding-left: 35px;
  }

  .circleBlueLine {
    width: 320px;
    height: 320px;
    font-size: 25px;
    padding-top: 136px;
  }

  .circleBlueLine:after {
    width: 420px;
    height: 420px;
    margin-top: -210px;
    margin-left: -210px;
  }

  .susAboutContent .bar {
    width: 34px;
    height: 3px;
    left: 341px;
  }

  .susAboutContent .bar:before {
    width: 18px;
    height: 18px;
    left: -16px;
    top: -10px;
  }

  .susAboutContent .bar:after {
    width: 18px;
    height: 18px;
    right: -16px;
    top: -10px;
  }

  /*신고대상*/
  .unethicalTargetList li {
    padding: 10px;
  }

  .unethicalTargetList li a {
    padding: 20px;
    height: 540px;
  }

  .unethicalTargetList .titStyle7 {
    margin-bottom: 20px;
  }

  .unethicalTargetList li a:after {
    left: 20px;
    bottom: 20px;
  }
}

@media (max-width: 1300px) {
  .supportList li {
    padding: 0 10px 20px;
  }

  .supportList li a {
    height: 400px;
  }

  .noticeText {
    font-size: 25px;
    padding: 25px 15px;
  }

  .noticeDate {
    left: 15px;
  }

  .noticeText .moreBtn {
    right: 15px;
  }

  .supportList .icoMotion .ico {
    margin-left: 6px;
  }

  .susCharterContent .left .circle {
    font-size: 40px;
    padding-top: 127px;
    width: 300px;
    height: 300px;
  }

  .susCharterContent .right .circle {
    width: 400px;
    height: 400px;
    padding-left: 95px;
    padding-top: 182px;
  }

  .susCharterContent .right .circle p,
  .susCharterContent .right .circle h6 {
    font-size: 25px;
  }
}

@media (max-width: 1024px) {
  .supportList li {
    width: 33.3333%;
  }

  .c-bwtsProductList li {
    width: 33.3333%;
  }

  .susAboutContent .left {
    padding-top: 0;
    float: inherit;
    text-align: center;
  }

  .circieBlue {
    display: block;
    margin: 0 auto;
  }

  .circieBlue+.circieBlue {
    margin-left: 0;
    margin: -30px auto 0;
  }

  .susAboutContent .bar {
    transform: rotate(90deg);
    position: relative;
    top: inherit;
    left: inherit;
    margin: 19px auto 0;
  }

  .susAboutContent .right {
    float: inherit;
    padding-left: 0;
  }

  .circleBlueLine {
    margin: 21px auto 0;
  }

  /*신고대상*/
  .unethicalTargetList li {
    width: 50%;
  }

  .unethicalTargetList li a {
    height: 304px;
  }

  .unethicalSequenceList li {
    width: 50%;
    margin-bottom: 20px;
  }

  .unethicalSequenceList li>div {
    min-height: 400px;
  }

  .unethicalSequenceList li:nth-child(2)>div:after {
    display: none;
  }
}

/*05-03.NEWS-상세*/
.supportDetail {
  border-top: 1px solid #000;
}

/*--06.채용정보---------*/
.visualRecruit {
  background-image: url(../img/content/visual_recruit.jpg);
}

/*06-01.인재상*/
.recruitModelCon .textArea {
  padding: 250px 0;
  transition: padding .2s;
  -webkit-transition: padding .2s;
  -ms-transition: padding .2s;
  -moz-transition: padding .2s;
  -o-transition: padding .2s;
  width: 100%;
}

.recruitModelCon:after {
  content: "";
  display: block;
  clear: both;
}

.recruitModelCon:nth-child(2n-1) {
  background-color: #f7f7fa;
}

.recruitModelCon:nth-child(2n-1) .textArea {
  padding-right: 50%;
}

.recruitModelCon:nth-child(2n) .textArea {
  padding-left: 50%;
}

.recruitModelCon .modelTitleArea {
  position: relative;
  margin-bottom: 70px;
}

.recruitModelCon .modelTitleArea h3 {
  font-size: 50px;
  font-weight: 800;
}

.recruitModelCon .modelTitleArea p {
  text-transform: uppercase;
  font-size: 30px;
  font-weight: 800;
  font-family: "NunitoSans", sans-serif;
  position: absolute;
  bottom: -40px;
}

.recruitModelCon01 .textArea {
  background: url(../img/content/recruit_modelImg01.png) no-repeat right bottom;
  background-size: 40%;
}

.recruitModelCon02 .textArea {
  background: url(../img/content/recruit_modelImg02.png) no-repeat left center;
  background-size: 25%;
}

.recruitModelCon03 .textArea {
  background: url(../img/content/recruit_modelImg03.png) no-repeat right center;
  background-size: 40%;
}

.recruitModelCon04 .textArea {
  background: url(../img/content/recruit_modelImg04.png) no-repeat left bottom;
  background-size: 40%;
}

/*06-02.인사제도*/
.recruitRuleTop {
  background: url(../img/content/recruitRule_img.png) no-repeat right 200px bottom;
  background-size: 20%;
  padding-bottom: 50px;
}

.recruitRuleTop p {
  font-size: 30px;
  margin-top: 150px;
  font-weight: 800;
  font-family: "NunitoSans", sans-serif;
  width: 60%;
}

.recruitRuleTop p>span {
  display: inline-block;
}

.recruitRule .line {
  width: 100%;
  height: 1px;
  background-color: #ccc;
}

.recruitRuleBt {
  padding-top: 80px;
}

.recruitRuleCon h5 {
  color: #111aa1;
  font-family: "NunitoSans", sans-serif;
  text-transform: uppercase;
  margin-bottom: 30px;
}

.recruitRuleCon h5+p {
  font-size: 20px;
  margin-bottom: 50px;
}

.recruitRuleCon h6 {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 20px;
}

.recruitRuleList01 {
  margin-bottom: 100px;
  margin-top: 50px;
}

.recruitRuleList01:after {
  content: "";
  display: block;
  clear: both;
  position: relative;
}

.recruitRuleList01 li {
  float: left;
  width: calc(50% - 10px);
  width: -webkit-calc(50% - 10px);
  width: -moz-calc(50% - 10px);
  border: 1px solid #171c5a;
  font-size: 50px;
  color: #171c5a;
  font-weight: 800;
  position: relative;
  overflow: hidden;
  padding-left: 50px;
  line-height: 128px;
  padding-top: 70px;
  transition: all .2s;
  -webkit-transition: all .2s;
  -ms-transition: all .2s;
  -moz-transition: all .2s;
  -o- transition: all .2s;
  border-radius: 20px;
}

.recruitRuleList01 li:first-child {
  margin-right: 20px;
}

.recruitRuleList01 li:after {
  font-size: 200px;
  color: #171c5a;
  opacity: 0.1;
  position: absolute;
  right: 3%;
  bottom: 0;
  font-weight: 800;
  font-family: "NunitoSans", sans-serif;
  line-height: 0.65em;
  -webkit-transition: all .2s;
  -ms-transition: all .2s;
  -moz-transition: all .2s;
  -o- transition: all .2s;
}

.recruitRuleList01 li:first-child:after {
  content: "1";
}

.recruitRuleList01 li:last-child:after {
  content: "2";
}

.recruitRuleList02:after {
  content: "";
  display: block;
  clear: both;
}

.recruitRuleList02 li {
  width: calc(20% - 43px);
  width: -webkit-calc(20% - 43px);
  width: -moz-calc(20% - 43px);
  margin-right: 50px;
  display: inline-block;
  border: 1px solid #171c5a;
  font-size: 50px;
  color: #171c5a;
  font-weight: 800;
  text-align: center;
  height: 200px;
  line-height: 200px;
  position: relative;
  -webkit-transition: all .2s;
  -ms-transition: all .2s;
  -moz-transition: all .2s;
  -o- transition: all .2s;
}

.recruitRuleList02 li:after {
  content: "";
  background: url(../img/content/recruitArrow.png) no-repeat right center;
  top: 50%;
  margin-top: -20px;
  background-size: 100%;
  width: 30px;
  height: 45px;
  position: absolute;
  right: -46px;
  -webkit-transition: all .2s;
  -ms-transition: all .2s;
  -moz-transition: all .2s;
  -o- transition: all .2s;
}

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

.recruitRuleList02 li:last-child:after {
  display: none;
}

.recruitRuleCon02 {
  margin-top: 90px;
}

.recruitRuleSlider {
  margin-top: 50px;
}

.recruitRuleSlider:after {
  content: "";
  display: block;
  clear: both;
}

.recruitRuleSlider li {
  float: left;
  width: calc(33.3333% - 30px);
  max-width: 370px;
  margin-right: 30px;
}

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

/*
.recruitRuleSlider .swiper-slide {
  width: 370px;
}
*/
.recruitSliderNum {
  text-align: right;
  padding-right: 50px;
  color: #171c5a;
  opacity: 0.1;
  font-size: 150px;
  font-weight: 800;
  line-height: 0.6em;
}

.recruitSliderCon {
  border: 1px solid #171c5a;
  height: 450px;
  background: #fff;
  position: relative;
  z-index: 10;
  padding: 80px 50px;
  border-radius: 20px;
}

.recruitSliderTit {
  font-weight: 800;
  color: #171c5a;
  font-size: 50px;
  line-height: 1.2em;
  margin-bottom: 60px;
}

.recruitSliderText {
  font-size: 20px;
}

.recruitSliderText>span {
  display: block;
  vertical-align: baseline;
}

.recruitRuleCircle {
  margin-top: 60px;
}

.recruitRuleCircle ul {
  display: inline-block;
}

.recruitRuleCircle ul+ul {
  margin-left: -50px;
}

.recruitRuleCircle li {
  width: 285px;
  height: 285px;
  border-radius: 100%;
  background-color: #fff;
  border: 1px solid #171c5a;
  padding-top: 65px;
  padding-left: 60px;
  display: inline-block;
  transition: all .2s;
  -webkit-transition: all .2s;
  -ms-transition: all .2s;
  -moz-transition: all .2s;
  -o-transition: all .2s;
}

.recruitRuleCircle li+li {
  margin-left: -50px;
}

.recruitRuleCircle li h4 {
  font-size: 50px;
  font-weight: 900;
  color: #171c5a;
}

.recruitRuleCircle li p {
  font-size: 20px;
  color: #171c5a;
}

@media (max-width: 1518px) {
  .recruitSliderTit {
    font-size: 42px;
  }
}

@media (max-width: 1400px) {
  .recruitRuleCircle li {
    width: 205px;
    height: 205px;
    padding-top: 55px;
    padding-left: 35px;
  }

  .recruitRuleCircle li h4 {
    font-size: 35px;
  }

  .recruitRuleCircle li p {
    font-size: 15px;
  }

  .recruitSliderCon {
    padding: 30px;
  }

  .recruitSliderTit {
    font-size: 34px;
  }
}

@media (max-width: 1125px) {
  .recruitRuleList01 li {
    font-size: 32px;
    padding-left: 25px;
    line-height: 88px;
    padding-top: 45px;
  }

  .recruitRuleList01 li:after {
    font-size: 120px;
  }

  .recruitRuleList02 li {
    width: calc(20% - 23px);
    width: -webkit-calc(20% - 23px);
    width: -moz-calc(20% - 23px);
    font-size: 32px;
    height: 85px;
    line-height: 85px;
    margin-right: 25px;
  }

  .recruitRuleList02 li:after {
    width: 15px;
    right: -24px;
  }
}

@media (max-width: 960px) {
  .recruitRuleSlider li {
    margin-right: 0;
    width: 100%;
    height: auto;
    max-width: 100%;
  }

  .recruitRuleSlider li+li {
    margin-top: 40px;
  }

  .recruitSliderCon {
    height: auto;
    padding: 40px;
  }

  .recruitSliderNum {
    text-align: left;
    padding-left: 30px;
  }

  .recruitSliderTit {
    margin-bottom: 30px;
  }

  .recruitSliderText>span {
    display: inline-block;
  }
}

/*06-03.복리후생*/
.recruitWelfareList {
  margin-top: 60px;
}

.recruitWelfareList:after {
  content: "";
  display: block;
  clear: both;
}

.recruitWelfareList li {
  float: left;
  width: calc(50% - 15px);
  width: -webkit-calc(50% - 15px);
  width: -moz-calc(50% - 15px);
  height: 300px;
  border: 1px solid #171c5a;
  padding: 50px;
  margin-bottom: 30px;
}

.recruitWelfareList li:nth-child(2n-1) {
  margin-right: 30px;
}

.recruitWelfareList li img {
  max-width: 180px;
  width: 35%;
}

.recruitWelfareList li p {
  margin-top: 10px;
  font-size: 20px;
}

.recruitWelfareList li p b {
  font-size: 24px;
  font-weight: 800;
}

/*06-04.채용공고-리스트*/
.recruitList .titStyle5 {
  margin-bottom: 50px;
}

.recruitList .searchTab02Wrap {
  border-top: 1px solid #000;
}

.recruitList .searchTab02Wrap+.searchTab02Wrap {
  border-top: none;
}

.recruit-end a,
.recruit-end span,
.recruit-end div {
  color: #999 !important;
}

.recruitList .tableList li>div {
  text-align: center;
}

.recruitList .tableList li>div:first-child {
  width: 15%;
}

.recruitList .tableList li>div:nth-child(2) {
  width: 10%;
}

.recruitList .tableList li>div:nth-child(3) {
  width: 15%;
}

.recruitList .tableList li>div:nth-child(4) {
  width: 30%;
}

.recruitList .tableList li>div:nth-child(5) {
  width: 20%;
}

.recruitList .tableList li>div:last-child {
  width: 10%;
}

.recruitDetail .detailHeader>div {
  display: inline-block;
  vertical-align: middle;
  font-size: 30px;
  font-weight: 800;
}

.recruitCompany:last-child {
  padding-right: 30px;
}

.recruitCompany:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 1px;
  height: 28px;
  background-color: #ccc;
  margin: 0 15px -8px 10px;
}

.recuritDue {}

/*06-05.채용공고-상세*/
.detailHeader {
  padding: 30px;
  border-bottom: 1px solid #ccc;
}

.detailHeader h3 {
  font-size: 50px;
  font-weight: 800;
  line-height: 1.3em;
  margin-bottom: 15px;
  letter-spacing: -.2px;
}

.detailHeader p {
  font-family: "NunitoSans", sans-serif;
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -.2px;
}

.detailBody {
  padding: 30px;
}

.detailBody img {
  max-width: 100%;
}

.detailft {
  padding-top: 70px;
}

.detailft .btn {
  min-width: 200px;
}

.detailft .btn+.btn {
  margin-left: 20px;
}

.recruitDetail .detailHeader>div {
  display: inline-block;
  vertical-align: middle;
  font-size: 30px;
  font-weight: 800;
}

.recruitCompany:last-child {
  padding-right: 30px;
}

.recruitCompany:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 1px;
  height: 28px;
  background-color: #ccc;
  margin-left: 5px;
  margin-right: 15px;
}

.recuritDue {
  padding-right: 30px;
}

/*--07.FOOTER 항목---------*/
.visualFooter {
  background-image: url(../img/content/visual_footer.jpg);
}

/*07-01.사이트맵*/
.sitemapCon {
  border-bottom: 1px solid #ccc;
  padding: 35px 0;
}

.sitemapCon:after {
  content: "";
  display: block;
  clear: both;
}

.sitemapCon h2 {
  float: left;
  width: 25%;
  font-size: 30px;
  font-weight: 800;
}

.sitemapCon h2+ul {
  float: left;
  width: 75%;
}

.sitemapCon h2+ul:after {
  content: "";
  display: block;
  clear: both;
}

.sitemapCon h2+ul>li {
  float: left;
  width: 25%;
}

.sitemapCon h2+ul>li>a {
  font-size: 20px;
  font-weight: 800;
  color: #000;
  padding-top: 10px;
  display: block;
}

.sitemapCon h2+ul>li>a+ul {
  margin-top: 30px;
}

.sitemapCon h2+ul>li>a+ul a {
  font-size: 18px;
  color: #171c5a;
  opacity: 0.7;
}

.sitemapCon h2+ul>li>a+ul a:hover {
  opacity: 1;
}

/*07-02.법적고지*/
.legalWrap .titStyle5 {
  border-bottom: 1px solid #ccc;
  padding-bottom: 60px;
  margin-bottom: 60px;
}

.legalCon+.legalCon {
  margin-top: 50px;
}

.legalCon b {
  display: block;
  margin-bottom: 35px;
}

/*07-03.개인정보처리방침*/
/*07-04.개인정보취급방침*/
.privacyWrap .text-style2{
  border-bottom: 1px solid #ccc;
  padding-bottom: 60px;
  margin-bottom: 60px;
}
.privacyWrap .text-style2.mt20{
  margin-top: 20px;
}


@media (max-width:959px) {

  /*--00.공통----------*/
  /*00-01. subVisual*/
  /*00-02. subNav*/
  /*00-03. subWrap*/
  /*00-04. formStyle*/
  /*00-05. table*/
  .tableHeader {
    display: none;
  }

  .mTit {
    display: block;
  }

  .tableList li {
    border-bottom: 1px solid #ccc;
    padding: 20px 0;
  }

  .tableStyle1 ul li:hover {
    background-color: transparent;
  }

  .tableStyle1 ul li>div {
    display: block;
    font-size: 18px;
    padding-bottom: 0;
  }

  .tableStyle1 ul li a:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 5px;
    height: 5px;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    margin-left: 10px;
    margin-top: -3px;
  }

  .tableScrollWrap {
    overflow-y: auto;
  }

  .tableScroll {
    min-width: 894px;
  }

  .tableStyle2 thead tr th {
    font-size: 16px;
  }

  .tableStyle2 tbody td {
    font-size: 15px;
  }

  .tableList .downloadBtn {
    height: 40px;
    line-height: 40px;
  }

  .tableList .downloadBtn:after {
    display: none;
  }

  .titrow span{
    line-height: 30px;
  }

  .titrow .circle {
    width: 30px;
    height: 30px;
  }

  /*--01.통합검색----------*/
  .subSearchBox {
    margin: 0 auto 10px;
  }

  .subSearchBox input[type="text"] {
    height: 60px;
    font-size: 16px;
    padding-right: 70px;
  }

  .subSearchBox button {
    width: 60px;
    height: 60px;
    line-height: 60px;
  }

  /*01-01.통합검색-Product*/
  /*01-02.통합검색-Recruit*/
  .searchContentTable .titStyle5 {
    margin-bottom: 30px;
  }

  .searchContentTable+.searchContentTable {
    border-top: 1px solid #000;
    padding-top: 30px;
  }

  .searchContentTable .tableStyle1 ul li:last-child {
    border-bottom: none;
  }

  .searchContentTable .tableStyle1 ul li>div {
    text-align: left;
    width: 100% !important;
  }

  .searchContentLocation .tableStyle1 ul li>div:first-child{
    font-size: 24px;
    color: #000;
    padding-bottom: 20px;
  }

  .searchContentRecruit .tableStyle1 ul li>div:nth-child(2),
  .searchContentLocation .tableStyle1 ul li>div:nth-child(2) {
    font-size: 25px;
  }

  .searchContentLocation .tableStyle1 ul li>div:nth-child(2) {
    font-size: 18px;
  }

  .searchContentRecruit .tableStyle1 ul li>div:nth-child(3),
  .searchContentLocation .tableStyle1 ul li>div:nth-child(2) {
    padding-bottom: 0;
  }

  .searchContentRecruit .tableStyle1 ul li>div:last-child,
  .searchContentLocation .tableStyle1 ul li>div:last-child {
    padding-top: 0;
  }

  .searchContentLocation .tableStyle1 ul li>div:last-child {
    padding-top: 15px;
  }

  /*01-03.통합검색-News*/
  /*01-04.통합검색-Contact*/
  /*01-05.통합검색-검색결과 없음*/
  /*--
  02.기업소개----------*/
  /*   02-01.HWBC*/
  .leftFloating {
    display: none;
  }

  .aboutHwbc03Circle {
    display: block;
    margin: 30px auto;
    text-align: center;
    width: 250px;
  }

  .aboutHwbc03Circle01,
  .aboutHwbc03Circle02 {
    float: inherit;
    width: 250px;
    height: 250px;
    padding-top: 44px;
    margin-left: 0 !important;
  }

  .aboutHwbc03Circle02 {
    transition: margin-top .5s;
    -webkit-transition: margin-top .5s;
    -ms-transition: margin-top .5s;
    -moz-transition: margin-top .5s;
    -o-transition: margin-top .5s;
  }

  .aboutHwbc03Circle .dot01 {
    top: 50%;
    margin-top: -10px;
    left: 57px;
  }

  .aboutHwbc03Circle .dot02 {
    top: 50%;
    margin-top: -10px;
    left: 190px;
  }

  .aboutHwbc03Circle.move .aboutHwbc03Circle02 {
    margin-top: -40px;
  }

  .aboutHwbc03Circle02:after {
    width: 300px;
    height: 300px;
    margin-left: -150px;
    margin-top: -150px;
  }

  .aboutHwbc04-left {
    width: 100%;
  }

  .aboutHwbc04Con {
    padding: 0 0 60px 0;
  }

  .aboutHwbc04-leftContent {
    position: inherit;
  }

  .aboutHwbc04-left h4 {
    font-size: 40px;
  }

  .aboutHwbc04-right {
    margin-top: 50px;
    width: 100%;
    background-size: 120%;
  }

  .aboutHwbc04-right {
    width: 500px;
    height: 500px;
    overflow: hidden;
    background: url(../img/content/hwbc_img04_m.png) center top no-repeat;
    background-size: 100%;
  }

  .aboutHwbc04-right .circle01,
  .aboutHwbc04-right .circle02,
  .aboutHwbc04-right .circle03,
  .aboutHwbc04-right .circle04,
  .aboutHwbc04-right .circle05,
  .aboutHwbc04-right .circle06 {
    display: none;
  }

  /*02-02.CEO 인사말*/
  /*02-03.연혁*/

  /*--03.사업소개----------*/
  /*03-01.사업분야*/
  .businessGlovilleWrap>div:first-child{
    width: 100%;
    display: block;
  }

  .businessGlovilleWrap>div:last-child{
    display: block;
  }

  /*03-02.업무현황*/
  .businessWorkWrap{
    display: block;
  }

  .businessWorkWrap .list {
    width: 100%;
    display: block
  }

  .businessGloville .titStyle5 {
    margin-bottom: 0;
  }


  /*03-03.주요해외파트너*/
  .globalPartner .titStyle3 {
    font-size: 16px;
    margin-top: 10px;
  }

  .globalPartner .tableStyle1{
    margin-bottom: 50px;
  }

  .globalPartner ul li>div {
    width: 100% !important;
    text-align: left;
  }

  .globalPartner li>div:nth-child(6),
  .globalPartner li>div:nth-child(7),
  .globalPartner li>div:last-child {
    display: inline-block;
    vertical-align: middle;
    width: auto !important;
    margin-right: 5px;
    padding-right: 0;
    padding-left: 0;
  }

  /*03-04.주요거래처*/
  .businessClientList li {
    width: 33.3333%;
  }

  /*03-05.협력업체*/

  /*--04.지속가능경영---------*/
  /*04-01.윤리경영*/
  .susCharterContent .left .circle {
    font-size: 40px;
    padding-top: 102px;
    width: 250px;
    height: 250px;
  }

  .susCharterContent .right .circle {
    width: 350px;
    height: 350px;
    padding-left: 85px;
    padding-top: 159px;
  }

  .susCharterContent .right .circle p,
  .susCharterContent .right .circle h6 {
    font-size: 23px;
  }

  .susOperate02List li>div {
    padding: 30px;
  }

  .susOperate03Box {
    margin-top: 30px;
    padding: 20px;
  }

  .susOperate03Box h6 {
    font-size: 16px;
  }

  .susOperate03List li {
    font-size: 16px;
  }

  .susOperate03List li+li {
    margin-top: 20px;
  }

  .susOperate03List span {
    display: block;
    width: auto;
  }

  /*04-02.규범 및 실천지침*/
  .susTab li {
    width: 50%;
    height: 70px;
    line-height: 68px;
    padding-top: 0;
    padding-left: 20px;
    font-size: 20px;
  }

  .susTab li>span {
    display: inline-block;
    vertical-align: middle;
    margin-right: 20px;
  }

  /*04-03.비윤리 신고*/
  .unethicalTit {
    margin-top: 30px;
    margin-bottom: 50px;
  }

  .unethicalTit h3 {
    font-size: 50px;
  }

  .unethicalList li {
    width: 50%;
  }

  .unethicalList li>a {
    height: 286px;
  }

  .unethicalList li>a .tit>span {
    display: inline-block;
    margin-left: 5px;
  }

  .unethicalResult .box {
    padding: 30px;
    margin-bottom: 40px;
  }

  .unethicalResult .cellWrap {
    margin-bottom: 25px;
  }

  .unethicalResultForm {
    padding: 0 30px;
  }

  .unethicalResultDetailTable .th th,
  .unethicalResultDetailTable .th td {
    font-size: 16px;
  }

  .unethicalResultDetailTable .step li {
    width: 130px;
    height: 50px;
    line-height: 50px;
    margin-right: 15px;
  }

  .unethicalSequenceList .titStyle7 {
    font-size: 30px;
  }

  .unethicalTargetDetail .subTitleArea .titStyle5 {
    margin-bottom: 25px;
  }

  .unethicalTargetDetailCon .tableHeader {
    display: block;
  }

  .unethicalTargetDetailCon .tableList li {
    padding: 10px 0;
    border-bottom: none;
  }

  .unethicalTargetDetailCon .tableHeader th:last-child {
    display: none;
  }

  .unethicalTargetDetailCon .tableStyle1 ul li>div {
    padding: 0;
    font-size: 16px !important;
      width:100% !important;
  }

  .unethicalTargetDetailCon .num-text {
    font-size: 16px !important;
  }

  .unethicalTargetDetailCon .tableStyle1 ul li>div:first-child .mTit {
    display: none;
  }

  .unethicalTargetDetailCon .mTit {
    color: #000;
    display: inline-block;
    font-size: 16px;
    font-weight: 800;
    margin-right: 10px;
  }

  .unethicalTargetDetailCon>p {
    font-size: 16px;
  }

  .unethicalTargetDetailCon .tableHeader th {
    text-align: left;
  }

  /*--05.고객지원---------*/
  /*05-01.CONTACT US*/
  .customerContactWrap+.customerContactWrap {
    margin-top: 30px;
  }

  .customerContactWrap ul {
    padding: 0;
    margin-top: 15px;
  }

  .customerContactWrap li>div {
    float: inherit;
    width: 100%;
    border-bottom: 1px solid #ccc;
    padding: 30px 10px;
  }

  .customerContactWrap li:before {
    display: none;
  }

  .conArea {
    margin-bottom: 30px;
  }

  .conMail {
    margin-top: 10px;
    margin-bottom: 30px;
    min-height: inherit;
  }

  .conbtnArea a+a {
    margin-left: 10px;
  }

  /*05-02.NEWS-리스트*/
  .supportList li a {
    background-color: #000;
  }

  .noticeTit {
    font-size: 25px;
    color: #fff;
  }

  .noticeDate {
    color: #fff;
    font-size: 16px;
  }

  .noticeBg {
    opacity: 0.6;
  }

  .noticeBt .btn {
    margin-left: 124px;
  }

  /*05-03.NEWS-상세*/

  /*--06.채용정보---------*/
  /*06-01.인재상*/
  .recruitModelCon .textArea {
    padding: 110px 0;
  }

  /*06-02.인사제도*/
  .recruitRuleTop {
    background: url(../img/content/recruitRule_img.png) no-repeat right 30px bottom;
    background-size: 185px;
    padding-bottom: 200px;
  }

  .recruitRuleTop p {
    font-size: 20px;
    margin-top: 20px;
    width: 100%;
  }

  .recruitRuleTop p>span {
    display: block;
  }

  .recruitRuleBt {
    padding-top: 40px;
  }

  .recruitRuleCon h5 {
    margin-bottom: 20px;
  }

  .recruitRuleCon h5+p {
    font-size: 16px;
    margin-bottom: 30px;
  }

  .recruitRuleCircle ul+ul {
    margin-left: 0;
    margin-top: -30px;
  }

  .recruitRuleCircle li {
    padding-top: 45px;
  }

  /*06-03.복리후생*/
  /*06-04.채용공고-리스트*/
  .recruitList .tableList li>div:first-child {
    width: auto !important;
    display: inline-block;
    color: #999;
  }

  .recruitList .tableList li>div:nth-child(2) {
    width: auto !important;
    display: inline-block;
    color: #999;
  }

  .recruitList .tableList li>div:nth-child(2) .mTit {
    display: none;
  }

  .recruitList .tableList li>div:nth-child(2):before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 1px;
    height: 12px;
    background-color: #999;
    margin-left: 5px;
    margin-right: 12px;
    margin-top: -2px;
  }

  .recruitList .tableList li>div:nth-child(n+3) {
    width: 100% !important;
    text-align: left !important;
  }

  .recruitList .tableList li>div:nth-child(2) {
    padding-top: 0;
  }

  .recruitDetail .detailHeader>div {
    font-size: 16px;
  }

  .recruitCompany:before {
    height: 10px;
    margin-top: -3px;
  }

  /*06-05.채용공고-상세*/
  .detailHeader {
    padding: 15px 0;
  }

  .detailHeader h3 {
    font-size: 25px;
  }

  .detailHeader p {
    font-size: 16px;
  }

  .detailBody {
    padding: 20px 0;
  }

  .detailft {
    padding-top: 50px;
  }

  /*--07.FOOTER 항목---------*/
  /*07-01.사이트맵*/
  /*07-02.법적고지*/
  .legalWrap .titStyle5 {
    padding-bottom: 30px;
    margin-bottom: 30px;
  }

  .legalCon b {
    margin-bottom: 10px;
  }

  .legalCon+.legalCon {
    margin-top: 30px;
  }

  /*07-03.개인정보처리방침*/
}

@media (max-width:767px) {

  /*-- 00.공통--------------------*/
  /*00-01. subVisual*/
  .subVisual {
    height: 246px;
  }

  .subVisual .visualText {
    bottom: 30px;
  }

  .subVisual .visualText p {
    font-size: 13px;
  }

  .subVisual .visualText h3 {
    font-size: 30px;
  }

  .subWrap {
    margin-top: 246px;
  }

  .subContent {
    padding-top: 25px;
    padding-bottom: 70px;
  }

  .conPd {
    padding-left: 3.4%;
    padding-right: 3.4%;
  }

  /*00-02. subNav*/
  .subNavWrap.fixed.fixed2 {
    top: 50px;
  }

  .subNav p {
    height: 45px;
    line-height: 45px;
    font-size: 16px;
  }

  .subNav+.subNav p:before {
    height: 12px;
    margin-top: -6px;
  }

  .subNav ul {
    top: 45px;
  }

  .subNav ul li a {
    font-size: 16px;
  }

  .subTitleArea {
    margin-bottom: 30px;
  }

  /*00-03. subWrap*/
  .subWrap {
    margin-top: 246px;
  }

  .subContent {
    padding-top: 25px;
    padding-bottom: 70px;
  }

  /*00-04 formStyle*/
  .tabSliderWrap {
    padding: 0;
    margin: 20px 0;
  }

  .tabSliderWrap .swiper-slide a {
    height: 50px;
    line-height: 50px;
    font-size: 16px;
  }

  .tabSliderWrap .swiper-button-next,
  .tabSliderWrap .swiper-button-prev {
    display: none;
  }

  .searchTab02Wrap {
    padding: 10px 0;
  }

  .checkBtn {
    /* margin-right: 15px; */
  }

  .checkBtn>span {
    height: 35px;
    line-height: 35px;
    font-size: 14px;
    padding: 0 15px;
  }

  /*00-05 table*/
  .pagerWrap {
    margin-top: 60px;
  }

  .pagerWrap ul {
    padding: 0 10px;
  }

  .pagerWrap li {
    height: 50px;
    padding: 14px 0;
  }

  .pagerWrap li a {
    font-size: 15px;
    margin: 0 12px;
  }

  .ico-prev,
  .ico-next {
    width: 10px;
    height: 10px;
  }

  .ico-prev {
    margin-top: 7px;
  }

  /*--01.통합검색----------*/
  .visualSearch.subVisual {
    height: 246px;
  }

  .searchTab01Wrap .swiper-slide a {
    font-size: 20px;
    padding: 15px 20px 15px 0
  }

  /* 01-01.통합검색-Product*/
  .searchContentProWrap .cellWrap,
  .searchContentProWrap .cellWrap .left,
  .searchContentProWrap .cellWrap .right {
    display: block;
    width: 100%;
    padding: 0;
  }

  .searchContentProImg {
    height: 300px;
  }

  .searchContentProWrap .cellWrap .right>p {
    display: none;
  }

  .searchContentProWrap li a {
    padding: 0;
  }

  .proName {
    position: inherit;
    left: 0;
    margin-bottom: 20px;
  }

  .searchContentProWrap .cellWrap .right>ul>li {
    padding: 20px 0;
  }

  .searchContentProWrap .cellWrap .right>ul>li+li {
    border-top: 1px solid #ccc;
  }

  .searchContentProWrap li a ul li {
    display: block;
  }

  .searchContentProWrap li a ul li+li {
    margin-top: 10px;
  }

  .searchContentProWrap li:hover a {
    background-color: #fff;
  }

  /*01-02.통합검색-Recruit*/
  /*01-03.통합검색-News*/
  /*01-04.통합검색-Contact*/
  /*01-05.통합검색-검색결과 없음*/
  .noResult {
    font-size: 25px;
  }

  /*--02.기업소개----------*/
  /*02-02.CEO 인사말*/
  .ceoName p {
    font-size: 14px;
  }

  .ceoName span {
    display: inline-block;
    font-size: 22px;
    margin-left: 10px;
  }

  /*02-03.연혁*/
  .historyContent {
    margin-top: 80px;
  }

  .historySlider .swiper-slide:first-child {
    margin-left: 3.4%;
  }

  .historySlider .swiper-slide {
    width: 390px;
  }

  .historyWrap {
    padding-left: 25px;
  }

  /*--03.사업소개----------*/
  /*03-01.사업분야*/
  /*03-02.업무현황*/
  /*03-03.주요해외파트너*/
  /*03-04.주요거래처*/
  .businessClientList li {
    width: 50%
  }

  /*03-05.협력업체*/

  /*--04.지속가능경영---------*/
  /*04-01.윤리경영*/
  .susAboutContent {
    margin-top: 30px;
    margin-bottom: 100px;
  }

  .circieBlue {
    width: 160px;
    height: 160px;
    padding-top: 55px;
    font-size: 20px;
  }

  .circleBlueLine {
    width: 300px;
    height: 300px;
    font-size: 20px;
  }

  .susCharterContent {
    margin-bottom: 30px;
  }

  .susOperate01 .susOperate01-list{
    margin-top:30px;
  }

  .susOperate01-list li {
    padding-bottom: 50px;
  }

  .susOperate01-list .bedge {
    width: 200px;
    height: 70px;
    line-height: 68px;
    font-size: 20px;
    border: 1px solid #171c5a
  }

  .susOperate01-list .cellWrap {
    margin-top: 35px;
  }

  .susOperate01-list .cell {
    font-size: 16px;
  }

  .susOperate02List {
    margin-top: 30px;
  }

  .susOperate02List li {
    width: 50%;
  }

  .susOperate02List li>div {
    height: 320px;
  }

  .susOperate02List li>div h6 {
    font-size: 20px;
  }

  .susOperate02List li>div p {
    top: 145px;
  }

  /*04-02.규범 및 실천지침*/
  .susTab li {
    width: 100%;
    border: none;
    border-bottom: 1px solid #000;
    height: 50px;
    line-height: 50px;
    font-size: 18px;
  }

  .susTab li>span {
    font-size: 14px;
  }

  .susNormsCon {
    padding: 30px 15px;
  }

  .susNormsCon h5 {
    display: none;
  }

  /*04-03.비윤리 신고*/
  .unethicalTit h3 {
    font-size: 35px;
  }

  .unethicalList li {
    width: 100%;
    margin-bottom: 10px;
  }

  .unethicalList li>a {
    height: inherit;
    padding: 25px 20px 90px;
  }

  .unethicalList li>a .tit {
    margin-bottom: 20px;
  }

  .unethicalList li>a:after {
    left: 20px;
    bottom: 30px;
  }

  .unethicalReportBox .num-text {
    font-size: 15px;
  }

  .unethicalReportBox {
    padding: 30px;
    margin-top: 20px;
    margin-bottom: 30px;
  }

  .unethicalReportForm {
    padding: 0;
  }

  .unethicalReportForm>ul {
    margin-top: 30px;
  }

  .unethicalReportForm>ul>li {
    display: block;
  }

  .unethicalReportForm>ul>li .label {
    display: block;
    width: 100%;
    font-size: 16px;
    margin-bottom: 10px;
  }

  .unethicalReportForm .mail>div {
    display: block;
    float: left;
  }

  .unethicalReportForm .mail>div:first-child,
  .unethicalReportForm .mail>div:nth-child(3) {
    width: calc(50% - 13px);
  }

  .unethicalReportForm .mail .at {
    width: 26px;
    line-height: 50px;
  }

  .unethicalReportForm .mail>div:last-child {
    width: 100%;
    margin-top: 10px;
    padding-left: 0;
  }

  .unethicalReportForm>ul>li+li {
    margin-top: 20px;
  }

  .unethicalReportBt button,
  .unethicalReportBt a {
    width: 120px;
  }

  #layer_report .pop-layer {
    max-height: 55%;
  }

  .unethicalResult .cell {
    text-align: center;
  }

  .unethicalResult .cell:after {
    right: 10px;
  }

  .unethicalResultForm ul {
    margin-top: 30px;
  }

  .unethicalResultForm li,
  .unethicalResultForm li .label {
    display: block;
  }

  .unethicalResultForm li .label {
    margin-bottom: 10px;
    font-size: 16px;
  }

  .unethicalResultForm button,
  .unethicalResultForm a {
    margin-top: 30px;
  }

  .unethicalResultDetailTable .th th,
  .unethicalResultDetailTable .th td {
    vertical-align: top;
  }

  .unethicalResultDetailTable .th td>span {
    margin-right: 0;
    display: block;
  }

  .unethicalResultDetailTable .th td>span+span {
    margin-top: 5px;
  }

  .unethicalResultDetailTable .step li {
    display: block;
    width: 200px;
    margin: 0 auto;
  }

  .unethicalResultDetailTable .step li+li {
    margin-top: 10px;
  }

  /*신고대상*/
  .unethicalTargetList li {
    width: 100%;
    padding: 0;
    margin-bottom: 20px;
  }

  .unethicalTargetList li a {
    height: auto;
    padding: 25px 25px 60px;
  }

  .unethicalTargetList .text-style2+.text-style2 {
    margin-top: 15px;
  }

  /*신고방법*/
  .unethicalWay li {
    padding: 20px;
  }

  .unethicalWay li td {
    padding-left: 20px;
  }

  .unethicalWay li th,
  .unethicalWay li td,
  .unethicalWay li .num-text {
    font-size: 14px;
    vertical-align: top;
  }

  /*신고순서*/
  .unethicalSequenceList li {
    width: 100%;
    float: inherit;
    padding: 0;
    margin-bottom: 30px;
  }

  .unethicalSequenceList li>div {
    min-height: inherit;
  }

  .unethicalSequenceList li:nth-child(2)>div:after {
    display: block;
  }

  .unethicalSequenceList li>div:after {
    top: inherit;
    bottom: -18px;
    left: 50%;
    margin-left: -5px;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
  }

  .unethicalSequenceList h4 {
    margin-bottom: 40px;
  }

  /*신고보상*/
  .unethicalRewardList li {
    padding: 20px 30px;
  }

  .unethicalRewardList li+li {
    margin-top: 10px;
  }

  /*--05.고객지원---------*/
  /*05-01.CONTACT US*/
  /*05-03.NEWS-리스트*/
  .supportList li {
    width: 50%;
  }

  .supportList li a {
    height: 300px;
  }

  /*05-04.NEWS-상세*/

  /*--06.채용정보---------*/
  /*06-01.인재상*/
  .recruitModelCon .textArea {
    padding-top: 67px;
    padding-bottom: 50%;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .recruitModelCon .modelTitleArea {
    margin-bottom: 30px;
  }

  .recruitModelCon .modelTitleArea h3 {
    font-size: 24px;
  }

  .recruitModelCon .modelTitleArea p {
    font-size: 16px;
    position: static;
    bottom: inherit;
  }

  .recruitModelCon01 .textArea {
    background: url(../img/content/recruit_modelImg01.png) no-repeat center bottom;
    background-size: 50%;
  }

  .recruitModelCon02 .textArea {
    background: url(../img/content/recruit_modelImg02.png) no-repeat center bottom 30px;
    background-size: 30%;
  }

  .recruitModelCon03 .textArea {
    background: url(../img/content/recruit_modelImg03.png) no-repeat center bottom 30px;
    background-size: 55%;
  }

  .recruitModelCon04 .textArea {
    background: url(../img/content/recruit_modelImg04.png) no-repeat center bottom;
    background-size: 55%;
  }

  /*06-02.인사제도*/
  .recruitRuleSlider .swiper-slide {
    width: 300px;
  }

  .recruitSliderCon {
    padding: 50px 35px;
    /*height: 360px;*/
  }

  .recruitSliderNum {
    font-size: 140px;
    padding-right: 20px;
  }

  .recruitSliderTit {
    font-size: 40px;
  }

  .recruitSliderText {
    font-size: 16px;
  }

  .recruitRuleCircle {
    margin-top: 30px;
  }

  .recruitRuleCircle ul {
    display: block;
    text-align: center;
  }

  .recruitRuleCircle li {
    display: block;
    margin: 0 auto;
    width: 266px;
    height: 266px;
    text-align: center;
    padding-left: 0;
    padding-top: 65px;
  }

  .recruitRuleCircle li+li {
    margin: -30px auto 0;
  }

  .recruitRuleCircle li h4 {
    margin-bottom: 20px;
  }

  /*06-03.복리후생*/
  .recruitWelfareList {
    margin-top: 30px;
  }

  .recruitWelfareList li {
    float: inherit;
    margin-right: 0 !important;
    width: 100%;
    margin-bottom: 10px;
    height: auto;
    padding: 20px 30px;
  }

  .recruitWelfareList li p {
    font-size: 16px;
  }

  .recruitWelfareList li p b {
    font-size: 20px;
  }

  /*06-04.채용공고-리스트*/
  /*06-05.채용공고-상세*/
  .recruitDetail .detailHeader>div {
    display: block;
  }

  .recruitDetail .detailft .btn {
    min-width: 100px;
  }

  .recruitDetail .detailft .btn+.btn {
    margin-left: 15px;
  }

  /*--07.FOOTER 항목---------*/
  /*07-01.사이트맵*/
  .sitemapCon h2 {
    width: 50%;
    font-size: 28px;
  }

  .sitemapCon h2+ul {
    width: 50%;
  }

  .sitemapCon h2+ul>li {
    float: inherit;
    width: 100%;
  }

  .sitemapCon h2+ul>li+li {
    margin-top: 15px;
  }

  .sitemapCon h2+ul>li>a {
    font-size: 16px;
  }

  .sitemapCon h2+ul>li>a+ul {
    margin-top: 10px;
  }

  .sitemapCon h2+ul>li>a+ul li {
    margin-bottom: 5px;
  }

  .sitemapCon h2+ul>li>a+ul a {
    font-size: 14px;
  }

  /*07-02.법적고지*/
  /*07-03.개인정보처리방침*/
}

@media (max-width:640px) {

  /*-- 00.공통--------------------*/
  /*00-01. subVisual*/
  /*00-02. subNav*/
  /*00-03. subWrap*/
  /*--01.통합검색----------*/
  /* 01-01.통합검색-Product*/
  /*01-02.통합검색-Recruit*/
  /*01-03.통합검색-News*/
  /*01-04.통합검색-Contact*/
  /*01-05.통합검색-검색결과 없음*/
  /*--02.기업소개----------*/
  /*02-01.HWBC*/
  /*02-02.CEO 인사말*/
  /*02-03.연혁*/
  /*--03.용접사업----------*/
  /*03-02.용접재료-상세*/
  /*03-03.용접재료 비교표*/
  /*03-04.용접재료 DOWNLOAD (Approval Status / Product Catalog)*/
  /*--04.지속가능경영---------*/
  /*04-01.윤리경영*/
  .susCharterContent .left .circle {
    font-size: 20px;
    padding-top: 86px;
    width: 200px;
    height: 200px;
  }

  .susCharterContent .right .circle {
    width: 316px;
    height: 316px;
    padding-left: 75px;
    padding-top: 142px;
  }

  .susCharterContent .right .circle h6,
  .susCharterContent .right .circle p {
    font-size: 20px;
  }

  .susOperate02List li {
    width: 100%;
    padding: 0;
    margin-bottom: 20px;
  }

  .susOperate02List li>div {
    height: auto;
  }

  .susOperate02List li>div h6 {
    margin-bottom: 50px;
  }

  .susOperate02List li>div p {
    position: static;
  }

  /*04-02.규범 및 실천지침*/
  /*04-03.비윤리 신고*/
  .unethicalResult .box {
    padding: 15px;
  }

  .unethicalResult .cellWrap:after {
    content: "";
    display: block;
    clear: both;
  }

  .unethicalResult .cellWrap {
    display: block;
  }

  .unethicalResult .cell {
    width: auto;
    display: inline-block;
    text-align: left;
    float: left;
    padding-left: 30px;
    padding-right: 0;
    margin-top: 10px;
  }

  .unethicalResult .cell:first-child {
    padding-left: 0;
  }

  .unethicalResult .cell:first-child:after {
    display: none;
  }

  .unethicalResult .cell:last-child:after {
    display: inline-block;
  }

  .unethicalResult .cell p,
  .unethicalResult .cell h4 {
    display: inline-block;
  }

  .unethicalResult .cell:after {
    left: 10px;
    right: inherit;
    width: 5px;
    height: 5px;
  }

  /*--05.고객지원---------*/
  /*05-01.CONTACT US*/
  /*05-02.NEWS-리스트*/
  .supportList li {
    width: 100%;
  }

  .supportList li a {
    height: 200px;
  }

  .noticeTit {
    font-size: 25px;
    line-height: 1.2em;
    height: 2.4em;
    -webkit-line-clamp: 2;
  }

  /*05-03.NEWS-상세*/
  /*--06.채용정보---------*/
  /*06-01.인재상*/
  /*06-02.인사제도*/
  .recruitRuleList01 li {
    margin-right: 0 !important;
    width: 100%;
  }

  .recruitRuleList01 li+li {
    margin-top: 20px;
  }

  .recruitRuleList02 {
    border: 1px solid #171c5a;
    text-align: center;
    padding: 50px 0;
  }

  .recruitRuleList02 li {
    float: inherit;
    width: 100%;
    padding-bottom: 60px;
    height: auto;
    line-height: inherit;
    border: none;
    font-size: 24px;
    margin-right: 0;
  }

  .recruitRuleList02 li:last-child {
    padding-bottom: 0;
  }

  .recruitRuleList02 li:after {
    width: 24px;
    height: 46px;
    top: inherit;
    bottom: 13px;
    left: 50%;
    right: inherit;
    margin-left: -12px;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
  }

  /*06-03.복리후7*/
  /*06-04.채용공고-리스트*/
  /*06-05.채용공고-상세*/
  /*--09.FOOTER 항목---------*/
  /*07-01.사이트맵*/
  /*07-02.법적고지*/
  /*07-03.개인정보처리방침*/
}

@media (max-width: 560px) {
  .globalDotNa {
    top: 15%;
  }

  .globalDotSa {
    bottom: 58%;
  }

  .globalDotSWa {
    top: 33%;
    margin-top: -10px;
  }

  .globalDotSea {
    top: 33%;
    margin-top: -10px;
  }

  .aboutHwbc04-right {
    margin-top: 50px;
    width: 100%;
    background-size: 120%;
  }
}

@media (max-width:480px) {

  /*-- 00.공통--------------------*/
  /*00-01. subVisual*/
  /*00-02. subNav*/
  /*00-03. subWrap*/
  /*--01.통합검색----------*/
  /* 01-01.통합검색-Product*/
  /*01-02.통합검색-Recruit*/
  /*01-03.통합검색-News*/
  /*01-04.통합검색-Contact*/
  /*01-05.통합검색-검색결과 없음*/
  /*--02.기업소개----------*/
  /*02-01.HWBC*/
  /*02-02.CEO 인사말*/
  /*02-03.연혁*/
  /*--03.사업소개----------*/
  /*03-01.사업분야*/
  /*03-02.업무현황*/
  /*03-03.주요해외파트너*/
  /*03-04.주요거래처*/
  /*03-05.협력업체*/
  /*--04.지속가능경영---------*/
  /*04-01.윤리경영*/
  .susCharterContent .left .circle {
    font-size: 20px;
    padding-top: 62px;
    width: 140px;
    height: 140px;
  }

  .susCharterContent .right .circle {
    width: 228px;
    height: 228px;
    padding-left: 75px;
    padding-top: 100px;
  }

  .susCharterContent .right .circle p {
    font-size: 13px;
  }

  .susCharterContent .right .circle h6 {
    font-size: 15px;
  }

  /*04-02.규범 및 실천지침*/
  /*04-03.비윤리 신고*/
  /*--05.고객지원---------*/
  /*05-01.CONTACT US*/
  /*05-02.NEWS-리스트*/
  /*05-03.NEWS-상세*/
  /*--6.채용정보---------*/
  /*06-01.인재상*/
  /*06-02.인사제도*/
  /*06-03.복리후생*/
  /*06-04.채용공고-리스트*/
  /*06-05.채용공고-상세*/
  /*--07.FOOTER 항목---------*/
  /*07-01.사이트맵*/
  /*07-02.법적고지*/
  /*07-03.개인정보처리방침*/
}






/*03-07.유통*/
.distributionVisual{ background-image:url(../img/content/distribution_visual.png); }
.distribution{ width:width:calc(100% - 60px); margin:20px 30px 50px 30px; }
.distribution h1.title{ font-size:48px; font-weight:900; }

.distribution ul.ul-banner{ margin-top:60px; }
.distribution ul.ul-banner li{ float:left; width:420px; height:420px; margin:0px 36px 36px 0px; }
.distribution ul.ul-banner li.li-1{ background:url(../img/content/distribution_main_img01.png) center center; background-size:100%; background-repeat:no-repeat; }
.distribution ul.ul-banner li.li-2{ background:url(../img/content/distribution_main_img02.png) center center; background-size:100%; background-repeat:no-repeat; }
.distribution ul.ul-banner li.li-3{ background:url(../img/content/distribution_main_img03.png) center center; background-size:100%; background-repeat:no-repeat; }
.distribution ul.ul-banner li.li-4{ background:url(../img/content/distribution_main_img04.png) center center; background-size:100%; background-repeat:no-repeat; margin-right:0px; }
.distribution ul.ul-banner li h2{ font-size:34px; font-weight:900; color:#fff; text-align:center; margin-top:38%; }
.distribution ul.ul-banner li p{ font-size:18px; font-weight:800; color:#fff; text-align:center; margin-top:1%; }
.distribution ul.ul-banner li.li-1 h2{ margin-top:44%; }

.distribution hr.both{ clear:both; width:100%; height:1px; margin:0px; padding:0px; border:0px; }
.distribution hr.line{ clear:both; width:100%; margin:40px 0px 60px 0px; padding:0px; border:0px; border-bottom:1px solid #ccc; }
.distribution hr.line0{ clear:both; width:100%; margin:20px 0px; padding:0px; border:0px; border-bottom:0px solid #ddd; }

.distribution .conBox{ clear:both; margin-top:60px; }
.distribution .conBox-left{ float:left; width:500px; }
.distribution .conBox-left img.img{ width:100%; }
.distribution .conBox-left img.mo{ display:none; }
.distribution .conBox-left h1{ font-size:48px; font-weight:900; color:#000; margin-bottom:10px; }
.distribution .conBox-left a.his{ font-size:18px; font-weight:400; color:#000; }
.distribution .conBox-left a.his img{ margin-right:5px; }
.distribution .conBox-right{ float:right; width:calc(100% - 560px); margin-left:60px; }
.distribution h1.conBox-title{ font-size:48px; font-weight:900; }
.distribution h2.conBox-title2{ font-size:28px; font-weight:900; margin:30px 0px; }
.distribution p.conBox-txt{ font-size:20px; font-weight:400; color:#999; }
.distribution p.conBox-txt span.bold{ font-weight:700; color:#000; }
.distribution p.conBox-txt2{ padding-top:15px; font-size:18px; font-weight:400; color:#999; }

.distribution ul.conBox-menu{ margin-top:60px; }
.distribution ul.conBox-menu li{ position:relative; float:left; width:calc(50% - 15px); max-width:520px; height:80px; margin:0 15px 15px 0px; background-color:#141731; }
.distribution ul.conBox-menu li p{ font-size:24px; font-weight:900; color:#fff; margin:23px 0px 0px 25px; }
.distribution ul.conBox-menu li p span{ font-size:14px; font-weight:400; color:#999; margin-left:20px; }
.distribution ul.conBox-menu li img.ico{ position:absolute; top:30px; right:20px; }

.distribution ul.conBox-menu2{ margin-top:60px; }
.distribution ul.conBox-menu2 li{ float:left; width:15.8%; height:55px; margin:0px 9px 10px 0px; background-color:#e5e5e5; line-height:55px; text-align:center; font-size:24px; font-weight:900; color:#999; cursor:pointer; }
.distribution ul.conBox-menu2 li.on{ background-color:#141731; color:#fff; }

.distribution .conBox-in{ width:100%; padding-top:60px; }
.distribution .conBox-in .view-img img{ width:48.5%; margin-right:1%; margin-bottom:20px; }
.distribution .conBox-in .conBox-sub-title{ font-size:24px; font-weight:900; color:#000; margin-bottom:30px; }
.distribution .conBox-in .conBox-sub-title2{ font-size:28px; font-weight:900; color:#000; margin:30px 0px 10px 0px; }
.distribution .conBox-in .conBox-sub-title3{ font-size:32px; font-weight:900; color:#000; margin:0px 0px 10px 0px; }
.distribution .conBox-in-left{ float:left; width:48%; margin-right:2%; }

.distribution .conBox-in .mo{ display:none; }

.distribution .tableBox{ width:100%; overflow-x:scroll; }
.distribution .tableBox .conBox-table{ width:1296px; }
.distribution .tableBox .conBox-table tr{ border-bottom:1px solid #ddd; }
.distribution .tableBox .conBox-table tr:last-child{ border-bottom:1px solid #111; }
.distribution .tableBox .conBox-table tr.sborder{ border-bottom:1px solid #000; }
.distribution .tableBox .conBox-table th{ padding:30px 10px; background-color:#141731; color:#fff; font-size:18px; font-weight:400; text-align:center; }
.distribution .tableBox .conBox-table td{ padding:30px 15px; color:#999; font-size:16px; font-weight:400; text-align:center; }
.distribution .tableBox .conBox-table td.f{ font-weight:800; color:#000; text-align:left; }
.distribution .tableBox .conBox-table tr.rowspan th{ padding:15px 10px; }

@media(max-width:1200px){
	.distribution .conBox{ clear:both; margin-top:60px; }
	.distribution .conBox-left{ width:340px; }
	.distribution .conBox-right{ width:calc(100% - 400px); margin-left:60px; }
	.distribution ul.conBox-menu{ margin-top:60px; }
}
@media(max-width:980px){
	.distribution h1.title{  }
	.distribution ul.ul-banner{ margin-top:40px; }
	.distribution ul.ul-banner li{ width:47%; margin:0px 3% 20px 0px; }
	.distribution ul.ul-banner li.li-1{  }
	.distribution ul.ul-banner li.li-2{ margin-right:0px; }
	.distribution ul.ul-banner li.li-3{  }
	.distribution ul.ul-banner li.li-4{ margin-right:0px; }
	.distribution ul.ul-banner li h2{ margin-top:38%; }
	.distribution ul.ul-banner li span{ font-size:18px; margin-top:1%; }

	.distribution .conBox{ clear:both; margin-top:60px; }
	.distribution .conBox-left{ width:100%; }
	.distribution .conBox-left img.pc{ display:none; }
	.distribution .conBox-left img.mo{ display:block; }
	.distribution .conBox-right{ width:100%; margin-left:0px; margin-top:50px; }
	.distribution ul.conBox-menu{ margin-top:50px; }
	
	.distribution ul.conBox-menu2 li{ width:32%; margin:0px 0% 10px 1%; }
	.distribution ul.conBox-menu2 li.f{ margin-left:0; }
	
	.distribution .conBox-in .view-img img{ width:100%; margin-right:0; margin-bottom:20px; }
	.distribution .conBox-in-left{ width:100%; margin-right:0; margin-bottom:40px; }
	.distribution .conBox-in .pc{ display:none; }
	.distribution .conBox-in .mo{ display:block; }
}
@media(max-width:720px){
	.distribution h1.title{ font-size:36px; }
	.distribution ul.ul-banner{ margin-top:60px; }
	.distribution ul.ul-banner li{ width:47%; margin:0px 3% 20px 0px; }
	.distribution ul.ul-banner li.li-1{  }
	.distribution ul.ul-banner li.li-2{ margin-right:0px; }
	.distribution ul.ul-banner li.li-3{  }
	.distribution ul.ul-banner li.li-4{ margin-right:0px; }
	.distribution ul.ul-banner li h2{ font-size:24px; margin-top:38%; }
	.distribution ul.ul-banner li span{ font-size:18px; margin-top:1%; }

	.distribution ul.conBox-menu2 li{ width:49%; margin:0px 0% 10px 1%; font-size:16px;}
	.distribution ul.conBox-menu2 li.f{ margin-left:0; }
	
	.distribution ul.conBox-menu{ margin-top:50px; }
	.distribution ul.conBox-menu li{ width:100%; max-width:100%; margin:0 0px 15px 0px; }
}

/*03-07.물류*/
.logisticsVisual{ background-image:url(../img/content/logistics_visual.png); }
.logistics{ width:calc(100% - 60px); margin:20px 30px 50px 30px; }
.logistics h1.title{ font-size:48px; font-weight:900; }

.logistics ul.ul-banner{ margin-top:60px; }
.logistics ul.ul-banner li{ float:left; width:420px; height:420px; margin:0px 36px 36px 0px; }
.logistics ul.ul-banner li.li-1{ background:url(../img/content/logistics_main_img01.png) center center; background-size:100%; background-repeat:no-repeat; }
.logistics ul.ul-banner li.li-2{ background:url(../img/content/logistics_main_img02.png) center center; background-size:100%; background-repeat:no-repeat; }
.logistics ul.ul-banner li.li-3{ background:url(../img/content/logistics_main_img03.png) center center; background-size:100%; background-repeat:no-repeat; }
.logistics ul.ul-banner li.li-4{ background:url(../img/content/logistics_main_img04.png) center center; background-size:100%; background-repeat:no-repeat; margin-right:0px; }
.logistics ul.ul-banner li h2{ font-size:34px; font-weight:900; color:#fff; text-align:center; margin-top:45%; }
/* .logistics ul.ul-banner li.li-1 h2{ margin-top:44%; } */

.logistics hr.both{ clear:both; width:100%; height:1px; margin:0px; padding:0px; border:0px; }
.logistics hr.line{ clear:both; width:100%; margin:40px 0px 60px 0px; padding:0px; border:0px; border-bottom:1px solid #ccc; }
.logistics hr.line0{ clear:both; width:100%; margin:20px 0px; padding:0px; border:0px; border-bottom:0px solid #ddd; }

.logistics .conBox{ clear:both; margin-top:60px; }
.logistics .conBox-left{ float:left; width:500px; }
.logistics .conBox-left img.img{ width:100%; }
.logistics .conBox-left img.mo{ display:none; }
.logistics .conBox-left h1{ font-size:48px; font-weight:900; color:#000; margin-bottom:10px; }
.logistics .conBox-left a.his{ font-size:18px; font-weight:400; color:#000; }
.logistics .conBox-left a.his img{ margin-right:5px; }
.logistics .conBox-right{ float:right; width:calc(100% - 560px); margin-left:60px; }
.logistics h1.conBox-title{ font-size:48px; font-weight:900; }
.logistics h2.conBox-title2{ font-size:28px; font-weight:900; margin:30px 0px; }

.logistics p.conBox-txt{ font-size:20px; font-weight:400; color:#999; }
.logistics p.conBox-txt span.bold{ font-weight:700; color:#000; }
.logistics p.conBox-txt2{ padding-top:15px; font-size:18px; font-weight:400; color:#999; }
.logistics p.conBox-txt3{ padding-bottom:30px; font-size:18px; font-weight:400; color:#999; }


.logistics ul.conBox-menu{ margin-top:60px; }
.logistics ul.conBox-menu li{ position:relative; float:left; width:calc(50% - 15px); max-width:520px; height:80px; margin:0 15px 15px 0px; background-color:#141731; }
.logistics ul.conBox-menu li p{ font-size:24px; font-weight:900; color:#fff; margin:23px 0px 0px 25px; }
.logistics ul.conBox-menu li p span{ font-size:14px; font-weight:400; color:#999; margin-left:20px; }
.logistics ul.conBox-menu li img.ico{ position:absolute; top:30px; right:20px; }

.logistics ul.conBox-menu2{ margin-top:60px; }
.logistics ul.conBox-menu2 li{ float:left; width:205px; height:55px; margin:0px 6px 10px 0px; background-color:#e5e5e5; line-height:55px; text-align:center; font-size:24px; font-weight:900; color:#999; cursor:pointer; }
.logistics ul.conBox-menu2 li.on{ background-color:#141731; color:#fff; }

.logistics ul.conBox-menu2w{ margin-top:60px; }
.logistics ul.conBox-menu2w li{ float:left; width:450px; height:55px; margin:0px 6px 10px 0px; background-color:#e5e5e5; line-height:55px; text-align:center; font-size:24px; font-weight:900; color:#999; cursor:pointer; }
.logistics ul.conBox-menu2w li.on{ background-color:#141731; color:#fff; }

.logistics .conBox-in{ width:100%; padding-top:60px; }
.logistics .conBox-in .view-img img{ width:48.5%; margin-right:1%; margin-bottom:20px; }
.logistics .conBox-in .conBox-sub-title{ font-size:24px; font-weight:900; color:#000; margin-bottom:30px; }
.logistics .conBox-in .conBox-sub-title2{ font-size:28px; font-weight:900; color:#000; margin:30px 0px 10px 0px; }
.logistics .conBox-in .conBox-sub-title3{ font-size:32px; font-weight:900; color:#000; margin:0px 0px 10px 0px; }
.logistics .conBox-in .conBox-sub-title4{ font-size:32px; font-weight:900; color:#000; margin:10px 0px 0px 0px; }
.logistics .conBox-in .conBox-sub-title5{ font-size:20px; font-weight:900; color:#000; margin:10px 0px 0px 0px; }


.logistics .conBox-in2{ width:100%; padding-top:0px; }
.logistics .conBox-in2 .view-img img{ width:100%; margin-right:0%; margin-bottom:20px; }
.logistics .conBox-in2 .conBox-sub-title{ font-size:24px; font-weight:900; color:#000; margin-bottom:30px; }
.logistics .conBox-in2 .conBox-sub-title2{ font-size:28px; font-weight:900; color:#000; margin:30px 0px 10px 0px; }
.logistics .conBox-in2 .conBox-sub-title3{ font-size:32px; font-weight:900; color:#000; margin:0px 0px 10px 0px; }
.logistics .conBox-in2 .conBox-sub-title4{ font-size:32px; font-weight:900; color:#000; margin:10px 0px 0px 0px; }

.logistics .conBox-in-left{ float:left; width:48%; margin-right:2%; }
.logistics .conBox-in-left2{ float:left; width:23%; margin-right:2%; }
.logistics .conBox-in-left2 img{padding-bottom:10px; }


.logistics .conBox-in .mo{ display:none; }

.logistics .tableBox{ width:100%; overflow-x:scroll; }
.logistics .tableBox .conBox-table{ width:1296px; }
.logistics .tableBox .conBox-table tr{ border-bottom:1px solid #ddd; }
.logistics .tableBox .conBox-table tr:last-child{ border-bottom:1px solid #111; }
.logistics .tableBox .conBox-table tr.sborder{ border-bottom:1px solid #000; }
.logistics .tableBox .conBox-table th{ padding:30px 10px; background-color:#141731; color:#fff; font-size:18px; font-weight:400; text-align:center; }
.logistics .tableBox .conBox-table td{ padding:30px 15px; color:#999; font-size:16px; font-weight:400; text-align:center; }
.logistics .tableBox .conBox-table td.f{ font-weight:800; color:#000; text-align:left; }
.logistics .tableBox .conBox-table tr.rowspan th{ padding:15px 10px; }

@media(max-width:1200px){
	.logistics .conBox{ clear:both; margin-top:60px; }
	.logistics .conBox-left{ width:340px; }
	.logistics .conBox-right{ width:calc(100% - 400px); margin-left:60px; }
	.logistics ul.conBox-menu{ margin-top:60px; }
}
@media(max-width:980px){
	.logistics h1.title{  }
	.logistics ul.ul-banner{ margin-top:40px; }
	.logistics ul.ul-banner li{ width:47%; margin:0px 3% 20px 0px; }
	.logistics ul.ul-banner li.li-1{  }
	.logistics ul.ul-banner li.li-2{ margin-right:0px; }
	.logistics ul.ul-banner li.li-3{  }
	.logistics ul.ul-banner li.li-4{ margin-right:0px; }
	.logistics ul.ul-banner li h2{ margin-top:38%; }

	.logistics .conBox{ clear:both; margin-top:60px; }
	.logistics .conBox-left{ width:100%; }
	.logistics .conBox-left img.pc{ display:none; }
	.logistics .conBox-left img.mo{ display:block; }
	.logistics .conBox-right{ width:100%; margin-left:0px; margin-top:50px; }
	.logistics ul.conBox-menu{ margin-top:50px; }
	
	.logistics ul.conBox-menu2 li{ width:32%; margin:0px 0% 10px 1%; }
	.logistics ul.conBox-menu2 li.f{ margin-left:0; }

	.logistics ul.conBox-menu2w li{ width:100%; margin:0px 0% 10px 1%; }
	.logistics ul.conBox-menu2w li.f{ margin-left:0; }

	
	.logistics .conBox-in .view-img img{ width:100%; margin-right:0; margin-bottom:20px; }
	.logistics .conBox-in-left{ width:100%; margin-right:0; margin-bottom:40px; }
	.logistics .conBox-in .pc{ display:none; }
	.logistics .conBox-in .mo{ display:block; }

	.logistics .conBox-in2 .view-img img{ width:100%; margin-right:0; margin-bottom:20px; }
	.logistics .conBox-in-left{ width:100%; margin-right:0; margin-bottom:40px; }
	.logistics .conBox-in-left2{ width:48%; margin-right:2%; margin-bottom:40px; }

	.logistics .conBox-in .conBox-sub-title4{ font-size:24px; font-weight:900; color:#000; margin:10px 0px 0px 0px; }

	.logistics .conBox-in2 .pc{ display:none; }
	.logistics .conBox-in2 .mo{ display:block; }

}
@media(max-width:720px){
	.logistics h1.title{ font-size:36px; }
	.logistics ul.ul-banner{ margin-top:60px; }
	.logistics ul.ul-banner li{ width:47%; margin:0px 3% 20px 0px; }
	.logistics ul.ul-banner li.li-1{  }
	.logistics ul.ul-banner li.li-2{ margin-right:0px; }
	.logistics ul.ul-banner li.li-3{  }
	.logistics ul.ul-banner li.li-4{ margin-right:0px; }
	.logistics ul.ul-banner li h2{ font-size:24px; margin-top:38%; }
	
	.logistics ul.conBox-menu{ margin-top:50px; }
	.logistics ul.conBox-menu li{ width:100%; max-width:100%; margin:0 0px 15px 0px; }


}