/*sub담당자: 안슬기*/
.inner {max-width: 1600px; margin: 0 auto;}
.s_wrap {display: flex;}

/*서브타이틀*/
.submn-area {margin-top:120px;}
.title {padding: 75px 0 0;}
.tit_h2 {font-size: 42px; line-height: 140%; font-weight: 700; color: #222; word-break: keep-all; margin: 30px 0; position: relative; letter-spacing: -0.03em;}
.tit_h2::before {position: absolute; content: ""; background: #0669bf; width: 80px; height: 3px; display: inline-block; top: -15px; left: 0;}
.tit_h3 {font-size: 32px; font-weight: 600; color: #0669bf; margin-bottom: 50px; position: relative; display: inline-block;}
.tit_h3::after {position: absolute; content: ""; background: #cde7fd; width: 35px; height: 35px; border-radius: 100%; top: -10px; right: -16px; z-index: -1;}
/*.tit_h4 {font-size: 36px; color: #333; font-weight: 700; word-break: keep-all; line-height: 140%; margin-bottom: 20px;}*/
.tit_h4 {font-size: 25px; color: #333; font-weight: 700; word-break: keep-all; line-height: 140%; margin-bottom: 20px; position: relative; padding-left: 20px;}
.tit_h4::before {position: absolute; content: ""; background: #0669bf; width: 4px; height: 25px; top: 4px; left: 0; transform: rotate(30deg);}
/*.tit_h5 {font-size: 28px; color: #0669bf; font-weight: 600; word-break: keep-all; line-height: 140%; margin-bottom: 20px;}*/
.tit_h6 {font-size: 23px; color: #444; font-weight: 600; word-break: keep-all; line-height: 140%; margin-bottom: 40px;}
.title .tit_ul {display: flex; flex-wrap: wrap; margin-top: 30px;}
.title .tit_ul li {display: flex; padding-right: 30px;}
.title .tit_ul li a {font-size: 22px; font-weight: 500; color: #0669bf;position: relative;}
/*sub-hover 추가 : 장수경*/
.title .tit_ul li a:after {content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background-color:#0669bf;transition:all .2s ease;}
.title .tit_ul li:hover a:after{width:100%;}

.sub-bg {width: 100%; overflow: hidden; height: 50vh; margin-top: 30px;position: relative;}
.sub-bg .subbg-img {width: 100%; height: 100%; display: inline-block;}
#subbg1 .subbg-img {background: url(subbg01.png)no-repeat top center/cover;}
#subbg2 .subbg-img {background: url(subbg02.png)no-repeat top center/cover;}
#subbg3 .subbg-img {background: url(subbg03.png)no-repeat top center/cover;}
/*sub-scroll inner 추가 : 장수경*/
.sub-bg .subbg-img {transition: all 0.4s ease-in-out;}
.sub-bg.scroll .subbg-img {height: 70vh;}
.sub-bg > .inner{position:absolute;width:100%;height:100%;top: 0; left: 50%;transform: translateX(-50%);padding: 0 20px;max-width:1600px;}
.sub-visual-scroll{color:#fff;font-size:20px;font-family:'Proxima' , sans-serif;font-weight:500;width:40px;text-align:center;position:absolute;bottom:60px;}
.sub-visual-scroll .arrow{display:inline-block;transform: translateY(0);animation: bounce 1600ms infinite cubic-bezier(0.445, 0.05, 0.55, 0.95);-webkit-animation: bounce 1600ms infinite cubic-bezier(0.445, 0.05, 0.55, 0.95);-moz-animation: bounce 1600ms infinite cubic-bezier(0.445, 0.05, 0.55, 0.95);opacity:1;}
.sub-visual-scroll .arrow:after{content:"";display:inline-block;width:15px;height:46px;background: url(../img/mouse.svg)no-repeat top center/cover;}

@keyframes bounce {
    20% {transform: translateY(12px);opacity:0.6;}
    40% {transform: translateY(6px);opacity:0.8;}
    60% {transform: translateY(12px);opacity:0.6;}
    100% {transform: translateY(0px);opacity:1;}
}

@-webkit-keyframes bounce {
    20% {transform: translateY(12px);opacity:0.6;}
    40% {transform: translateY(6px);opacity:0.8;}
    60% {transform: translateY(12px);opacity:0.6;}
    100% {transform: translateY(0px);opacity:1;}
}

.sub_box.sub-cont {padding: 0;}

/*서브페이지 서브왼쪽메뉴*/
.left {position: relative;}
.left-menu-wrap {position: sticky; width: 100%; top: 15%;}
.left-menu li {display: block; text-align: left; line-height: 50px; transition: padding 0.3s ease-in-out;}
.l-menu .left-menu li:hover {padding-left: 6px;}
.left-menu-item {display: block; color: #999; line-height:50px; font-size:16px;}
.left-menu-item:hover, .isactive {color: #0669bf; font-weight: 500;}

/*서브페이지 서브내용-큰레이아웃*/
.right {}
.sub_boxwrap {}
.sub_boxwrap section {margin-bottom: 100px;}
.sub01_box, .sub03_box {margin-bottom: 70px; display: flex; flex-wrap: wrap;}
/*서브페이지 서브내용-이미지*/
.sub01_map {width: 100%; margin-bottom: 30px;}
.sub02_img {margin-bottom: 30px; width: 100%; display: flex; justify-content: center; align-items: center;}
.sub01_img, .sub03_img {width: 100%; height: 400px; margin-bottom: 60px;}
#section-1 .sub01_img {background: url(../img/sub01_img01.png)no-repeat top center/cover;}
#section-2 .sub01_img {background: url(../img/sub01_img02.png)no-repeat top center/cover;}
#section-3 .sub01_img {background: url(../img/sub01_img03.png)no-repeat top center/cover; height: 500px;}
#section-1 .sub03_img {background: url(../img/sub03_img01.png)no-repeat top center/cover;}
#section-2 .sub03_img {background: url(../img/sub03_img02.png)no-repeat top center/cover;}
/*#section-3 .sub03_img {background: url(../img/sub03_img03.png)no-repeat top center/contain; height: 600px;}*/
#section-3 .sub03_img {text-align: center;height: auto!important}
#section-3 .sub03_img img {border: 1px solid #ddd;}
#section-5 .sub03_img {background: url(../img/sub03_img05.png)no-repeat top center/cover;}
.sub02_img img {max-width: 100%;}
/*서브페이지 서브내용-텍스트*/
.sub_b {color: #0669bf; font-weight: 700; position: relative;}
.sub_b::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 15px;
    background-color: #cde7fd;
    z-index: -1;
    transition: all .3s ease-in-out;
}
.sub_b:hover::before{height: 100%;}
.sub_p {font-size: 18px; color: #555; font-weight: 400; word-break: keep-all; line-height: 160%; margin-bottom: 20px;}
.sub_p>span>b {font-size: 25px; font-weight: 900; color: #0669bf;}
.sub_p1 {font-size: 18px; color: #222; font-weight: 500; word-break: keep-all; line-height: 160%; margin-top: 25px;}
.sub_p2 {font-size: 15px; color: #666; font-weight: 300; word-break: keep-all; line-height: 160%; margin-top: 10px;}
.sub01_box span {display: inline-block; padding-right: 50px; font-size: 20px; color: #555; line-height: 36px; font-weight: 600;}
.sub01_box span:nth-child(1) {color: #222; font-weight: 700; font-size: 24px;}
/*서브페이지 서브내용-세부레이아웃*/
.sub01_text {padding: 0;}
.sub01_text1 {padding: 0 60px 0 0;}
.sub01_text2 {padding: 0 30px 0 0;}
.sub01_text3 {padding: 0 0 0 30px;}
.sub01_text4 {padding: 0 10px;}
.sub01_text5 {padding: 10px 0 40px;}
.sub01_box li {width: 20%; text-align: center;}
.sub01_icon img {border-radius: 100%; box-shadow: 2px 2px 4px rgba(0,0,0,0.2);}
/*서브페이지 서브내용-table*/
.sub01_table {padding: 0;}
.sub01_table table {width: 100%;}
.sub01_table table tr:first-child {border-top: 2px solid #0669bf;}
.sub01_table table tr {border-bottom: 1px solid #dbdbdb;}
.sub01_table table tr th {font-size: 17px; font-weight: 500; color: #0669bf; padding: 15px; background: #f7f7f7; text-align: center; width: 20%;}
.sub01_table table tr td {font-size: 17px; font-weight: 400; color: #444; padding: 15px; text-align: center; word-break: keep-all;}

/*서브페이지 고객지원 왼쪽회사정보*/
.left_wrap {}
.left_wrap .left_h2 {font-size: 42px; color: #222; font-weight: 700;}
.left_wrap .left_text {margin-top: 65px;}
.left_text .left_textwrap {margin-bottom: 35px;}
.left_textwrap .left_h3 {font-size: 20px; font-weight: 700; color: #333; margin-bottom: 10px;}
.left_textwrap .left_p {font-size: 16px; color: #666; font-weight: 400;}

/*서브페이지 고객지원 오른쪽폼메일*/
.formmail_txt {font-size:16px;font-family:'Noto Sans KR';color:#333333}
.formmail_border {font-size:16px; background-color: transparent; border: none;}
.formmail_title_bgcolor {}
.formmail_cell_bgcolor {font-size:16px;}
.table_02 {width:100%;}
.formamil01 .table_02 {margin-top: 60px;}
.table_02 > tbody {display: flex; flex-wrap: wrap; justify-content: space-between;}
.table_02 >tbody> tr
{border: 1px solid #d7e3ec; background-color: #f0f6fa; width: 49.5%; display: flex; flex-wrap: wrap; padding: 30px 0; border-radius: 10px; margin-bottom: 10px;}
.table_02 >tbody> tr:nth-child(3) {width: 100%;}
.table_02 > tbody > tr:nth-child(3) > td:nth-child(1) {width: 15%;}
.table_02 > tbody > tr:nth-child(3) > td:nth-child(2) {width: 85%;}


.table_02 >tbody> tr:nth-child(4) {width:100%;}
.table_02 >tbody> tr:nth-child(4) td:nth-child(1) {width:15%;}
.table_02 >tbody> tr:last-child {width: 100%; height: 220px;}

.reservation >tbody> tr:nth-child(3),
.reservation >tbody> tr:nth-child(5) {width: 40%;}
.reservation >tbody> tr:nth-child(4),
.reservation >tbody> tr:nth-child(6) {width: 59%;}
.reservation >tbody> tr:nth-child(3)> td:nth-child(1),
.reservation >tbody> tr:nth-child(5)> td:nth-child(1) {width: 30%;}
.reservation >tbody> tr:nth-child(3)> td:nth-child(2),
.reservation >tbody> tr:nth-child(5)> td:nth-child(2) {width: 70%;}
.reservation >tbody> tr:nth-child(4)> td:nth-child(1),
.reservation >tbody> tr:nth-child(6)> td:nth-child(1) {width: 18%;}
.reservation >tbody> tr:nth-child(4)> td:nth-child(2),
.reservation >tbody> tr:nth-child(6)> td:nth-child(2) {width: 82%;}
/*
.table_02 tr:nth-child(5) {display: none;}
.table_02 tr:nth-child(6) {display: none;}
*/
.table_02.reservation > tbody > tr:nth-child(1),
.table_02.reservation > tbody > tr:nth-child(2),
.table_02.reservation > tbody > tr:nth-child(7)
{width: 100%;}
.table_02.reservation > tbody > tr:nth-child(2)
{height: auto;}
.table_02.reservation > tbody > tr:nth-child(2) .formmail_cell_bgcolor
{flex-wrap: wrap;}
.table_02.reservation > tbody > tr:nth-child(1) .formmail_title_bgcolor,
.table_02.reservation > tbody > tr:nth-child(2) .formmail_title_bgcolor,
.table_02.reservation > tbody > tr:nth-child(7) .formmail_title_bgcolor,
.table_02 > tbody > tr:last-child .formmail_title_bgcolor {width: 15%;}

.table_02.reservation > tbody > tr:nth-child(1) .formmail_cell_bgcolor,
.table_02.reservation > tbody > tr:nth-child(2) .formmail_cell_bgcolor,
.table_02 > tbody > tr:last-child .formmail_cell_bgcolor {width: 85%;}
.table_02 > tbody > tr:last-child .formmail_cell_bgcolor textarea {width: 90%;}
.table_02 > tbody > tr > td {padding: 0 5px; height: 100%; display: flex; align-items: center;}
.table_02 > tbody > tr > td:nth-child(1) {padding-left: 25px; width: 30%;}
.table_02  > tbody > tr > td:nth-child(2) {width: 70%;}
.table_02  > tbody > tr > td font {font-size: 16px; color: #666; position: relative;}
#section-1 .table_02  > tbody > tr > td font::after {position: absolute; content: "*"; color: #0669bf; top: 0; right: -10px; display: inline-block;}
td .sub-txt {
    font-size: 0.985em;
    font-weight: 400;
    color: #dc3545;
    margin: 20px 0 0;
    padding: 0;
    line-height: 1;
}
table.table_02.reservation select[name="add1M"], table.table_02.reservation select[name="add1D"]
{margin-left: 30px;}
table.table_02.reservation select {margin-right: 5px; width:100%; padding:5px; border:1px solid #ddd;}
.table_02.reservation >tbody> tr {margin-bottom: 10px;}
.table_02.reservation > tbody > tr:nth-child(2) .formmail_cell_bgcolor td
{font-size: 1.025em; line-height: 2;}

.submn-area .tit_ul.left-menu,
.root_daum_roughmap .border3, .root_daum_roughmap .border4
{display: none;}
.sub01_map .root_daum_roughmap .wrap_map {height: 400px;}



@media screen and (max-width: 1600px){
  .title {padding: 75px 20px 0;}
  .tit_h2 {font-size: 38px;}
  .tit_h3 {font-size: 28px;}
  .title .tit_ul li a {font-size: 20px;}

  .sub01_box span {padding-right: 10px;}

  .left_wrap .left_h2 {font-size: 36px;}
  .left_wrap .left_text {margin-top: 45px;}
  .table_02 tr {width: 100%;}
}

@media screen and (max-width: 1024px){
  .s_wrap {flex-wrap: wrap;}
  .title {padding: 55px 15px 0;}
  .tit_h2 {font-size: 34px;}
  .tit_h3 {margin-bottom: 20px;}
  .tit_h4 {font-size: 30px;}
  .tit_h5 {font-size: 24px;}
  .tit_h6 {font-size: 21px;}
  .title .tit_ul {margin-top: 15px;}

  .sub-bg {margin-top: 10px; height: 50vh;}
  .sub01_img, .sub03_img {height: 300px;}
  #section-3 .sub01_img {height: 400px;}

  .sub_boxwrap {margin-top: 40px;}
  .maincontact  .sub_boxwrap {margin-top: 0px;}
  .sub_boxwrap section {margin-bottom: 70px;}
  .sub01_box, .sub03_box {margin-bottom: 0;}
  .sub01_box li {width: 33.33%; padding-right: 10px;}
    .sub01_box > li:nth-last-child(n+3) {margin-bottom: 30px;}
  .sub01_text1 {padding: 0;}
  .sub01_text2 {padding: 0;}
  .sub01_text3 {padding: 0;}

  .left_wrap .left_text {margin: 30px 0 45px;}
  .left_text .left_textwrap {margin-bottom: 20px;}
    .table_02 >tbody> tr {width: 100%!important;margin-bottom: 0;}
    .table_02.reservation {max-width: 680px;}
    .table_02 >tbody> tr {height: auto;    display: block;padding: 10px;}

    .table_02.reservation > tbody > tr:nth-child(1) .formmail_cell_bgcolor,
    .table_02.reservation > tbody > tr:nth-child(2) .formmail_cell_bgcolor, .table_02 > tbody > tr:last-child .formmail_cell_bgcolor
    {display: block; width: 100%; height: auto; text-align: center;}
    .table_02 > tbody > tr > td:nth-child(1)
    {display: block!important; width: 100%!important;height: auto; margin-bottom: 10px;padding: 0;}
    table.table_02.reservation select
    {width: 20%; display: inline-block;}

    .table_02 > tbody > tr > td {display: inherit;}

    td.formmail_cell_bgcolor table.formmail_cell_bgcolor tr
    {display: inline-block;width: auto;margin-bottom: 5px;}
    .sub01_box td.formmail_cell_bgcolor span {margin: 0 auto;padding: 0; font-size: 1em;}
    .table_02 > tbody > tr > td:nth-child(2)
    {width: 100%!important; text-align: center;}
    td.formmail_cell_bgcolor br {display: none;}
    .formamil01 .table_02 {margin-top: 0px;}
    .table_02 > tbody > tr:last-child .formmail_cell_bgcolor {height: 100%;}
    .table_02 > tbody > tr:last-child .formmail_cell_bgcolor textarea
    {width: 100%;    max-height: 150px!important;}
    input.formmail_border[name="name"], input.formmail_border[name="add1"], input.formmail_border[name="add3"], input.formmail_border[name="receiver_email"], input.formmail_border[name="address"], input.formmail_border[name="title"]
    {width: 98%;}

}

@media screen and (max-width: 992px){
    .sub01_box > li:nth-last-child(n+2) {margin-bottom: 30px;}
   .subarea > .inner > .s_wrap > .left {display: none!important;}

  .left-menu li {display: inline-block; padding-right: 50px;}
  .left-menu-item:hover, .isactive {padding: 0 40px; background: #0669bf; border-radius: 50px; color: #fff;}
    #section-5 .sub02_img {display: none;}
    .table_02 > tbody > tr > td font::after {display: none!important}
}

@media screen and (max-width: 768px){
    .root_daum_roughmap .wrap_map {height: 250px!important;}
    .sub01_table table tr th,
    .sub01_table table tr td {padding: 8px 5px; line-height: 1.5; font-size: 1em;}

  .tit_h2 {font-size: 30px;}
  .tit_h3 {font-size: 24px;}
  .tit_h4 {font-size: 26px;}
  .tit_h5 {font-size: 20px;}
  .tit_h6 {font-size: 19px;}
  .sub_p {margin-top: 15px; font-size: 17px;}
  .title .tit_ul li {line-height: 40px;}
  .title .tit_ul li a {font-size: 18px;}

  .sub-bg {height: 30vh;}
  .sub01_img, .sub03_img {height: 250px;}
  #section-3 .sub01_img {height: 300px;}

  .sub_boxwrap section {margin-bottom: 50px;}
  .sub01_text {margin-bottom: 30px;}
  .sub01_text1 {margin-bottom: 30px;}
  .sub01_text5 {padding: 10px 0 0;}
  .sub01_box span {padding-right: 30px; font-size: 18px; line-height: 30px;}
  .sub01_box span:nth-child(1) {font-size: 21px;}
  .sub01_box li {width: 50%; padding-right: 0; margin-bottom: 0}
    .left_text .left_textwrap {margin-bottom: 5px;}
    .sub_boxwrap {margin-top: 10px;}

    #sub-cs .row > article
    {flex: auto;max-width: 100%;width: 100%;}
    #sub-cs .row > article.col-md-4 {display: none;}





}

@media screen and (max-width: 575px){
    .title {padding: 30px 15px 0;}
  .sub01_box li {width: 100%; text-align: center;}
  .sub01_box span {padding-right: 0;}
  .sub01_table table tr th {width: 30%;}
/*  .sub01_img, .sub03_img {height: 170px;}*/
  #section-2 .sub01_img {background: url(../img/sub01_img02.png)no-repeat top center/contain;}
    #section-1 .sub01_img {height: 170px;}
  #section-3 .sub01_img {height: 200px;}
    .tit_h2 {font-size: 22px;    margin-bottom: 15px;}
    .tit_h4 {font-size: 20px;}
    .tit_h4::before {height: 20px; margin-bottom: 10px;}
    .sub_p {margin-top: 10px;letter-spacing: -0.05em; font-size: 1em; line-height: 1.4;}
    .wrap #sub-cs {padding-top: 0;}
/*    #sub-cs .sub01_box {padding: 0 15px;}*/
    .table_02 > tbody > tr > td font, .table_02 > tbody > tr > td ,
    .table_02.reservation > tbody > tr:nth-child(2) .formmail_cell_bgcolor td
    {font-size: 14px; letter-spacing: -0.05em; }
    table.table_02.reservation select[name="add1M"], table.table_02.reservation select[name="add1D"]
    {margin-left: 10px;}
    .reservation td.formmail_cell_bgcolor table.formmail_cell_bgcolor >tbody
    {display: flex!important;    justify-content: space-evenly;}
    .reservation table.formmail_cell_bgcolor > tbody > tr > td
    {display: block!important;}
    .table_02 >tbody> tr:last-child {height: 150px}
    .table_02 >tbody> tr:last-child> td:nth-child(2) {max-height: 90px;}
    .table_02 > tbody > tr > td:nth-child(1) font {font-size: 16px!important; font-weight: 500;}
    .sub01_img, .sub03_img {margin-bottom: 30px;}
    .sub01_text {margin-bottom: 10px;}
    .tit_h2 br {display: none!important;}
    .sub_b::before {height: 5px;}
}





/*메인-포트폴리오 모달창*/
.modal-custom {background: rgba(0,0,0,0.4); position: absolute; top: 0; left: 0; width: 100%; height: 100vh; z-index: 9999999; display: none; animation: dissappear 0.8s cubic-bezier(.77,0,.175,1) forwards;}
.main_modal.show {display: block; animation: appear 0.4s cubic-bezier(.77,0,.175,1) forwards;}
.main_modal .modal_wrapbg {margin-top: 100px;}
.main_modal .modal_wrap {max-width: 1024px; margin: 0 auto; vertical-align: middle;}
.main_modal .modal_wrap .modal_bg {background: #fff; padding: 60px; position: relative;}
.modal_bg #modal_btn {position: absolute; top: 60px; right: 60px;}
.modal_bg .bi {font-size: 24px; color: #939393;}
.modal_bg .modal_text {}
.modal_bg .modal_text p {font-size: 16px; font-weight: 500; color: #333;}
.modal_bg .modal_text h2 {font-size: 34px; font-weight: 600; color: #222; margin-bottom: 20px;}
.modal_bg .modal_img {margin-bottom: 30px; text-align: center;}
.modal_bg .modal_img img {max-width: 100%; height: 550px;}
.modal_bg .modal_key {display: flex; flex-wrap: wrap;}
.modal_bg .modal_key .modal_k {display: flex; width: 66.67%; flex-wrap: wrap;}
.modal_bg .modal_key .modal_k h3 {width: 100%; font-weight: 600; color: #222; font-size: 17px; margin-bottom: 5px;}
.modal_bg .modal_key .modal_k ul {display: flex;}
.modal_bg .modal_key .modal_k ul li {padding-right: 10px;}
.modal_bg .modal_key .modal_k ul li span {border: 1px solid #ddd; color: #666; font-size: 14px; font-weight: 400; padding: 5px 10px; border-radius: 6px;}
.modal_bg .modal_key .modal_link {display: flex; width: 33.33%; justify-content: flex-end; align-items: flex-end;}
.modal_bg .modal_key .modal_link a {font-size: 16px; font-weight: 500; color: #0669bf; border: 1px solid #0669bf; border-radius: 40px; padding: 5px 20px 5px 30px;}
.modal_bg .modal_key .modal_link a span {padding-left: 30px;}
.modal_bg .modal_key .modal_link a:hover {background: #0669bf; color: #fff;}

.close-modal{color:white; float:right; font-size:28px; font-weight:bold; }
.close-modal:hover,.close-modal:focus{color:#000; text-decoration:none; cursor:pointer; }


@keyframes appear {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes dissappear {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(50px);
  }
}