.inner {max-width: 1600px; margin: 0 auto;}
.s_wrap {display: flex;}

/*서브타이틀*/
.title {padding: 75px 0 0;}
.tit_h2 {font-size: 44px; line-height: 140%; font-weight: 700; color: #222; word-break: keep-all;}
.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;}
.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: 60vh; 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-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:16px;font-family:'Proxima' , sans-serif;font-weight:500px;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:8px;height:8px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg);}

@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: #a8a8a8;}
.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: 30px;}
#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: 500px;}
#section-5 .sub03_img {background: url(../img/sub03_img05.png)no-repeat top center/cover;}
.sub02_img img {max-width: 100%;}
/*서브페이지 서브내용-폰트*/
.tit_h3 {font-size: 32px; font-weight: 600; color: #0669bf; margin-bottom: 50px;}
.tit_h4 {font-size: 36px; color: #333; font-weight: 700; word-break: keep-all; line-height: 140%;}
.tit_h5 {font-size: 28px; color: #0669bf; font-weight: 600; word-break: keep-all; line-height: 140%;}
.tit_h6 {font-size: 23px; color: #444; font-weight: 600; word-break: keep-all; line-height: 140%; margin-bottom: 40px;}
.sub_b {color: #0669bf; font-weight: 700;}
.sub_p {font-size: 18px; color: #555; font-weight: 400; word-break: keep-all; line-height: 160%; margin-top: 25px;}
.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: #444; line-height: 36px; font-weight: 600;}
.sub01_box span:nth-child(1) {color: #0669bf; 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_box li {width: 20%;}
.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 > tbody > tr {border-bottom: 1px solid #ddd;}
.formmail_cell_bgcolor {font-size:16px;padding: 5px;}
.table_02 {width:100%;}
.table_02 tbody {display: flex; flex-wrap: wrap; justify-content: space-between;}
.table_02 tr {border: 1px solid #d7e3ec; background-color: #f0f6fa; width: 48%; display: flex; flex-wrap: wrap; padding: 30px 0; border-radius: 10px; margin-bottom: 30px;}
.table_02 tr:nth-child(4) {width: 100%; height: 220px;}
.table_02 tr:nth-child(5) {display: none;}
.table_02 tr:nth-child(6) {display: none;}
.table_02 td {padding: 0 5px; height: 100%; display: flex; align-items: center;}
.table_02 td:nth-child(1) {padding-left: 25px; width: 30%;}
.table_02 td:nth-child(2) {width: 70%;}
.table_02 td font {font-size: 16px; color: #666; position: relative;}
.table_02 td font::after {position: absolute; content: "*"; color: #0669bf; top: 0; right: -10px; display: inline-block;}

/*서브페이지 회사소개*/
#sec-company .sub-cont .img-wrap{
    border-radius: 80px 0 80px 0;
    overflow: hidden;
}
.comp_intro {padding: 0 30px;}
.comp_intro li {margin-bottom: 20px;}


.pd-gallery {padding: 0 20px; margin-bottom: 40px;}
.pd-gallery .column {
    float: left;
    width: 25%;
    padding: 10px;
}
  
.pd-gallery .column img {
    opacity: 0.8;
    cursor: pointer;
}
  
.pd-gallery .column img:hover {
  opacity: 1;
}

.pd-gallery .row:after {
  content: "";
  display: table;
  clear: both;
}

.pd-gallery .container {
  position: relative;
  display: none;
  text-align: center;
}

.pd-gallery .closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: #666;
  font-size: 40px;
  cursor: pointer;
}

.pd-gallery #imgtext1, 
.pd-gallery #imgtext2, 
.pd-gallery #imgtext3, 
.pd-gallery #imgtext4,
.pd-gallery #imgtext5 {
    position: absolute;
    padding: 5px 10px;
    bottom: -20px;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #444;
    background: rgba(255, 255, 255, 0.4);
    font-size: 20px;
    font-weight: 500;
}

/*서브제품페이지*/
.main-imgwrap {padding: 30px 0;}
.sub-cont .ptitle {
    color: #333;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 10px;
}
.detailsub {margin-bottom: 30px;}
.detailsub h5 {
    font-size: 1.4rem;
    font-weight: 600;
    color: #333;
    margin: 20px 0;
    line-height: 1.6;
}
.detailsub h5 span{
    font-weight: 600;
    color: #0669bf;
    margin-right: 5px;
}
.detailsub li{
    position: relative;
    padding-left: 20px;
}
.detailsub li::before{
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 100%;
    background: #0669bf;
    top: 10px;
    left: 2px;
}

.sub-cont .detailsub p {font-weight: 400; margin-bottom: 15px;}
.imgwrap {
    width: 100%;
    text-align: center;
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 20px;
}
.pdfdownload {
    padding: 5px 15px;
    border: 1px solid #dc3545;
    border-radius: 6px;
    color: #dc3545;
}
.pdfdownload:hover, .pdfdownload:active, .pdfdownload:focus {
    color: #fff;
    background: #dc3545;
}
.pdfdownload i {margin-right: 5px;}



@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;}
  .sub_boxwrap section {margin-bottom: 70px;}
  .sub01_box, .sub03_box {margin-bottom: 0;}
  .sub01_box li {width: 33.33%; padding-right: 10px; margin-bottom: 20px;}
  .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;}
}

@media screen and (max-width: 992px){
  .left-menu li {display: inline-block; padding-right: 50px;}
  .left-menu-item:hover, .isactive {padding: 0 40px; background: #0669bf; border-radius: 50px; color: #fff;}
}

@media screen and (max-width: 768px){
  .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: 40vh;}
  .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_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}
  #sec-company .sub-cont .img-wrap {border-radius: 50px 0 50px 0;}
  
  .detailsub h5 {font-size: 1.4rem;}
  .detailsub p {padding: 0 10px;}

}

@media screen and (max-width: 575px){
  .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-3 .sub01_img {height: 200px;}
  
  .detailsub h5 {font-size: 1.3rem;}


}





/*메인-포트폴리오 모달창*/
.main_modal {background: rgba(0,0,0,0.4); position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 9999999; display: none;}
.main_modal.show {display: block;}
.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 .bi {font-size: 20px; color: #333; position: absolute; top: 0px; right: 0;}
.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: 500px;}
.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;}
.modal_bg .modal_key .modal_link a {font-size: 16px; font-weight: 500; color: #0669bf; background: url(../img/portfolio_link.png)no-repeat 85% center; border: 1px solid #0669bf; line-height: 38px; border-radius: 40px; padding: 5px 70px 5px 30px;}
.modal_bg .modal_key .modal_link a:hover {background: #0669bf; color: #fff;}