/*서브공통css*/
#content {overflow: hidden;}
.sub_mv {width: 100%; height: 560px; position: relative; overflow: hidden;}
.sub_mv > div {height: 100%; width: 100%; text-align: center; padding-top: 20rem; animation: sub_mv_ani 2s ease-out;}

@keyframes sub_mv_ani {
  0% {transform: scale(1.2);}
  100% {transform: scale(1);}
}  
.sub_mv_tit { position: absolute; left: 50%; transform: translateX(-50%); top: 60%; transition: 1s; opacity: 0; width: 100%;}
.sub_mv_tit.active {top: 45%; opacity: 1;}
.sub_mv_tit h2 {font-size: 4rem; color: #fff;}
.sub_mv_tit p {font-size: 2rem; color: #fff;}

.s_center {max-width: 1410px; margin: 0 auto; padding: 180px 30px; position: relative;}

/*서브내비게이션*/
.sub_nav {max-width: 1410px; height: 85px; padding: 0 30px; margin: 0 auto; border-bottom: 1px solid #d1d1d1; align-items: center; flex-wrap: wrap;}
.sub_gnb {display: flex; align-items: center;}
.home_btn {background: url(img/home_icon2.png) no-repeat 0 0 / contain; width: 25px; height: 25px; margin-right: 20px; transition: 0.3s;}
.home_btn:hover {background: url(img/home_icon.png) no-repeat 0 0 / contain;}
.home_btn::after{content: ""; display: inline-block; background: #d1d1d1; height: 18px; width: 1px; position: relative; top: 3px; left: 35px;}
.sub_gnb h2 {position: relative; font-size: 2rem; color: #222; line-height: 5rem;}

.tab_menu {flex-wrap: wrap;}
.tab_menu li {padding: 0 20px;}
.tab_menu li a {font-size: 1.8rem; line-height: 85px; color: #666; transition: 0s;}
.tab_menu li.on {border-bottom: 2px solid #f66700;}
.tab_menu li.on a {color: #f66700; font-weight: 700; }
.tab_menu li a:hover {color: #f66700; font-weight: 700; transform: scale(1.2);}

/*서브MV영역*/
.sub_tit {position: relative; left: 0; padding-bottom: 100px;}
/*서브타이틀 애니메이션*/
[data-aos="sub_tit_ani"]{
    transform:translate3d(-100px,0,0);
    opacity: 0;
    transition-property: transform, opacity;
    transition-delay: .5s;
    &.aos-animate {
      transform: translate3d(0,0,0);
      opacity: 1;
    }
  }
.sub_tit h2 {font-size: 7.5rem; color: #0052a4; margin-bottom: 6rem;}
.sub_tit p {font-size: 4.5rem; color: #333;}
.bold {font-weight: 700;}

/*서브공통css 끝*/

/*서브01-회사소개*/
.mv_sub01 {background: url(img/sub01/sub01_mv.jpg) no-repeat center / cover;}
.con_bg {background: #f1f1f1;}
.text_box {max-width: 1410px; padding: 0 30px; margin: 0 auto; flex-wrap: wrap; position: relative;}
.sub01_txt {width: 50%; padding: 100px 0;}
.sub01_txt h3 {font-size: 2.5rem; line-height: 4.5rem; margin-bottom: 4rem;}
.sub_p {font-size: 2rem; line-height: 4rem; margin-bottom: 3.5rem; text-align: justify; color: #333;}

.img {width: 50%; padding-left: 12rem; position: relative; top: -7rem;}
/*img.active => aos 애니메이션으로 대체
.img {width: 50%; padding-left: 12rem; position: relative; top: 10rem; transition: 1s;}
.img.active {top: -7rem;}*/

.img img{width: 100%;}
.img p {font-size: 2.4rem; line-height: 3.6rem; margin-top: 6rem;}
.img p::after {content: ""; display: block; background: url(img/sub01_bg2.png) no-repeat 0 0; width: 181px; height: 70px; right: -20rem; bottom: 7rem; position: relative;}

/*서브02-사업분야*/
.mv_sub02 {background: url(img/sub02/sub02_mv.png) no-repeat center / cover;}
/*.sub02_bg {background: url(img/sub02/sub02_bg.png) no-repeat 0 0 / contain; height: 700px; opacity: 0.2; position: absolute; right: 0;}*/
.sub02_c1 {display: flex; flex-wrap: wrap; padding-bottom: 10rem;}
.con_left {width: 50%; height: 930px; background: url(img/sub02/sub02_con01_1.jpg) no-repeat center;}
.con_right {width: 50%; padding: 8rem 0rem 0 10rem; text-align: justify;}
.con_right .num {font-size: 2rem; font-weight: bold; margin-bottom: 5rem;}
.con_right h2 {font-size: 7.5rem; line-height: 8.5rem; color: #333; margin-bottom: 11rem; text-align: left;}
.con_right h3 {font-size: 2.5rem; color: #0052a4; margin-bottom: 3rem;}
.con_right p {font-size: 2rem; line-height: 3.2rem; color: #666;}
.con_bottom {margin-top: 7rem; display: flex; flex-wrap: wrap; position: relative;}
.con_bottom div {width: 48%; height: 370px; margin-top: 3rem;}
.con_bottom div.left_img {background: url(img/sub02/sub02_con01_2.jpg) no-repeat center;}
.con_bottom div.right_img {background: url(img/sub02/sub02_con01_3.jpg) no-repeat center;}
.con_bottom p {margin-top: 7rem; font-size: 2.1rem; line-height: 3.2rem; color: #666; margin-bottom: 10rem; text-align: justify;}
/*실적 더보기 버튼*/
.con_bottom .plusBtn {position: absolute; right: 0; bottom: 0; font-size: 2rem; padding-bottom: 5px; color: #333; transition: 0.3s;}
/*플러스아이콘 스팬으로 대체
.con_bottom .more_btn::after{content: "";display: inline-block; background: url(img/plus_btn.png) no-repeat; width: 28px; height: 28px; position: relative; top: 6px; margin-left: 1rem;}*/
.con_bottom .plusBtn .plus_icon {width: 33px; height: 33px; border-radius: 50%; background: #6AB2E2; display: inline-block; margin-left: 5px; position: relative; top: 8px; transition: 0.6s;}
.con_bottom .plusBtn .plus_icon span {display: inline-block;}
.con_bottom .plusBtn .plus_icon .plus_icon01 {width: 20px; height: 1px; background: #fff; position: absolute; top: 16px; left: 6px;}
.con_bottom .plusBtn .plus_icon .plus_icon02 {width: 1px; height: 20px; background: #fff; position: absolute; top: 7px; left: 16px;}

.con_bottom .plusBtn:hover .plus_icon {transform: rotate(180deg);}

.c2_bg {width: 100%; background: #f1f4f8; padding-bottom: 18rem;}
.sub02_c2 {display: flex; flex-wrap: wrap; padding-bottom: 3rem; flex-direction: row-reverse;}
.sub02_c1 .con_left { border-top-left-radius: 33%;}
.sub02_c2 .con_right {padding: 8rem 10rem 0 0rem;}
.sub02_c2 .con_left { background: url(img/sub02/sub02_con02_1.jpg) no-repeat center / cover; border-top-right-radius: 33%;}
.sub02_c2 .con_bottom div.left_img {background: url(img/sub02/sub02_con02_2.jpg) no-repeat center;}
.sub02_c2 .con_bottom div.right_img {background: url(img/sub02/sub02_con02_3.png) no-repeat center bottom / cover;}

/*서브03-채용*/
.mv_sub03 {background: url(img/sub03/sub03_mv.jpg) no-repeat center / cover;}
.sub03 .main_bg {width: 100%; background: #f4f2e5; height: 545px; overflow: hidden;}
.sub03 .main_bg > .s_center {padding: 0; height: 100%; }
.sub03 .main_img {background: url(img/sub03/sub03_1.jpg) no-repeat center bottom 0px / cover; width: 120%; height: 100%; position: absolute; left: 30px; top: 0;}
.sub03 .middle_title h3 {font-size: 3rem; text-align: center; padding: 80px 0; font-weight: 400; color: #333;}
/*middle_title 깜빡이는 애니메이션*/
@keyframes blink-effect {
    0% {opacity: 0;}
    30%{opacity: 1;}
    100%{opacity: 1;}
  }  
.blink {animation: blink-effect 5s ease-in-out infinite;}
/*animation-name: blink-effect; animation-duration: 1s; animation-iteration-count:infinite; animation-timing-function:step-end;*/
    
.sub_h2 {font-size: 4rem; margin-bottom: 4rem; color: #222;}

.sub03_c01 {display: flex; flex-wrap: wrap; max-width: 1410px; padding: 0 30px; position: relative; margin: 0 auto; margin-bottom: 135px;}
.sub03_c01 .left {width: 45%; padding:150px 100px 0 0; text-align: justify;}
.sub03_c01 .left > .sub_h2::before {content: ""; display: block; width: 50px; height: 4px; background: #ec6a12; position: relative; top: -10px;}
.sub03_c01 > .right {width:55%; height: 520px; background: url(img/sub03/sub03_2.jpg) no-repeat center bottom /cover;}

.sub03_c02 {flex-direction: row-reverse;}
.sub03_c02 .left {padding: 150px 0 0 100px;}
.sub03_c02 > .right {background: url(img/sub03/sub03_3.jpg) no-repeat center /cover;}

.sub03_c03 {margin-bottom: 180px;}
.sub03_c03 > .right {background: url(img/sub03/sub03_4.jpg) no-repeat center /cover;}

/*서브04-고객센터*/
.mv_sub04 {background: url(img/sub04/sub04_mv.jpg) no-repeat center bottom / cover;}
.sub04 .main_bg {width: 100%; height: 450px; background: #d0e1e7; margin: 100px 0;}
.sub04 .main_bg .s_center {padding: 0; height: 100%;}
.sub04 .main_bg .s_center .main_img {background: url(img/sub04/sub04_bg.jpg) no-repeat center bottom 0px / cover; width: 120%; height: 100%; position: absolute; left: 30px; top: 0;}

/*고객문의 게시판*/
.table {padding: 0 30px;}
form, fieldset, input {border: 0; background: none;}
form {width: 100%;}
.search_opt {padding: 20px 30px; display: flex; align-items: center; position: relative;}
select {width: 15%; padding: 10px 0; padding-left: 0; border: 0; font-size: 2rem; color: #666;}
.btn_wrap {width:85%; position: relative; padding-left:  30px;}
input[type=text] {font-size: 2rem; color: #666; padding: 10px 20px; width: 100%;}
.search_btn {cursor: pointer; background: url(img/sub04/seach.svg)no-repeat 0 0 / contain; width: 30px; height: 30px; display: inline-block; position: absolute; right: 10px; top: 5px;}

table {width: 100%; padding: 0 50px; border-collapse: collapse; border-top: 2px solid #0052a4; table-layout: fixed;}
thead tr th {font-size: 1.6rem; color: #222; font-weight: 700; text-align: center; padding: 20px 0; border-bottom: 1px solid #c4c4c4;}
thead tr th:nth-child(2) {width: 60%;}
thead tr th:nth-child(4) {width: 82px;}
tbody tr td:nth-child(4) {width: 82px;}
tbody tr {cursor: pointer;}
tbody tr:hover {background: #f5f5f5;}
tbody tr:first-child td {font-weight: 700;}
tbody td {font-size: 1.5rem; color: #222; padding: 24px 0; border-bottom: 1px solid #e3e3e3;  text-align: center;}
tbody td a {width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical;}

tbody tr td:nth-child(2) {text-align: left; padding-left: 20px;}
.file_icon {background: url(img/sub04/ico-file.png) no-repeat 0 0 / contain; width: 25px; height: 25px; position: relative; display: inline-block;}
.file_num { background: #ec6a12; width: 20px; height: 20px; border-radius: 50%;color: #fff; display: inline-block; position: relative; bottom: -10px; right: -10px;}

/*게시판 페이저*/
.list_pager {padding: 40px 0; align-items: center; width: 100%; position: relative;}
.list_pager .pager_wrap {position: relative; align-items: center;}
.list_pager .pager_wrap > a {width: 12px; height: 18px;}
.list_pager .pager_wrap a.pager_prev {background: url(img/sub04/pager_prev.png) 0 0 / contain;}
.list_pager .pager_wrap a.pager_next {background: url(img/sub04/pager_next.png) 0 0 / contain;}
.list_pager .pager_wrap .pager {padding: 0 30px;}
.list_pager .pager li {padding: 0 ;}
.list_pager .pager li a {font-size: 16px; color: #666; width: 35px; line-height: 35px; text-align: center;}
.list_pager .pager li.on a {color: #fff !important; background: #ec6a12; width: 35px; height: 35px; border-radius: 50%;}
.list_pager .pager li a:hover {color: #ec6a12; text-decoration: underline solid 2px #ec6a12; text-underline-offset : 5px;}
.list_pager .write {padding: 15px 30px; border: 1px solid #ec6a12; border-radius: 30px; color: #222; font-size: 1.8rem; position: absolute; right: 30px;}
.list_pager .write::after {content: ""; display: inline-block; background: url(img/sub04/write_icon.png) no-repeat 0 0; width: 15px; height: 15px; position: relative; top: 0; right: -5px;}
.list_pager .write:hover {background: #ec6a12; color: #fff;}
.list_pager .write:hover::after {content: ""; display: inline-block; background: url(img/sub04/write_icon-wh.png) no-repeat 0 0; width: 15px; height: 15px; position: relative; top: 0; right: -5px;}

/*서브04_board*/
.board {border-top: 2px solid #0052a4;}
.board > div {padding: 20px 30px;}
.board p {font-size: 1.5rem;}
.board .tit_board {border-bottom: 1px dashed #c4c4c4;}
.board .tit_board h4 {font-size: 1.8rem; color: #333; margin-bottom: 10px;}
.board .tit_board p {color: #333;}
.board .file {display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #e3e3e3;}
.board .file > a {font-size: 1.5rem; display: block;}
.board .detail_board {border-bottom: 1px solid #e3e3e3;}
.board .detail_board p {color: #333; line-height: 3rem; margin-bottom: 2rem;}
.board .btn_board a {padding: 10px 15px; font-size: 1.5rem; color: #666; border: 1px solid #c4c4c4; border-radius: 5px; line-height: 18px;}
.board .btn_board a::before {content: ""; display: inline-block; background: url(img/sub04/list_icon-bk.png) no-repeat 0 0 / contain; width: 18px; height: 14px; margin-right: 5px;}
.board .btn_board a:hover {background: #0052a4; color: #fff; border: 1px solid transparent;}
.board .btn_board a:hover::before {content: ""; display: inline-block; background: url(img/sub04/list_icon-wh.png) no-repeat 0 0 / contain;}
.board .btn_board button {margin-left: 10px; padding: 10px 15px; font-size: 1.5rem; color: #666; border: 1px solid #c4c4c4; border-radius: 5px; line-height: 18px;}
.board .btn_board button::before {content: ""; display: inline-block; background: url(img/sub04/copy_icon-bk.png) no-repeat 0 0 / contain; width: 18px; height: 14px; margin-right: 5px;}
.board .btn_board button:hover {background: #0052a4; color: #fff; border: 1px solid transparent;}
.board .btn_board button:hover::before {content: ""; display: inline-block; background: url(img/sub04/copy_icon-wh.png) no-repeat 0 0 / contain;}
.board .other_detail {border-top: 1px solid #c4c4c4; border-bottom: 1px solid #c4c4c4; padding:10px 20px;}
.board .other_detail li {padding: 5px 0;}
.board .other_detail li a {width: 100%; font-size: 13px; color: #666;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical;}
.board .other_detail li a::before {content: ""; display: inline-block; background: url(img/sub04/down_btn.png) no-repeat; width: 12px; height: 6px; margin-right: 5px;}
.board .other_detail li:first-child a::before {transform: rotate(180deg);}

/*서브05-지속가능경영*/
.mv_sub05 {background: url(img/sub05/sub05_mv.jpg) no-repeat center bottom / cover;}
.sub05_c1 {padding: 0 30px; margin-bottom: 100px;}
.sub05_c1 > div {width: 55%;}
.sub05_c1 .left {background: url(img/sub05/sub05_img.jpg) no-repeat 0 0 / cover; height: 480px;}
.sub05_c1 .right {background: #fff; padding: 50px 40px; position: absolute; right: 0; top: 70px;}
.sub05_c1 .right h2 {font-size: 3rem; color: #222; margin-bottom: 30px; text-align: left;}
.sub05_c1 .right p {font-size: 2rem; color: #666; line-height: 3.5rem; text-align: justify;}
.sub05_c1 .right p.ceo {font-size: 2rem; color: #666; text-align: right; margin-top: 50px;}
.sub05_c1 .right p.ceo span {font-size: 2.1rem; color: #222;}

.sub05_c2 {width: 100%; padding: 100px 120px; background: #f6f6f6; margin-top: 100px; text-align: center;}
.sc_tit {font-size: 3rem; color: #222; margin-bottom: 30px; text-align: center;}
.sub05_c2 .one_wrap {flex-wrap: wrap; padding: 50px 80px;}
.sub05_c2 .one_wrap div {width: 48%; margin-bottom: 50px; display: flex; flex-wrap: wrap;}
.sub05_c2 .one_wrap .one_box {padding: 50px 30px; background: #fff; border-radius: 25px;}
.sub05_c2 .one_wrap .one_box .orange {background: #f66700; width: 60px; height: 60px; color: #fff; border-radius: 50%; text-align: center; font-size: 2rem; line-height: 60px; display: inline-block;}
.sub05_c2 .one_wrap .one_box p {font-size: 1.8rem; color: #333; line-height: 3.4rem; width: calc(100% - 60px); text-align: justify; padding-left: 30px;}

.sub05_c3 {padding: 100px 80px; text-align: center;}
.sub05_c3 .sub05_c3-img {width: 100%; margin: 100px auto;}
.sub05_c3 .sub05_c3-img img {width: 100%;}
.sub05_c3 .sub05_c3-img span {font-size: 12px; color: #333; padding-top: 30px; display: none;}
.sub05_c3 h3 {font-size: 3rem; color: #222; line-height: 4.5rem; text-align: center; margin-bottom: 50px; width: 80%; margin:0 auto; padding-bottom: 30px;}
.sub05_c3 p {font-size: 2rem; color: #666; line-height: 3.5rem; text-align: center; padding-bottom: 50px;}
.sub05_c3 .down_wrap {padding: 80px 0;}
.sub05_c3 .down {background: #073040; width: 320px; height: 60px; margin: 10px 0; color: #fff; font-size: 2rem; text-align: center; line-height: 60px; vertical-align: top;}
.sub05_c3 .down:hover {background: #fff; border: 1px solid #073040; color: #222;}




/*미디어쿼리*/
/*태블릿 1023~768px*/
@media (max-width:1200px) {
    .img {padding-left: 30px;}

    .con_right {padding: 8rem 0rem 0 5rem;}
    .con_right h2 {font-size: 5rem; line-height: 6.5rem;}
    
    /*서브04*/
    thead tr th:nth-child(2) {width: 50%;}

    /*서브05*/
    .sub05_c2 {padding: 100px 30px;}
    .sub05_c2 .one_wrap {padding: 0;}
    .sub05_c2 .one_wrap div {width: 100%; margin-bottom: 30px;}
}
@media (max-width:1024px) {   

    .s_center {padding: 80px 30px;}

    .tab_menu li {padding: 0 20PX;}

    .sub_tit h2 {font-size: 5rem; margin: 0;}
    .sub_tit p {font-size: 3rem;}
    /*서브02*/
    .sub02_c2 .con_right {padding: 8rem 5rem 0 0rem;}
    .con_left {height: unset;}

    /*서브03*/
    .sub03 .main_bg {height: 400px;}
    
    .sub03_c01 .left {padding:50px 30px 0 0;}
    .sub03_c02 .left {padding:50px 0 0 30px;}

    /*서브04*/
    .table.s_center {padding: 0;}
    tbody tr td:nth-child(2) {padding-left: 5px;}

}
/*모바일버전*/
@media (max-width:767px) {
    html {font-size: 7px;}
    .s_center {padding: 5rem 3rem;}
    .sub_gnb {display: none;}
    .sub_nav {padding: 0;}
    .tab_menu {width: 100%; padding: 0 1rem;}
    .tab_menu li {padding: 0 1rem; text-align: center;}

    .sub_mv {height: 250px;}
    .sub_mv > div { padding-top: 15rem;}
    .sub_mv h2 {font-size: 4rem;}
    
    /*서브01*/
    .text_box {flex-direction: column-reverse;}
    .sub01_txt {width: 100%; padding: 30px 0;}
    .sub01_txt h3 {line-height: 3.5rem;}
    .sub01_txt p{line-height: 3rem; margin-bottom: 2rem;}
    .img {width: 100%; padding-left: 0; top: 10rem;}
    .img.img.active {top: 3rem;}
    .img p {font-size: 2rem;}

    /*서브02*/
    .sub02_c1 div {width: 100%;}
    .sub02_c2 div {width: 100%;}
    .con_left {height: 500px;}
    .con_right {padding: 10em 0rem 0 0rem;}
    .c2_bg {padding-bottom: 30px;}
    .sub02_c2 .con_right {padding: 10rem 5rem 0 0rem;}
    .con_bottom div {width: 100%; height: 250px;}
    
    /*서브03*/
    .sub03 .main_bg {height: 350px;}
    .sub03_c01 {margin-bottom: 50px;}
    .sub03_c01 .left {width: 100%; padding:0;}
    .sub03_c01 .right {width: 100%; height: 300px;}
    .sub03_c03 {margin-bottom: 80px;}
    
    /*서브04*/
    .sub04 .main_bg {height: 200px; margin: 40px 0;}
    table td {font-size: 12px;}
    thead tr th:nth-child(6) {display: none;}
    tbody tr td:nth-child(6) {display: none;}
    .list_pager .pager_wrap {width: calc(100% - 130px);}
    .list_pager .pager_wrap > a {position: absolute; top: 9px;}
    .list_pager .pager_wrap a.pager_prev {left: 0;}
    .list_pager .pager_wrap a.pager_next {right: 0;}
    .list_pager {justify-content: flex-start; padding-left:20px;}
    .list_pager .write {padding: 15px 20px;}
    .list_pager .pager {padding: 0 10px;}

    /*서브04-보드*/
    .board > div {padding: 20px 10px;}
    .board p {font-size: 1.8rem;}
    .board .btn_board a,button {font-size: 1.8rem;}
    .list_pager {padding-left: 1rem;}
    .list_pager .write {right: 2rem;}

    /*서브05*/
    .sub05_c1 > div {width: 85%;}
    .sub05_c2 .one_wrap .one_box p {font-size: 14px;}
    .sub05_c3 h3 {width: 100%;}
    .sub05_c3 .sub05_c3-img span {display: block;}
}