.flex-box { display:flex } 
 .flex-box.column { display:flex; flex-direction: column; } 
 em.line-br { font-style: normal; } 

/* 페이징 */
.paging { margin-top:80px; display:flex; justify-content:center; align-items: center; } 
.paging a.prev { content: url('/img/pg_prev_btn_on.svg'); } 
.paging a.next { content: url('/img/pg_next_btn_on.svg'); } 
.paging { display:flex; gap:8px; justify-content:center; align-items:center; margin-top:28px; flex-wrap:wrap; } 
.paging a { padding:8px 10px; border-radius:6px; } 
.paging a.on { font-weight:600; color: crimson; } 
.paging a.disabled { pointer-events:none; opacity:.4; } 

.custom-file-label::after { right:20px!important } 
 /* 서브페이지 공통 css 시작 */
.sub-page { padding: 50px 0 180px; } 
.sub-page.disgnpg { padding: 50px 0 180px; background: #000; color:#fff } 
.sub-page .cinner { padding:0 40px } 
.sub-page .page-tit { margin-bottom: 70px; } 
.sub-page .page-tit .tit { font-size: 3em; font-weight: 800; line-height: 1.2; margin-bottom:50px } 
.sub-page .page-tit p { font-size:1.5em; line-height: 1.5; font-weight:300 } 
.sub-page .page-tit .sub_tit { line-height: 1.5; font-size: 2.5em; display: block; margin-bottom:10px; font-weight: 300; } 
.link_wrap { position:absolute; right:40px; bottom:30px ; z-index:10000} 
.link_wrap a { color:#fff; font-size:1.7em; font-weight: bold; } 
@media all and (max-width: 1199px){
 .sub-page .page-tit { margin-bottom: 60px; } 
 .sub-page .page-tit .tit { font-size:3em; margin-bottom:30px; } 
 .sub-page .page-tit .sub_tit { font-size:2em } 
 .sub-page .page-tit p { font-size:1.2em } 
 }
@media all and (max-width: 1024px){
 .sub-page .page-tit { margin-bottom: 60px; } 
 .sub-page .page-tit .tit { font-size: 2.50em; } 
 }
@media all and (max-width: 768px){
 .sub-page .page-tit { margin-bottom:30px } 
 .sub-page .page-tit .tit { font-size: 2.22em; } 
 .sub-page .cinner { padding:0 20px } 
 }
@media all and (max-width: 640px){
 .sub-page .page-tit .line-br { display:inline } 
 }
/* 서브페이지 공통 css 끝 */

#work { background:#000 url(../img/sub/work_bg.png)no-repeat center center; padding:50px 0 0 0 } 
#work .sec { padding:0; position: relative; } 
#work .mySwiper {padding-left:80px}
#work .swiper-wrapper { align-items: stretch; } 
#work .swiper-slide { position:relative; height: auto; align-self: stretch; display: flex; flex-direction: column; padding-bottom:150px } 
#work .swiper-slide:before { position:absolute; content:''; height:100%; width:6px; background: #fff; left:0; top:80px; } 
#work .swiper-slide h4 { font-size: 2em; margin-bottom: 15px; } 
#work .swiper-slide div { line-height: 2; font-size: .8em; padding: 20px 0 0 30px; } 

#work.sub-page .page-tit  {margin-bottom:40px}
#work .swiper-button-next { background: url(../img/sub/work_arrow.png)no-repeat center center/cover ; width:60px; aspect-ratio: 1/1; height:auto } 
#work .swiper-button-prev {  background: url(../img/sub/work_arrow.png)no-repeat center center/cover; width:60px; aspect-ratio: 1/1; height:auto;transform: rotateZ(180deg); } 
#work .swiper-button-next:after,
#work .swiper-button-prev:after { display:none } 


@media(max-width:1399px){
 #work .swiper-slide div {font-size: .8em}
 #work .swiper-button-next {width:40px;} 
#work .swiper-button-prev {width:40px;}
#work .mySwiper {padding-left:60px}
 }
@media(max-width:1199px) { } 
@media(max-width:1024px) { } 
@media(max-width:768px) { } 
@media(max-width:640px){
 #work .swiper-button-next { display:none } 
 }



/***************
service_bs
****************/
#service_bs { position:relative; padding:20px 0 180px } 
#service_bs .sec { padding:0 } 
#service_bs.sub-page .page-tit .tit {margin-bottom:20px;}
#service_bs.sub-page .page-tit {margin-bottom:50px}
#service_bs .content_wrap { } 
#service_bs .content_wrap ul { } 
#service_bs .content_wrap ul li:first-child { border-top: 1px solid #d9d9d9; } 
#service_bs .content_wrap ul li { border-bottom: 1px solid #d9d9d9; } 
#service_bs .content_wrap ul li a { color: #Fff; display: flex; justify-content: space-between; padding: 0 40px; align-items: center; transition:.5s } 
#service_bs .content_wrap ul li a h3 { font-size: 2.5em; padding: 20px 0; font-weight: 700; } 
#service_bs .content_wrap ul li a p { font-size: 1.25em; display: flex; flex-direction: column; align-items: flex-end; opacity: 0; } 
#service_bs .content_wrap ul li a p span { } 
#service_bs .content_wrap ul li:hover { background:#fff; transition:.5s } 
#service_bs .content_wrap ul li:hover a { color:#000; } 
#service_bs .content_wrap ul li:hover a p { opacity: 1; transition:.5s } 

@media all and (max-width: 1399px) { } 
@media all and (max-width: 1199px) { } 
@media all and (max-width: 1024px) { } 
@media all and (max-width: 768px){
 #service_bs { padding:40px 0 120px } 
 #service_bs .content_wrap ul li a { flex-direction: column; padding:0 20px } 
 #service_bs .content_wrap ul li a p { height:0; } 
 #service_bs .content_wrap ul li:hover a p { height:100%; transition: .3s; flex-direction: row; gap: 20px; padding-bottom: 20px; } 
 }
 
@media all and (max-width: 640px){
 #service_bs .content_wrap ul li a h3 { font-size: 2em; } 
 }



/***************
service_oc
****************/

#service_oc { background:#000 url(../img/main/sec5_bg.png)no-repeat center center; color:#fff; position:relative; padding: 20px 0 0; } 
#service_oc .cinner .content_wrap { padding-bottom: 100px; border-left: 6px solid #fff; } 
#service_oc .cinner .content_wrap ul { display: flex; } 
#service_oc .cinner .content_wrap ul li { width: calc(100% / 5); padding-left: 100px; box-sizing: border-box; } 
#service_oc .cinner .content_wrap ul li p { line-height: 1.8; font-size:.8em; color:#979797; font-weight:600 } 

@media all and (max-width: 1500px){
 #service_oc .cinner .content_wrap ul li { padding-left:60px;width:calc(100% / 4); font-size: .9em;} 
 
 }
@media all and (max-width: 768px){
 #service_oc .cinner .content_wrap ul { flex-wrap:wrap } 
 #service_oc .cinner .content_wrap ul li { width:calc(100% / 2) } 
 #service_oc { background-size: cover; } 
 }
@media all and (max-width: 640px){
 #service_oc .cinner .content_wrap ul li { padding-left:30px; } 
 }


/***************
service_mp
****************/

#service_mp { background:#000 url(../img/sub/service_mp_bg.png)no-repeat left center; color:#fff; position:relative; padding: 20px 0 0; } 
#service_mp .sec { padding:0; position: relative; } 
#service_mp .page-tit .tit span { font-weight: 400; padding-right:20px }
#service_mp.sub-page .page-tit .tit {margin-bottom:30px}
#service_mp .mySwiper { padding-left:100px; } 
#service_mp.sub-page .page-tit {margin-bottom:50px}
#service_mp .swiper-wrapper { align-items: stretch; } 
#service_mp .swiper-slide { position:relative; height: auto; align-self: stretch; display: flex; padding-bottom:150px; gap:30px; } 
#service_mp .swiper-slide> div { position:relative } 
#service_mp .swiper-slide> div:before { position:absolute; content:''; height:100%; width:7px; background: #fff; left:0; top:0; } 
#service_mp .swiper-slide h4 { font-size: 2em; margin-bottom: 15px; font-weight:900; opacity: .65;text-align: right; } 
#service_mp .swiper-slide h4 span { line-height: 1; } 
#service_mp .swiper-slide ul { } 
#service_mp .swiper-slide ul li { line-height: 1.3; font-size: 1.1em; padding-left: 45px; } 
#service_mp .swiper-slide ul li.color_txt { color:#B4E5A2; font-size: 1.5em; margin-bottom:10px } 
#service_mp .swiper-slide ul li.color_txt span { font-size: 1.35em; font-weight:bold; } 
#service_mp .swiper-slide ul:last-child { position :relative; margin-top: 35px; padding-top: 35px; } 
#service_mp .swiper-slide ul:last-child:before { position:absolute; top:0; content:''; width:95%; height:2px; background:#fff; left:45px; } 
#service_mp .swiper-slide ul:last-child li { font-size: .8em; line-height: 1.8; } 
#service_mp .swiper-slide ul:last-child li span.color_txt { color:#B4E5A2; margin-top:20px; display: block; } 

#service_mp .swiper-button-next { background: url(../img/sub/work_arrow.png)no-repeat center center; width:60px; aspect-ratio: 1/1; height:auto } 
#service_mp .swiper-button-prev {  background: url(../img/sub/work_arrow.png)no-repeat center center; width:60px; aspect-ratio: 1/1; height:auto;transform: rotateZ(180deg); } 
#service_mp .swiper-button-next:after,
#service_mp .swiper-button-prev:after { display:none } 
@media(max-width:1399px){
 #service_mp .mySwiper { padding-left:0 } 
 }
@media(max-width:1199px) {
        #service_mp .swiper-slide h4 {font-size: 2.5em;}
    #service_mp .swiper-slide ul li { font-size: 1.3em; } 
    #service_mp .swiper-slide ul:last-child li {font-size: 1em;}
 } 
@media(max-width:1024px){
 #service_mp .swiper-slide { flex-direction: column; } 
 #service_mp .swiper-slide h4 .line-br { display:inline } 
 }
@media(max-width:768px){
 #service_mp .swiper-slide ul li { padding-left:30px; } 
 #service_mp .swiper-slide ul:last-child:before { left:30px; } 
 #service_mp .swiper-slide ul:last-child { padding-top:20px; margin-top:20px } 
 #service_mp .swiper-button-next,
 #service_mp .swiper-button-prev {display:none}
 }
@media(max-width:640px) { } 

 
/***************
about_os
****************/

#about_os { padding: 20px 0 0; position:relative; } 
#about_os .sec1 { padding-bottom:150px; background: url(../img/sub/about_os_sec1_bg.png)no-repeat center center/cover; color:#fff; position:relative; } 
#about_os .sec1 .img_wrap { position:relative; left:50%; max-width:600px; } 
#about_os .sec1 .page-tit .tit { margin-bottom:0 } 
#about_os .sec1 .sub-page .page-tit {margin-bottom:50px;}
#about_os .sec2 { padding-bottom:150px; background: url(../img/sub/about_os_sec2_bg.png)no-repeat right center/cover; color:#fff; position:relative; background-size: 70%; } 
#about_os .sec2 .tit { font-size: 4em; } 
#about_os .sec2 .sub_tit { font-size: 2em;line-height: 1.3; } 
#about_os .sec2 .b_txt { font-size: 6em; font-weight: 900; line-height:1.5 } 
#about_os .sec2 .s_txt { font-size: 3em; font-weight: 600; line-height: 1; } 

@media all and (max-width: 1399px){
 #about_os .sec2 .b_txt { font-size: 5em; } 
 }
@media all and (max-width: 1199px){
 #about_os .sec2 .sub_tit { font-size: 1.5em; } 
 #about_os .sec2 .b_txt { font-size: 4.5em; } 
 }
@media all and (max-width: 1024px){
 #about_os .sec2 .tit { font-size: 2.5em; } 
 #about_os .sec1 { background-size:contain } 
 #about_os .sec1 .img_wrap { left:0; max-width:100% } 
 #about_os .sec1 .img_wrap img { width:100% } 
 #about_os .sec2 .b_txt { font-size: 4em; } 
 }
@media all and (max-width: 768px) { } 
@media all and (max-width: 640px){
 #about_os .sec2 .b_txt { font-size: 3em; display: block } 
 #about_os .sec2 .s_txt { font-size: 2em; display: block; } 
 #about_os .sec2 .sub_tit { font-size: 1.2em; } 
 }


 
/***************
about_int
****************/
#about_int { padding-top:20px;} 
#about_int.sub-page .page-tit .tit { margin-bottom:20px} 
#about_int .page-tit .tit span { font-weight:400 } 
#about_int .sec1 .content_wrap { display: flex; flex-direction: column; gap: 170px; } 
#about_int .sec1 .content_wrap > div { display: flex; position:relative } 
#about_int .sec1 .content_wrap > div:nth-child(1) { background:url(../img/sub/about_int_sec1_bg01.png)no-repeat top right } 
#about_int .sec1 .content_wrap > div:nth-child(2) { background:url(../img/sub/about_int_sec1_bg02.png)no-repeat top right } 
#about_int .sec1 .content_wrap .img_wrap { width: 22%; display: flex; justify-content: flex-end; align-items: center; } 
#about_int .sec1 .content_wrap .img_wrap img { } 
#about_int .sec1 .content_wrap .list_wrap { display: flex;padding-left: 45px; border-left: 7px solid #fff; padding-bottom:50px;    width: 78%;     justify-content: space-between;} 
#about_int .sec1 .content_wrap .list_wrap .list { width: calc(50% - 30px);} 
#about_int .sec1 .content_wrap .list_wrap .list .title_wrap { padding-bottom: 35px; margin-bottom: 30px; height: 185px; border-bottom: 2px solid #fff; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end; } 
#about_int .sec1 .content_wrap .list_wrap .list .title_wrap span { font-size: 1.5em; color: #FF69A4; } 
#about_int .sec1 .content_wrap .list_wrap .list .title_wrap span strong { font-size: 1.2em; } 
#about_int .sec1 .content_wrap .list_wrap .list .title_wrap h4 { font-size: 1.5em; } 
#about_int .sec1 .content_wrap .list_wrap .list .title_wrap h4 span { color: #fff; font-size: 1em; } 
#about_int .sec1 .content_wrap .list_wrap .list .txt_wrap { display: flex; flex-direction: column; gap: 20px; } 
#about_int .sec1 .content_wrap .list_wrap .list .txt_wrap p { font-size: .9em;} 
#about_int .sec1 .content_wrap .list_wrap .list .txt_wrap p span { } 

#about_int .sec2 { padding:150px 0; background:url(../img/sub/about_int_sec2_bg.png)no-repeat center right } 
#about_int .sec2 .content_wrap { padding-left: 50px; border-left: 7px solid #fff; position: relative; } 
#about_int .sec2 .content_wrap:before { content: ''; background: #000; width: 20px; display: block; height: 20px; border-radius: 40px; border: 3px solid #fff; position: absolute; left: -13px; top: -17px; } 
#about_int .sec2 .content_wrap ul { display: flex; flex-direction: column; gap: 30px; } 
#about_int .sec2 .content_wrap ul li { display: flex; align-items: center; } 
#about_int .sec2 .content_wrap ul li span { color: #96DCF8; width: 140px; font-weight: 500; } 
#about_int .sec2 .content_wrap ul li p { } 

#about_int .sec3 { background:url(../img/sub/about_int_sec3_bg.png)no-repeat left center } 
#about_int .sec3 .content_wrap { padding-left: 50px; border-left: 7px solid #fff; position: relative; } 
#about_int .sec3 .content_wrap ul { display: flex; flex-direction: column; gap: 30px; padding-bottom:120px } 
#about_int .sec3 .content_wrap ul li { display: flex; align-items: flex-start; position:relative } 

#about_int .sec3 .content_wrap ul li:before { content: ''; background: #fff; width: 20px; display: block; height: 20px; border-radius: 50%; position: absolute; left: -64px; top: 5px; } 
#about_int .sec3 .content_wrap ul li:first-child:before { background: #000; border:3px solid #fff } 
#about_int .sec3 .content_wrap ul li span { color: #B4E5A2; width: 140px; font-weight: 500; } 
#about_int .sec3 .content_wrap ul li p { } 

#about_int .sec4 { background:url(../img/sub/about_int_sec3_bg.png)no-repeat left center; padding-top:150px } 
#about_int .sec4 img { width:100%; max-width:1700px; margin:0 auto } 


@media(max-width:1399px){
 #about_int .sec1 .content_wrap .list_wrap { gap: 30px; display: flex; flex-direction: column;width:70% }  
 #about_int .sec1 .content_wrap .img_wrap { width:30% } 
 #about_int .sec1 .content_wrap .list_wrap .list {width:100%}
 #about_int .sec1 .content_wrap .list_wrap .list .txt_wrap p span {display:inline}

}
@media(max-width:1199px) {
    #about_int .sec1 .content_wrap > div{align-items: flex-start;}
 } 
@media(max-width:1024px) { } 
@media(max-width:768px) {
    #about_int .sec1 .content_wrap > div {    flex-direction: column;gap:30px;}
    #about_int .sec1 .content_wrap .img_wrap {width:100%;justify-content: center;max-height:400px;display: flex;align-items: flex-start;overflow: hidden;}
    #about_int .sec1 .content_wrap .img_wrap img {}
    #about_int .sec1 .content_wrap .list_wrap {width:100%}
    #about_int .sec1 .content_wrap .list_wrap .list .title_wrap {height:auto}
    #about_int .sec1 .content_wrap .list_wrap {gap:50px}
    #about_int .sec1 .content_wrap {gap:80px}
    #about_int .sec2 {padding:80px 0}
    #about_int .sec4 {padding-top:80px}
    .sub-page.disgnpg {padding:50px 0}
    #about_int .sec1 .content_wrap .list_wrap {padding-left:20px;border-left:4px solid #fff}
    #about_int .sec1 .content_wrap .list_wrap .list .title_wrap h4 span {margin-bottom:10px;}
    #about_int .sec2 .content_wrap,
    #about_int .sec3 .content_wrap {padding-left:20px;}
    #about_int .sec3 .content_wrap ul li:before {left:-34px}
    #about_int .sec2 .content_wrap ul li,
    #about_int .sec3 .content_wrap ul li {flex-direction: column;align-items: flex-start;}
 }
 
@media(max-width:640px) {


 } 



#bo_gall .gall_text_href:hover:before {content:''; position:absolute;right:30px ;bottom:30px; background: url(../img/sub/work_arrow.png)no-repeat center center /cover;width:60px;aspect-ratio: 1/1; }
 
@media(max-width:1024px) {

    #bo_gall .gall_text_href:hover:before {width:40px; }

 } 

  
@media(max-width:640px) {
    #bo_gall .gall_text_href:hover:before {width:30px; }


 }