@charset "utf-8";
/* *******************************************************
 * filename : content.css
 * description : 서브페이지 컨텐츠 CSS
 * date : 2024-02-26
******************************************************** */

/* ******************  서브공통 ********************** */
/* -------- 공통 스크롤바  -------- */
.custom-scrollbar-cover,
.cm-scroll-drag-guide{display:none;}

/* -------- 공통 :: 탭 -------- */
/* Tab 공통 스타일 */
.sub-tab-wrapper-style{position:relative; height:60px; margin-bottom:10rem; }
.sub-tab-list-style ul{display:flex; justify-content:center; width:100%; height:100%; /* background: #fafafa; */}
.sub-tab-list-style ul:after{display:none}
.sub-tab-list-style ul li{position:relative; width:20%; max-width:25rem; background-color:#f9f9f9;}
.sub-tab-list-style ul li:first-child{border-radius:4.1rem 0 0 4.1rem;}
.sub-tab-list-style ul li:last-child {border-radius:0 4.1rem 4.1rem 0;}
.sub-tab-list-style ul li a{display:table; height:58px; width:100%; }
.sub-tab-list-style ul li a em{display:table-cell; vertical-align:middle; color:rgba(85, 88, 89, 0.4); font-size:18px; letter-spacing:-0.30px; text-align:center; font-weight: 700;}
.sub-tab-list-style ul li.active{/*z-index:1;  background-color:#F04E4C; border-radius:4.3rem; */}
.sub-tab-list-style ul li.active a {background-color:#F04E4C; border-radius:4.3rem;width: 94%;/*  margin: 4px ; */transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1); }/* phj */
.sub-tab-list-style ul li.active a em{color:#fff; }
/* Tab Fixed Move*/
.sub-tab-list-style.top-fixed{position:fixed; top:120px; left:0; width:100%; height:60px;}
/* Mobile Tab Drop Menu */
.sub-drop-open-btn-style{display:none}

@media all and (min-width:1025px){
	/* Tab Fixed Background */
	.sub-tab-list-style:before{position:absolute; top:0px; bottom:0px; left:50%; width:0; content:""; background-color:#fff; border-bottom:1px solid #e5e5e5; transition:all 0.5s}
	.sub-tab-list-style.top-fixed:before{width:100%; margin-left:-50%}
}

@media all and (max-width:800px){
	.sub-tab-list-style ul li {max-width:initial;}
	.sub-tab-list-style ul li.selected a {background-color:initial; border-radius:initial;}
	.sub-tab-list-style ul li:last-child , .sub-tab-list-style ul li:first-child{border-radius:initial;}
	.sub-drop-menu-style ul li.selected a em {color:var(--main-color);}
}

./*why-list-type2{}
.why-list-type2 .list-wrap{display: flex;}
.why-list-type2 .list-wrap .list-item{width:33.33%;}
.why-list-type2 .list-wrap .list-item .txt{position: relative; font-size:1.6rem; letter-spacing:-0.03em; color:#222; line-height:1.5; font-weight: 400; padding-left:2rem; margin-top:1rem;}
.why-list-type2 .list-wrap .list-item .txt:nth-of-type(1) {margin-top: 0;}
.why-list-type2 .list-wrap .list-item .txt:before {display: block; content:"\e929"; position:absolute; left:0; top:0; font-size:1.5rem; color:var(--main-color2); font-family:"xeicon";}
.why-list-type2 .img-item{background:#fff; padding:2.5rem 0; margin-top:4.5rem;}
.why-list-type2 .img-item span{display: block; text-align:center;}
.why-list-type2 .img-item span img{max-width:100%}

.why-list-type3{display: flex; flex-wrap:wrap; justify-content:space-between;}
.why-list-type3 .list-item{position: relative; width:47.5%; background:#fff; border-radius:3rem; box-shadow: 0px 0px 20px #F8ECECB3; margin-bottom:2rem; padding:5rem; box-sizing:border-box; min-height:24rem;}
.why-list-type3 .list-item .icon{position: absolute; top:4rem; right:5rem;}
.why-list-type3 .list-item .tit{font-size:2.4rem; line-height:1.2; color:var(--main-color2); font-weight:700;}
.why-list-type3 .list-item .txt-box{margin-top:2.5rem;}
.why-list-type3 .list-item .txt-box .txt{position: relative; padding-left:2rem; font-size:1.6rem; line-height:1.625; letter-spacing:-0.032em; font-weight:500; color:#222;}
.why-list-type3 .list-item .txt-box .txt:before{position: absolute; content:'\e929'; font-family:'xeicon'; font-size:1.6rem; left:0; top:0rem; color:var(--main-color);}*/


@media all and (min-width:801px){
/*	.service-page .sp-con .how-list.list-02 li{width:50%;}
	.service-type-list .service-inner-txt{height:5.6rem;}*/
}

@media all and (max-width:800px){
/*	.why-list-type3{margin-top:3rem;}
	.why-list-type3 .list-item{padding:3rem 2rem; min-height:0;}
	.why-list-type3 .list-item .icon{top:2rem; right:2rem;}*/
}
@media all and (max-width:480px){
	.why-list-type3{display: block;}
	.why-list-type3 .list-item{width:100%;}
}

/* 서브페이지 공통 */
.svg {border:none; position:absolute; top:0; left:0; bottom:0; right:0; width:100%; height:100%; margin:auto;}
/*.sub-page .con {margin-bottom: 15rem;}*/
.sub-page .con:last-of-type {margin-bottom: 0;}
.img-box {text-align:center;}
.img-box img {max-width:100%;}
.tit-box {text-align:center;}
.tit-box .sub-tit {position: relative; font-size:3.8rem; color:#282828/*F04E4C*/; font-weight: 800;}
.tit-box .sub-tit:before {display: block; content:""; position:absolute; bottom:-10px; left:50%  ;transform:translateX(-50%); border-bottom:4px solid #F04E4C; width:4rem; }
.tit-box .con-tit {font-size:3.8rem; color:#222; letter-spacing:-0.96px; line-height:1.5em; font-weight: 700; margin-top:6.83rem;}
.tit-box .con-tit > .highlight {color:var(--main-color);}
.tit-box .con-txt {font-size:2rem; color:#555859; letter-spacing:-0.4px; line-height:1.8em; font-weight: 500; margin-top:4.3rem;}

@media all and (max-width:800px){
	.tit-box .con-tit {font-size:2.8rem; padding:1rem;}/* phj */
    .tit-box .con-txt {font-size:1.8rem; padding:1rem;}/* phj */
    
	/*.sub-page .con {margin-bottom:7.5rem;}*/
}

/* ******************************** About 공통 ******************************** */
.sub-page .diffrence-list li {display:flex;}
.sub-page .main-txt-box {position:absolute; width: 100%; top:60%; left:50%; transform:translate(-50%,-50%); font-size:4rem; letter-spacing:-0.96px; color:var(--main-color); font-weight: 700; text-align:center; line-height:1.25em;}
.sub-page .ws-top-box > .scraping-sub-txt:nth-of-type(1) .scraping-tit-box:after {right:initial; left:-65%; transform:rotate(180deg); top:25%;}
/* ******************  i-hub :: intro ******************  */
.about-intro-page .con:first-of-type .tit-box {position: relative; }
.about-intro-page .con:first-of-type .tit-box:after {display: block; content:""; position:absolute; /*width: 100%; height:100%; 
background:-webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0.5) 48%,rgba(255,255,255,0) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 90%,rgba(255,255,255,0.5) 95%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );*/ bottom:-50%; z-index:-1;}

.about-intro-page .con:first-of-type {text-align:center; /*margin-bottom: 22rem;*/}
.about-intro-page .frame-contents:nth-child(2n) { background-color: #f8f8f8;}
.about-intro-page .frame-contents{padding: 14rem 0;}
.about-intro-page .frame-contents:first-child{padding:0 0 14rem ;}
/*.about-intro-page .frame-contents:last-child{padding:16rem 0 0 ;}*/
.intro-main-box {position: relative; /*height: 7.3rem;*/ display:inline-block; align-items:center; justify-content:center; opacity:1; margin:30rem auto 20rem; }
.intro-main-box:before {display:block; content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width: 30rem; height: 30rem; border-radius:100%; box-shadow: 2px 3px 20px rgba(171, 16, 16, 0.15); background:rgba(255,255,255,1); opacity:0.5;}

.intro-main-box > span {position: relative; z-index: 9; color:var(--main-color); font-size:6.2rem; letter-spacing:-1.24px; font-weight: 700; margin-bottom: 0rem; display: block; top: 30px;}
.intro-main-box .last-circle {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width: 60rem; height: 60rem; border-radius:100%; box-shadow: 3px 3px 20px #AB101026; opacity:0.2;}

.about-symbol-box {position: relative; margin-bottom:8.5rem; z-index: 19;}
.about-symbol-box .sub-symbol {position: absolute; display:flex; justify-content:center; align-items:center; width: 13rem; height: 13rem; border-radius:100%; border:1px solid #F04E4C; font-size:2.4rem; letter-spacing:-0.048em; color:#F04E4C; text-align:center; background: #fff; transition:all 0.4s; cursor: pointer}
.about-symbol-box .sub-symbol:nth-of-type(1) {left:-18rem; bottom:0rem;}
.about-symbol-box .sub-symbol:nth-of-type(2) {left:-9rem; bottom:-26rem;}
.about-symbol-box .sub-symbol:nth-of-type(3) {left:12rem; bottom:-26rem; flex-direction:column;}
.about-symbol-box .sub-symbol:nth-of-type(4) {right: -18rem; bottom: 0rem; flex-direction:column;}
.about-symbol-box .sub-symbol:nth-of-type(5) {left:2rem; bottom: 14rem; flex-direction:column;}

.about-symbol-box .sub-symbol > .bold {font-weight: 700;}
.about-symbol-box .sub-symbol > .bold.br {display:block; margin-top:4px;}
.about-symbol-box .sub-symbol:before {display: block; content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:8rem; letter-spacing:-0.016em; color:rgba(240, 78, 76, 0.05); font-weight: 700;}
.about-symbol-box .sub-symbol:nth-of-type(1):before {content:"02";}
.about-symbol-box .sub-symbol:nth-of-type(2):before {content:"03";}
.about-symbol-box .sub-symbol:nth-of-type(3):before {content:"04";}
.about-symbol-box .sub-symbol:nth-of-type(4):before {content:"05";}
.about-symbol-box .sub-symbol:nth-of-type(5):before {content:"01";}
.about-symbol-box .sub-symbol.active {background: rgba(240, 78, 76, 1); color:#fff;}
.about-symbol-box .sub-symbol.active:before {color:rgba(255, 255, 255, 0.1);}


/* ****************** about :: intro ******************  */
/*.service-page{padding-bottom:10rem;}*/
.careers-list {display:flex; flex-wrap:wrap; margin: 6.83rem -2rem 0;}
.careers-list li {position: relative; width: calc(32% - 3rem); border-radius:3rem; min-height:26rem; margin:0 2rem; /*box-shadow: 0px 0px 8px #A82F2E14;*/ background:#fff; margin-top:3rem; transition:all 0.4s;     border: 1px solid #ededed;}
.careers-list .icon-bg {display:none; width: 100%; position:absolute; top:50%; left:0; transform:translateY(-50%); height: 0; padding-top:62.99%; opacity:0.1;}
.careers-list li a {position: relative; display:flex; flex-direction:column; justify-content:space-between; width: 100%; height: 100%; padding:4rem; box-sizing:border-box; cursor: default}
.careers-list li a:before {display:block; content:""; position:absolute; top:0; left:0; width:100%; height:100%; z-index:999;}
/* .service-type-list li:nth-child(2) a:before {display: none; content:""; position:absolute; width: 100%; height: 100%; left:0; top:0; background-image:url(../svg/sp_icon02_bg.svg); background-repeat:no-repeat; background-position:center;} */
.title_toph{margin-top: 6.83rem}
.careers-list .careers-tit {font-size:2.4rem; letter-spacing:-0.024em; color:#222; font-weight: 700; line-height:1em;}
.title_no{font-size: 1.5rem;color: #df453a }
.careers-list .icon-box {display:flex; justify-content:center; align-items:center; align-self:flex-end; width:6rem; height: 6rem; border-radius:100%; background: rgba(240, 78, 76, 0.07);}
.careers-list .icon-box span {display: inline-block; position: relative; height: 0; padding-top: 58.35%; width: 3.5rem;}
.careers-list li:nth-child(3) .icon-box span {padding-top:36.67%;}
.careers-list .service-inner-txt {font-size:1.6rem; letter-spacing:-0.016em; color:#333; line-height:1.75em; font-weight: 400;}
.img_wrap { position: relative; display: block; /*width: 100%;*/ height: auto; text-align: center;}
.frame-contents.with_img>* .block_wrap{display: flex;  -webkit-box-align: center;  -ms-flex-align: justify-content: space-between;/*center; justify-content: center; */ }
    
.frame-contents.with_img .contents-img.card-01 {content: var( --img-performance-01);}
.frame-contents.with_img .contents-img.card-02 {content: var( --img-performance-02);}
.frame-contents.with_img .contents-img.card-03 {content: var( --img-performance-03);}
.frame-contents.with_img .contents-img.card-04 {content: var( --img-performance-04);}
.frame-contents.with_img .contents-img.card-05 {content: var( --img-performance-05);}
.frame-contents.with_img .contents-img.card-06 {content: var( --img-performance-06);}
.frame-contents.with_img .contents-img.card-07 {content: var( --img-performance-07);}

.frame-contents.with_img>* .img_wrap img { display: block; width: 56rem; height: 44rem; border-radius: 1rem; -o-object-fit: cover; object-fit: cover; overflow: hidden; background: #ddd; border: 1px solid #efefef;}
.main-mdtitle { /*font-family: "Pretendard",sans-serif;*/ font-size: 3rem; font-weight: 600; line-height: 1.2; color: #222; text-align: left; word-break: keep-all;}

.frame-contents.with_img .block_wrap > div:last-child{ text-align: left; margin-left: 16rem;}
.frame-contents.with_img .text_wrap{min-width: 50rem; position: relative; text-align: left}
.frame-contents.with_img .text_wrap .main-mdtitle:not(:last-child) { margin-bottom: 1.8rem;}
.frame-contents.with_img .text_wrap .main-mdtitle {text-align: left;}
.frame-contents.with_img .text_wrap .main-text { text-align: left;}
.main-text { font-family: "Pretendard",sans-serif; font-size:1.6rem; font-weight:400; line-height: 1.8; letter-spacing: 0rem; color: #222; text-align: left; word-break: keep-all;}
.frame-contents.with_img .text_wrap .main-text li:before {
    position: absolute; left: 0; top: 10px; width: 3px; height: 3px; border-radius: 4px; background: #cb809f; display: block; content: '';}
.frame-contents.with_img .text_wrap .main-text li { padding-left: 10px; position: relative;}

:root {
    --img-performance-01: url(../images/layout/performance_img_01.png);
    --img-performance-02: url(../images/layout/performance_img_02.png);
    --img-performance-03: url(../images/layout/performance_img_03.png);   
    --img-performance-04: url(../images/layout/performance_img_04.png);
    --img-performance-05: url(../images/layout/performance_img_05.png);
    --img-performance-06: url(../images/layout/performance_img_06.png); 
    --img-performance-07: url(../images/layout/performance_img_07.png); 
    --img-business-01: url(../images/layout/business_img_01.png);
    --img-business-02: url(../images/layout/business_img_02.png);
    --img-business-03: url(../images/layout/business_img_03.png);
    --img-business-04: url(../images/layout/business_img_04.png);
    --img-business-05: url(../images/layout/business_img_05.png);
    --img-business-06: url(../images/layout/business_img_06.png);  
    --img-business-07: url(../images/layout/business_img_07.png);
    --img-business-08: url(../images/layout/business_img_08.png);
    --img-business-09: url(../images/layout/business_img_09.png);
    --img-business-10: url(../images/layout/business_img_10.png);  
    --img-business-11: url(../images/layout/business_img_11.png);
    --img-business-12: url(../images/layout/business_img_12.jpg);
    --img-business-13: url(../images/layout/business_img_13.jpg);
    --img-business-14: url(../images/layout/business_img_14.jpg);
    --img-product-15: url(../images/layout/product_img_15.jpg);
    --img-product-16: url(../images/layout/product_img_16.jpg);  
    --img-product-17: url(../images/layout/product_img_17.jpg);
    --img-product-18: url(../images/layout/product_img_18.jpg);
    --img-product-19: url(../images/layout/product_img_19.jpg);
    --img-product-20: url(../images/layout/product_img_20.jpg);
    --img-product-21: url(../images/layout/product_img_21.jpg);

}
.pad0{padding-bottom:0!important}
.mart_683{    margin-top:6.83rem;}

/* ****************** infotech :: 연혁 ******************  */
.history-page .sub-tab-content-style {width: calc(100% - 28rem); margin-left:28rem; position: relative;}
.history-page .sub-tab-content-style:before {display: block; content:""; width: 2px; height: 110%; position:absolute; top:-10%; left:0; background:#ddd;}
.history-page .sub-tab-content-style:after {display: block; content: ""; width: 2px; /* height: 21%; */ height: 0; position: absolute; top: -12%; left: 0; background: var(--main-color); transition:all 0.4s;}
.history-page .sub-tab-content-style.on:after {height: 14%;}
.history-year-group-box {position: relative; display:flex; margin-top:11.3rem;}
.history-year-group-tit-box {position:absolute; width: 20rem; height: auto; padding-right:8rem;}
.history-year-group-tit-box .sub-tab-list-style ul {flex-direction:column; justify-content:flex-start; background:initial; height: auto !important;}
.history-year-group-tit-box .sub-tab-list-style ul li {width: 100%; max-width:20rem; background-color:initial;}
.history-year-group-tit-box .sub-tab-list-style ul li a {height: 60px;}
.history-year-group-tit-box .sub-tab-list-style ul li a em {font-size:2rem; letter-spacing:-0.02em; color:#bcbcbc; line-height:1.2; font-weight: 600; padding:1.2rem 0; text-align:center;} 
.history-year-group-tit-box .sub-tab-list-style ul li.selected {/*box-shadow: 0px 3px 20px #AB101026;*/ margin-bottom: 1rem; /*border-radius:4.3rem;*/} 
.history-year-group-tit-box .sub-tab-list-style ul li.selected a {border-radius:0rem; border-bottom:2px solid var(--main-color); box-sizing:border-box; background-color:initial;}
.history-year-group-tit-box .sub-tab-list-style ul li.selected a em {color:var(--main-color); font-size:2.4rem; color:var(--main-color); font-weight: 700; letter-spacing:-0.024em;}
.history-year-group-tit-box .history-year-group-tit {font-size:2rem; letter-spacing:-0.02em; color:#bcbcbc; line-height:1.2; font-weight: 600; padding:1.2rem 0; text-align:center;}
.history-year-group-tit-box .history-year-group-tit.selected {border:2px solid var(--main-color); border-radius:8rem; box-shadow: 0px 3px 20px #AB101026; font-size:2.4rem; color:var(--main-color); font-weight: 700; letter-spacing:-0.024em; margin-bottom: 1rem;}
.history-year-list-box {/* width: calc(100% - 28rem); */ padding-left:9.5rem; box-sizing:border-box;}
.history-year-list-box .history-year-item {display:flex; align-items:center; margin-top:15.7rem; padding-top:5rem; position: relative;}
.history-year-list-box .history-year-item:before {display: block; content: ""; position: absolute; left: -19rem; top: -190%; width: 2px; height: 0; background: var(--main-color); transition:all 0.4s;}
.history-year-list-box .history-year-item:first-of-type { margin-top: 0rem; padding-top:0;}
.history-year-list-box .history-year-item:first-of-type:before {display:none;}
.history-year {width: 19rem; font-size:8rem; letter-spacing:-1.6px; font-weight: 700; color:rgba(238, 238, 238, 1); margin-right: 8.8rem; font-family: 'Montserrat', sans-serif; position: relative;}
.history-year:before {opacity:0; content:""; position:absolute; left:-102%; top:50%; transform:translateY(-50%); background:var(--main-color); width: 1rem; height: 1rem; border-radius:100%; box-shadow: 0px 0px 10px #F04E4C; transition:all 0.7s;}
.history-month-item {display:flex; margin-top:2rem;}
.history-month-item:nth-of-type(1) {margin-top: 0;}
.history-month-item .history-month {width: 4.7rem; font-size:1.8rem; font-weight: 700; color:#222; letter-spacing:-0.036em;}
.history-detail-txt-con {/*width: calc(100% - 4.7rem);*/}
.history-detail-txt-con .history-detail-txt {font-size:18px; letter-spacing:-0.04em; color:rgba(34, 34, 34, 0.7); font-weight: 400; color:#222; }
.history-year-list-box .history-year-item.active .history-year {color:var(--main-color);}
.history-year-list-box .history-year-item.active:before {height: 250%;}
.history-year-list-box .history-year-item.active .history-year:before {opacity:1;}
.history-year-group-box{display: block;}
.history-year-group-tit-box{height:auto; margin-bottom:0; top:0;}
.history-year-group-tit-box .sub-tab-list-style{position: absolute; width:20rem; height:0 !important;}
.history-year-group-tit-box .sub-tab-list-style.top-fixed{position: fixed; left:50%; transform:translateX(-50%); margin-left:-559px; height: 0 !important;
    top: calc(var(--header-height) + 20px);}
.history-year-group-tit-box .sub-tab-list-style.top-fixed:before{display: none;}
.history-year-group-tit-box.bottom-fixed {position:absolute; bottom:0; top:initial;}
.history-year-group-tit-box.bottom-fixed .sub-tab-list-style.top-fixed {position:static; transform:translateX(0); margin-left: 0;}
/*.history-year-group-tit-box.fixed .sub-tab-list-style.top-fixed{position: fixed; transform:translateX(-50%); margin-left:-559px; height:0 !important; top:calc(var(--header-height) + 20px);}*/

@media all and (min-width:801px){
	.history-year-group-tit-box.bottom-fixed .sub-tab-list-style ul{transform:translateY(-100%);}
}
/* ******************  about :: 고객사 ******************  */
.reference-box {margin-top: 10rem;}
.reference-con .con-tit {margin-bottom: 6rem;}
.reference-container {margin-top: 15rem;}
.reference-list-con {max-width:1320px; margin:0 auto;}
.reference-list-box {display:flex; flex-wrap:wrap; margin:0 -2rem; background:#fff;}
.reference-list-box li {float: left; border: 1px solid #e2e2e2; width: calc(99% / 4); height: 150px; position: relative; margin: -1px 0 0 -1px;/*width:14.66%; margin:2% 1%;*/}
.reference-list-box li img { position: absolute; left: 0; right: 0; top: 0; bottom: 0;  margin: auto;}
.reference-list-box li a {display:flex; width: 100%; height: 100%; justify-content:center; pointer-events: none;}
.reference-list-box li a img{max-width:100%; filter:grayscale(0); transition:var(--transition-custom)}
.reference-list-box li .logo {display: block; position: relative; height: 0; width: 100%; padding-top:33%;}
.reference-list-box li .logo img {position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; max-width: 100%; max-height: 100%;}

.reference-list-box li:hover a img{filter:grayscale(1);}

/* ****************** about :: 오시는길 ******************  */
.map-script-wrapper{position:relative; overflow:hidden; margin:3rem 3rem 0 0; height:360px;}
/*.map-script-wrapper .map-script-con{position:absolute; top:50%; left:50%; margin:-250px 0 0 -660px;}*/
/* .map-container {position: relative;} *//* phj */

.map-info-box {  display: flex;  justify-content: space-between; padding-top: 86px}
.map-info-box .left span { letter-spacing: -0.025em; font-weight: 700}
.map-info-box .left {width:calc(100% - 610px); margin-top: -38px;}
/* .map-info-box .right { width: 610px; margin-top: -30px} */
.map-info-box .right { width: 610px; margin-top: -10px}/*24.04.17 수정 phj*/

/* .map-info-box .col { display: flex; width: 100%; min-height:60px; border-bottom: 1px solid #f5f5f5; align-items: center; line-height: 1.3; padding: 12px 0; box-sizing: border-box} */
.map-info-box .col { display: flex; width: 100%; min-height:50px; border-bottom: 1px solid #f5f5f5; align-items: center; line-height: 1.3; padding: 12px 0; box-sizing: border-box}
.map-info-box .col strong { font-size: 1.8rem; letter-spacing: -0.025em; font-weight: 700; width: 100px}
.map-info-box .col .txt { display: grid}
.map-info-box .col .txt span { font-size: 1.6rem; letter-spacing: -0.025em; color: #565656}
.map-info-box .col .txt span b { font-weight: unset}
.map-info-box .col .txt.long { grid-template-columns: repeat(1, auto); grid-gap: 0 40px;    transform: translateY(20px)}
.map-info-box .col .txt.long span { margin-bottom: 10px}
.map-info-box .phone .txt,.map-info-box .mail .txt { grid-template-columns: repeat(3, auto); grid-gap: 0 40px}
.map-info-box .part { border-bottom: unset}
.map-info-box .part1 .txt,  { grid-template-columns: repeat(3, auto); grid-gap: 0 100px}




/* ****************** business ******************  */

/*.img_wrap { position: relative; display: block;height: auto; text-align: center;}*/
.frame-contents.business .block_wrap{display: flex;  -webkit-box-align: center;  -ms-flex-align: center;  }
.frame-contents.business .block_wrap > div:last-child{ text-align: left; margin-left: 8rem;}
.frame-contents.business .img_wrap img { display: block; width: 100%; height:100%; border-radius: 1rem; -o-object-fit: cover; object-fit: cover; overflow: hidden; background: #ddd}


/*.frame-contents .block_wrap > div:last-child{ text-align: left; margin-left: 16rem;}*/
.frame-contents.business .text_wrap{min-width: 50rem}
.frame-contents.business .text_wrap .main-mdtitle:not(:last-child) { margin-bottom: 1rem;}
.frame-contents.business .text_wrap .main-mdtitle {text-align: left;}
.frame-contents.business .text_wrap .main-text { text-align: left;}
.frame-contents.business .text_wrap .main-text li:before {
    position: absolute; left: 0; top: 10px; width: 3px; height: 3px; border-radius: 4px; background: #cb809f; display: block; content: '';}
.frame-contents.business .text_wrap .main-text li { padding-left: 10px; position: relative;}
.frame-contents.business .text_wrap .main-text li em,.frame-contents.product .text_wrap .main-text li em { display: block; line-height: 26px; padding-left: 10px; color:#777}
/*상세보기*/
.frame-contents.business .text_wrap .main-mdtitle .step_more { position: relative; bottom: 5px; margin-left:5px; font-size: 13px; padding: 5px 25px 6px 10px; color: #343743;  border: 1px solid #ccc; cursor: pointer;  background: url(../images/layout/arr_main.png) no-repeat 85% 50%; border-radius: 5px;}
.frame-contents.business .stepsub_more { /*border-top: 1px solid #e2e2e2;*/ padding: 40px 20px 20px; margin-top: 50px; display: none; background: #f8f8f8;}
.frame-contents.business .stepsub_more p { font-size: 13px; color: #666; padding-top: 20px;}
.frame-contents.business .stepsub_more .cont01 { /*box-shadow: 0px 2px 10px 0px rgb(0 0 0 / 7%);*/ padding: 40px 0px; margin: 20px 0 0px;/* background: #fff;*/}
.frame-contents.business .stepsub_more .cont02 { /* box-shadow: 0px 2px 10px 0px rgb(0 0 0 / 7%); */padding: 40px 0px; margin: 40px 0 0px;/* background: #fff*/;  height: auto;  }
.frame-contents.business .stepsub_more .cont01 li { width: calc(92% / 4); display: inline-block; position: relative; padding: 0 10px; vertical-align: top;}
.frame-contents .stepsub_more .cont01 h4, #container .stepsub_more .cont02 h4 { font-size: 16px; font-weight: 600; color: #333}
.frame-contents.business .stepsub_more .cont01 span, #container .stepsub_more .cont02 span { font-size: 13px; color: #666; margin-top: 6px; display: block; line-height: 20px;}
.frame-contents.business .stepsub_more .cont01 div { margin-top: 26px}
.frame-contents.business .stepsub_more .cont01 img { max-width: 100%; border-radius: 8px;  box-shadow: 0px 2px 8px 0px rgb(0 0 0 / 20%);}
.frame-contents.business .stepsub_more .cont02 li { width: calc(92% / 3);
    display: inline-block;  padding: 0 15px; vertical-align: top; border-right: 1px solid #dedede;  position: relative}
.frame-contents.business .stepsub_more .cont02 li:nth-last-child(1) { border-right: 0}
.frame-contents.business .stepsub_more .cont02 div { margin-left: 10px ; width: calc(100% - 40%);}
.frame-contents.business .stepsub_more .cont02 .product { margin-top: 8px}
.frame-contents.business .stepsub_more .cont02 .product li { width: 100%; line-height: 18px; margin-top: 5px; border-right: 0; height: auto}
.frame-contents.business .stepsub_more .cont02 .product li:before { position: absolute;
    left: 0;  top: 6px; width: 4px; height: 4px; border-radius: 4px; background: #cb809f; display: block; content: '';}
.frame-contents.business .stepsub_more .cont02 img, #container .stepsub_more .cont02 div {  display: inline-block; vertical-align: top;}
.frame-contents.business h3.step_03_more { font-size: 20px;  color: #333; font-weight: bold; position: relative; text-align: left;}

.w_left{width: calc(100% - 300px)}
.swiper-wrapper {/*margin-left: -25rem;*/ transform: translate3d(0px, 0px, 0px);}
.swiper-container {/*width: 100%; */ height: 38rem; padding: 2rem 4rem 3rem 0!important;}
.swiper-slide { text-align: center; font-size: 18px; background: #eee; width: 48rem!important; border-radius: 2rem; background-size: contain;  background-position: center; background-repeat: no-repeat;  -webkit-box-shadow: 0 8px 15px rgba(0,0,0,.2);  box-shadow: 0 8px 15px rgba(0,0,0,.2); overflow: hidden;  /* Center slide text vertically */  display: -webkit-box;  display: -ms-flexbox;  display: -webkit-flex;  display: flex;  -webkit-box-pack: center;  -ms-flex-pack: center;   -webkit-justify-content: center;   justify-content: center;  -webkit-box-align: center;  -ms-flex-align: center;  -webkit-align-items: center; align-items: center;  /*margin-right:40px!important */ }    
.swiper-container-horizontal > .swiper-scrollbar {display: block!important;}
.swiper-scrollbar {height: 2px!important; width: calc(100% - 8rem) !important; left: 0 !important;
  /*  background-color: rgba(0,0,0,0) !important;
    border-radius: 0 !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid #828282 !important*/;}
.frame-contents .img_wrap .swiper-button-prev{ background: rgb(0 0 0 / 50%); height: 80px!important; width:80px!important; border-radius: 50% ; color:#fff;z-index:99; left:20px}
.frame-contents .img_wrap .swiper-button-next{background: rgb(0 0 0 / 50%); height: 80px; width:80px; border-radius: 50% ; color:#fff; right:46px;}
.frame-contents .img_wrap .swiper-button-prev:after, 
.frame-contents .img_wrap .swiper-button-next:after {  font-size: 26px!important;}


.frame-contents .contents-img.business-01 {content: var( --img-business-01);}
.frame-contents .contents-img.business-02 {content: var( --img-business-02);}
.frame-contents .contents-img.business-03 {content: var( --img-business-03);}
.frame-contents .contents-img.business-04 {content: var( --img-business-04);}
.frame-contents .contents-img.business-05 {content: var( --img-business-05);}
.frame-contents .contents-img.business-06 {content: var( --img-business-06);}
.frame-contents .contents-img.business-07 {content: var( --img-business-07);}
.frame-contents .contents-img.business-08 {content: var( --img-business-08);}
.frame-contents .contents-img.business-09 {content: var( --img-business-09);}
.frame-contents .contents-img.business-10 {content: var( --img-business-10);}
.frame-contents .contents-img.business-11 {content: var( --img-business-11);}
.frame-contents .contents-img.business-12 {content: var( --img-business-12);}
.frame-contents .contents-img.business-13 {content: var( --img-business-13);}
.frame-contents .contents-img.business-14 {content: var( --img-business-14);}
.frame-contents .contents-img.product-15 {content: var( --img-product-15);}
.frame-contents .contents-img.product-16 {content: var( --img-product-16);}
.frame-contents .contents-img.product-17 {content: var( --img-product-17);}
.frame-contents .contents-img.product-18 {content: var( --img-product-18);}
.frame-contents .contents-img.product-19 {content: var( --img-product-19);}
.frame-contents .contents-img.product-20 {content: var( --img-product-20);}
.frame-contents .contents-img.product-21 {content: var( --img-product-21);}

/**************************media board***************************/
.media_board { border-top: 1px solid #999;}
.media_board .media_list {}
.media_board .media_list .item:hover { background: #f8f8f8;}
.media_board .media_list .item { position: relative;  display: flex;  align-items: center;  position: relative;  padding: 30px 60px 30px 0;  border-bottom: 1px solid #e0e0e0;}
.media_board .media_list .item:last-of-type { border-bottom: 1px solid e2e2e2;}

.media_board .media_list .item a { position: absolute; top: 0; left: 0; right: 0;   bottom: 0; cursor:pointer}
.media_board .media_list .item figure { width: 275px; position: relative; padding-bottom: 17%; overflow: hidden;  margin: 0 0 0 30px; border-radius: 1rem;}
.media_board .media_list .item figure img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); max-width: inherit; height: 100%;}
.media_board .media_list .item .txt { width: calc(100% - 345px); padding-left: 80px; text-align: left;}
.media_board .media_list .item .txt p { width: 100%; overflow: hidden;
    text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;  padding-right: 50px; margin: 28px 0 42px;  font-size: 18px; font-weight: 400; color: #444; letter-spacing: -0.03em; line-height: 1.6; padding-bottom: 0;}
.media_board .media_list .item .txt h3 { font-weight: 500; font-size: 26px;  color: #111111;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 16px; font-weight: 600}
.media_board .media_list .item .txt p:not(.date) { font-weight: 300; font-size: 16px; color: #666;}
.media_board .media_list .item .txt .date { font-weight: 300; font-size: 15px; color: #787878; margin-top: 40px;}
.media_board .media_list .item .txt .btn_media { width: 70px; height: 70px;}
.pagination { width: 100%;display: block; margin-top: 50px; text-align: center;}
.pagination ul {display: inline-block; margin: 0 auto;}
.pagination ul li { display: inline-block;float: left;}
.pagination ul li a {display: block; width: 40px; height: 40px;}
.pagination ul li.num a { line-height: 40px; font-family: 'Nanum Gothic', dotum, '돋움', sans-serif; font-size: 16px; color: #666; font-weight: 600;}
.pagination ul li.num a:hover { background: #f6f6f6; border-radius: 50%;}
.pagination ul li.num.on a {background: #f04e4c; color: #fff; border-radius: 50%;}
.pagination ul li.prev {border: 1px solid #e2e2e2; background: url('../../resources/images/layout/btn-arrow-prev.gif') no-repeat center;  margin-right: 20px; font-size: 0; border-radius: 50%;}
.pagination ul li.next { border: 1px solid #e2e2e2; background: url('../../resources/images/layout/btn-arrow-next.gif') no-repeat center; margin-left: 20px; font-size: 0; border-radius: 50%;}
.pagination ul li.prev:hover { background: url('../../resources/images/layout/btn-arrow-prev.gif') no-repeat center #f6f6f6;}
.pagination ul li.next:hover { background: url('../../resources/images/layout/btn-arrow-next.gif') no-repeat center #f6f6f6;}

/***********************media_write ***********************/
table { width: 100%; table-layout: fixed; margin: 0; padding: 0; border: 0; border-collapse: collapse; border-spacing: 0;}
.tableV{/* border-top:1px solid #777; */margin-bottom: 40px; font-size: 1.5rem;} /* phj */
.tableV>tbody>tr>th{background:#eef3f7;border-bottom:1px solid #d9d9d9;border-left: 1px solid #d9d9d9;padding: 7px;font-weight: 400;background-clip: padding-box;min-height: 60px; font-size: 1.5rem}
.tableV>tbody>tr>th{border-right: 1px solid #d9d9d9;}
.tableV>tbody>tr>td{background:#fff;border-bottom:1px solid #d9d9d9;padding: 10px 20px;height: 60px;line-height: 1.6;background-clip: padding-box;min-height: 40px; font-size: 1.5rem; text-align: left}
.tableV>tbody>tr>td>*{vertical-align: middle;}
.tableV>tbody>tr>td textarea{height: 20rem}
.tableV td label{margin:0;}
.tableV td.pill:before{display: none;}
.tableV>tbody>tr>th:first-child, .tableV>tbody>tr>th:first-child{border-left: 0!important;}
.tableV .view_title{padding: 38px 40px;height: auto;font-size: 26px;font-weight: 600;text-align: center!important;}
.tableV .view_title02{padding: 10px;height: auto;font-size: 18px; color:#fff;font-weight: 600;text-align: center!important; background: #036ecc; height:40px; }
.tableV>tbody table{width: auto;max-width: 100%;}
.table_day{position: relative; display: block}
.icon_cal { background: url(../images/sub/icon_calendar.png) no-repeat right; width: 26px; height: 22px; display: inline-block; position: absolute; right: 12px; top: 10px; z-index: 98; cursor: pointer;}
.t_center{text-align:center}
.checke_box input[type="radio"]{ height: 18px; width: 18px; position: relative; top: -2px;}}
/*.p-input{height: 42px; padding: 6px 16px; color: #666; vertical-align: middle;
    border: 1px solid #dfdfdf; background-color: #fff; -webkit-appearance: none; -moz-appearance: none;  appearance: none;  -webkit-border-radius: 0px; border-radius: 0px; transition: border-color .2s ease-in-out;  border-radius: 5px; width: 100%; }*/
textarea {
    width: 100%;/*  padding: 16px;*/ border: 1px solid #ddd;  background-color: #fff;  border-radius: 0;  resize: none;  -webkit-appearance: none;  -moz-appearance: none;  appearance: none; -webkit-border-radius: 0px; height: 30rem}
.sbtn_file {
    width: calc(100% - 110px)!important;
    max-width: none!important;
}
/*첨부파일*/
.upload_btn_wrap input.inp_fileBtn { position: absolute; top: 0; right: 0; height: 42px; cursor: pointer; opacity: 0; filter: alpha(opacity=0); -ms-filter: "alpha(opacity=0)"; -moz-opacity: 0;}
.upload_btn_wrap { overflow: hidden; position: relative; display: inline-block; width: 100px; height: 42px;}
.upload_btn_wrap button { display: inline-block; width: 100px; height: 42px; font-size: 16px; background:#4a4a4a; border: 1px solid #dfdfdf; border-radius: 5px; color: #fff;}
.sbtn_file{width:calc(100% - 110px)!important;max-width: none!important;}


/*********************** btn **********************/
.btn_area { display: flex; align-items: center; justify-content: center;}
.black_btn { background: #4a4a4a; color: #fff!important; display: inline-block; text-align: center; padding: 0px 15px; transition: background-color .4s; min-width: 120px; height: 45px; line-height: 45px; border-radius: 5px; font-size: 15px; border: 1px solid #4a4a4a;}
.btn_area a { margin-right: 10px; cursor: pointer;}
.btn_area a:last-child { margin-right: 0 !important;}
.mt40 {  margin-top: 40px;}
.mt10 {  margin-top: 10px;}
.al_right { display: flex;  justify-content: flex-end!important;}

.btn-red { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 40px; padding: 0px 28px; font-size: 1.6rem; font-weight: 400; line-height: 1; text-align: center; word-break: keep-all; background-color: #df453a; color: #fff; border-radius: 3rem;}
/* .btn_position01 { position: absolute;  bottom:20px;left:240px} */
.btn_position01 { position: absolute; bottom:15px; left:260px}/* 24.03.27 phj */ 
/* .btn_position02 { position: absolute;  bottom:0px; left:280px} */
.btn_position02 { position: absolute; bottom:-20px; left:400px}/* 24.03.27 phj */
.btn_position { margin-top:3rem}


/*********************** product **********************/

.main-title.fs-48 { font-size: 4.4rem; font-weight: 800; line-height: 1.25; margin: 2rem 0 2rem; color:#222; text-align: left}


/* ****************** product ::  WorldStudio ******************  */
.center-sub-box {background: rgba(235,235,235,0.3); }
.center-container {display:flex; width: 65%; position:absolute; left:50%; transform:translateX(-50%); /* margin-top:3.5rem; */}
.center-container > div {width: calc((100% - 1.7rem) / 2); padding:3rem; box-sizing:border-box; align-self:flex-start;}
.center-container > div:nth-child(1) {margin-right: 1.7rem;}
.center-txt01 {display:block; font-size:1.6rem; letter-spacing:-0.032em; font-weight: 700; color:#222; line-height:1.2;}
.center-txt02 {display:flex; justify-content:space-between; font-size:1.5rem; letter-spacing:-0.03em; font-weight: 400; color:rgba(34, 34, 34, 0.5); margin-top:1rem;}
.center-txt02 i {font-size:1.8rem;}

.ws-top-box {display:flex; justify-content: center; align-items:center; padding:15rem 0  5rem;}
.ws-top-box .scraping-device , .ws-top-box .scraping-site {position:absolute; display:flex; justify-content:center; align-items:center; width: 37rem; height: 37rem; border-radius:100%; text-align:center; opacity:0.5;}
.ws-top-box .scraping-device {box-shadow: 8px 0px 20px rgba(171, 16, 16, 0.1);}
.ws-top-box .scraping-site {box-shadow: -8px 0px 20px rgba(171, 16, 16, 0.1);}
.ws-top-box .scraping-device:before , .ws-top-box .scraping-site:before {display: block; content:""; position:absolute; width: 59rem; height: 59rem; border-radius:100%; left:50%; top:50%; transform:translate(-50%,-50%); opacity:0.3;}
.ws-top-box .scraping-device:before {box-shadow: 8px 0px 20px #AB10101A;}
.ws-top-box .scraping-site:before {box-shadow: -8px 0px 20px #AB10101A;}
.ws-top-box .scraping-sub-txt {position: relative; display:flex; flex-direction:column; justify-content:center; align-items:center; width: 16rem; height: 16rem; border-radius:100%; border:1px solid rgba(240, 78, 76, 1); font-size: 2rem; letter-spacing: -0.048em; color: rgba(240,78,76,1); font-weight: 700; box-shadow: 0px 0px 20px rgba(171, 16, 16, 0.1); opacity:1; margin: 1rem}
.ws-top-box .scraping-tit-box {position: relative; text-align:center;}
.ws-top-box .scraping-tit-box p:nth-child(2) {font-weight: 400; font-size: 1.6rem;}
.ws-top-box .scraping-tit-box:after {position:absolute; display: block; content:""; top:50%; right:-80%; transform:translateY(-50%); background:url('../images/content/scraping_line.png')no-repeat; background-size:cover; background-position:100% 100%; width: 5.35rem; height: 3px;}
.ws-top-box .scraping-tit-box > p > em {font-size:1.6rem;}
.ws-top-box .scraping-tit-box:before {display: block; content:""; position:absolute; left:0; top:0;}
.ws-top-box .scraping-sub-txt > p > em {font-size:1.6rem; letter-spacing:-0.032em; font-weight: 400;}
.ws-top-box .scraping-sub-txt:before {display: block; content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:8rem; letter-spacing:-1.6px; color:rgba(240, 78, 76, 0.05);}
.ws-top-box .scraping-sub-txt:after {display:block; content:""; position:absolute; right:-4.4rem; top:50%; transform:translateY(-50%); background:url(../images/layout/arrow_right.png)no-repeat; background-size: cover; width: 2.6rem; height: 2rem;}
/*.ws-top-box > .scraping-sub-txt:nth-of-type(1):before {content:"01";}
.ws-top-box > .scraping-sub-txt:nth-of-type(3):before {content:"02";}*/
.ws-top-box .scraping-sub-txt.right:after {left:-4.4rem; right:initial; background:url(../images/layout/arrow_right.png)repeat-x; background-size:cover; /*background-repeat:x-repeat */}

.scraping-app {width: 36rem; position: relative; height: 0; padding:26.06% 13.4rem 0; z-index:99;}
/*.smart-page .effect-item .icon-box span {display:block; position: relative; height: 0; width: 3.8rem; padding-top:42%;}
.scraping-list {position:absolute; left:-75%; top:38%;}
.scraping-list li {display:flex; align-items:center; margin:2rem 0;}
.scraping-list li:first-child {margin-top: 0;}
.scraping-list li:last-child {margin-bottom: 0;}*/
.ws-top-box > .scraping-sub-txt:nth-of-type(3) .scraping-list {right:-75%; left:initial; top:50%; transform:translateY(-50%);}
/*.scraping-list .icon-box {width: 2.52rem; position: relative; height: 0; padding-top:23%;}*/
/*.scraping-list em {font-size:1.5rem; letter-spacing:-0.03em; color:rgba(34, 34, 34, 0.4); font-weight: 700; margin-left:1.31rem;}*/

.ws-top-box .scraping-tit-box p {line-height:1.167em;}
.ws-top-box .scraping-app {/* width: 38rem; */ width: 27.3rem; margin-top:-10rem; padding:18% 15%;}
.sub-page .ws-top-box > .scraping-sub-txt:nth-of-type(1) .scraping-tit-box:after {left:-50%;}
#topMenu01.top-fixed{top:100px; position: fixed;background: #222;}
/******************PR*******************/
/* Search Select Custom */
.board-search-box {display:flex; align-items:center; /*width: 50rem;*/}
.board-custom-select-box{width:120px; height:100%; }
.board-custom-select-box .custom-select-wrapper{height:100%;}
.board-custom-select-box .search-subject-select{padding:0;}
.board-custom-select-box .custom-select-trigger{border:0; height:100%; display:flex; align-items:center; }
.board-custom-select-box .custom-option-drop-list{border-color:#ddd; left:-1px; right:-1px;}
.board-custom-select-box .custom-option-item{text-align:left; font-size:0.8666em; font-weight:400; padding:8px 15px;}
.board-custom-select-box .custom-option-item.selection{background-color:#eee; }
.search-style-radius .board-search-inner {border-radius:5rem; background-color: #fafafa; border:0;}
.board-search-inner {display:flex; justify-content:space-between; align-items:center; max-width:500px; width: 100%; height:50px; margin:0 auto; box-sizing:border-box; border:1px solid #ddd;}
.board-custom-select-box .search-subject-select { position: relative; padding: 0; width: 120px; height: 100%; font-size: 15px; color: #333; box-sizing: border-box;}	
.board-custom-select-box .custom-select-trigger {position: relative; border:0; height: 100%; display:flex; align-items:center; padding-left:1.5em;}
.board-custom-select-box .custom-select-trigger:after {font-family: 'xeicon'; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); content: "\e942"; font-size: 18px;}
.board-search-box .search-word {background-color:transparent; border:0; padding:0 15px; font-size:15px; color:#333; width:calc(100% - 17rem);}
.board-search-box .bbs-search-btn {margin: 0px; border: 0; /* width: 50px; */ width: 3rem; height: 100%; font-size: 2rem; letter-spacing: -0.5px; color: #333; cursor: pointer; vertical-align: top; margin-right: 2rem;}
.board-custom-select-box .custom-option-drop-list {position: absolute; display: none; top: 100%; left: 1.5em; margin-top:-8px; right: 0; z-index: 11; overflow-y: auto; max-height: 200px; background: #fff; border: 1px solid #333;/*  border-top: 0;  */pointer-events: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; box-shadow:3px 4px 7px 0px rgba(0, 0, 0, 0.1);}
.board-search-box .search-subject-select:focus, .board-search-box .search-word:focus {color:#333; outline:none; background-color:transparent;}
.custom-select.opened .custom-option-drop-list {opacity:1; visibility:visible; pointer-events:all;}

.bbs-top-list-box{display:flex; align-items:flex-end; justify-content:space-between; flex-direction:row-reverse; flex-wrap:wrap; margin-bottom:30px; margin-top:6rem;}

/* -------- 리스트 Total 갯수 -------- */
.total-list-con{color:#333; font-size:15px; letter-spacing:-0.25px;}
.total-list-con b{color:var(--main-color);}
.total-list-con i{font-size:16px; margin-right:2px; position:relative; top:1px;}
.bbs-list-style02 {border-top:1px solid #777777;/*border-top:2px solid rgba(221,221,221,0.5);*/}
.bbs-list-style02 .bbs-item { box-sizing:border-box; transition:all 0.4s;}
.bbs-list-style02 .bbs-item:hover a {background: #f8f8f8;/*border:2px solid var(--main-color);*/ } 
.bbs-list-style02 .bbs-item:hover .bbs-right-info-con .bbs-more-btn {background-color:var(--main-color);}
.bbs-list-style02 .bbs-item:hover .bbs-right-info-con .bbs-more-btn i {color:#fff;}
.bbs-list-style02 .bbs-item:hover a .bbs-subject-txt{color:#f04e4c}
/* .bbs-list-style02 .bbs-item:last-of-type {border-bottom:1px solid #ddd;} */
.bbs-list-style02 .bbs-item > a{display:flex; justify-content:space-between; align-items:center; position:relative; padding:26px; height:72px; border-bottom:1px solid #ddd;
-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s; transition:all 0.3s}
.bbs-list-style02 .bbs-item > a:before {display: block; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; /*border: 2px solid var(--main-color);*/ box-sizing: border-box; opacity:0; transition:all 0.3s;  }
/*  .bbs-list-style02 .bbs-item:hover > a {border-bottom:0;} */
 .bbs-list-style02 .bbs-item:hover > a:before {opacity:1; }

.bbs-list-style02 .bbs-item .bbs-list-date{/* position:absolute; top:30px; left:30px; */ width:7rem; text-align:center; color:#eee; letter-spacing:-0.5px; transition:all 0.4s;}
.bbs-list-style02 .bbs-item .bbs-list-date strong{display:block; font-size:2.6rem; letter-spacing:-0.022em; margin-bottom:5px;}
.bbs-list-style02 .bbs-item .bbs-list-date span{font-size:15px;}
.bbs-list-style02 .bbs-item .bbs-list-info-con{/* margin:0 125px; */ width:calc(100% - 15.8rem); padding:0 5rem; box-sizing:border-box; text-align: left;}

.bbs-list-style02 .bbs-item .bbs-subject-txt-box{display:inline-block; position:relative; max-width:100%; }
.bbs-list-style02 .bbs-item .bbs-subject-txt{display: inline-block; padding-right: 5px; overflow: hidden; width: 100%; text-overflow: ellipsis; white-space: nowrap; font-size:2rem; font-weight:700; line-height:1.208em; vertical-align:middle; color:#222; letter-spacing:-0.048em; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}

.bbs-list-style02 .bbs-item .bbs-list-info-con .notice-tit{display:inline-block; vertical-align:middle; height:25px; line-height:25px; border:1px solid var(--main-color); padding:0 15px; font-size:14px; letter-spacing:-0.5px; color:var(--main-color); margin-right:10px; border-radius:4.1rem;}
.bbs-list-style02 .bbs-item .bbs-subject-txt .category{font-weight:500; color:#000; margin-right:5px; }
.bbs-list-style02 .bbs-item .bbs-subject-icons{ position: absolute; left:100%; top: 50%; width: 60px; height:18px; margin-top:-9px; text-align:left; display: inline-block; }
.bbs-list-style02 .bbs-item .bbs-subject-icons img{vertical-align:middle; margin:-2px 2px 0 2px;}
.bbs-list-style02 .bbs-item .bbs-subject-icons i{font-size:18px; }
.bbs-list-style02 .bbs-item .bbs-list-info-con .bbs-list-sub-txt{color:#888; font-size:15px; letter-spacing:-0.5px; line-height:1.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.bbs-list-style02 .bbs-item .bbs-list-date-m{ font-size: 1.6rem/*display:none;*/}
.bbs-list-style02 .bbs-item .bbs-right-info-con{/* position:absolute; top:30px; right:30px;  */ width:7.8rem; text-align:right;}
.bbs-list-style02 .bbs-item .bbs-right-info-con dl{margin-bottom:15px;}
.bbs-list-style02 .bbs-item .bbs-right-info-con dl dt,
.bbs-list-style02 .bbs-item .bbs-right-info-con dl dd{display:inline-block; color:#a1a1a1; font-size:13px; letter-spacing:-0.4px;}
.bbs-list-style02 .bbs-item .bbs-right-info-con dl dt i{position:relative; top:-1px; font-size:16px; vertical-align:middle;}
.bbs-list-style02 .bbs-item .bbs-right-info-con .bbs-more-btn{
	display:flex; justify-content:center; align-items:center; width:5rem; height:5rem; border-radius:100%; box-shadow: 0px 3px 15px #AB10100D; line-height:30px; text-align:center; color:rgba(255,255,255,0.5);
	-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s;
}
.bbs-list-style02 .bbs-item .bbs-right-info-con .bbs-more-btn i{color:#bcbcbc; font-size:17px; }
.bbs-list-style02 .bbs-item a:hover .bbs-right-info-con .bbs-more-btn{color:#fff;}
.bbs-list-style02 .bbs-item a:hover .bbs-list-date {color:#999;}
/* ******************   게시판 :: 뷰페이지  ********************** */
.bbs-view-con{border-top:1px solid #333;}

/* 게시판 :: 뷰 :: 상단 타이틀 정보 */
.bbs-view-con{text-align: left; }
.bbs-view-top{padding:20px; border-bottom:1px solid #eee; font-size:var(--board-view-font-size);}
.bbs-view-top .bbs-state-box{margin-bottom:10px}
.bbs-view-top .bbs-state{display:inline-block; min-width:50px; padding:0 10px; height:30px; line-height:30px; background-color:#888; font-size:13px; border:1px solid #888; color:#fff; text-align:center;}
.bbs-view-top .bbs-state.ing{border-color:#5997bb; background-color:#5997bb;}
.bbs-view-top .bbs-state.end{background-color:#fff; color:#999}
.bbs-view-top .bbs-category{display:block; margin-bottom:10px;}
.bbs-view-top .bbs-tit{color:#282828; font-size:2.4em; letter-spacing:-0.0333em; font-weight:500; line-height:1.25; word-break:keep-all;}
.bbs-view-top .bbs-write-info{margin-top:20px; font-size: 1.4rem;}
.bbs-view-top .bbs-write-info dt,.bbs-view-top .bbs-write-info dd{display:inline-block; color:#777; vertical-align:middle; font-weight:500;}
.bbs-view-top .bbs-write-info dd{margin:0 20px 0 5px; color:#888; font-weight:400}
.bbs-view-content{padding:40px 40px; border-bottom:1px solid #eee; font-size: 1.6rem; /*font-family: 'Nanum Gothic', dotum, '돋움', sans-serif; */letter-spacing: -0.4px}

/* 게시판 :: 뷰 :: 이전글,다음글 */
/* .bbs-view-prev-next-list{margin-top:50px;} */
.bbs-view-prev-next-list li{border-bottom:1px solid #eee;}
.bbs-view-prev-next-list li:first-child{border-top:1px solid #eee;}
.bbs-prev-next-tbl{width:100%; table-layout:fixed;}
.bbs-prev-next-tbl th,
.bbs-prev-next-tbl td{height:58px; color:#333; font-size:16px; letter-spacing:-0.5px; line-height:1.2; }
.bbs-prev-next-tbl th{text-align:left;}
.bbs-prev-next-tbl .bbs-prev-next-tit{position:relative; display:block; padding-left:25px; font-weight:400; }
.bbs-prev-next-tbl .bbs-prev-next-tit:after{position:absolute; top:0px; bottom:0px; width:1px; right:0px; background-color:#eee; content:"";}
.bbs-prev-next-tbl .bbs-prev-next-tit i{position:absolute; right:15px; font-size:20px;}
.bbs-prev-next-tbl td{padding-left:20px}
.bbs-prev-next-tbl td a{display:block; color:inherit;}
.bbs-prev-next-tbl td a .bbs-tit{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.bbs-prev-next-tbl td a:hover .bbs-tit{text-decoration:underline}

/* 파일 첨부 추가 230707 YJ */
.bbs-view-file-info-box {line-height: 20px; border-bottom: 1px solid #eee; background-color: #f9f9f9; padding: 10px 20px; margin-bottom: 10px;}
.bbs-view-file-info-box .bbs-file-list {overflow: hidden; padding-top: 5px; font-size: 13px;}
.bbs-view-file-info-box .bbs-file-list:first-child {padding-top:0;}
.bbs-view-file-info-box .bbs-file-list dt {float: left; width: 100px; font-weight: 600; color: #333;}
.bbs-view-file-info-box .bbs-file-list dd {float: left; width: 70%; width: calc(100% - 100px );}



/* Pop-up */
/* .md_pop { position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto; background: rgba(6,10,18,0.8); width: 100%; height: 100%; z-index: 999999;  display: none;}
.login { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 400px; height: 270px; border-radius: 4px; box-shadow: 0 5px 17px rgba(0,0,0,0.1); background: #fff}
.login > h3 { width: 100%; height: 96px; font-size: 24px; color: #333; font-weight: 600; line-height: 96px; text-align: center;}
.btn_login_close { position: absolute; top: 20px; right: 20px; width: 30px; height: 30px; background: url('../images/layout/ico_loginClose.png') no-repeat center; font-size: 0;}
.login_form { padding: 0 40px 40px; width: 100%; display: block; box-sizing: border-box;}
.login_form input { width: 100%; height: 48px; border-radius: 4px; border: 1px solid #a7abb3; font-size: 14px; line-height: 48px;  margin: 10px 0;}
.btn_cancel { display: block; text-align: center; padding: 0px 15px; transition: background-color .4s; min-width: 120px; height: 45px; line-height: 45px;  font-weight: 600; text-align: center; border-radius: 4px; border: 1px solid #4a4a4a; font-size: 15px;}
 */
/* Pop-up *//* 240716 */
.md_pop { position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto; background: rgba(6,10,18,0.8); width: 100%; height: 100%; z-index: 999999;  display: none;}
.login, .update{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 400px; height: 270px; border-radius: 4px; box-shadow: 0 5px 17px rgba(0,0,0,0.1); background: #fff}
.login > h3 { width: 100%; height: 96px; font-size: 24px; color: #333; font-weight: 600; line-height: 96px; text-align: center;}
.update > h3 { width: 100%; height: 96px; font-size: 24px; color: #333; font-weight: 600; line-height: 96px; text-align: center;}
.btn_login_close, .btn_update_close { position: absolute; top: 20px; right: 20px; width: 30px; height: 30px; background: url('../images/layout/ico_loginClose.png') no-repeat center; font-size: 0;}
.login_form{ padding: 0 40px 40px; width: 100%; display: block; box-sizing: border-box;}
.login_form input { width: 100%; height: 48px; border-radius: 4px; border: 1px solid #a7abb3; font-size: 14px; line-height: 48px;  margin: 10px 0;}
.btn_cancel { display: block; text-align: center; padding: 0px 15px; transition: background-color .4s; min-width: 120px; height: 45px; line-height: 45px;  font-weight: 600; text-align: center; border-radius: 4px; border: 1px solid #4a4a4a; font-size: 15px;}

/*.btn_cancel:hover { text-decoration: none; box-shadow: 0 5px 10px rgba(38,113,255,0.3);}*/










/* ******************  i-hub :: cloud API ******************  */

.about-list {max-width:1320px; margin:0 auto;}
.about-list > li {display:flex; align-items:center; border-bottom:1px solid rgba(221, 221, 221, 1); padding:6rem 0;}
.about-list .app-tit-box {display:flex; align-items:center; width: 52.5rem;}
.about-list .ac-num {display:inline-block;/*  width: 2.2rem; */ font-size:2rem; letter-spacing:-1px; line-height:1.2em; color:#DDDDDD; font-weight: 700;}
.about-list .ac-tit {/* width: calc(100% - (2.2rem + 71.8rem));  */padding-left:4.2rem; box-sizing:border-box; font-size:4.8rem; line-height:1.167em; color:#222222; font-weight: 700;}
.about-list .ac-txt {width:calc(100% - 52.5rem); font-size:1.6rem; line-height:1.875em; color:rgba(34, 34, 34, 0.8); font-weight: 500; /* padding-right:8.25rem; */box-sizing:border-box;}
.about-list .ac-txt .ps {font-size:1.4rem; color:rgba(85, 88, 89, 0.8); font-weight: 500; display:block;}
.about-list .diffrence-list li i {margin-right: 1rem; position: relative; top:6px;}
.sub-page .effect-box {display:flex; flex-wrap:wrap; justify-content:center; text-align:center; margin-top:6.83rem;}
.sub-page .effect-box .effect-item {width: 33.33%; margin-top:3.5rem;}
.sub-page .effect-box .effect-item .icon-box {display:flex; justify-content:center; align-items:center; width: 10rem; height: 10rem; border-radius:100%; background: #fff; margin:0 auto;}
.sub-page .effect-box .effect-item .icon-box span {position: relative; height: 0; width: 4rem; padding-top:35%;}
.sub-page .effect-box .effect-item .effect-tit {font-size:2.8rem; font-weight: 700; color:#222; line-height:1.179em; margin-bottom:8px; margin-top: 2.69rem;}
.sub-page .effect-box .effect-item .effect-sub-tit {display:inline-block; font-size:1.5rem; font-weight:400; color:rgba(34, 34, 34, 0.8); letter-spacing:-0.03em; margin-top:4px;}
/*.main-cloud {width:62rem;}
.main-cloud .icon-box {display:inline-block; width: 100%; position: relative; height: 0; padding-top:52.91%;}
.main-cloud .icon-box .main-center-txt {position:absolute; top:60%; left:50%; transform:translate(-50%,-50%); text-align:center; font-size:4.8rem; letter-spacing:-0.96px; color:var(--main-color); font-weight: 700; line-height:1.292em;}*/


/* 24.03.27 추가 phj*/
.workDate{
	width: 100%;
    max-width: 20rem;
    font-size: 1.5rem;
    height: 42px;
    border-radius: 0.5rem;
    border: 1px solid #dfdfdf;
    padding-left: 10px;
    padding-right: 10px;
}

.tableV i{
	color:red;
}

.tableV caption{
/* 	display: block;
	visibility: visible; */
	text-align:right;
	margin-top:-5px;
	margin-bottom:5px;
	font-size:10px;
}

caption i{
	color: red;
}

/* 버튼 초기 설정 */
.pw_update, .board_write, .board_edit{
	display:none;
}
/* 비디오 모달창 css 240327 sh  */
.md_pop.video_box {
    display: flex; /* Flexbox 사용 */
    align-items: center; /* 수직 중앙 정렬 */
    justify-content: center; /* 수평 중앙 정렬 */
}

.md_pop .modal-content {
    position: relative;
    width: 70%;
    height: 70%;
    background-color: #000;
    border: 3px solid #858585;
    overflow: hidden;
    border-radius: 10px;}

.md_pop .close {
    position: absolute;
    top: 50px;
    right: 50px;
    cursor: pointer; /* 마우스 오버 시 커서 변경 */
    font-size: 40px; /* 크기 조정 */
    color: #fff; /* 아이콘 색상 */
}

/* iframe 스타일 (선택적으로 조정 가능) */
.md_pop iframe {
    width: 100%; /* iframe의 가로 크기를 부모 요소에 맞춤 */
    height: 100%; /* iframe의 세로 크기를 부모 요소에 맞춤 */
    border: none; /* 테두리 제거 */
}

/* 비디오 모달창 css 240327 sh ---end */
.downloadFileBtn{
	width:5%;
}